HTML初級応用編｜iPhoneだけでHP作成

外部スタイルシート

復習ともうひとつの方法

スタイルシート形式でHTMLファイルに直接記述する方法には、タグに直接記述する方法とhead間に記述する方法がありましたね。タグに直接記述すると単独で有効で、head間に記述するとファイル全般で有効になります。

では、別のHTMLファイルにも同じスタイルシートを有効にするにはどうしましょう？複数のHTMLファイルに同じスタイルシートを毎回設定しても良いですが、この手間を省けるのが外部スタイルシートです。

外部スタイルシートとはスタイルを別のファイル(CSSファイル)にして複数のHTMLファイルを同じスタイルにする事ができます。 HTMLファイルとCSSファイルで構成します。
<link rel="stylesheet" href="ファイル名.css"> とhead間に記述してふたつのファイルを関連付けます。(同じフォルダの場合)

外部スタイルシートの例

前章のサンプルを外部スタイルシートに変えてみましょう。

HTMLファイル <!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>タイトル</title>
<link rel="stylesheet" href="test.css">
</head>
<body>
<h1>見出し(h1)</h1>
<p>文章</p>
<h2>見出し(h2)</h2>
<p>文章</p>
</body>
</html>

外部CSS(test.css) h1 {color:#0000ff;}
h2 {color:#00ff00;}
p {font-size:10px; color:#ff0000;}

このようにHTMLファイルとCSSファイルを別々に作成してコードで結びつけてスタイルシートを有効にする方法があります。

注意今回のサンプルは同じ階層(同じフォルダ)にCSSファイルがある場合です。もしもCSS専用フォルダにCSSファイルを入れると<link rel="stylesheet" href="フォルダ名/ファイル名.css" />になります。階層の説明は次の【リンク】で説明致します。

サンプルツリー

ツリーを使って説明します。

ツリー(Tree)とはウェブサイトの階層を図に表現する事で木に見立てているようです。

サンプルツリー

こんな内容の簡単なホームページは無いと思いますが、説明用に作成してみました。

サイト内リンク

サンプルツリーのindex.htmlからサンプルフォルダのpage.htmlにリンクを張ってみました。

コード例 <a href="sample/page.html">リンク先タイトル</a>
または
<a href="./sample/page.html">リンク先タイトル</a>

では、page.html側からindex.htmlにリンクを張ってみます。

コード例 <a href="../index.html">リンク先タイトル</a>
または
<a href="../">リンク先タイトル</a>

階層が離れると混乱しそうですが、【../】や【./】の意味が理解できればリンクだけで無くCSS,画像などを使いこなせるようになります。

【../】は１階層上です。２階層上なら【../../】になります。
【./】は同じ階層の時です。つけなくても一緒ですが、混乱する可能性があるので触れてみました。

index.html index.htmlはそのフォルダのTOPページです。ですから、index.htmlを省略できます。<a href="index.html">リンク先タイトル</a>と<a href="./">リンク先タイトル</a>は同じ意味になります。

画像を表示

同じようにサンプルツリーのindex.htmlにsample.jpgを貼り付けるコードで画像の貼り付けを見てみましょう。

index.html <img src="imgs/sample.jpg">

では、page.htmlにsample.jpgを貼り付けるコードを見てみましょう。

page.html <img src="../imgs/sample.jpg">

御覧のコードで階層の形式が理解できるでしょうか？階層の形式とCSS,ページリンク,画像貼り付けをサラッと紹介しました。

お問い合わせ

初級ステップアップはこれで終わりになります。もっと詳しく知りたい方はまでメールでお問い合わせ下さい。

御観覧ありがとうございました。