テンプレートホームページ作成講座

【無料テンプレート】　ホームページ作成講座

ここでは、よりCSSによるレイアウトを理解していただく為にテンプレートを用意いたしました。

このテンプレートは無料でダウンロードしていただけますが、テンプレート内に当サイトへのリンクが貼ってあります。無料のテンプレートとはいえ著作権は放棄していないので、リンク部分は消さないで下さい。

それでは、下記ファイルをダウンロードしてみましょう！

テンプレートをダウンロード

ダウンロードできましたか？圧縮ファイルなので、Lhasaなどの解凍ソフトで開いてください。

フォルダーの中にはindex.htmlとsample.cssというファイル、imageというフォルダに画像ファイルが入っています。

まずはindex.htmlというファイルをブラウザにドラッグ、もしくはダブルクリックして表示してみてください。

すると左のようなページが表示されるはずです。

それが確認できたら、もう一度、index.htmlファイルをメモ帳で開きます。

（index.htmlを右クリックして、プログラムから開く、メモ帳で開きましょう。）すると<head>タグの中に書きのタグを見つけてください。

といった記述があります。

これは、sample.cssという外部のCSSを読み込みます！というタグです。

この<link rel="stylesheet" href="sample.css" type="text/css" />というタグは新しいページを作る際にも入れていきます。もしあなたのサイトが数十ページになったとき、文字の色や背景の画像などを変更したいといった場合でもこの<link rel="stylesheet" href="sample.css" type="text/css" />というリンクさえ各HTMLに記述していれば、sample.cssの編集をするだけで、すべてのページにその設定が反映されます。

ちなみにこの .cssという拡張子のついたファイルの名前はHTMLファイル同様好きな名前がつけられます。たとえば、style.css design.cssなどといった感じで名前は自由です。

また、HTMLは基本的に半角の英数字で記載することをお勧めします。

それでは、次はダウンロードしたファイルのHTML、CSSをカスタマイズをしてみましょう。

カスタマイズのページへ