🌟✨design-s's diary📔📖

imagetkb posted by (C)tean

記事の投稿日にアイコンを付けて表示する。
記事のタイトルの下に投稿日を追加する。
タイトルとの間隔を調整する。
記事のタイトルと投稿日の間には 既に 余白が入っていますので、20ピクセルの余白の中に 投稿日の表示を 上に10ピクセルずらして調整しています。
次に アイコンフォントを使えるように <link>の設定を追加する。
更に アイコンを表示したい位置にを追加し、クラス名でアイコンの種類を指定する。

そして アイコンの色と大きさを調整しました。
margin-rightでアイコンの右側に5ピクセルの余白を入れた。

✨ あと 7項目 パーツの追加、修正します。
それが終わると ブログ・ニュース系サイトのトップページを作って行きます。
未だ 暫く かかります。程よく お付き合いの程をお願い申し上げます。

スマートフォンやタブレットなどの普及により、Webサイトのレイアウトにも変化が出てきた。
基本形のカラムレイアウトに加え、最近のよく見かけるレイアウトのパターンを６つに分けて見てみよう。
・シングルカラムCode Grid・・・リンク先です。
マルチデバイスに対応しやすく、訪問者が情報を読むことに集中できる大きなメリットあり。
・マルチカラムNewsweek・・・リンク先です。
よく見られるレイアウトパターン。情報量が多いサイトに向いていて、ナビゲートにも優れているためニュースサイトや企業サイトなどで多く採用されている。
・カード、1ページアプリケーション型Pinterest・・・リンク先です。
Facebook、google PlusやPinterestなどで採用され、最低限に抑えた情報をカプセルに詰めて並べるイメージだ。
１ページアプリケーション型は、Backbone.jsやAngularJSなどのライブラリを使用して、ページ遷移せずとも画面を切り替えて、表示・操作を単一のページ上で可能にするアプリケーションだ。
・フルスクリーン型CHANEL・・・リンク先です。
写真のギャラリーサイトやブランドイメージを全面に出したい各種プロダクトの紹介ページに使われるケースが多い。
・グリッドを利用したレイアウト手法Bootstrap・・・リンク先です。
縦横の格子(グリッド)をベースとして、ブロックごとにコンテンツを配置していく手法。Foundationも代表的例。
・レスポンシブなレイアウトパターンMedia Queries・・・リンク先です。
％で指定し常にウィンドウサイズに対して可変するレスポンシブWebデザインに対して、pxで指定し特定のウィンドウサイズでレイアウトを切り替えることは「アダプティブデザイン」というそうだ。

これ以外のパターンに一風変わったユニークなレイアウトを見かけることもあるが、作るサイトの目的に応じた適切なレイアウトを考え、ユーザーに情報を届けることが大切だ。

✨ 本-デザイン のカテゴリで新たに WEBデザインの大原則を見ていくことにする。原本を掻い摘んで 分かりやすいものにしていくつもりです。是非 参考にして下さい。

imagemain posted by (C)tean

今回から パーツの追加と修正を行って、ページを仕上げていきます。
先ずは Webフォントでサイト名を表示することにします。
ここで Google Fontsの「Indie Flower」というWebフォントを利用することにしました。
メインのページにlinkを追加し、
cssに font-familyの設定を次のようにしました。

/* サイト名 */
.site h1 a {color: #83a4a8;
text-decoration: none}

.site h1 {margin: 0;
font-size: 30px;
font-family: 'Indie Flower', cursive;
font-weight: normal}