HTML 入門トップページ

« 戻る 次へ »

目次

  1. ホームページ作成はじめの一歩
  2. HTMLの基礎
  3. 基礎的なタグをマスターしよう
  4. HTML 文書を検証してみよう
  5. スタイルシート
    1. CSS ファイルを準備する
    2. CSS ファイルを読み込む
    3. 表示を確認しておこう
    4. CSS にデザインを記述する
    5. 複数のセレクタに適用する
    6. classを使う
    7. 表のデザイン
    8. 図のデザイン
    9. HTML内にスタイルを記述する
  6. フォームを使ってみよう
  7. 参考サイト

スタイルシート

CSS ファイルを読み込む

index.html ファイルなど，スタイルを設定したいファイルの全てのヘッダにスタイルシートを読み込むための命令 <link rel="stylesheet" href="style.css"> を追加します． 

index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title>スタイルシート</title>
</head>
<body>
  <h1>スタイルシート</h1>
  <h2>スタイルシートって</h2>
  <p>スタイルシートとは．．．</p>
  <h2>使い方</h2>
  <p>スタイルシートの使い方は．．．</p>
</body>
</html>

もちろん，abcフォルダにある link.html で CSS を読み込む場合は，一つ上の階層に移動する必要があるので，../ を追加しなければならないことに注意してください． 

abc/link.html （抜粋）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="../style.css">
<title>リンク</title>
</head>
<body>

（略）

なお，Visual Studio Code では Emmet による省略形が利用できます．まず，link:css と入力して Tab または Enter を押すことで，<link rel="stylesheet" href="style.css"> のように展開されます．さらに，展開された style.css の上にマウスカーソルを移動して表示されるツールチップをクリックするか Ctrlキー（macOS では⌘）を押しながらクリックすると，そのファイルを開くことができます．その時，ファイルがなければ新たに作成することもできます．

« 戻る 次へ »