HTMLへのCSS読み込み方法を初心者向けに徹底解説!3種類のやり方を覚えよう!
  • facebookページ
  • twitterページ
  • 2020.02.27

    HTMLへのCSS読み込み方法を初心者向けに徹底解説!3種類のやり方を覚えよう!

    Webサイトをデザインするために欠かせないCSSですが、HTMLへ適用するためには大きく3種類の方法が存在します。

    本記事では、HTMLへのCSS読み込み方法を初心者の方でも理解しやすいよう、なるべく細かく解説していきたいと思います。

    HTMLのCSS読み込み方法1: HTMLファイルに外部CSSファイルから読みこませる


    まずはHTML5で推奨されているCSSを外部ファイルとして切り分けて読みこませる方法について、解説していきたいと思います。

    最も一般的な方法であり、特に理由がない限りは、HTMLファイルとCSSファイルは切り分けて記述するように意識しておきましょう。

    外部CSSファイルの読み込み方

    外部CSSファイルを読み込むためにはHTMLファイルのheadタグに下記のコードを記述します。

    HTMLでは「link」タグを利用することで、ファイルの関連付けを定義することが可能になります。

    ポテパンダの一言メモ

    通常HTMLファイルは「head」と「body」に分かれており、「head」部分にはユーザーに表示しない内部情報を、「body」部分はユーザーに表示する外部情報を記述します。

    rel属性の使い方

    rel属性では、後述するhref属性で指定したファイルとhtmlファイルの関係性を定義します。

    今回の場合は、CSSファイルを読み込むため「stylesheet」と設定しています。

    他によく使われるrel属性の値としては、「icon」でブラウザのアドレスバーに表示される小さいアイコン画像を指定する場合などが挙げられます。

    href属性の使い方

    href属性では、読み込むファイルのリンク先を指定することが可能です。

    例えばhtmlと同じフォルダにCSSファイルが格納されている場合、ファイル名だけを記述すれば読み込むことが可能です。

    別階層にCSSファイルを格納している場合には、htmlファイルが格納された場所からの「相対パス」を指定する方法が一般的です。

    サンプルコードで外部CSSファイルの読み込み方法を確認しよう

    では実際のサンプルコードで外部CSSファイルの読み込み方法を確認してみましょう。

    サンプルではシンプルに文字列を赤色に変更するCSSを適用しています。

    フォルダ階層は下記の通りです。

    今回のサンプルではHTMLと同階層に「cssフォルダ」を作成し、cssフォルダの中に「style.css」を格納しています。

    HTMLファイルとは異なる階層に対象のCSSファイルが格納されているため、href属性には「css/style.css」と相対パスで記述しておく必要があります。

    index.html

    style.css

    サンプルコードを実行した結果が下記の通りとなります。

    外部CSSファイルで定義した「div-css」が読み込まれ、文字が赤色に表示されていることをご確認頂けます。

    HTMLのCSS読み込み方法2: HTMLファイル内でCSSを定義する


    続いてHTMLファイル内に直接CSSを定義する方法について確認していきましょう。

    styleタグにデザインを記述してみよう

    HTMLファイル内で直接CSSを指定するには「head」部分に「style」タグを定義します。

    上述したように、「style」タグの内部記述はユーザーに表示するためのHTMLタグではないため、「head」部分に定義していきます。

    内部の処理はCSSに記述する方法と全く同じです。

    サンプルコードでHTMLファイルにCSSを直接定義する方法を確認しよう

    では実際にサンプルコードでHTMLファイル内に直接CSSを定義する記述方法を確認してみましょう。

    index.html

    サンプルコードを実行した結果が下記の通りとなります。

    HTMLファイル内で定義したstyleタグが読み込まれ、指定した「div-css」クラスが適用されていることがご確認頂けます。

    HTMLのCSS読み込み方法3: HTMLタグにstyleで直接定義する


    3つ目はHTMLタグに直接style属性でスタイルを記述してしまう方法です。

    style属性の記述方法を確認しよう

    style属性に記述する方法も外部CSSファイルやstyleタグで記述していた方法と基本は同じです。

    ただ、style属性に直接記述する場合、クラスなどは指定せず適用したいスタイルの処理のみを記述します。

    ポテパンダの一言メモ

    サンプルではdivタグにstyleを適用していますが、divタグ以外のHTML要素にもstyleを適用することは可能です。

    サンプルコードでHTMLタグに直接styleを定義する方法を確認しよう

    実際のサンプルコードでHTMLタグに直接sytleを定義する方法を確認してみましょう。

    divタグに対してstyle属性を指定しています。

    index.html

    サンプルコードを実行した結果が下記の通りとなります。

    指定したdivタグに対してstyleが適用され、文字列が赤色に変更されていることをご確認頂けます。

    さいごに:HTML5ではCSSを外部ファイルに切り分けて読み込みを行う方法が推奨される


    本記事では、HTMLにおけるCSSの読み込み方法について3種類のやり方をご紹介してきました。

    冒頭でも説明しましたが、HTML5ではHTML文書とCSSでのデザインを明確に切り分ける方法が推奨されています。

    特に理由が無い限りは、外部CSSファイルとしてデザイン部分は切り出し、HTMLに読み込む方法を基本として、コーティングを実施するように意識しておきましょう。



    優良フリーランス案件多数掲載中!
    フリーランスエンジニアの案件をお探しなら
    ポテパンフリーランス

    この記事をシェア

    • Facebookシェア
    • Twitterシェア
    • Hatenaシェア
    • Lineシェア
    pickup









    ABOUT US

    ポテパンはエンジニアと企業の最適なマッチングを追求する企業です。

    READ MORE