【HTML】CSSの読み込み方法

プログラミングのKnow-howを共有しましょう

【HTML】CSSの読み込み方法

スポンサーリンク

HTMLでCSSのファイルを読み込む方法について書いていきます。

HTMLのデザインを決めるのに重要なCSS、HTML内に<style>タグを追加して書く方法もありますがやはり別ファイル(.cssファイル)に書いて要素の配置はHTML、デザインはCSSと分けておいた方がいいですよね。

それでは、HTMLでCSSのファイルを読み込む方法について書いていきます。

HTMLでCSSファイルを読み込む方法

<head>タグ、もしくは<body>タグ内に3行目、もしくは6行目のように<link>タグを追加し、以下の属性を書いていきます。

  • rel=”stylesheet”

    rel属性とは?
    リンクタイプと呼ばれ、リンク先のリソースとの関係を表します。index、contents、start等いくつかの指定方法があります。今回はスタイルシート(CSS)を使用するため、stylesheetを指定します。

  • href=”ファイル名.css”

    href属性とは?
    参照するファイルのパス(絶対パス、相対パスどちらでも可)を指定します。HTMLと同一のフォルダにCSSが存在するならファイル名のみを指定すればいいです。

1行で済むので簡単ですね。

さて、上記のコードのように<head>タグ、<body>タグどちらに記述しても構わないのですが、どちらの方が処理的に優れているのでしょうか?これは以下の記事内で解説しているので気になる方はどうぞ。

「【HTML】CSSの読み込み方法」については以上です。
よろしければ他のノウハウも見ていってください。