HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

CSSをHTMLにリンクする方法――マークアップをすっきり整理して読みやすくしよう

Web制作を学び始めたばかりの頃、多くの人が最初に取り入れるのがインラインスタイルです。style属性を使って、HTML要素に直接CSSを記述します。

<!DOCTYPE html>
<html>
<head>
	<title>Inline Style</title>
</head>
<body>	
<h1 style="color:blue;text-align:center;">Star Wars</h1>
<h4 style="color:red;text-align:center;">Return of the Jedi</h4>
</body>
</html>

サイトが複雑になってくると、次は内部CSS（Internal CSS）へと移行します。これは、HTMLドキュメントの<head>セクション内にある<style>タグの間に、すべてのCSSを記述する方法です。

<!DOCTYPE html>
<html>
<head>
	<title>Internal CSS</title>
	<style>
		h1, h4 {
	text-align: center;
}
h1 {
	color: blue;
}
h4 {
color: red;
}
	</style>
</head>
<body>	
<h1>Star Wars</h1>
<h4>Return of the Jedi</h4>
</body>
</html>

これでHTMLはかなりすっきりしましたね。しかし、CSSが500行にもなったらどうでしょう？ ファイルはあっという間に読みにくくなってしまいます。そこで活躍するのが外部スタイルシートです。CSSを別ファイルに切り出し、HTMLファイルからリンクすることで、コードの保守性と可読性を大きく向上させられます。

準備の手順

CSSをHTMLにリンクする方法――マークアップをすっきり整理して読みやすくしよう
  1. index.htmlがあるメインのプロジェクトフォルダ内に、index.cssという新しいファイルを作成します。このindex.cssファイルが、index.html用のすべてのCSSを格納することになります。スタイル対象のHTMLファイル名に合わせてCSSファイル名を付けると管理しやすくなりますが、どのファイルに適用されるか分かっていれば、自由に名前を付けても問題ありません。
  2. HTMLファイルの<head>内にある<style>タグの中にCSSが書かれている場合は、タグを除いたCSSコードだけを切り取って、対応するCSSファイルに貼り付けます。
  3. HTMLファイルの<head>内に、CSSファイルを指し示す<link>タグを作成します。

<link rel="stylesheet" type="text/css" href="./index.css">

このlinkタグは、次の3つの属性で構成されています。

  1. rel属性： このファイルと別のファイルとの間に関係性があることを示します。このリンクがその関係性の内容を定義します。
  2. type属性： リンクされたファイルとHTMLファイルとの関係の種類を表します。
  3. href属性： HTMLファイルの場所から見た、CSSファイルへの相対パス（ファイルの位置）です。
CSSをHTMLにリンクする方法――マークアップをすっきり整理して読みやすくしよう

複数のCSSファイルを扱うときの注意点

CSSファイルをHTMLファイルから分離しても、CSSのカスケード（優先順位の仕組み）は依然として有効であることを忘れないでください。複数のCSSファイルを使用する場合は、以下の2点に注意が必要です。

  1. 個々のCSSファイルごとに、それぞれ<link>タグを設置する。
  2. ファイルを読み込む順序を正しく設定し、意図したスタイルが表示されるようにする。順序が誤っていると、スタイルが正しく反映されないことがあります。

外部CSSを使うメリット

外部スタイルシートを利用すると、HTMLファイルが軽量化されて読みやすくなるだけでなく、複数ページで同じCSSファイルを共有できたり、ブラウザがCSSをキャッシュして表示速度が向上したりといったメリットもあります。大規模なプロジェクトほど、その効果を実感できるでしょう。

以上で完了です。これであなたも、プロジェクトに外部スタイルシートを作成する準備が整いました！

  1. HTMLでダウンロードリンクを作成する方法をわかりやすく解説

    HTMLでダウンロードリンクを作成するには、<a>タグにdownload属性を追加します。この属性を指定すると、リンク先のファイルがブラウザで開かれる代わりに、クリックした時点でダウンロードされるようになります。コード例以下は、画像をクリックするとその画像ファイルがダウンロードされるサンプルコードです。<!DOCTYPE html> <html> <body> <h1>Download Link example</h1> <a href="https://i.picsum.photos/id/225/800

  2. Chrome拡張機能でウェブサイトの行間をカスタマイズして読みやすくする方法

    現代ではウェブ上で長文を読む機会が非常に多く、「行間（ラインハイト）」という小さな要素が、テキストの読み心地に大きな影響を与えます。行間が狭すぎると文字が詰まって窮屈に感じられ、逆に広すぎると視線が散漫になってしまいます。場合によっては、そのサイトを二度と読みたくないと思わせるほどです。 最近のブラウザには、フォントサイズを変更できるアクセシビリティ機能が標準で備わっています。しかし残念ながら、行間を調整できる標準機能はどのブラウザにも存在しません。そこで活躍するのが、シンプルなChrome拡張機能です。 ウェブサイトの行間をカスタム設定する方法 「Line Height Adjuster」は