ウェブデザイナー募集 ホームページ作成HOME

ホームページ作成講座 無料テンプレートで Web Design

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

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

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

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

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

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

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

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

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

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

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

 

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

<link rel="stylesheet" href="sample.css" type="text/css" />

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

これは、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をカスタマイズをしてみましょう。

カスタマイズのページへ

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

このテンプレートはサンプルテンプレートと殆ど同じ記述でCSSとHTMLが書かれています。
カスタマイズのページで見本ページをカスタマイズできたら、他のテンプレートも使ってみてください。

【無料テンプレート 右サイドメニュー】 ホームページ作成講座 

女の子らしいかわいいホームページのテンプレートです。 健康、美容、ビューティ、ダイエット、サプリメント等のホームページに最適です。

サンプルを拡大
無料テンプレート
をダウンロードしてください。

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

【無料テンプレート 左サイドメニュー】 ホームページ作成講座 

シンプルなテンプレートです。ビジネス、株式投資や為替、ちょっと堅い内容のサイトを書くときにやわらかくシンプルなこのテンプレートがオススメです。

サンプルを拡大

無料テンプレートをダウンロードしてください。

無料テンプレート 2テンプレート2ダウンロード

無料テンプレート ホームページ作成講座 上級編

このテンプレートはサンプルテンプレートより少し複雑な記述でCSSとHTMLが書かれています。
上の2つをカスタマイズできたら、下のテンプレートも使ってみてください。
このテンプレートには下部にPRリンクが入っていますが、削除は禁止ですので、ご了承いただいた方のみお使いください。
ほとんどがYahoo!カテゴリ登録サイトへのリンクなので、質の高いサイトへの発リンクということで、SEO効果もあります。

ホームページ作成 無料テンプレート 新着更新【無料テンプレート 右サイドメニュー】 ホームページ作成講座 

グローバルなイメージのテンプレートです。ビジネス、株式投資や為替、インターネット系、自然科学系のサイトを書くときにこのテンプレートがオススメです。

サンプルを拡大

無料テンプレートをダウンロードしてください。

無料テンプレート 3テンプレート3ダウンロード

ホームページ作成 無料テンプレート 新着更新【無料テンプレート 右サイドメニュー】 ホームページ作成講座 

森林のイメージで作成されたテンプレートです。ボランティア、医療福祉、個人サークル、NPO法人などのサイトを書くときにこのテンプレートがオススメです。

サンプルを拡大

無料テンプレートをダウンロードしてください。

無料テンプレート 4テンプレート4ダウンロード

ホームページ作成 無料テンプレート 新着更新【無料テンプレート 右サイドメニュー】 ホームページ作成講座 

クールなイメージで作成されたテンプレートです。建築、カフェ、ホテル、美術、演劇、人文系のサイトを書くときにこのテンプレートがオススメです。

サンプルを拡大

無料テンプレートをダウンロードしてください。

無料テンプレート 5テンプレート5ダウンロード

ホームページ作成 無料テンプレート 新着更新【無料テンプレート 右サイドメニュー】 ホームページ作成講座 

宇宙的なイメージで作成されたテンプレートです。物理、宇宙、UFO、車、機械などのサイトを書くときにこのテンプレートがオススメです。

サンプルを拡大

無料テンプレートをダウンロードしてください。

無料テンプレート 6テンプレート6ダウンロード

ホームページ作成 無料テンプレート 新着更新【無料テンプレート 左サイドメニュー】 ホームページ作成講座 

オーソドックスで上品なイメージで作成されたテンプレートです。どんなサイトにもこのテンプレートはオススメです。

サンプルを拡大

無料テンプレートをダウンロードしてください。

無料テンプレート 7テンプレート7ダウンロード


ホームページ作成講座
ホームページ作成講座【HTMLタグ講座】
ホームページ作成講座【ブラウザーで表示してみよう】
ホームページ作成講座【レイアウトをしてみよう】
ホームページ作成講座【無料ホームページのテンプレートを使おう】
ホームページ作成講座【無料テンプレートをカスタマイズしよう】
ホームページ作成講座
HTMLタグ講座
ブラウザで表示
レイアウト
テンプレート
カスタマイズ講座
ホームページ作成講座HOME
ホームページ作成講座HOME