CSSとは

CSSはHTMLで作った構造に、色・余白・文字サイズ・配置などの見た目を与える言語です。

このLessonのゴール

• CSSの役割と、セレクター・プロパティ・値の関係を説明できる
• HTMLから外部CSSを読み込み、スタイルの変化をブラウザで確認できる
• Reset CSSをサイト用CSSより先に読み込む理由を説明できる

今回新しく作るファイル

With Café本体とは分けて練習するため、次の2ファイルを作ります。

with-cafe/practice/css/
├── 01-basics.html
└── 01-basics.css

practiceフォルダがまだない場合は、with-cafeの直下に作ってください。その中へcssフォルダを作ります。このLessonでは、本体のindex.htmlとcss/style.cssは編集しません。

01-basics.htmlのhead内からCSSを読み込みます。

<link rel="stylesheet" href="01-basics.css" />

ブラウザで確認するファイル

このLessonでは01-basics.htmlをブラウザで開きます。FinderまたはExplorerでファイルをダブルクリックするか、ブラウザへドラッグしてください。

CSSを変更したら、01-basics.cssを保存してからブラウザを再読み込みします。ブラウザでCSSファイルそのものを開くのではなく、CSSを読み込んでいるHTMLファイルを開きます。

基本構文

まず、01-basics.htmlへスタイルを適用するHTMLを記述します。

<h1>はじめてのCSS</h1>
<p class="introduction">HTMLにCSSを適用してみましょう。</p>

HTMLの要素をセレクターで選び、01-basics.cssへCSSを記述します。

.introduction {
  color: #334155;
  font-size: 16px;
}

がセレクター、 がプロパティ、 が値です。宣言の末尾にはセミコロンを付けます。