TM_BBの静的HTMLサイトです

前項では、最もシンプルな『HTMLの記述』でタグのお話をしました。
使い回し画像ですが、何の装飾もしなくても下のように、『ページタイトル(H1)』『見出し(H2)』の文字サイズ程度は表現できます。

でも、こんなページじゃ意味ないですよね＾＾；
そこでレイアウトデザインの『テンプレート』の出番な訳です。

下は、『tpl_001』のテンプレート原本です。
『style.css』が今回の主役の『CSS』です＾＾v

『〜〜.css』というのがスタイルシートです。素人のおばちゃんのわたしは、スタイルシート：スタイリストという連想で、スタイル・デザインを司るものと脳にインプットしています。
『無料ホームページテンプレート.com』さんでは、『style.css』だけをフォルダ直下に置いておられます。
HTMLサイトの場合通常は、『js(Java Script)』のように『css』フォルダに格納するのですが、、、。
「あ！そうか！」と、思いました。
かなりの数のテンプレートが、WordPressと同じデザインなんですよね。

WordPressではテンプレートをテーマと呼ぶのですが、CSSは『style.css』だけというのが定番です。デザインに独自のアレンジをする場合、『子テーマ』を作成します。

このサイトでは、当初から、追加のCSSは必須だったので、『css』フォルダの設置も考えたのですが、HTML←→WordPress という使い回しの研究のため、あえてCSSをフォルダ直下にしました。

このサイトでは、HTMLぽい事 というこのカテゴリーだけを色違いのブルーにしています。
下は、『ホームページ用』という名前のローカル(PC上の)フォルダだとします。

これにはフォルダ直下に、『tpl-blue』という空のフォルダを作成して、ブルー用に改造した『images』フォルダと『style.css』『sub.css』を入れていると仮定します。

仮定した上で、『index.html』の複製を色違いのブルーで作成する場合、『index2.html』とでもしておきましょう。

下図の上が元のindex.htmlです。style.css sub.cssは、index.htmlと同じ階層なので『style.css、sub.css』となっています。
一方、下図下の場合は、index2.htmlとtpl-blueが同じ階層で、その下の階層の『tpl-blue/style.css』、『tpl-blue/sub.css』を参照するのでこのように記述します。

階層は、PCのフォルダ＞フォルダ＞...と同じ意味合いです。
なので、『ホームページ用』のローカルフォルダと実際にFTP転送するフォルダは同じ中身にしておく方がわかりやすいです。

上図各階層で同列なのは『 〜〜.html』『 〜〜.css』『 フォルダ』です。
図は、２つ下の階層を表現するために『 tpl-blue』を展開した例ですが、フォルダー直下の『 images』の中身の画像を参照する場合の、記述は以下です。
<img src="images/gazou.png" alt="" width="" height="" />
つまり各階層のファイルとフォルダは同列でも、フォルダの中身は１つ下の階層となります。

これを踏まえて『test.html(index2.html)』というHTMLを『 tpl-blue』の中身を参照して作成する場合、記述は、
<link rel="stylesheet" href="tpl-blue/style.css" type="text/css" media="screen">
<link rel="stylesheet" href="tpl-blue/sub.css" type="text/css" media="screen">
となります。
tpl-blue/style.css、tpl-blue/sub.cssで制御したスタイルを使うための記述なので、背景画像等は、自動的に『 images』の背景画像を表示します。