レスポンシブデザインなど、細かいレイアウトを綺麗に実装するためのテクニック記事まとめ

HTML/CSSを学ぶ

2023.05.11

こんにちは。今回はWeb制作を学んでいる方がぶつかる壁として代表的な「レスポンシブデザイン」についてです。過去にレスポンシブに関する記事をいくらか書いてきましたので、それらをまとめていきます。

テクニック系

clampというCSSの関数を使い完全に画面幅に比率を合わせるパターンと、メディアクエリで調整するパターンを比較しながらclampによる実装方法を解説しています。

動きの違いは下画像を参照してください。上がclamp、下がメディアクエリのパターンです。

記事はこちら。

例えば次のようなパーツの場合です（下画像も参照ください）。

このようなレイアウトをどうスマートに実装するかを解説しています。

要するに、次のようなレイアウトの場合です。

コンテンツ幅が決まっているけど、一部だけコンテンツ幅をはみ出すようなレイアウトですね。

その解説をしています。

要素を重ねるにはposition: absolute; を使って実装するのが通例でしたが、最近はdisplay: grid; でも行うことができます（下画像参照）。

これについて詳しく解説しています。

これはあらゆる要素の配置に関して、flexにした方がレスポンシブも含めた時の実装がスマートなのではないかという実験的な内容です。

実際やってみたところ、marginを一切使わずにレイアウトできる場合もあると分かりました。

ぜひ皆さんも試してみてください。

ということで、レスポンシブを中心にCSSの細かい実装について紹介しました。

実装面では手間がかかるものの、デザインとしては結構目にするものが多いですよね。こういったテクニックを覚えることで実装のスピード、質が上がってコーディング案件を捌ける数も増えていきますからぜひ学んでみてください。

そんな細かいテクニックについてまとめた本があるので、ぜひそちらを読んでレベルアップしましょう！