アオです。

今回は、サイトを作る機会があったため順番が前後しますが「HTML5/CSS3 モダンコーディング -フロントエンジニアが教える3つの本格レイアウト スタンダード・グリッド・シングルページレイアウトの作り方」についてです。

✍️はじめに

📖HTML5/CSS3 モダンコーディングとはどんな本？

Web制作の中でよくみられる３種類のレイアウトのサイトをデザインイメージをもとに、それぞれどのようなフローを辿って組み上げていけば良いのかを解説している内容になります。

では、本題に移ります。

✍️３種類のレイアウトとは？

1.スタンダードレイアウト

→Webサイトに一番多く見られるベーシックなレイアウトです。

スタンダードレイアウトの特徴

1.サイト内で共通となるヘッダー、フッター、サイドメニューに各コンテンツへのリンクを配置することで、全てのページから効率的に各コンテンツへの導線を引くことができる。

2.閲覧者にとって見慣れたレイアウトなので、どこがメインのコンテンツであるのかが直感的にわかり、視線に迷うことが少ない。

3.ポータルサイト、コーポレートサイト、ショッピングサイト、ニュースサイト、ブログなど情報量が多くページの多いサイトに使われる。

2.グリッドレイアウト

→ブラウザの横幅が変わるとブロックが自動で移動するレイアウトです。

グリッドレイアウトの特徴

1.独立した複数の情報を並列して扱うことに向いている。

2.複数の情報をグリッドに沿って規則的に並べることで掲載の仕方によるバイアスがかからず、閲覧者が本当に興味を持った情報にアクセスさせることができる。

3.ネットショップやレシピサイトなどに使われる。

3.シングルページレイアウト

→スマートフォンやタブレットへの表示最適化が行いやすいレイアウトです。

シングルページレイアウトの特徴

1.多数の情報を包括的に掲載できるスタンダードレイアウトとは対照的に1つのコンテンツを全面に押し出してアピールすることに向いている。

2.特定の商品にフォーカスした特設サイトや期間限定のキャンペーンサイトに使われる。画面を広く使い視覚に訴えやすいので、押し出したい情報を目を引く形で効果的に掲載できる。

✍️コーディングする上でのポイント

ポイント1: 要素名にスタイルを指定しない

一度コーディングが終わっても、後からHTMLを修正することがあった場合に要素名にスタイルを指定していると、HTMLの編集に加えてCSSも修正が必要になる場合があります。

NGなHTML
<div class="container">
    <h1>タイトル</h1>
    <p>テキスト</p>
</div>
 
CSS
.container h1 {
    color: blue;
}
 
NGなHTMLを変更した場合
<h1>より重要なタイトル</h1> //変更点
<div class="container">
    <h2>タイトル</h2> //変更点
    <p>テキスト</p>
</div>
　
スタイルが変わらなくてもCSSセレクタを変更
CSS
.container h2 { //変更点
    color: blue;
}

要素名ではなくクラスに対してスタイルを指定しておけば、HTMLに多少の変更があってもCSSが影響を受けにくくなるため保守性が上がります。

保守性が高いHTML
<div class="container">
    <h1 class="heading">タイトル</h1>
    <p>テキスト</p>
</div>
 
CSS
.heading {
    color: blue;
}
 
HTMLを変更した場合
<h1>より重要なタイトル</h1> //変更点
<div class="container">
    <h2 class="heading">タイトル</h2> //変更点
    <p>テキスト</p>
</div>
　
CSSは変更不要
CSS
.heading {
    color: blue;
}

ポイント2: CSSのセレクタにはIDではなくクラスを使用する

セレクタにはclassとIDが使用できるが、IDは使用しないようにする。

理由1: スタイルの使い回しができない
IDはclassと違って同ページ内では、1つのIDを複数回使えない決まりがあります。最初のデザインでは問題なくとも、後の改善で同じデザインの要素を増やす場合は修正が必要になります。

理由2:スタイルの上書きが難しい
CSSには詳細度というスタイルが適用される優先順位を決める仕組みがあり、IDはclassよりも詳細度が高いためIDで指定したスタイルは後からclassで指定したスタイルを上書きすることができません。

理由3:HTMLやJavaScriptと影響範囲を分離する
IDはHTMLでページ内の特定の場所を指定してリンクする場合や、JavaScriptの処理で特定の1つの要素を取得する場合に使うと良いです。理由1の決まりがあるため重複確認をせずに特定ができるからです。
CSSでは使用しないルールを作ることで管理がしやすくなるメリットがあります。

✍️まとめ

独学コーディングをした後に本を読んだのでおさらいのような形になりました。なんとなくこのプロパティを使えば良いんだなとコーディングを進めていましたが、プロパティに関しても詳しい解説が載っていたので、より理解を深めることができました。
最後までお読みいただきありがとうございました😊

〜📕本の紹介〜