更新日: 2017年03月21日
公開日: 2015年12月03日

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

ゼロから始めるHTML/CSS講座CSSの適用方法
CSSの適用方法
style要素
style属性
link要素
まとめ

ゼロから始める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>