HTMLにCSSを組み込む

HTMLにCSSを組み込む方法は、大きくわけて3つあります。

使いどころやメンテナンス性が異なるので、それらの特徴を理解しよう。

 

3つの組み込み方


リンク


『リンク』とは、CSSをHTMLとは別の外部ファイルとして作成し、HTMLファイル内からlink要素で参照する方法です。

CSSをファイルとして外部に置くことで、複数のHTMLに対して同じCSSを適用することができます。

この方法では、HTMLのhead要素に、

「<link  rel=”stylesheet”href=”style.css”type=”text/css”>」

のように記述します。

エンベット


『エンベット』とは、HTMLの中に直接CSSを記述する方法です。

head要素内にstyle要素でCSSを指定します。

「<style> ~ </style>」

のように記述し、その中でCSSの指定を行います。

インライン


『インライン』もHTMLの中に直接CSSを記述する方法ですが、こちらは要素ごとにstyle属性でCSSを指定します。

body要素の全てのタグに対して使用できます。

例えば、ある段落の文字色をピンポイントで赤にする場合、

「<p  style=”color:#ff0000;”> ~ </p>」

と記述します。

 

CSS適用方法の選択


link要素で指定する方法


CSSの組み込みは、link要素を使って外部から読み込むのが一般的です。

これは、ページを追加したり、Webサイト全体に共通のスタイルを適用させる場合に、

外部CSSだけを編集すればいいからです。

style要素で指定する方法


style要素で指定すると、そのWebページにだけ適用されます。

これは、各ページごとにCSSを記述しているため、ページ数が多くなるとメンテナス効率は低下します。

style属性で指定


style属性で指定したスタイルは、link要素を使って読み込んだCSSよりも優先されます。

しかし、これはソースコードが複雑になり、スタイル管理も大変になります。

 

まとめ

  1. CSSは、「リンク」、「エンベット」、「インライン」で適用
  2. style属性は優先してスタイルをつけたい場合に使う
  3. link要素でCSSを適用するのが一般的
 

 

 

 

コメントを残す

サブコンテンツ

【PR】

今だけ!値下げ決行!【初心者に嬉しい】画像編集マニュアル

【期間限定】LINEの人気スタンプが無料で手に入る!

お得な返礼品を貰おう!ふるさと納税

【無料登録】オススメのASPはココ!

女性が有利?ポイントサイト攻略マニュアル【無料】

奇跡的に文章力がアップする『魔法の〇〇集』プレゼント【無料】

【初心者でも安心】バイナリーオプションの自動攻略ツール(特典付き)

このページの先頭へ