カテゴリー

キーワード

 
> 【CSS】CSSの書き方と外部ス...

【CSS】CSSの書き方と外部スタイルシート設定方法を紹介します


2015 年 3 月 26 日 投稿    view: 50801
タグ:
このエントリーをはてなブックマークに追加

css 書き方 外部スタイルシート

こんにちは、WEBマーケティング部の杉尾です。


前回に引き続き、CSSの基礎知識を説明させていただきます。
今回はCSSの書き方です。


よろしくお願いします。



CSSの書き方

基本の書き方

基本的な書き方は

セレクタ{プロパティ:値;}

です。


セレクタとはスタイルを適用する対象のことです。
プロパティとはどんなスタイル(プロパティ)を適用するのか指定するものです。
は実際にどんな内容を適用するのかを指定するものです。


具体的にはこんな感じで書きます。

p{margin:15px;}

これは
セレクタ:p要素の
プロパティ:周囲にスペースを
:15px
設けるという指定です。


注意点

半角小文字で書いてください。
CSSは、HTMLやXHTMLの要素をセレクタとしてスタイルを適用します。
HTMLでは要素名、属性名を小文字、大文字のどちらで書いてもよいのですが、XHTMLは小文字で書きます。
現在主流となりつつあるのはHTML5ですが、そういった経緯があるのでCSSは小文字で書く方がよいでしょう。


複数のセレクタ

複数のセレクタに同じ指定をすることができます。
その場合はこう書きます。

p,span{color:blue;}

これは、『p要素とspan要素内のテキストを青文字で書く』という指定になります。


複数のプロパティ

また、一つのセレクタに複数のプロパティを指定をすることもできます。
その場合はこうです。

p{color:blue;font-size:16px;}

これはp要素内のテキストを青文字にし、16pxの大きさで書くという指定です。


また、以下も有効です。

p{
    color:blue;
    font-size:16px;
}

コメントアウト

『/*』と『*/』の間に書かれたテキストはコメントとなります。
ブラウザはその部分を無視してくれます。
上手く活用してメモを残すと、メンテナンスのときに役立ちます。


/*この部分はコメントアウトされます*/
p{color:black;}

以下のように、複数行に分けても有効です。


/*------ 
この部分はコメントアウトされます
------*/
p{color:black;}

入れ子にすることはできません。


半角スペース・タブ・改行

半角スペース、タブ、改行を活用するとソースが見やすくなります。
それらはスタイルに反映されることがありません。

p {
    font-size : 16px;
    color : black;
}

CSSをどこに書けばいいのか?

1. 外部スタイルシート
2. <HEAD></HEAD>タグ内部に書く場合
3. HTMLタグ内部に書く場合


HTMLファイルの簡素化、見やすさ、メンテナンス性の観点から、1の外部スタイルシートに記述するのが基本です。


とはいえ、個別にスタイルを指定したいときがあります。
そういったとき状況に応じて2や3の方法を取ると良いでしょう。


個別にご覧いただきます。


1. 外部スタイルシート
スタイルシート外部読み込みのスクリプト




2. <head>~</head>
スタイルをhead内に書く



3. HTMLタグ内部に書く場合
スタイルをHTMLタグ内に書く


このとき覚えておくべきことが一つあります。
優先順位は、『3 ⇒ 2 ⇒1』になるということです。
(1と2に関しては記述の順番にもよりますが、通常はこの優先順位です)


というのも前回、『CSSは上方で指定されたスタイルが下方に引き継がれ、最終的に文書へたどり着いて適用される』と説明しました。


【CSS】CSSとは? カスケーディング・スタイル・シートって? CSSの基礎知識を紹介します。


これをわかりやすく言うと、『よりHTMLタグに近いスタイルが適用される』ということになります。
参考ソースをご覧ください。

index.htmlというページでstyle.cssを読み込んでいます。


参考ソース

style.css

p {color:black;}

index.html

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css">
<style>
    p {color:red;}
</style>
</head>
<body>
    <p style="color:blue">ここには本来テキストが入ります。</p>
</body>
</html>

style.cssでpの文字は黒で書くようにという指定があります。
そのstyle.cssをindex.htmlの4行目で読み込んでいます。
index.htmlの6行目で、pは赤文字で書くように再指定があります。
しかし、10行目のpタグには青文字で書くように更なる指定があります。


結果として、pタグで囲まれた文章は青文字で書かれることになります。


まとめ

今回はCSSの書き方と、外部スタイルシートの読み込み方法を説明しました。


CSSはWebデザインの中で大きな役割を果たしています。

CSSでできることはどんどん増えていっていますから、しっかり覚えたいですよね。


では、次回はCSSの『セレクタの種類と優先順位』を紹介したいと思います。


最後までお読みいただき、ありがとうございました。


【追記】書きました
【CSS】CSSのセレクタとは? 覚えておきたいセレクタ21選
 

 

 

 

杉尾成行 顔写真

この記事を書いた人

杉尾成行

株式会社SceneLive Webマーケティング部長

ウェブマーケティングコンサルタントとして、クライアントのウェブ集客をサポートしている。
また、ウェブ制作、システム制作にも携わり、数々のサイトを手掛けている。
当ホームページ、ブログシステムも制作。

前職:ライター、小説家

ウェブマーケティングコンサルタントとしてのブログ
ウェブ参謀

個人ブログ(オリジナル小説他) ⇒ 35deFA

 


カテゴリー

タグ
この記事が気に入りましたら、是非、他の方にもシェアしてください。
このエントリーをはてなブックマークに追加
関連記事