SEの部屋CODE. LEARN. BUILD.

VIDEO LESSON

CSSプロパティ一覧：主要な設定を実例で学ぶ、文字・余白・レイアウト・動きの解説動画

再生時間 7:26動画を別のタブで開く ↗
動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

  1. 0:00こんにちは。
  2. 0:00エイチティーエムエル、シーエスエス入門、概要編です。
  3. 0:04今回のテーマは、シーエスエスのプロパティ一覧です。
  4. 0:07プロパティとは、エイチティーエムエルのどの部分を、どう表示するかを指定する項目のことです。
  5. 0:13文字の色、余白の広さ、並べ方、動きまで、見た目の指定はすべてプロパティと値の組み合わせで表されます。
  6. 0:20その数は百を超えるため、全部を暗記しようとすると挫折しがちです。
  7. 0:25元になる記事は、入門からサイト制作でよく使う主要な項目を用途別に整理したリファレンスです。
  8. 0:31この動画のゴールは、分類の地図を頭に入れて、必要なプロパティを自分で探し、
  9. 0:34試せるようになることです。
  10. 0:38まず試すための準備です。
  11. 0:40エイチティーエムエルとシーエスエスは別ファイルに分け、ヘッドの中のリンクタグでスタイルシートを読み込みます。
  12. 0:48画面のコードで、ボディは対象を選ぶセレクター、カラーはプロパティ、その後ろの色の値が実際の指定です。
  13. 0:56セレクターを変えると適用先が変わり、値を変えると表示が変わります。
  14. 1:01編集したら保存してブラウザーを再読み込みし、結果を開発者ツールで確かめる。
  15. 1:07この繰り返しが、プロパティを覚える一番の近道です。
  16. 1:11個別のプロパティは、それぞれの記事で指定値や実例を詳しく確認できます。
  17. 1:17値を書くときの土台になるのが、単位と共通の値です。
  18. 1:20ピクセルは画面上の固定した寸法で、細い枠線などに向きます。
  19. 1:24レムはルート要素の文字サイズを基準にする単位で、文字と余白を連動させやすくなります。
  20. 1:29パーセントは便利ですが、何を基準にするかはプロパティごとに違うので注意が必要です。
  21. 1:34ビューポート基準のブイダブリューやブイエイチ、小さい画面向けのエスブイエイチなどもあります。
  22. 1:40さらに、親の値を引き継ぐインヘリット、初期値へ戻すイニシャルといった値は、
  23. 1:44ほぼすべてのプロパティで使えます。
  24. 1:47迷ったら、まずレムとピクセルの使い分けから押さえましょう。
  25. 1:51ここからは用途別の分類を見ていきます。
  26. 1:54最初は文字の読みやすさです。
  27. 1:56カラーで文字色、フォントファミリーで書体、フォントサイズで大きさ、フォントウェイトで太さを決めます。
  28. 2:03読みやすさを大きく左右するのがラインハイト、行の高さです。
  29. 2:07単位なしの値を書くと文字サイズに比例し、継承の扱いも分かりやすくなります。
  30. 2:12画面の見出しではクランプという関数を使い、画面幅に応じて文字を大きくしつつ、
  31. 2:16最小と最大の範囲に収めています。
  32. 2:20文字は利用者が拡大して読むこともあるので、拡大しても崩れないかまで確認する習慣を付けましょう。
  33. 2:27文字の続きとして、揃え方と装飾、折り返しを扱います。
  34. 2:31テキストアラインは行の中の文字を左右や中央に揃えるもので、箱そのものを中央へ置く指定とは別です。
  35. 2:39テキストデコレーションは下線などの装飾で、リンクの下線を消す場合は、色以外の手掛かりでリンクと分かるようにします。
  36. 2:49長いファイル名やユーアールエルへの対策も定番です。
  37. 2:53画面の例では、改行を禁止し、はみ出しを隠し、末尾を省略記号で示す三つの指定を組み合わせています。
  38. 3:02ただし省略した全文を別途確認できる手段も用意して、情報を消してしまわないようにしましょう。
  39. 3:09次は余白・大きさ・枠線、いわゆるボックスモデルです。
  40. 3:14すべての要素は、内容の周りに内側の余白パディング、枠線ボーダー、外側の余白マージンという層を持っています。
  41. 3:23ボックスサイジングをボーダーボックスにしておくと、幅の指定にパディングと枠線が含まれるため、
  42. 3:28寸法の計算がぐっと単純になります。
  43. 3:34画面のカードでは、最大幅を指定して中央に寄せ、内側の余白、細い枠線、角の丸み、
  44. 3:38薄い影を組み合わせています。
  45. 3:43方向の指定には、書字方向に追従するインラインやブロックを使う書き方もあり、
  46. 3:47多言語対応ではそちらが便利です。
  47. 3:52背景と画像、そしてはみ出しの扱いです。
  48. 3:55背景色はバックグラウンドカラー、背景画像やグラデーションはバックグラウンドイメージで指定し、
  49. 4:01サイズはカバーかコンテインかで切り取り方が変わります。
  50. 4:06画像そのものには、画面の例のようにアスペクトレシオで縦横比を決め、オブジェクトフィットのカバーで枠いっぱいに収める書き方が定番です。
  51. 4:17内容がはみ出したときはオーバーフローで、見せる、切り取る、スクロールさせる、
  52. 4:21のどれかを選びます。
  53. 4:25ただし横はみ出しを隠すだけでは、内容やフォーカスが見えなくなることがあるので、
  54. 4:29まず原因を直すのが先決です。
  55. 4:33レイアウトの中心は、まずディスプレイです。
  56. 4:37ブロック、インライン、フレックス、グリッド、なし、といった値で、要素の表示と並びの方式そのものが決まります。
  57. 4:45位置の微調整にはポジションと、重なり順を決めるゼットインデックスを使います。
  58. 4:51一方向に並べるならフレックスボックスです。
  59. 4:55画面のナビゲーションでは、折り返しを許可し、縦方向を中央にそろえ、ギャップで間隔を作っています。
  60. 5:02フレックスの三つの値は、伸びる割合、縮む割合、基準サイズの順で、項目ごとの配分を決めるものです。
  61. 5:10並び順を変えるオーダーは、読み上げの順番までは変えない点も覚えておきましょう。
  62. 5:16二次元の配置にはグリッドを使います。
  63. 5:19グリッドテンプレートカラムズで行と列の型を定義し、項目をそのマス目に配置していく考え方です。
  64. 5:26エフアールは残り空間を配分する単位、リピートは同じ型の繰り返し、ミンマックスは下限と上限の指定です。
  65. 5:34画面の例は実践的な型で、狭い画面ではカードを一列にし、画面幅が四十八レム以上になったらメディアクエリで三列に切り替えています。
  66. 5:44エリアに名前を付けて配置する方法もあります。
  67. 5:47大切なのは、見た目の並びとエイチティーエムエルの読み順が矛盾しないようにすることです。
  68. 5:54状態や動き、そして値の共有です。
  69. 5:57カーソルでポインターの見た目、アクセントカラーでチェックボックスなどの色を整え、
  70. 6:01操作の手掛かりを用意します。
  71. 6:05動きは、状態が変わるときの橋渡しをするトランジションと、キーフレームで再生するアニメーションが中心です。
  72. 6:13対象をオールにせず絞ること、そして動きを減らす設定の人にはアニメーションを付けない配慮が大切です。
  73. 6:21最後にカスタムプロパティです。
  74. 6:23ハイフン二つで始まる名前は自分で定義でき、バー関数で各所から参照できます。
  75. 6:29色や余白を一か所で管理できるので、テーマの切り替えにも向いています。
  76. 6:34仕上げは、対応状況の考え方と、効かないときの確認です。
  77. 6:39プロパティ名が使えても、特定の値だけ未対応ということがあります。
  78. 6:44画面のように、まず安定した指定を書き、対応が確認できた環境でだけアットサポーツで新しい値を重ねるのが安全です。
  79. 6:54それでも効かないときは、開発者ツールで切り分けます。
  80. 6:58ファイルが読み込めているか、クラス名が一致しているか、スタイルズで打ち消し線が出ていないか、
  81. 7:05コンピューテッドで最終的な値は何か、の順に確かめましょう。
  82. 7:11今回のまとめです。
  83. 7:13プロパティは用途別の分類で探し、単位と共通の値を土台にして、試して確かめる。
  84. 7:20この流れが身に付けば、一覧は暗記の山ではなく、制作の引き出しになります。
日本語字幕をダウンロード（WebVTT）

この動画で学べること

CSSの主要プロパティを用途別に解説。文字・背景・余白・Flexbox・Grid・レスポンシブ・動きとアクセシビリティをコード例で確認します。

解説記事・サンプルコードを読む：CSSプロパティ一覧：主要な設定を実例で学ぶ、文字・余白・レイアウト・動き →