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」のように、特定のclass(もしくはid)内のある要素(ここでは「.text」内にある「img」)にのみ適用させる方法
- 何も記号をつけず「img」などと書いてページ内のすべての指定要素(ここでは「img」)に適用させる方法
- 「*{ word-wrap: break-word }」のようにアスタリスクマークのみ書いてページ全体に適用させる方法
.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を読み込んでいるすべての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>
《表示結果》
以下の単位は数値を指定する際に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講座メニューへ戻る