SEの部屋CODE. LEARN. BUILD.

VIDEO LESSON

CSS入門：HTMLにスタイルシートを読み込み、文字と背景色を変更するの解説動画

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

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

  1. 0:00こんにちは。
  2. 0:01エイチティーエムエル、シーエスエス入門、第四回です。
  3. 0:05今回から、いよいよシーエスエスに入ります。
  4. 0:08前回までに作ったエイチティーエムエルへ、初めてシーエスエスを適用します。
  5. 0:15今回のゴールは、シーエスエスファイルの読み込みを確認し、どの要素に、どの指定が効くのかを説明できるようになることです。
  6. 0:25大きなレイアウトはまだ作りません。
  7. 0:27文字の色、背景、行間を、少しずつ変更していきます。
  8. 0:32小さく変えて、効いているかを確認する。
  9. 0:35この進め方が、シーエスエス上達の近道です。
  10. 0:38元になる記事は、エスイーの部屋の、シーエスエス入門、です。
  11. 0:43最初に、エイチティーエムエルからシーエスエスを読み込む方法です。
  12. 0:48インデックス ドット エイチティーエムエルと同じ場所に、スタイルズ ドット シーエスエスというファイルを作ります。
  13. 0:56ここで注意点です。
  14. 0:58ファイルを作っただけでは、ブラウザーは自動では読み込んでくれません。
  15. 1:03エイチティーエムエルのヘッドの中に、リンクの行を一行追加する必要があります。
  16. 1:08置き場所は、タイトルの後などで構いません。
  17. 1:11この行の意味です。
  18. 1:13レル イコール スタイルシートは、このファイルがスタイルシートであること。
  19. 1:18エイチレフは、シーエスエスファイルの場所を表します。
  20. 1:22スタイルとスタイルズのような、小さな名前の違いでも読み込みに失敗するので、
  21. 1:26ファイル名は正確に合わせましょう。
  22. 1:30今回の完成コードです。
  23. 1:32スタイルズ ドット シーエスエス全体が、画面に出ています。
  24. 1:37保存してページを再読み込みすると、四つの変化が起きます。
  25. 1:42背景が淡い色になること。
  26. 1:44文字とリンクの色が変わること。
  27. 1:46行間が広がること。
  28. 1:48そして、ページ上部の紹介部分、ヒーローには、別の背景色が付きます。
  29. 1:53一方で、この時点では、余白やカードの並び方は、まだ整いません。
  30. 1:58それで正常です。
  31. 2:00今回は、見た目を完成させる回ではなく、読み込みと効き方を確認する回だからです。
  32. 2:06一回の変更を小さくすると、シーエスエスが読み込めているかどうかを判断しやすくなります。
  33. 2:13シーエスエスのルールの読み方を覚えましょう。
  34. 2:17一つのルールは、三つの部分でできています。
  35. 2:20ボディのように、どれに適用するかを指定する部分が、セレクターです。
  36. 2:25カラーのような、何を変えるかが、プロパティ。
  37. 2:28その値が、どのように変えるか、です。
  38. 2:31書き方の決まりとして、波括弧の中に宣言を並べ、各宣言をセミコロンで区切ります。
  39. 2:36よく使うプロパティも確認しましょう。
  40. 2:39カラーは文字色、バックグラウンドは背景、ラインハイトは行の高さを指定します。
  41. 2:45この三つの部品に分解して読めれば、初めて見るルールでも意味を追えるようになります。
  42. 2:51セレクターの書き方を、もう少し詳しく見ます。
  43. 2:55ドット ヒーローは、クラス イコール ヒーローが付いた要素を選びます。
  44. 3:01ここで間違えやすい点です。
  45. 3:03シーエスエス側の先頭にあるピリオドは、目印です。
  46. 3:07エイチティーエムエルのクラス名自体には含めません。
  47. 3:11次に、エイチ ワン、カンマ、エイチ ツー、カンマ、エイチ スリーという書き方です。
  48. 3:18カンマは、複数の対象を列挙して、同じ指定をまとめて適用します。
  49. 3:23よく似た書き方に、空白で区切る書き方がありますが、カンマと空白では意味が違います。
  50. 3:30空白の方は、次のスライドの子孫セレクターです。
  51. 3:34記号の違いが、対象の選び方を変えることを意識しましょう。
  52. 3:39対象の選び方には、粒度があります。
  53. 3:42全ての段落を変えるなら、ピーという要素セレクター。
  54. 3:46特定の部品だけを変えるなら、ドット カードのようなクラスを使います。
  55. 3:52そして、ドット カード、空白、ピーという書き方が、子孫セレクターです。
  56. 3:57カードの内側にある段落だけを選びます。
  57. 4:00記事では、これを一時的にファイルの末尾へ追加して、カード内の段落だけが変わることを確認したら、
  58. 4:06削除するよう案内しています。
  59. 4:11実験して、戻す。
  60. 4:12良い練習方法です。
  61. 4:13また、シャープ レッスンズはアイディーセレクターですが、見た目の再利用や優先順位の管理を考えると、
  62. 4:20部品の見た目はクラスを中心に指定すると整理しやすくなります。
  63. 4:26アイディーは、ページ内リンクやジャバスクリプトの目印として残せます。
  64. 4:32読みやすい文字の設定です。
  65. 4:34フォントファミリーの、システム ユーアイは、オペレーティングシステムの画面向けフォントを使う指定です。
  66. 4:42サンセリフは、代替として使う総称フォント、いわゆるゴシック系の指定です。
  67. 4:47同じ指定でも、オペレーティングシステムによって字形が変わるため、特定のパソコンでの見た目だけを前提にしないことが大切です。
  68. 4:57次に、ラインハイト、行間です。
  69. 4:59本文の、一 点 八は、文字サイズに対する倍率です。
  70. 5:03行間が広がると、文章は読みやすくなります。
  71. 5:06見出しは一 点 四にしています。
  72. 5:09大きな文字で、行間まで広くなりすぎないようにするためです。
  73. 5:13本文と見出しで、行間の考え方が違う点に注目してください。
  74. 5:17大きさを表す単位を、三つ整理します。
  75. 5:20ピクセル、ピーエックスは、シーエスエスピクセルという単位です。
  76. 5:26レム、アールイーエムは、ルート要素、つまりエイチティーエムエル要素の文字サイズを基準にします。
  77. 5:34パーセントは、幅の場合、主に包含ブロック、つまり親の箱の幅が基準ですが、
  78. 5:39プロパティによって基準が異なります。
  79. 5:44だから、パーセントを見たら、何の割合なのかを確認する習慣が大切です。
  80. 5:50方針として、文字サイズを変更できない固定レイアウトにはせず、後の回で、レムのような相対的なサイズも使っていきます。
  81. 6:00相対単位は、利用者の設定を活かしやすい点が利点です。
  82. 6:04シーエスエスが効かないときの調べ方です。
  83. 6:07ケースは二つに分けて考えます。
  84. 6:09まず、読み込み自体ができていない場合です。
  85. 6:12背景を変えても何も変わらないときは、基本から確認しましょう。
  86. 6:17シーエスエスファイルを保存したか。
  87. 6:19リンクのパスの、ファイル名や場所が合っているか。
  88. 6:23次に、開発者ツールを開き、ネットワークのタブで、スタイルズ ドット シーエスエスを探します。
  89. 6:29見つからないというエラーが出ていれば、読み込みに失敗しています。
  90. 6:34ファイル名の小さな違いや、置き場所のずれが原因のことがほとんどです。
  91. 6:38あわててルールを書き直す前に、まず読み込みを確認する。
  92. 6:42これが鉄則です。
  93. 6:43もう一つのケースです。
  94. 6:45開発者ツールのエレメンツで、スタイルズを見ると、自分のルールは表示されている。
  95. 6:51なのに、打ち消し線が付いている。
  96. 6:54この場合は、読み込みはできています。
  97. 6:56別の指定が優先されて、自分の指定が負けている状態です。
  98. 7:01読み込みの問題と、優先順位の問題は、別の話として分けて調べることが大切です。
  99. 7:07混同すると、合っているルールを消してしまったりします。
  100. 7:11優先順位が決まる仕組みについては、次回、詳しく扱います。
  101. 7:15今回は、打ち消し線イコール負けているサイン、と覚えておけば十分です。
  102. 7:20最後に、練習問題です。
  103. 7:22ドット ヒーローの背景色、リンクの色、本文の行間を、一つずつ変更してください。
  104. 7:29ポイントは、一つずつです。
  105. 7:31毎回、保存して、再読み込みして、変化を確認してから、次へ進みます。
  106. 7:36まとめて変えると、どれが何を変えたのか分からなくなります。
  107. 7:41注意点も一つ。
  108. 7:42リンクの下線は、最初から消さないようにしましょう。
  109. 7:46文字色だけに頼らなくても、リンクだと分かる状態を保つことが、使いやすさにつながります。
  110. 7:53まとめです。
  111. 7:54今日は、リンクによる読み込み、セレクター、プロパティ、値というルールの読み方、
  112. 8:01クラスと子孫セレクター、フォントと行間、単位、そして効かないときの調べ方を学びました。
  113. 8:08次回は、余白、幅、ボックスモデルと優先順位がテーマです。
  114. 8:12お疲れさまでした。
日本語字幕をダウンロード（WebVTT）

この動画で学べること

外部CSSの読み込みからセレクター・プロパティ・値、文字色・背景・行間まで。HTMLのどの要素にCSSが効くかを確かめます。

解説記事・サンプルコードを読む：CSS入門：HTMLにスタイルシートを読み込み、文字と背景色を変更する →