CSS (Cascading Style Sheets)
スタイルシートは、CSS(シーエスエス)とよばれています。
HTMLにスタイル機能を提供し表示を制御するための言語です。CSSを使用すると、ウェブページのレイアウトを整えることができます。ウェブページの余白や文字の大きさ、色などを指定することもできるので、Webサイトの見栄えが大きく変わります。ウェブデザインには欠かせないファイルです。拡張子は、「css」(半角小文字)となります。【例：style.css】
CSSの役割
HTMLでは、「見出し」や「段落」などの文章構造を表していますが、「文字の大きさや色」「余白」「背景」など見た目についての指定ができません。「見た目」を装飾するには、CSSを使います。見た目だけでなく、配置や動きを制御することができます。
CSSの注意点
HTMLファイルとCSSファイルを関連付けることにより、Webページ全体にスタイルが適用されます。本来スタイルシートは別ファイル(style.css)に記述するようにしましょう。
CSSの記述
エディタの冒頭に以下の記述をし、style.cssと命名して「css」フォルダーへ保存します。(文字コードを指定する以下の「utf-8」は、大文字でも小文字でもよい)
@charset "utf-8";HTMLファイルにリンクする
以下の一文を、HTMLの<head></head>内に記述し、スタイルシートを読み込みます。
<link rel="stylesheet" href="css/style.css">
/*上下どちらでもよい*/
<link href="css/style.css" rel="stylesheet">コメントの書き方
/*この中にコメントを入れます。*/
/*
コメント中に改行をしても問題ありません。
*/スタイルシートの書式
セレクタ { プロパティ [属性]: 値 [プロパティ値]；}
スタイルシートの基本
上記は、h1の文字の色を「赤」にする、といったスタイルの記述です。セレクタは、「どこの」という意味を持ち、プロパティは「何を」値は「どうする」という意味合いをそれぞれ持っています。プロパティと値は「:(コロン)」で区切り、ひとつのスタイルが終了するごとに「;（セミコロン）」で区切ります。
/*--- h1の文字の色は、赤色。背景色は、黄色です。-----*/
h1{
color:#ff0000;
background-color:#ffff00;
}
この記事は役に立ちましたか？
もし参考になりましたら、下記のボタンで教えてください。