テンプレート－タイトルパーツ

CSSで作ったホームページのパーツテンプレート

CSSレイアウト実践講座トップ > CSSテンプレート > タイトルパーツ >

テンプレート－タイトルパーツ

ウェブページを装飾するパーツのテンプレートです。2段組、3段組レイアウトのテンプレートと組み合わせて、ステキなサイトをお作りください。

なお、下のテキストエリアからコピーできるのはCSSのみとなっております。タイトル部分はDIVタグで作り、適当なクラス名を付け、下からコピーしたテンプレートの「class_name」の部分を変更してください。

リンクのお願い
このパーツテンプレートをご利用の際は、必須ではありませんが当サイトへのリンクを貼っていただけるとありがたいです。よろしくお願いします！

サンプル
レイアウトテンプレートと、下のタイトル部テンプレートを利用してサンプルを作ってみました。こんな感じでアレンジを加え、あなただけのホームページをCSSで作ってみてください。なお、サンプルではテンプレートに記載の設定に加え、フォントサイズを10pt、1行の高さを15ptに、また、リストタグのマージンを指定してあります。

サンプル（2段組180px：490px＋付箋っぽいテンプレート）

タイトル部分のテンプレート
ちょっとだけ立体的に見えるテンプレート

サンプル

.class_name { background:#efefef; padding:0 5px; font-weight:bold; border-right:solid 1px #ccc; border-bottom:solid 1px #ccc; }

サンプル

.class_name { background:#fee; padding:0 5px; font-weight:bold; border-right:solid 1px #ccc; border-bottom:solid 1px #ccc; }

サンプル

.class_name { background:#ffc; padding:0 5px; font-weight:bold; border-right:solid 1px #ccc; border-bottom:solid 1px #ccc; }

サンプル

.class_name { background:#cef; padding:0 5px; font-weight:bold; border-right:solid 1px #ccc; border-bottom:solid 1px #ccc; }

サンプル

.class_name { background:#cec; padding:0 5px; font-weight:bold; border-right:solid 1px #ccc; border-bottom:solid 1px #ccc; }

サンプル

.class_name { background:#fe9; padding:0 5px; font-weight:bold; border-right:solid 1px #ccc; border-bottom:solid 1px #ccc; }

付箋紙っぽいテンプレート

サンプル

.class_name { background:#efefef; padding:0 5px; font-weight:bold; border-right:solid 1px #ccc; border-bottom:solid 1px #ccc; border-left:solid 10px #666; }

サンプル

.class_name { background:#fee; padding:0 5px; font-weight:bold; border-right:solid 1px #ccc; border-bottom:solid 1px #ccc; border-left:solid 10px #f66; }

サンプル

.class_name { background:#ffc; padding:0 5px; font-weight:bold; border-right:solid 1px #ccc; border-bottom:solid 1px #ccc; border-left:solid 10px #fc6; }

サンプル

.class_name { background:#cef; padding:0 5px; font-weight:bold; border-right:solid 1px #ccc; border-bottom:solid 1px #ccc; border-left:solid 10px #66f; }

サンプル

.class_name { background:#cec; padding:0 5px; font-weight:bold; border-right:solid 1px #ccc; border-bottom:solid 1px #ccc; border-left:solid 10px #6c6; }

サンプル

.class_name { background:#fe9; padding:0 5px; font-weight:bold; border-right:solid 1px #ccc; border-bottom:solid 1px #ccc; border-left:solid 10px #f60; }

点線囲みテンプレート

サンプル

.class_name { background:#efefef; padding:0 5px; font-weight:bold; border:dotted 2px #666; }

サンプル

.class_name { background:#fee; padding:0 5px; font-weight:bold; border:dotted 2px #f66; }

サンプル

.class_name { background:#ffc; padding:0 5px; font-weight:bold; border:dotted 2px #fc6; }

サンプル

.class_name { background:#cef; padding:0 5px; font-weight:bold; border:dotted 2px #66f; }

サンプル

.class_name { background:#cec; padding:0 5px; font-weight:bold; border:dotted 2px #6c6; }

サンプル

.class_name { background:#fe9; padding:0 5px; font-weight:bold; border:dotted 2px #f60; }

CSSレイアウトテンプレート

SSIでらくらくホームページ更新術

CSSレイアウト実践講座トップ

テンプレート － タイトルパーツ

CSSで作ったホームページのパーツテンプレート