読者です 読者をやめる 読者になる 読者になる

Webデザインの勉強 ハロートレーニング 受講生のためのWebデザインの勉強補足ブログ

★★★CSSレイアウトのコーディングルール

div要素を使ったレイアウトグループ化

  • div要素は、文書構造には関係なく意味づけもありません
  • ただまとめるために使われます
  • div要素は、何層にも深く階層構造を作ることには向いていません
div要素を利用する場合
  1. 見出しと関連するコンテンツをまとめる
  2. ブロックの境界を作る
  3. HTMLの階層を平易に揃える
  4. ボックスどおしのラッパー構造を作る
id / class命名規則
  • 要素にスタイルを適用する場合は、原則としてclassを使用し、idは使用しない
  • id名は、子孫セレクタで指定をすると階層が深くなりやすいため、メンテナスもしにくくなります

命名注意点

  1. HTMLの修正をせずにデザインの修正ができるようにすること(位置や色ではなく、役割や意味を表す識別名をつける)
  2. 誰が見てもわかりやすいものであること(誰が見てもそれとわかる一般的な名前であること)
  3. 文書構造上、意味のある名前にする
id名の使いどころと命名規則
  • アンカーリンク
  • JavaScriptのトリガーとなる箇所
  • ページ固有のID
  • 構造上IDであることが必要な箇所
  • id名は、キャメルケースで記述する(globalNavなど)
class名の命名規則
  • 文書構造上、意味のある名前にすること
  • 単語の区切りは「-」ハイフンにすること
  • 「識別子」-「共通」-「詳細」-「バリエーション」などと役割をつなぐことで表す
CSSの記述ルール
  • marginとpaddingは、ショートハンドで記述する
  • backgroundも、ショートハンドで記述する
  • 子孫セレクタを使う場合は、詳細度(深度)を深くしない
  • !importantは、原則として使用しない

フォントファミリー

  • ゴシック体(古いSafariFirefoxに対応させる場合、日本語の書体名が入ります)
body {
  font-family:
  "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN",
  "メイリオ", Meiryo,
  sans-serif;
}
body {
  font-family:
  "ヒラギノ明朝 ProN", "Hiragino Mincho ProN",
  "游明朝体", YuMincho,
  serif;
}

背景色

body {
  background: #A7DCEC;
}
HTMLとCSSのコメント
  • 適切な文を残して、管理しやすくする
  • HTMLのコメント
<!-- コメント内容 -->
  • CSSのコメント
/* コメント内容 */

画像の記述ルール

  • 画像は文章を補完する役割、または単独で内容を説明している
  • メインイメージなどの意味のある画像は、原則として背景ではなく、img要素として配置し alt属性に代替えテキストを設定します
  • 画像サイズ属性は省略します
画像ファイルの命名規則
  1. 識別名+「ページ名・カテゴリ名」「連番」「状態」をアンダースコアでつなぎます
  2. 特定の画像を検索、置換する際に確実で素早い作業を可能な名前にする


h1は文字か画像か

  • 可能であれば「h1」はテキスト形式にしておく方がベターです
  • これは「h1」だからというよりも、サイト内にキーワードを含んだテキスト情報を配置したいという意味合いが大きいです
  • 「h1」が画像で構成されている場合は、必ずimg要素のalt属性にテキスト情報を入れます

スマートフォン対応

  • ビューポート設定(必須)
  • ページが表示される画面の領域の設定
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" >
width=device-width
  • 表示領域の幅の指定
  • 幅スクロールさせないように「device-width(デバイスと同じ幅)」に設定しています
initial-scale=1.0
  • 初期のズーム倍率
  • 表示されたときに、予期せぬレイアウトの崩れが発生しないよう、等倍の「1.0」に設定します
minimum-scale=1.0
  • 最小のズーム倍率
  • 等倍よりも小さくならないように「1.0」に設定します

レスポンシブWebデザインのルール