メインカラム可変のテンプレート
このレイアウト用の CSS は、common フォルダの中に style.css という名前で保存されております。CSSには、大まかな要素ごとにコメントを入れておりますので、箇所の特定はしやすいと思います。お好みに合わせて設定を変更してください。
基本的な要素について
このテンプレートでは header にあるタイトル部分は文字で指定しています。ここに独自のロゴ画像を配置する場合は、スタイルシートを各自で変更してください。
本文の文字サイズは100%に指定し、行間は少し広めに設定しています。文字サイズ100%とはどういうことかというと、ブラウザの基本設定に合わせているということです。ブラウザの基本設定で大きめに設定している方は文字が大きく見えるし、小さく設定している方には小さく見えることになります。段落の上下のアキは指定しておりません。また段落には一文字落ちのインデントを指定しています。リンクのカラーは、テーマカラーに合わせた同系色で指定しています。
画像の置換
本文に画像を設置する場合は、回り込みの指定ができます。画像を右側に配置したい場合は class="alignright" を指定、左側に配置したい場合は class="alignleft" を指定してください。いずれの指定もしない場合は回り込みは行われず、画像が左側に配置されその右側は余白となります。画像を中央に配置したい場合は class="aligncenter" を指定してください。大きな画像を配置する場合はこれが便利かもしれませんね。
また、画像と次のタイトルが重なった場合はそのまま回り込みますが、画像の回り込みをタイトルで区切りたい場合は clear の指定をしてください。このテンプレートでは、「画像の配置」というタイトルに clear の指定を入れています。詳しくはスタイルシートにコメントで記載していますのでご覧ください。
このテンプレートの主な特長は下記の通り
- HTML5＋CSS3で構成されたシンプルな仕上がりです。
- メインカラムが可変レイアウト。ワイドな画面にもスリムな画面にも対応しています。
- PCブラウザ以外のタブレットやスマートフォンにも対応させています。
- カラーはパステル調でやさしい“シルバーピンク”を基調にしています。