今回は…
というテーマでお送りします。
また 新しい響きで、ワクワクしています。
よろしくお願いします。
どんな風にできるのか、楽しみです。
今回も、全集中で頑張ります。
よろしくお願いします。
目次
【１】 CSSの位置づけ
まずは 復習も兼ねて CSS の位置づけを
見ていきましょう。
Webブラウザから リクエストを送ると
サーバから レスポンスが返ってきます。
この時にレスポンスとして返ってくるのが…
のファイルです。
Webブラウザは、HTML・CSS を解釈して
画面に表示します。これを
といいます。
この HTML / CSS の働きを見ておきましょう。
HTML は 表示する文書の構造を記述してあります。
文書の骨格と言える部分です。
これに対して…
を担当しています。
骨格に、肉付けする感じです。
Webブラウザは、これらを組み合わせて解釈して
Webページを表示することになります。
HTMLについては、前回まででお伝えした通りです。
そして、今回は CSS について 見ていきましょう。
CSS は…
Style
Sheet
の略で、HTMLを装飾し 見栄えを良くする言語です。
単に「スタイルシート」とも呼ばれます。
HTMLの要素は、入れ子構造になっていましたね。
その要素に、スタイルを適用していくときの
方式が Cascading という言葉の意味です。
親の要素( 外側の要素 ) のスタイルを
引き継ぎながら…
子の要素( 内側の要素 ) のスタイル指定があれば
上書きして適用するという意味です。
【２】 基本書式
CSSの書式は…
「どの部分」の、「何を」、「どうする」かを指定
します。
プロパティ: 値;
}
例えば、h1 タグの 色を緑色にしたい場合
このように、記述します。
h1 {
color: green;
}
セレクタは、どの部分にスタイルを
適用するかを指定します。
代表的なものに、要素名（HTMLタグの名前）があります。
この例では、h1 タグに適用したい場合です。
セレクタの後には、波括弧で囲んで
その中に、プロパティと値のセットを書いていきます。
プロパティ・値のセットは複数指定できます。
プロパティは、セレクタで指定した部分の
何を変えるかという部分です。
文字の色を変える、文字のサイズを変える
要素の縦横のサイズを変えるなどです。
この例では、color 文字の色を変えます。
プロパティの後には コロン（：）に続けて
値を書きます。
値は、見た目をどのようにするか指定します。
色なら どんな色にするか、サイズなら どの大きさにするか。
具体的に書きます。
この例では、green 緑色にするという意味です。
そして「プロパティ : 値」 の後には
;（セミコロン）を記述します。
プロパティの後は :（コロン）、値の後は ;（セミコロン）
ここは、間違いやすいので 注意しましょうね。
CSSのスタイルが、うまく表示されない時に
一番最初に確認して頂きたいポイントです。
ということで…、この大きな枠組みを
押さえておきましょう。
装飾できるのですね。
セレクタ、プロパティ、値 の３つセットで
使うこと、ノートしておきました。
指定していくんですね。
３兄弟で 覚えておきます。
セレクタ、プロパティ、値 の３兄弟。
【３】 適用方法
HTML で作成した ページ に CSS を適用する方法は
３つあります。
① CSSファイルを参照する。
１つ目は、拡張子 .css というファイルを作成して
HTMLファイルが参照する方法です。
これは、１つの CSSファイルを 複数のHTMLファイルで
参照することができ、このような利点があります。
✅ 分業がしやすい。
✅ 変更に対応しやすい（CSSファイルで一括管理）。
Webサイト全体に、統一感がでますし…
HTMLの担当と CSSの担当で分業が
しやすいという点もあります。
そして、変更する場合には
CSSファイルを変更するだけ なので…
管理が簡単になりますね。
② HTMLファイルに style要素を記述。
CSS を適用する方法の
２番目は、HTMLファイルのヘッダ部に style タグを記述して
その中に CSS の記述を行う方法です。
１ページで HTML と CSS を完結させたい場合に使用します。
③ HTMLタグに style属性を記述。
３番目は、HTMLファイルの タグの中に
style属性を記述して指定する方法です。
部分的に、CSSを適用したい場合に使用します。
と、３つの方法を説明しましたが
このうち、最も一般的でお勧めの方法は１番目の方法です。
２番目と３番目は、そういう方法もあるということだけ
認識しておきましょう。
【４】 色指定
ここでは、色指定の方法を見ていきましょう。
① プロパティの指定
プロパティ: 値;
}
まずは、プロパティに指定できるものを
見ていきましょう。
color は文字色を指定します。
background-color は背景色を指定します。
background-color は背景色。
② 値の指定
プロパティ: 値;
}
そして、値の指定方法です。
ここでは２つ、見ていきましょう。
❶ カラーコード指定
井桁（ハッシュ）の後に、6桁の16進数で表します。
色を16進数で表すには、ツールを使いましょう。
「カラーピッカー」というキーワードで検索すると
ツールが出てきます。
色と、明度、彩度を指定すると
カラーコードが表示されますので、使うことができるのです。
❷ カラーネーム指定
こちらは、 green や red などの色の名称で
指定する方法です。
カラーネームは検索すると多く出てきますが
お勧めは、このサイトです。
「原色大辞典」です。
ここに、140色が表示されています。
ここから色を選んで
表示されている カラーネーム を使いましょう。
HTML と CSS がセットになっている意味が
分かったきがします。
また、次回も楽しみです。
大きく違うことが、わかりました。
色指定の方法も、完璧です。
【まとめ】
良くする言語。
セレクタ {
プロパティ: 値;
}
CSSファイルを参照する方法
がお勧め。
✅ カラーネーム指定
今回も、ご覧いただき、ありがとうございます。