• HTML入門:外部CSSファイルの読み込み方

    公開日:2016年08月17日 最終更新日:2022年04月25日

    HTML文書のスタイルを指定する方法は色々ありますが、本コラムでは外部のCSSファイルをHTML文書に読み込む方法について解説します。まずは、HTMLコード内に記述する方法について確認します。CSSの記述は外部ファイルを作成して管理する事が推奨されていますので、HTMLコードとは分離させましょう。作成したCSSファイルを読み込む方法として「link要素」と「@import」を使った方法について説明します。

    プロエンジニアの無料会員登録はこちら

    1. HTML文書にスタイルを適用する方法

    外部CSSファイルの読み込み方法を解説する前にHTML文書内にCSSを記述する2つの方法について簡単に説明します。

    1.1 HTML文書の<head>タグ内で<style>タグを使う

    まず一つ目は、HTML文書の<head>に記述する方法です。CSSのセレクタとプロパティを<style>~</style>タグ内に記述してHTML文書のスタイルを指定します。実際にHTML文書を作成してみましょう。「sample1.html」をPC上の任意の場所に保存して下さい。ファイルの保存形式は「utf-8」にします。

    ●sample1.html(<style>タグを適用)

    <!DOCTYPE html>
    <html lang="ja">
    <head>
    <meta charset="utf-8">
    <title>HTM入門-外部CSSファイルを読み込む</title>
    <style>
    h1 {
      	color: #326693;			/* 見出しテキストの色を指定する */
    	padding-left:10px;		/* ボックス内左側の余白を指定する */
    	border-left: 10px solid #31a9ee;	/* ボーダー左側のスタイルを指定する */
      	border-bottom: 1px dashed #31a9ee; 	/* ボーダー下部のスタイルを指定する */
    }
    </style>
    </head>
    <body>
    <h1>スタイルの適用</h1>
    	<p>HTMLヘッダーでスタイルを適用します。</p>
    	<p>「styleタグ」で見出しのスタイルを設定しています。</p>
    </body>
    </html>

    HTMLコードの大見出し(<h1>タグ)テキストの色とボーダー、それから余白のスタイルを、それぞれ「colorプロパティ」、「borderプロパティ」、「paddingプロパティ」で設定しています。

    ●ブラウザーの表示(sample.html)

    スタイルの適用【フリーランスエンジニア案件情報 | プロエンジニア】

    一般的にはこのように同一文書内にHTMLコードとCSSを記述することは推奨されていません。筆者のコラムの多くでは、初心者向けの解説用に、あえてHTMLコードとCSSを併記して説明していますが、特別な理由がない限り、HTMLとCSSのコードは分けて作成・管理するようにしましょう。

    ▲ページトップへ戻る

    1.2 HTMLタグにStyle属性を追加する

    <body>タグ内の特定のタグにスタイルを指定することもできます。

    ●sample2.html(<style>属性を追加)

    <head>
    <meta charset="utf-8">
    <title>HTM入門-外部CSSファイルを読み込む</title>
    </head>
    <body>
    <h1 style="padding-left:10px; border-left: 10px solid #31a9ee; border-bottom: 1px dashed #31a9ee; color:#326693">スタイルの適用</h1>
    	<p>HTMLタグのstyle属性で大見出しのスタイルを設定しています。</p>
    </body>

    先ほど<style>タグ内で指定したスタイルを<h1>タグに直接記述する事も可能です。「Style属性」を使って値にプロパティを設定します。複数のプロパティを設定する場合はセミコロン";"で区切ります。

    ●ブラウザーの表示(sample2.html)

    スタイルの適用【フリーランスエンジニア案件情報 | プロエンジニア】

    但し、タグに直接指定するStyle属性もあまりお勧めする設計ではありません。コードが非常に読みにくくなりますので、やはりこの方法も暫定対策や特別な事情がある場合以外は使わない方がよいでしょう。

    ▲ページトップへ戻る

    1.3. CSSスタイルの適用順序

    ヘッダータグ(Head)内に記述されたセレクタとbodyタグ内の「Style属性」で記述されたスタイルがバッティングした場合は、どちらのスタイルが優先されるのでしょうか?
    「sample3.html」をPC上の任意の場所に保存して下さい。ファイルの保存形式は「utf-8」にします。

    ●sample3.html(<style>タグを適用)

    <!DOCTYPE html>
    <html lang="ja">
    <head>
    <meta charset="utf-8">
    <title>HTM入門-外部CSSファイルを読み込む</title>
    <style>
    h1 {
      	color: #326693;			/* 見出しテキストの色を指定する */
    	padding-left:10px;		/* ボックス内左側の余白を指定する */
    	border-left: 10px solid #31a9ee;	/* ボーダー左側のスタイルを指定する */
      	border-bottom: 1px dashed #31a9ee; 	/* ボーダー下部のスタイルを指定する */
    }
    p {
      	color: #31A9EE;			/* 段落テキストの色(青)を指定する */
    }
    p {
      	color: #000000;			/* 段落テキストの色(黒)を指定する */
    }
    </style>
    </head>
    <body>
    <h1>スタイルの適用</h1>
    	<p>HTMLヘッダーでスタイルを適用します。</p>
    	<p style="color: #B20000;">「style属性」で段落のテキストの色を赤で設定しています。</p>
    </body>
    </html>
    

    段落(pタグ)のテキストの色のスタイルをヘッダーとボディのタグ両方に記述しました。ヘッダ内には「段落(p)セレクタ」を二つ記述してそれぞれ色の指定を「青」と「黒」にしました。HTMLコード内の段落(p)タグにはstyle属性でテキストが赤色になるよう設定しています。HTML文書のスタイルは適用するタグがら近い順序で適用されます。通常HTMLコードは上から順番に読み込まれますので、同一文書内に同じセレクターとプロパティがあった場合は、一番最後に読み込んだ情報を優先してスタイルを適用する事になります。

    「sample3.html」をブラウザーで確認してみましょう。14行目に指定した「pセレクタ」の「colorプロパティ」の値である青色は適用されず、17行目に指定されている「colorプロパティ」の黒色が段落のテキストの色として適用されています。また24行目の段落タグにはStyle属性で「colorプロパティ」が設定されていますので、タグに一番近いプロパティの「赤色」が表示されます。

    ●ブラウザーの表示(sample3.html)

    スタイルの適用【フリーランスエンジニア案件情報 | プロエンジニア】

    ▲ページトップへ戻る

    2. 外部CSSファイルをHTML文書に読み込む方法

    HTMLでスタイルを適用する場合は管理・メンテナンスという面からも外部CSSファイルの作成が推奨されます。外部ファイルをHTML文書に読み込む方法には「link要素」を使う方法と「@import」を使う方法がありますのでそれぞれの方法を確認してみましょう。

    2.1. CSSファイルの作成方法

    CSSファイルの作成方法は簡単です。<style>~</style>に記述されているCSSを別ファイルとして保存します。
    それでは「sample1.html」のスタイルを外部ファイルとして保存してみましょう。以下のコードをコピーして「style.css」を作成し、html文書と同じフォルダー内に保存して下さい。CSSファイルの拡張子は必ず「.css」にします。ファイル名は任意ですが、「style.css」や「common.css」などがよく使われています。また、先頭行には外部ファイルの文字コード「@charset "utf-8";」を定義します。

    ●style.css

    
    @charset "utf-8";
    h1 {
      	color: #326693;			/* 見出しテキストの色を指定する */
    	padding-left:10px;		/* ボックス内左側の余白を指定する */
    	border-left: 10px solid #31a9ee;	/* ボーダー左側のスタイルを指定する */
      	border-bottom: 1px dashed #31a9ee; 	/* ボーダー下部のスタイルを指定する */
    }

    HTML文書の方は、リネームして「link.html」としました。

    ●css設置フォルダー

    CSSファイルの読込【フリーランスエンジニア案件情報 | プロエンジニア】

    ▲ページトップへ戻る

    2.2. 「link要素」を使って外部ファイルを読み込む

    次に「link.html」ヘッダーに<link>タグを追加します。linkタグには、「rel属性」と「href属性」が必須になります。「rel属性」はファイルとリンクする外部ファイルの関係を表すキーワードです。CSSファイルとの関係は、外部スタイルシートを示す"stylesheet"を設定し、「href属性」には、リンク先のファイルを指定します。リンク先のMIMEタイプを表す「type属性」は任意ですが、CSSファイルの場合は"text/css"を設定して下さい。

    ●link.html(<link>属性を追加)

    <head>
    <meta charset=”utf-8″>
    <title>HTM入門-外部CSSファイルを読み込む</title>
    <link rel="stylesheet" href="style.css" type="text/css">
    </head>
    <body>
    <h1>CSSファイルの読み込み</h1>
    	<p>cssファイルをlink要素を使って読み込んでいます。</p>
    	<p>「style.css」で大見出しのスタイルを設定しています。</p>
    </body>

    外部ファイルとして保存した「style.css」のスタイルが「link.html」の見出しで適用されました。

    ●link.html

    CSSファイルの読込【フリーランスエンジニア案件情報 | プロエンジニア】

    ▲ページトップへ戻る

    2.3 「@import」を使って外部ファイルを読み込む

    link属性でcssを読み込む以外にも「@import」を使って外部ファイルを読み込む方法があります。先ほど作成した「style.css」ファイルを使います。

    ●基本の書式

    <head>
    <style>
    	@import url(外部ファイルのURL);
    </style>
    </head>
    

    適用する外部ファイル(style.css)のURLを「@import url()」に指定します。

    ●import.html(<link>属性を追加)

    <head>
    <meta charset=”utf-8″>
    <title>HTM入門-外部CSSファイルを読み込む</title>
    <style>
    	@import url(style.css);
    </style>
    </head>
    <body>
    <h1>CSSファイルの読み込み</h1>
    	<p>@importを使ってcssファイルを読み込んでいます。</p>
    	<p>「style.css」で大見出しのスタイルを設定しています。</p>
    </body>

    ●import.html

    CSSファイルの読込【フリーランスエンジニア案件情報 | プロエンジニア】

    「@import」はHTML文書だけでなく、CSSファイル内でも同様に使うことができます。

    ●common.css

    @charset "utf-8";
    
    /* common.cssからstyle.cssを読み込んでいます。 */
    @import url(style.css);
    
    body {
    	margin: 0;
    	padding: 0;
    	font-family: "メイリオ", Meiryo, sans-serif;
    	font-size: 100%;
    }

    用途の異なるCSSファイルを一まとめにしてHTMLに設定すると管理・メンテナンスもしやすく便利です。

    ▲ページトップへ戻る

    月額単価70万円〜80万円
    勤務地 フルリモート
    月額単価60万円〜80万円
    勤務地 フルリモート
    月額単価70万円〜80万円
    勤務地 東京都 中央区
    月額単価60万円〜70万円
    勤務地 東京都 渋谷区

    フリーランスの方でこのようなお悩みありませんか?

    • 定期的に案件を紹介してほしい
    • 完全フルリモートワークや、週1出勤など、働き方を選びたい
    • 単価交渉など営業周りが苦手なので、誰かに任せたい

    プロエンジニアにお任せください!

    プロエンジニアはほとんどEND直案件!高額単価案件ならお任せください。
    完全フルリモートや、週1出勤など、希望に合わせた働き方ができる案件を多数ご用意しています。
    単価や契約交渉などは弊社キャリアコンサルタントに全てお任せください。

    無料登録して、あなたの希望に合った案件をチェック!

    簡単60秒!無料登録はこちらから

    おすすめ記事

  • ピックアップ

    フリーランス

    【React】フロントエンドエンジニア★転職・採用支援サービスの開発

    自社サービスとして転職・採用支援サービスを展開している企業にて、フロントエンドエンジニアとしてご...

    月額単価:70万円〜80万円

    フリーランス

    【TypeScript】フロントエンドエンジニア★航空機関連サービスの開発

    大手航空会社の開発プロジェクトを請け負う企業にて、フロントエンドエンジニアとして参画して頂きます...

    月額単価:60万円〜80万円

    フリーランス

    【TypeScript/Vue】フロントエンドエンジニア★写真販売システムの開発

    クラウドソーシング事業やBPO事業を展開している企業にて、今回は写真販売システムのフロントエンドエン...

    月額単価:70万円〜80万円

    フリーランス

    【TypeScript/JavaScript/Vue/Nuxt.js】フロントエンドエンジニア★AIプラットフォーム開発

    同社はシステムの提案から開発、導入、運用・保守まで一貫したサービスを提供する企業です。 今回はフ...

    月額単価:60万円〜70万円

SCROLL TOP