CSSの書き方 - 個人サイトのためのCSS3講座

CSSの書き方についての導入説明です。

CSSでスタイルを指定する際には、どの部分に対してどのスタイルをどのように適用するかを指定します。
よく用いられる指定方法は2つあり、「.text」のように指定する方法と「#text」のように指定する方法です。前者はclass属性とよばれ1つのページ内で何度でも使えるのに対し、後者はid属性とよばれ1つのページ内で一度しか使えません。
class属性「.text」のようにドットマークでclass名を指定する。1つのページ内で何度でも使える。
id属性「#text」のように#でid名を指定する。1つのページ内で一度しか使えない。
指定方法は、HTMLファイル内で指定したい範囲のタグ内に「class="class名"」「id="id名"」のように指定し、CSSファイル内で指定したclass名・id名のところにCSSを記述します。
以下の例では、「.text」「#text」部分の色を赤、文字サイズを10pxで表示するスタイルを指定しています。

《class属性で指定》

<div class="text">・・・</div>

.text {
color: red;
font-size: 10px
}

《id属性で指定》

<div id="text">・・・</div>

#text {
color: red;
font-size: 10px
}
なお、見やすいように空白と改行を入れています。
{} の中に適用するCSSの内容を書き、「指定する項目: 指定する内容」のように:を用いて記述します。内容を複数指定するときは、;(セミコロン)で区切って指定します。(最後の項目は ; を省略可能です)
また、CSSもHTMLタグと同じく、かならず半角文字および小文字で書きます。
ほかに用いる書き方としては、
.text img「.text」内のimgに適用
imgすべてのimgに適用
*ページ全体に適用
もあります。
次の事項は基本的に必須なので、アスタリスクマークを使って全ページに適用させましょう。
* {
box-sizing: border-box;
-webkit-box-sizing: border-box;
word-wrap: break-word;
}
デフォルトでは枠線の太さなどがページ全体の横幅に含まれないため、要素が画面幅をはみ出してレイアウトが崩れてしまうことがあります。そこで「box-sizing: border-box」を設定することによって、枠線の太さなどが画面幅に収まるようになり、レイアウト崩れを防止できます。(どのブラウザでもこの設定が反映されるように「-webkit-box-sizing: border-box」も記述しましょう)
「word-wrap: break-word」は、英文字を自動改行させるためのものです。基本的に文書はページの末尾で自動的に改行されますが、英文字は自動では改行されません。そうするとページをはみ出してレイアウトが崩れてしまうため、かならず記載しておきましょう。
▲ページの先頭へ
スタイルシートの文字コードは、原則として「utf-8」で指定します。
CSSファイルの一番上に下記のように記入しておきます。
@charset "utf-8";
▲ページの先頭へ
CSSを記述したファイルはHTMLファイルとは別に作成し、HTMLファイル内で読み込みます。読み込むためには、HTML文書のheadタグ内に <link rel="stylesheet" type="text/css" href="CSSファイル名"> と記入します。

CSSの部分はCSS専用ファイル(xxx.css)に書く

.text {
color: red;
font-size: 10px
}

HTMLソースでCSSを読み込む

<html>
<head>
<link rel="stylesheet" type="text/css" href="xxx.css">
</head>
<body>
<p class="text">内容となる文書の部分です。</p>
</body>
</html>
以下の画像が、CSSファイルの記入イメージです。
CSSファイル記入イメージ
こうすることで、CSSを変更する際もCSSファイルさえ修正すれば、そのCSSを読み込んでいるすべてのHTMLファイルに反映されます。
CSSをHTMLファイル内に直接記入する方法もありますが、CSS変更の際にすべてのHTMLファイルを編集しなければならず手間がかかってしまうので、おすすめしません。一括で変更できるよう、CSSファイルにまとめるのが良いでしょう。
▲ページの先頭へ
CSSの記述に誤りがないにもかかわらず反映されない場合は、端末上に残っているキャッシュ(過去に閲覧したウェブサイトのデータ)が影響している可能性があります。
その場合は「キャッシュクリア」でこのデータを消去し、「スーパーリロード」で再読み込みすることで最新のCSSが反映されるようになります。
また、HTMLファイル上で
<link rel="stylesheet" type="text/css" href="CSSファイル名?v=1">
のように末尾に「?v=半角数字」(バージョン情報)を付け加えてCSSのバージョンを更新させるというやり方もあります。それでも直らない場合は「?v=1」→「?v=2」→「?v=3」というように数字を変えてみてください。
▲ページの先頭へ
pタグなどの中に「class="任意の名前"」を指定できない場合や、複数のタグ部分にまとめてCSSを適用させたい場合は、divタグを用いて <div class="任意の名前"> で指定します。divタグで囲んだ部分は、ひとかたまりの範囲として扱われます。
一方、文書の中の単語や記号など、ある一部分にだけCSSを適用させたい場合は、spanタグを用いて <span class="任意の名前"> で指定します。
【Point】ある一部分にだけCSSを適用させたい場合は「span」を使う!

《例》

<div class="menu">
<p><span class="star">★</span>メニュー1</p>
<p><span class="star">★</span>メニュー2</p>
</div>

《表示結果》

メニュー1

メニュー2

▲ページの先頭へ

以下の単位は数値を指定する際にCSSでよく用いられるので、覚えておくと良いでしょう。数値が0の場合は単位は不要です。

px(ピクセル)1ピクセルを1とした単位
em(エム)その範囲のフォントの高さを1とした単位
%(パーセント)親要素の幅・高さを基準とし、1%=親要素の幅・高さの1%とした単位
vw(Viewport Width)viewportの幅を基準とし、1vw=viewportの幅の1%とした単位
vh(Viewport Height)viewportの高さを基準とし、1vh=viewportの高さの1%とした単位

なお、割り切れない数値を指定する場合は、「calc( 分母 / 分子 )」を用いて「calc( 100% / 3 )」のように指定します。

▲ページの先頭へ

/*メモ書き*/

のように、/* と */ で囲んだ部分はメモ書きとして扱われ、ブラウザには表示されません。CSSファイル内のどこに書いてもOKで、メモ書きを複数行にすることも可能です。
▲ページの先頭へ
CSSファイルの中身が増えてくると、ごちゃごちゃとして見にくくなってしまうことがあります。
その場合はメモ書きで注釈を入れることに加え、以下のようにclass名は違っても同一の内容のCSSであれば、class名をカンマで区切って一つにまとめるという方法が役立ちます。(何個でも並列できます)
.text, .mark, .point {
color: red;
font-size: 10px
}
▲ページの先頭へ
HTMLファイル内で下記のようにclass名を半角スペースで区切って並列することで、複数のCSSを同時に指定することもできます。(何個でも並列できます)
以下の例では、「text-red」と「mb-30」のclassを並列して同時に指定しています。
<div class="text-red mb-30">・・・</div>

.text-red {
color: red;
}

.mb-30 {
margin-bottom: 30px;
}
▲ページの先頭へ

>>CSS3講座メニューへ戻る