BEHIND THE SCENE

CODE ANATOMY

Vol.1 教材ページの実装解説

1. Responsive Grid

動画一覧は、画面の広さに合わせて自動で並び方が変わります。これを「たった1行の命令」で実現しています。

                .video-list {
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
                }
            

仕組みを図解で見る（中級編）

「最低でも250pxは欲しい。それ以上広がるなら、均等に分け合ってね(1fr)」という命令を、入るだけ繰り返す(repeat/auto-fit)という仕組みです。

▼ 画面が広いとき（3つ入る）

250px

▼ 画面が狭いとき（折り返して1つになる）

100%

そもそも「Grid」って何？（超入門）

🧦 魔法の整理タンス

Webページ作りは「お片付け」に似ています。動画や文字といった「アイテム」を、画面という「部屋」に並べていきます。

普通に置くと散らかりますが、「Grid（グリッド）」という命令を使うと、部屋に「魔法の仕切り（タンス）」が現れます。

今回のコードは、タンスに向かって「アイテムの大きさに合わせて、仕切りの数を勝手に変えておいて！」と命令している状態です。だから、スマホでもPCでも、いつも綺麗に整頓されているのです。

2. Pseudo-elements

リストの「チェックマーク（✔）」などは、本文（HTML）には書かれておらず、デザイン担当（CSS）が後から付け足しています。

                li::before { /* ← リストの「前」に */
                content: "\f00c"; /* ← チェックマークを置く */
                }
            

なぜわざわざ分けるの？（中級編）

「構造（本文）」と「装飾（飾り）」を分けるためです。アイコンを「★」に変えたい時、本文を100箇所書き直すのは大変ですが、CSSなら1行変えるだけで済みます。

疑似要素って何？（超入門）

🏷️ 透明な付箋（ふせん）

あなたは大事な書類（HTML）に、直接ペンで「チェックマーク」を書き込みたくありません。書類が汚れるからです。

そこで、「透明な付箋」にチェックマークを書いて、書類の上にペタッと貼ることにしました。これが「疑似要素（ぎじようそ）」です。

::before は「書類の先頭」に、::after は「書類の末尾」に付箋を貼る、という便利なテクニックです。

3. Fluid Typography

タイトルの文字サイズは、スマホからPCまで、画面の幅に合わせてなめらかに大きさが変わります。

                h1 {
                font-size: clamp(4rem, 10vw, 6rem);
                }
            

clamp() の仕組み（中級編）

clamp(最小, 推奨, 最大) という書き方です。「基本は画面幅の10%(10vw)で。でも小さすぎず(4rem)、大きすぎず(6rem)にしてね」という、ブレーキ付きのサイズ指定です。

vw? rem? 単位が謎！（超入門）

👕 伸び縮みする服

Webの世界には、長さの単位がいくつかあります。

px (ピクセル): 「1cm」のような決まった長さ。画面が大きくても小さくても変わりません。
vw (ビューポートの幅): 「画面の幅の〇％」という、伸び縮みする単位です。画面が大きいと、文字もつられてデカくなります。

今回のコードは、「体の大きさに合わせて伸び縮みするけど、Sサイズより小さくならないでね、Lサイズより大きくならないでね」という、特注の服をオーダーしている状態です。

← 教材ページに戻る

SKILL CHECK

1. Responsive Grid

2. Pseudo-elements

3. Fluid Typography