それでは、コンテンツそのものを考えて記述してみましょう。
例えば、パーツの中身を、今閲覧していただいているようなブログの中身で考えてみます。
ブログのコンテンツとしては、
・タイトル
・テーマ（カテゴリ）
・本文
・日付
等が項目として考えられます。
それでは、パーツのひとつにそれらを並べてみましょう。
<div style="padding:20px;float:left">
<div style="border:solid 3px black;width:100px;height:80px;padding:10px;">
<span style="font-size:1.5em; color:red;">タイトル</span><br />
<span style="font-size:0.8em; color:green;">(テーマ)</span><br />
<span style="font-size:1em; color:black;">ああああああ</span><br />
<span style="font-size:0.8em; color:blue;">2009/8/30</span><br />
</div>
</div>
それでは、これを表示してみましょう。
(クリックで拡大します)
ここで、<span>というタグを用いていますが、これは、<span>と</span>の間の文字属性を変更するものです。それぞれ、文字の大きさと色指定をしています。
さて、文字の大きさの指定ですが、ここでは「em」という単位を使用しています。
（エムと発音する様です。）
emは、1を指定した場合には、相対的に文字の大きさが1倍ということになります。
文字の大きさも、図形の大きさと同様にpx（ピクセル）で指定することも可能ですが、pxで指定した場合には、絶対的に大きさが固定されてしまいます。
どう違うかというと、ブラウザで文字の大きさを全体的に大きくした時に、emで指定した場合には追従して大きくなったり小さくなったりします。pxで指定した場合には、ブラウザで調整しても大きさが変わりません。
文字の大きさは、利用者によって変更したい要素になりますから、emで指定した方が親切ということになります。
その代り、文字が変化して、その周りの枠が固定であれば表示されないこともありますので、枠の縦幅は可変にしておいた方がいいです（可変にする→指定しないでおく）。
また、縦幅を固定にしながらも、オーバフローする時にはスクロールバーを表示させる方法もあります。
（ここでは触れません。overflowで検索すればわかります。）
ちなみに、<br />は改行の意味です（単独で使います）。
上記の様なパーツを、表示した様に複数並べる場合、どうしたら効率良い管理が出来るのでしょうか。
中身を変えて、複数のパーツを用意して並べてみると分かります。
つまり、変化するデータ以外は、全く同じ記述をするということです。
コンピュータ処理として、全く同じ表記部分は、１個だけ記録した方が効率が良いということが言えます。
どの様に効率が良いのかと言うと、変更する時には１個だけ修正すれば良いということで、メンテ効率が上がるということが言えます。
そう考えれば、上記のパーツで、変化する内容（タイトル、テーマ、本文、日付）以外の大きさや色に関する部分は、単なる装飾の為の型紙であることが分かります。
このブログシステムも、その様な考えに基づいて作られています。
ですから、デザインもワンタッチで変更出来る訳です。
その為には、ブログで書いた内容とデザインは、完全に分離して管理しなければなりません。
いや、分離して管理すれば、色々と柔軟性が出てくるというように考えた方がいいでしょう。
その為には、データベースを用いてデータを管理し、そこから必要な時に必要なデータを読みだして、ページを構成して表示してあげるという様な方式が有効になります。
次回は、データベースについて考えてまいります。
今日はここまで！
- - - - - - - - - -
Ads by Ompooooooooookan
記事クリエイター http://ompookan.jp/shop2/kiji01.html
効率の良いホームページ作成ツールはこちら