cssの使い方 ゼロから始めるHTML/CSS講座Vol06

2015年12月3日 (2017年3月21日最終更新)
cssの使い方 ゼロから始めるHTML/CSS講座Vol06
目次
  1. ゼロから始めるHTML/CSS講座CSSの適用方法
  2. CSSの適用方法
  3. style要素
  4. style属性
  5. link要素
  6. まとめ

ゼロから始めるHTML/CSS講座CSSの適用方法

CSSの適用方法

CSSをHTMLに適用するための方法は3つあります。以前作成した桃太郎のあらすじを利用し各方法を紹介していきます。

※下記のサンプルコードは、以前作成した momotaro.html からインデント追加など一部修正をしています。


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>昔話</title>
</head>
<body>
<h1>桃太郎</h1>
<p>むかしむかし、あるところにおじいさんとおばあさんが住んでいました。おじいさんは山に柴刈りに、おばあさんは川に洗濯に行きました。</p>
<p>おばあさんが洗濯していると、川上からどんぶらこどんぶらこと、大きな桃が流れてきました。</p>
<a href="http://codecamp.jp/">CodeCamp</a>
</body>
</html>

style要素

head要素の中にstyle要素を設定すると、要素の内容としてCSSを指定することができます。以前「CSSの基礎と記述方法」内のmomotaro.htmlで文字色を変更するCSSを適用したのはこの方法です。


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>昔話</title>
    <style>
        h1 {
            color: red;
        }
    </style>
</head>
<body>
    <h1>桃太郎</h1>
    <p>むかしむかし、あるところにおじいさんとおばあさんが住んでいました。おじいさんは山に柴刈りに、おばあさんは川に洗濯に行きました。</p>
    <p>おばあさんが洗濯していると、川上からどんぶらこどんぶらこと、大きな桃が流れてきました。</p>
    <a href="http://codecamp.jp/">CodeCamp</a>
</body>
</html>

style属性


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>昔話</title>
</head>
<body>
    <h1 style="color:red;" >桃太郎</h1>
    <p>むかしむかし、あるところにおじいさんとおばあさんが住んでいました。おじいさんは山に柴刈りに、おばあさんは川に洗濯に行きました。</p>
    <p>おばあさんが洗濯していると、川上からどんぶらこどんぶらこと、大きな桃が流れてきました。</p>
    <a href="http://codecamp.jp/">CodeCamp</a>
</body>
</html>

HTMLの属性の1つにstyle属性があり、この値としてCSSのプロパティと値を記述することができます。

しかしこの方法は文章の構造を示すHTMLとデザインのCSSを混合して記述する上、全ての要素に細かくCSS指定をする必要がありメンテナンス性が著しく低下するため、通常使用しません。一時的なテストに利用する程度としてください。

link要素

link要素のrel属性に[stylesheet]、href属性にファイルを指定することで、CSSを別なファイルから読み込むことができます。CSSのみ記述したファイルを新規作成し、link要素に作成したファイルを指定してください。

ファイル名:momotaro.css


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>昔話</title>
    <link rel="stylesheet" href="momotaro.css">
</head>
<body>
    <h1>桃太郎</h1>
    <p>むかしむかし、あるところにおじいさんとおばあさんが住んでいました。おじいさんは山に柴刈りに、おばあさんは川に洗濯に行きました。</p>
    <p>おばあさんが洗濯していると、川上からどんぶらこどんぶらこと、大きな桃が流れてきました。</p>
    <a href="http://codecamp.jp/">CodeCamp</a>
</body>
</html>


h1 {
    color: red;
}

link要素はrel属性にファイルの種類を指定することでCSS以外のファイル読み込みもできますが、CSS以外で利用することはあまりないため、紹介は割愛します。

またlink要素を複数指定することで、CSSファイルを複数読み込むことも可能です。


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>昔話</title>
    <link rel="stylesheet" href="momotaro.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>桃太郎</h1>
    <p>むかしむかし、あるところにおじいさんとおばあさんが住んでいました。おじいさんは山に柴刈りに、おばあさんは川に洗濯に行きました。</p>
    <p>おばあさんが洗濯していると、川上からどんぶらこどんぶらこと、大きな桃が流れてきました。</p>
    <a href="http://codecamp.jp/">CodeCamp</a>
</body>
</html>


h1 {
    color: red;
}


p {
    color: blue;
}

まとめ

CSS適用について「style要素」「style属性」「link要素」の3つの方法を紹介しましたが、基本的にlink要素による外部CSSファイル読み込みを利用してください。

CSSの外部ファイル化は、複数ページでCSSの使い回しができるというメリットがあります。style要素やstyle属性でページごとにCSSを適用してしまうと、デザインに修正や変更があった際に複数のHTMLファイルを修正しなければなりません。

しかしCSSをHTMLと別ファイルにして管理することで、HTMLが何ページあろうと修正はCSSファイルだけで済みます。

よって複数のWebページがある場合、下記のようにHTMLとCSSを分けて作成します。

css-style

NEXT LESSON ☛ CSSでよく使われるプロパティ

PREV LESSON ☛ HTMLでよく使われるタグ

Code部編集チーム
Code部編集チーム
Code部は、日本初のオンラインマンツーマンプログラミングスクール「CodeCamp」が運営するメディアです。「全ての人にプログラミングを」というミッションの下、プログラミング初心者に役立つ情報を発信しています。

関連記事