cssファイル作成と3つの記述方法!外部読み込みをマスター

cssファイル作成と記述方法について

「何で外部にcssファイルを作るの?」 「cssファイルって何?」 「cssってファイル作らないとダメなの?」 などなど、cssってかなり不思議に思う部分がありますよね。

このページではそんな疑問に答えつつ、cssファイルを作る理由や作り方外部cssファイルの読み込ませ方などを説明していきます。

cssの基本的なことも書いていくので 「そんなこと、知ってるよw」 って部分は飛ばしてくださいね。

目次
cssファイルを作る理由
cssファイルへの書き方
cssをhtmlタグに直接記述する書き方
htmlファイル内にcssを記述する書き方
cssの優先順位について

cssファイルを作る理由

cssは、htmlドキュメント(htmlファイル)のhead内部に記述する方法と、htmlタグ内に記述する方法そしてcss専用の外部ファイルを作成して記述する方法があります。

3つすべてに同じcssを記述する必要はなく、どれか一つに記述すればokです。 どの記述方法でも、表示されるデザインは変わりません。

3つの中でもhtmlドキュメントに記述する方法は、手軽で簡単そうに感じると思います。 ですが、一つのファイルでhtmlとcssの両方を扱う事になるので、記述する内容が増えてくると管理が大変になります。 さらに、htmlドキュメントの容量も大きくなってしまいます。 そうなると、webページの表示速度も遅くなり、訪問してくれるユーザーにとっても不便になっちゃいます。 そしてグーグルはwebページの表示速度も考慮して検索結果の順位を決めているので「いつまでも上位に入れない(T_T)」なんて可能性も出てきます。

そこで必要になるのがcssファイルです。

専用のcssファイルを作っちゃえば管理も楽ですし、htmlドキュメントの容量も抑える事ができます。

「でも、難しそうだよね・・・」 と思うかもしれませんが、cssファイルは超簡単に作れます。 htmlドキュメントに読み込ませるのもコピペだけで終わっちゃうほど簡単ですのでご安心を。

ではcssファイルの作り方と保存方法をご紹介しますね。

cssファイルの作成方法と保存のやり方

このページではterapad(フリー)を使ってcssファイルを作ります。 メモ帳でも作り方は変わりません。

terapadは下のリンクからダウンロードできます。

Terapad-窓の杜ライブラリ cssファイル文字コード入力の例

まずはterapadで新規ファイルを開いて、htmlドキュメントと同じ文字コードを入力します。(このページでは@charset”utf-8″)

@charset "UTF-8";

htmlドキュメントの文字コードがわからないという時は、下を参考にして下さい。 あなたのhtmlドキュメント内にもほぼ同じように書いてあります。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">    <!--左が文字コードが書いてある部分-->
                          <!--必ず<head>~</head>の中に書いてあります-->
<meta name="keywords" content="htmlファイル作り方,htmlファイル作成,html初心者">
<meta name="description" content="htmlファイルの作り方を紹介しているページです">
<title>html・css入門!初心者でも見るだけで自由自在に</title>
</head>
<body>
cssファイルの名前を付けて保存を選択の例

文字コード記述後、名前を付けて保存を選択

cssファイル名入力の例

保存先のフォルダーを選択(任意)、ファイル名に「style.css」と入力。 入力後、ファイルの種類「cssファイル」を選択し保存。 (ファイルの種類でcssファイルを選択するとファイル名が「style」に変わりますが、保存後「style.css」と変わるのでご安心を)

cssファイルの文字コード選択の例

文字コードを「UTF-8」に設定し、再度ファイルを保存します。

cssファイルを読み込ませよう!

cssファイルを読み込ませる

htmlドキュメントに、外部cssファイルを読み込ませるためにタグの入力をしましょう。 これをする事で外部cssファイルに記述しても、webページを表示する時にcssが反映されるようになります。

やり方は簡単で下のタグをhtmlドキュメントにコピペするだけです。

<link rel="stylesheet" href="style.css">
<!doctype html>
<html>
 
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="style.css">
</head>
 
<body>

上のようにhead要素の最後に入力するようにしましょう!

それと上のように記述する場合は、htmlドキュメントとcssファイルを同じフォルダに入れて下さいね。 別フォルダに入れると読み込まれません。

どーしても別フォルダにしたい場合は、「style.css」の部分をサイトルートパスなどで指定して下さい。 「よくわかんねw」って場合は、「http://www.yuu-diaryblog.com/wp-content/themes/simplicity2/ファイル名.css」のようにURLを入力しとけば大丈夫です。

ちなみにcssファイルは複数読み込ませることもできます。

<link rel="stylesheet" href="ファイル名.css">

link要素とは

link要素は、htmlドキュメントに関係するファイルを示すための要素です。

何度でも記述することができるので、複数のcssファイルを読み込ませることもできます。 基本的にはhead内に記述しましょう。

rel属性とは

ファイルの種類をここで指定します。

例えばcssであれば「stylesheet」というような感じです。

href属性とは

ファイルのurlをここで指定します。

読み込ませたいファイルがhtmlドキュメントと同じフォルダ内にあるなら「ファイル名.css」と値を設定するだけで大丈夫です。

これで外部cssファイルに記述するだけで、webページを表示する時にcssが反映されるようになりました!! すごい簡単ですよね(*´з`)

次は、cssファイルへの記述の仕方を紹介しますね。 といっても、普通に書くだけなんですけどねw

cssファイルへの書き方

@charset "UTF-8";

h1{
  color:red;
}
p{
  font-size:10px;
}

cssファイルへ記述する時は、上のように文字コードの下からcssを入力するだけで、webページを表示する時に反映されます。 管理もすごい楽なのでcssを記述する時は基本的には、cssファイルに入力するようにしましょう!

一応、他の記述方法も説明しますね。

cssをhtmlタグに直接記述する書き方

htmlタグに直接記述する場合は下のように記述します。

<htmlタグ style="プロパティ:プロパティ値;"></htmlタグ>

<p style="color:red;"></p>
<!--pなら上のような記述-->
<p style="color:red; font-size:20px;"></p>

htmlタグに直接書いた場合、cssを記述した要素(pなら<p>~</p>部分)のみにスタイル(見た目)が適用されます。 例えば下のように記述した場合、ブラウザでは「ht:HyperText ハイパーテキスト」の部分のみが赤色になります。

※pを例にしていますが、他のタグでも記述方法は同じです。

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <h1>htmlとは下記の頭文字をとった略語</h1>
         <p style="color:red;">ht:HyperText ハイパーテキスト</p>
         <p>m:Markup マークアップ</p>
         <p>l:Language 言語</p>
</body>
</html>

下のように複数のタグにcssを記述する事も可能です。

<p style="color:red;">ht:HyperText ハイパーテキスト</p>
<p style="background:red;">m:Markup マークアップ</p>
<p style="font-size:10px; font-weight:bold;">l:Language 言語</p>

htmlファイル内にcssを記述する書き方

htmlファイル内にcssを記述する場合は、下をhead内に書きます。

<style type="text/css">
h1{color:red;}
p{color:red;}
</style>
<!doctype html>
<html>
<head>
   <meta charset="utf-8">
   <link rel="stylesheet" href="style.css">
   <style type="text/css">
   h1{color:red;}
   p{color:red;}
   </style>
</head>
<body>
   <h1>htmlとは下記の頭文字をとった略語</h1>
       <p>ht:HyperText ハイパーテキスト</p>

<!--以下省略-->

書き方は、cssファイルに記述する時と同じです。 「style type=”text/css”」に続けて何個でもcssを書くことができます。

優先順位について

それぞれ3つのcssの記述方法について紹介しましたが、cssには優先順位というものがあります。

  1. HTMLタグに直接書く(1番優先)
  2. HTMLファイル内に書く(2番目)
  3. CSSファイルに書く(3番目)

例えば、htmlタグに「h1{color:red;}」と記述します。 そして、cssファイルに「h1{color:black;}」と記述します。 こういう場合、htmlタグに記述した「color:red;」が優先されて、h1の色が赤になるよ!って事です。

そしてもう一つ覚えておいてほしい事は、cssは下に書いたものほど優先ということ。

h1{color:red;}
h1{color:black:}
h1{color:blue}

上はどれもh1に対しての色指定ですよね。 こういうように同じ要素(この場合ならh1)に複数の色指定をしても、赤と黒と青でグラデーションされることはありません。

この場合は一番したに書いたh1{color:blue;}が優先されて、h1の色は青色になります。 つまりcssは下に書いたものほど上書きされていくという事です。

cssを記述したのに「うまく表示されない」という時は、もしかしたら下の方に同じようなものが記述されてる可能性があります。 なのでcssの優先順位もしっかりと覚えておいて下さいね(^^♪

以上、「cssのファイル作成方法と3つの記述方法について」でしたー(^-^) 長々と読んで頂きありがとうございます。

頂いたコメント

  1. より:

    ゆう。さん、こんばんわ!
    初めまして!
    星と申します^^

    先日はブログへお越しくださりありがとうございました♪
    とてもうれしかったです♪

    CSSだ・・・( ゚Д゚)!!
    と身構えて記事を読ませていただきました。

    実はプログラム言語は少しかじっていて、
    一応基本的なことはわかるんですけど、
    いまだにCSSは苦手意識が抜けません^^;

    なので、下に描いたものほど上書きされていく。。。って読んで
    「えー!」ってなりました(汗
    あの時反応しなかったのはそのせいかっと思い当たる節があったりなかったり・・・

    とっても読みやすくて、みやすかったです^^
    ブログデザインも素敵ですね♪

    応援しております♪
    いつもお疲れさまです♪

    • ゆう。 より:

      星さん、こんにちわー(^^♪

      訪問ありがとうございます(^-^)
      先日はどうもー(#^^#)

      >実はプログラム言語は少しかじっていて、
      一応基本的なことはわかるんですけど、
      いまだにCSSは苦手意識が抜けません^^;

      私と逆ですねw。
      私はcssとかデザイン系は結構好きなんですけど、
      プログラミング言語になると「うーん。ムズイなw」ってなっちゃいますよねw

      >とっても読みやすくて、みやすかったです^^
      ブログデザインも素敵ですね♪

      ありがとうございます(*´з`)
      そういって貰えるとすごい嬉しいです(^-^)

      応援ありがとうございますー

  2. ちえぞう より:

    ゆうさん。
    はじめまして、ちえぞうといいます。
    ランキングから来ました。

    ブログ、とっても可愛い♪
    テンプレート好きの私なので、隅々まで見てしまいました。

    CSSについて、すごーく解りやすい記述ありがとうございます。

    私もCSSやHTMLなど、ググってググって勉強しました。
    いろいろ覚えると、楽しいですよね^^

    応援です。

    • ゆう。 より:

      ちえぞうさん、こんにちわー(^^)/

      >ブログ、とっても可愛い♪

      ありがとうございます(#^^#)
      デザインだけは頑張っていじってみましたw

      >テンプレート好きの私なので、隅々まで見てしまいました。

      細かい所は、「誰も見ないっしょ」と思ってかなり適当になってますww

      自分でなんでもできるようになると
      ほんと面白いですよね(*´з`)
      ゲーム感覚でできる所がほんとたのしいですw

      応援ありがとうございます!!