Home > (パンくず)

h2:タイトル

本文とは別のようこそメッセージ的な文章を入れてください。無い場合は、ここの部分は無くして以下のものが繰り上がります。
本文の文字サイズは14px、行送りは24pxに指定しています。デザイン的には少し小さめの方がかっこいいかもしれませんが、あまり機能的でないですよね。これくらいのサイズの方が読みやすいと思います。

h3:タイトル

文字サイズは14px、行送りは24pxに指定しています。テキストインデントを指定して、段落のアキは10pxを指定しています。お好みに合わせてスタイルシートの設定を変更してください。Internet Explorerで文字サイズの変更ができるようにするには、サイズをpxで指定せずに%で指定しましょう。

写真が左の場合

写真が左側に来る場合の文章の回り込みを設定しています。

このテンプレートでは、いっさいの画像も使用しておりません。ページの背景やタイトルバックも、全てスタイルシートで装飾しています。全く画像を使用していないことで、利用者の負担を軽減しようと考えました。あとはあなたのお好きなカラーや装飾をスタイルシートで指定するだけです。スタイルシートには主立った指定をコメントしていますので、スタイルシートが苦手という方にもわかりやすくしています。

写真が右の場合

写真が右側に来る場合の文章の回り込みを設定しています。

リンクのカラーはメニューと同じ色に設定しています。本文の文章を入れてください。本文の文章を入れてください。本文の文章を入れてください。本文の文章を入れてください。本文の文章を入れてください。本文の文章を入れてください。本文の文章を入れてください。本文の文章を入れてください。本文の文章を入れてください。本文の文章を入れてください。本文の文章を入れてください。本文の文章を入れてください。本文の文章を入れてください。

h4, h5, h6:タイトル

h4, h5, h6のタイトルはh2, h3タイトルよりも小さくしていますが、場合によっては同じでもいいかもしれませんね。これも用途に合わせてスタイルシートの設定を変更してください。

下はリスト項目の設定です。テンプレートに含まれるファイルリストです。

  • index.html-----------このHTMLファイルです。
  • style.css-------------スタイルシートです。

基本的なページに最低限必要なスタイルだけを取り入れて、シンプルなページを作成しました。構造もわかりやすくしていますので、いろんな応用が利くと思います。