令和時代のモダンなHTML／CSS活用術1
2025年9月現在、このサイトで使用しているデザイン技術（HTML、CSS）を備忘録としてまとめてみました。デザインを頑張ってる人、頑張ろうかなと思ってる人の参考になれば幸いです。難しくなりすぎないように概要だけさらっと説明します。用語だけでも知っておくと今後役に立つかもしれません。
レスポンシブデザイン
まずは大枠の「レスポンシブデザイン」。これはPC／スマホ／タブレットといった閲覧者の環境に合わせてレイアウトやデザインを変える手法。現在のWebデザインにおける必修科目です。
基本的にはブラウザ表示領域の横幅を基準として分岐させます。この基準pxをブレイクポイントと呼び年々変化するので時々見直した方がよいでしょう。サイトでは以下のように大きく2つ、小さく4つに分岐させています。
- 横幅960px以上：PC ≒ タブレット横
- 横幅959px以下：スマホ ≒ タブレット縦
HTML内の分岐
- <link rel="stylesheet" media="(min-width: 960px)" href="style_pc.css">
- <link rel="stylesheet" media="(max-width: 959px)" href="style_sp.css">
CSS内の分岐：タブレット向け
- @media (hover: none) {}
- @media (min-width: 768px) {}
PC／スマホ向けにCSSを2種類作成し、最後にCSS内でタブレット向けに少し調整する流れ。特にスマホとタブレット縦では縦横のアスペクト比がかなり異なるので、調整しないと不格好になります（文字や画像が大きくなりすぎる）。
1つのCSSファイルにまとることも可能ですが、サイズが肥大化するし管理がややこしくなるのでお勧めできません。
グリッドレイアウト
これも必修レベルの技術。古代のWebサイトでは<table>やfloatがデザイン用途で使われていましたが、今は格子状に要素を配置する「display: grid;」が主流です。
当サイトではPC向けのサイドメニュー配置用にシンプルな使い方をしていますが、頑張れば複雑なレイアウトも組めると思います。
私的に一番のメリットはHTMLの書き順とは無関係に好きな位置に配置できる点ですね。極端な話<header>を一番下に<footer>を一番上に書くことも出来ちゃいます。
フレックスボックス
スマホ向けのボトムナビで使用。これも古代では<table>が使われてましたが現代では「display: flex;」が主流。
似たようなCSSで「display: inline-block;」というのもありますが正直使い分けるよりflexに統一した方が良いと個人的には思います。使い分けるなら以下みたいな感じかな。
- 要素の数が決まってない、折り返し不明：display: flex;
- 要素の数が決まっている、折り返し不要：display: inline-block;
リキッドレイアウト
PC向けにブラウザの幅に応じた可変サイズを使うのが「リキッドレイアウト」。サイトではPC／タブレット横向けのCSSで表示幅960px～1152pxの間で要素の横幅や余白を変化させて違和感のないデザインにしています。
最初に1152px以上を作り、最後に1151px以下の調整する流れ。PCでは大きく見せたいけどブレイクポイントは抑えたい、という思惑。
CSS内の分岐
@media (max-width: 1151px) {}