HTML・CSSを組む時の工夫〜レスポンシブ編〜

こんにちは、ナカムラです。
今回はHTML・CSSを組む際に工夫しているところを紹介しようと思います。
コンテンツ幅を一定にするならデザインと同じようにできていれば問題ありません。
レスポンシブの場合はウィンドウサイズの異なるデバイスに対応するため、いろいろと工夫が必要になります。

(1)デザインにないものを考慮する
- タップ・クリック領域
- スクロール
（2）ベーススタイルを確認する
（3）ウィンドウ幅による調整
（4）画像のサイズ調整
最後に

(1)デザインにないものを考慮する

タップ・クリックできる範囲や幅が変わった時のレイアウトなど、特に指示のない限り、デザインデータは無いけれど対応したいものはデザイナーと相談しながらコーダーも考えます。
どういうことができるのか、どうしたら目的に対して効果的かをコーダーから提案できると良いですね。

タップ・クリック領域

レスポンシブの場合、スマホは指で、PCはマウスやタッチパネルで操作します。
画面の狭さや使う状況が様々なスマホの操作性を考慮したタップ領域を優先させることが多いです。
例えば、新着記事一覧などではサムネイルと記事タイトルを含めて表示することが多いですね。
HTML5からはブロック要素をアンカータグで囲むことができるので活用していきましょう。
最近はほとんど使わなくなった手法ですがpositionを使って透明のタップ領域を適用させたい範囲に重ねる方法もあります。クリッカブルマップの様なイメージです。
PCの時はクリックできる範囲が広いのでhover時の変化をつけるとユーザーに伝わりやすくなります。

See the Pen デザインをCSSで組む時の工夫〜レスポンシブ編〜：タップ領域 by Nakamura (@takayo-nakamura) on CodePen.

スクロール

レスポンシブの場合、ウィンドウ幅が大きく変ります。
改行させれば問題ない物はともかく、あまりスペースを使いたくないパンくずや、改行できない表など、ウィンドウ幅を超えるサイズの時は考慮が必要です。

一番簡単な方法は、親要素にoverflow:auto;を使う方法です。
そのままでもスクロールは機能しますが、隠れている要素が少し見えている状態にしたり、矢印が出る様にするなど、スクロールできることが伝わるような工夫も必要になります。

See the Pen デザインをCSSで組む時の工夫〜レスポンシブ編〜：ウィンドウ幅を超えた表 by Nakamura (@takayo-nakamura) on CodePen.

表の場合、表全体がスクロールされるため見出しのセルが見えなくなってしまいます。
見出しは残しつつ、内容のセルだけスクロールしたい場合はposition:sticky;を使います。
使い方はposition:sticky; tableなどで検索してみてください。
※IEが対応していないため、スマホ・タブレットに限ります。

（2）ベーススタイルを確認する

CSSも出来るだけ記述が少ない方が良いです。
全体共通のスタイルはベースのCSSファイルに記述し、要素別のスタイルだけをそれぞれに当てるのが理想です。
文字サイズやフォントなどはもちろん、SCSSなどの場合、色や基本のコンテンツ幅は変数として用意しておくと後々便利です。
レスポンシブの場合はブレークポイントをどこにするかも決めておきましょう。
あまり細かいと記述が複雑になるため、切り替えは必要最低限に、スマホ・タブレット・PCの境目になる2箇所にしておくと良いです。
またスマホから組んでいくと打ち消しの記述が少なく済みます。

/* ブレークポイントの例 */
/* ▼スマホの記述 */
.container{
    width: 92%; /* 複数のサイズに対応させるため、%などで記述する */
    margin: auto;
}

/* ▼タブレット（768px）以上の記述 */
@media screen and (min-width:768px){
    .container{
        width: 88%; /* 画面が大きくなるので少し幅を小さくする */
    }
}

/* ▼PC（1182px）以上の記述 */
@media screen and (min-width:1182px){
    .container{
        width: 1152px; /* 固定幅にする */
    }
}

（3）ウィンドウ幅による調整

横並びの要素はウィンドウ幅の違いに影響を受けます。
意図しないカラム落ちをしないように、ブレークポイントを使って調整しましょう。
幅の単位をpxにする場合はカラム落ちしないように最小のウィンドウ幅に合わせます。
ただ、この方法だと幅が広い時に余白が多くなってしまいます。
スマホ〜タブレットの幅の時は％やvwを使うとバランスよく調整できます。

See the Pen デザインをCSSで組む時の工夫〜レスポンシブ編〜：ウィンドウ幅による調整 by Nakamura (@takayo-nakamura) on CodePen.