フリーランスのためのネットビジネス専門学校 ネットで独立開業を目指す人を応援
フリーランスのためのネットビジネス専門学校 ネットで独立開業を目指す人を応援

HTML5 & CSS3入門第3回〜CSSの基礎知識とページデザインの実践例〜

HTML、CSSについて簡潔にまとめたものを何回かに分けて投稿していきます。サクッと読めるようにしたいので一記事の長さはできるだけ短くしています。

環境

HTML : HTML 5.1
CSS : CSS3
OS : macOS Mojave バージョン 10.14

CSSとは

CSSとは、Cascading Style Sheetsの略で、HTMLでタグ付けしたコンテンツをどのように表示するかを指示するプログラミング言語です。ページのスタイルやレイアウトなどの見た目を調整するのは、CSSの役目です。

CSSの書式

CSSの基本的な書式は、下の画像のようになっています。英数字・記号・スペースは全て半角です。
html5-css3-introduction-image_11.png

セレクタ

セレクタとは、HTMLの「どこ」にスタイルを適用するかを指示する場所です。上の画像では、「h1」という場所に「スタイルを適用してね」という指示を書いています。セレクタの指定の仕方は、様々ありますが、出てくるたびに説明していきます。

宣言ブロック

どんなスタイルを適用するのかを記述するのが宣言ブロックです。「{~}」の間に、適用したいスタイルを書きます。

プロパティとその値

プロパティとその値がセットになった行が、セレクタで選択したスタイルに適用するスタイルです。プロパティとその値は、「:」で区切って並べます。また、値の終わりには、必ず「;」をつけます。また、プロパティとその値のセットは、何行でも続けて書くことができます。

hoge.css
h1 {
 font-size: 18px;
 color: red;
}

CSSの対応状況を調べる方法
HTMLやCSSには新機能がどんどん追加されていきます。特にCSSの機能は、ブラウザのバージョンが古いと動かないこともあります。そのため、実際の現場では、Webページを製作する前にブラウザの対応状況を調べて、どんな機能なら使っても良いかを事前に決めておくことがあります。そうした判断に役立つのが次のサイトです。

HTMLやCSSのブラウザ対応状況を調べる
caniuse.com

どんなブラウザが使われているかを調べる
StatCounter Global Stats
総務省・情報通信白書

ページにCSSを適用する流れ

新規にCSSファイルを作成し、HTMLにCSSを読み込む

実際のWebサイトを作るときは、HTMLファイルとは別に専用のCSSファイルを作成します。文字コードは同じUTF-8で、CSSのファイルの1行目に以下のように記述します。また、HTMLファイルを編集してCSSファイルを読み込むようにします。

style.css
@charset "utf-8";
hoge.html
...
<head>
<meta charset="utf-8">
<meta name="description" content="時短料理セミナー。現代の忙しいお母さまのために...参加者募集中!">
<link rel="stylesheet" href="style.css">
<title>時短料理セミナー 募集要項</title>
</head>
...

@charset "utf-8";
CSSファイルの1行目に書いた「@charset "utf-8"」は、そのCSSファイルの文字コードを指定するためのものです。必ずCSSファイルの1行目に書かなくてはなりません。

CSSファイルを読み込む<link>
HTMLからCSSファイルを読み込むためには、以下のように<link>タグを追加します。href属性には、読み込むCSSまでのパスを追加します。また、HTML 4.01やXHTML 1.0では、CSSを読み込む<link>タグにtype属性も含めておく必要がありましたが、HTML5では、不要です。

hoge.html
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="style.css" type="text/css"> <!-- 「type="text/css"」は不要 -->

ページ全体のフォントを指定する

CSSは全て外部CSSファイル(style.css)に書きます。CSSを編集する際は、まずページ全体のスタイルを調整するCSSから書いていき、その後に特定の場所にだけ適用するスタイルを調整するCSSを書いていきます。そうすることで、最終的なCSSのソースコードが短くなり、保守・運用がしやすくなります。ここでは、まずページ全体のフォントをゴシック体にします。

style.css
@charset "utf-8";

body {
  font-family: sans-serif;
}

タイプセレクタとfont-familyプロパティ
ここで使用したCSSのセレクタは、「body」です。このセレクタは、タイプセレクタと呼ばれ、「{~}」のスタイルがbodyタグに適用されます。また、font-familyプロパティは、テキストの表示に使用するフォントを指定します。ここでは、その値に「sans-serif(ゴシック体)」を使用しています。

CSSの継承
「継承」とは、ある要素に適用したプロパティの値が、子要素、その子要素に適用されていくCSSの重要な仕様のことです。今回、<body>に適用したプロパティは、<body>の子要素である<h1>や<p>に適用されます。しかし、全てのプロパティの値が継承されるわけではなく、プロパティによって継承されるかどうかが決まっています。正確に知ろうと思ったら都度調べなければなりませんが、基本的には以下の通りになっていると思ってよいでしょう。

  • フォント関係(フォントファミリー、フォントサイズ、テキスト色など)は継承される。
  • 背景色や背景画像などのプロパティは継承しない。
  • ボックスモデル関係のプロパティは継承しない。
  • そのほかの多くのプロパティは継承しない。

<h1>、<h2>のフォントサイズを指定する

次に、<h1>、<h2>のフォントサイズを小さくします。

style.css
body {
  font-family: sans-serif;
}
h1 {
 font-size: 21px;
}
h2 {
 font-size: 18px;
}

font-sizeプロパティ
「font-sizeプロパティ」は、その名の通り、フォントの大きさを調整するプロパティです。今回は、「px」という単位で指定しています。また、「px」以外にもCSSには、単位が存在しますがそれはまた次回まとめます。

classセレクタ
同じクラス名を持つ要素全てにスタイルを適用するセレクタで、ピリオドに続けて記述します。

style.css
.クラス名 {
     ...
}

子孫セレクタ
子孫セレクタは、先頭のセレクタで選択された要素の子要素のうち、2番目の要素に該当するセレクタだけを選択します。先頭のセレクタと2番目のセレクタは半角スペースで区切って記述します。子孫セレクタは、特定の場所にある要素だけを絞り込むのに使います。

タイプセレクタ、クラスセレクタ、子孫セレクタはよく使う
HTMLドキュメントの要素を選択するセレクタは、40種類以上あります。しかし、よく使うのはタイプセレクタ、クラスセレクタ、子孫セレクタの3種類です。これらのセレクタは、HTMLのどんな要素を選択できるかが分かりやすく、CSSの管理がしやすくなります。セレクタを選ぶ際は、まずこの3種類から検討します。

終わりに

これで、「HTML5 & CSS3入門第3回〜CSSの基礎知識とページデザインの実践例〜」は終了です。それでは、また。

[紹介元] CSSタグが付けられた新着投稿 – Qiita HTML5 & CSS3入門第3回〜CSSの基礎知識とページデザインの実践例〜

コメント

記事に戻る

コメントを残す