HTML・CSSテンプレート

HTML、CSSファイルのテンプレートを掲載しています。無料で自由にダウンロードして使えます。ご自身のホームページに合わせて自由にカスタマイズ、修正してご利用下さい。ご利用に当たってのご連絡、当サイトへのリンク義務等はありません。

良く見かけるデザイン

 「ホームページ作成」の実践で説明したHTMLとCSSを一部フォント等変更していますが、殆どコピーしたものです。

 「テンプレートのダウンロード

 トップページのイメージは以下の通りです。

テンプレート1

 本文ページのイメージは以下の通りです。

テンプレート2

 このデザインを基にホームページを作られた方がいますのでご紹介します。「オフロードバイク入門サイト」さんです。どのような出来栄えになるか参考になると思います。

写真や画像を多用するデザイン

 写真や画像を多用するデザインです。

 「テンプレートのダウンロード

 トップページのイメージは以下の通りです。背景を写真にして見た目がインパクトあるようにしています。写真1〜6の部分は7枚以上になると行が追加されていきます。

テンプレート3

 本文ページのイメージは以下の通りです。本文を記述する部分を半透明にして背景の写真を透過するようにしていますが、rbgaを使っています。WindowsXP以前のパソコンでは本文を記述する部分が半透明にならないため、フォントの色等に留意して下さい。

テンプレート4

  このデザインを基に作成したサイトが「グアム旅行記」と「沖縄旅行記」です。どのような出来栄えになるか参考にして下さい。

良く見かけるデザインに写真や画像を組み合わせたデザイン

 良く見かけるデザインと写真や画像を多用するデザインをマージしたデザインです。

 「テンプレートのダウンロード

 トップページのイメージは以下の通りです。背景を写真にして見た目がインパクトあるようにしていますが、項目部分は文字で表示してリンクするようにしています。

テンプレート3

 本文ページのイメージは以下の通りです。写真や画像を多用するデザインとは違って半透明の背景を使っていません。

テンプレート4

利用方法

 ファイルをダウンロードするとzip形式になっているため解凍して下さい。

 解凍した後は、index.htmlやend.htmlをダブルクリックするとブラウザで表示されます。

 タイトルや必要箇所の文書、リンク等を自身のホームページに合わせて変更してご利用下さい。HTMLファイルやCSSファイルに修正が必要な箇所をコメントで記載しています。又、ページを追加する時はend.htmlをコピーして下さい。

 修正が終わったらサーバーにアップロードするとホームページとして公開出来ます。公開方法は「ホームページ公開」を参照して下さい。

 デザインを変更したい場合、HTMLファイルやCSSファイルは自由に変更して使って頂いて大丈夫です。変更する時に不明な点があれば「ホームページ作成」の各ページを参照して下さい。

 又、ファビコンを使いたい時は「ファビコンの作り方と設置方法」、アクセスカウンターを使いたい時は「アクセスカウンター作り方と素材」、パンくずリストを使いたい時は「パンくずリストの設置」を参照して下さい。

 自身のホームページを作る上でテンプレートとして自由にご利用頂いて大丈夫ですが、ダウンロードしたファイル自体の著作権を主張したり、自身のホームページでテンプレートとして公開する等はしないで下さい。

  • このエントリーをはてなブックマークに追加