HTMLにCSSファイルを追加する方法

ハイパーテキスト・マークアップ言語（HTML）は、ウェブページを構成するさまざまな要素を定義します。カスケーディング・スタイル・シート（CSS）は、これらの要素がどのように見えるべきかを記述するコーディング言語です。CSSファイルは、外部スタイルシート（HTMLとは別のファイルに含まれるCSS）、または内部スタイルシート（HTMLファイル内に含まれるCSS）としてHTMLに追加することができます。ウェブサイトのデザインをカスタマイズするために、HTMLにCSSファイルを追加する方法をご紹介します。

方法1

HTMLに外部スタイルシートを追加する

1. CSSファイルを作成します。CSSファイルを".css "ファイルタイプで用意し、保存します。
2. CSSファイルをウェブサイトにアップロードします。
3. CSSファイルのURLをコピーします。URLはwww.yoursite.com/stylesheet.css。

   • リンク（URL）からメインドメイン名を削除するのは良いフォームです。したがって、「http://mysite.com/css/default.css」というURLは「/css/default.css」と短縮されます。先頭にスラッシュ（"/"）を入れる必要があります。これは相対パスと呼ばれます。
4. ファイルへのリンクを追加します。HTMLファイルの</head>タグを探し、そのすぐ上に空行を作ります。その空行に<LINK rel=stylesheet type="text/css" href="www.yoursite.com/stylesheet.css">を追加し、"www.your... "をCSSファイルへのリンクに変更します。
5. HTMLファイルを保存し、あなたのウェブサイトにアップロードする。
6. あなたのサイトのすべてが、想定したとおりに見えることを確認してください。そうでない場合は、もう一度戻って、修正や調整が必要な箇所を探す必要があるかもしれません。

方法2

HTMLに内部スタイルシートを追加する

1. <style>タグを作成します。HTMLファイルの</head>タグを探します。その上に数行追加し、次のように入力します：

<STYLE type="text/css"> </STYLE> と入力します。

1. 先ほど追加した2つのタグの間に、すべてのCSSを追加します。
2. HTMLファイルを（HTMLとして）保存します。
3. あなたのウェブページが期待通りに見えるか確認してください。そうでない場合は、必要に応じて変更してください。

この記事は、CC BY-NC-SAの下で公開されている " How to Add a CSS File to HTML " を改変して作成しました。特に断りのない限り、CC BY-NC-SAの下で利用可能です。