HTMLやCSSを学んで理解は出来たが、どう書けば良いかが分からなかったので参考になりました。
忘れないように気になった部分の要約を残しておきます。
デザインを分割し、小さなパーツに分解する
デザイン画像を元に大まかに次の2点で分割する。
- 横幅が変わるところ
- 背景の塗りつぶし方法が変わるところ
その際、分割したパーツごとのHTML構造は二重構造にする。
<div class="分割したパーツ名">
<div class="〇〇-container">
</div>
</div>
二重構造となったパーツに対して適用するスタイル
<div class="〇〇-container">に適用するスタイル
- パーツの幅
- パーツをビューポートの中央に配置するスタイル
- 上下左右の空きスペースを調整するスタイル
<div class="分割したパーツ名">に適用するスタイル
- 背景色や背景画像
分割されたパーツを内容やレイアウトに合わせて更に分割する
更に単純なパーツごとに分けて、HTMLとCSSを書いていく。
そうすることで大きな問題を小さくて手のつけやすい目標に変えてしまう。
また、これにより各部分がモジュール化され使い回しがしやすくなる。
更新しやすいCSSの書き方
優先度を低く保つ
子孫セレクタなどで複数のセレクタを一度に使う際には、
数が多いほど優先度が高くなってしまう為、
子孫セレクタを使うときは使うセレクタの数を最小限に抑え、優先度を低く保つ。
例
<div class="block">
<ul class="list">
<li class="item">...</li>
</ul>
</div>
上記の<li class="item">にスタイルを適用したい場合のセレクタは次のリストのようになるが、
リストの上に行くほど良い書き方になる。
-
.item { }◯ -
.list .item { }△ -
.block .list .item { }☓
スタイルの位置を意識する
あとから読み込まれたスタイルのほうが優先度が高くなるので、
より多くの要素に適用されるスタイルを上の方に、特定の要素だけに適用されるスタイルを下の方に書く。
**セレクタの優先順位**
1.HTMLタグのstyle属性
2.idセレクタ
3.classセレクタなど（2と4を除く多くのセレクタ）
4.タイプセレクタと疑似要素
5.全称セレクタ (*)
レスポンシブデザインのための心得
-
ブロックボックスにむやみに幅を指定しない。
-
端末の画面サイズはまちまちなので、ブロックボックスの親要素の幅いっぱいに広がる特性を利用する。
-
画面サイズに合わせてレイアウトを切り替える必要があるときだけ、メディアクエリを使う。
フレックスボックスとグリッドレイアウトの使い分け
-
ボックスを横一列に並べるときはフレックスボックス、複数行に並べたいときはグリッドレイアウト。
-
ボックスのサイズをガッチリ決めたいならグリッドレイアウト、サイズ自体は柔軟に対応したいならフレックスボックス。
-
フレックスボックスでは1つひとつのボックスのサイズは原則としてコンテンツの長さで決まる為、
ボックスのサイズが変わっても良いときに有利。
レスポンシブデザインに対応した画像のスタイル
img {
max-width: 100%; /* 親要素の幅に収まるようにする */
vertical-align: bottom; /* 画像の下に空くスペースを消す */
height: auto; /* 古いブラウザで縦横比を維持する */
}
flexプロパティで使う設定は大体3パターンのみ
flex: 伸長比 縮小比 ベース幅;
flex: 0 0 子要素の幅px;- 親要素の幅に関わらず、子要素の幅はベース幅で固定。
flex: 1 1 auto;- 親要素に合わせてボックスが伸縮する。
flex: 0 1 auto;- デフォルト値 親要素が狭いときは子要素も縮小、親要素が広くてもベース幅を維持して伸長しない。
ベース幅とは
親要素の幅に余裕がある時、子要素の幅は自身のコンテンツが収まる長さになる、この長さをベース幅という。