ＨＴＭＬの記述の基本を学ぼうってことで始めた連載の３回目。
１回目、２回目とつまらない内容で・・・
そろそろここに来るのも嫌になってきた頃でしょうか(´･ω･`)

でも今日、明日は基本を踏まえた上で
見た目を整えるって話になっています。
昨日までの内容を理解した上で読み進めていってくださいね(〃⌒▽⌒)

では、早速昨日までの復習を。

例）
<h1>◆　B　</h1>
<h2>◇表示可能ブラウザ</h2>
<p>
[IE4][IE5][IE6][NN4][NN6][OP7]
</p>
<h2>◇解説</h2>
<p>
Bタグで囲んだ文字を太字にする
スタイルシートでの記述を推奨
強調文字はStrongタグを使用する
</p>
<h2>例</h2>
<h3>◇ソース</h3>
<p>
今日は&lt;B&gt;木曜日&lt;/B&gt;です
</p>
<h3>◇表示</h3>
<p>
今日は木曜日です
</p>

表示結果）

◆　B　

◇表示可能ブラウザ

[IE4][IE5][IE6][NN4][NN6][OP7]

◇解説

Bタグで囲んだ文字を太字にする
スタイルシートでの記述を推奨
強調文字はStrongタグを使用する

例

◇ソース

今日は<B>木曜日</B>です

◇表示

今日は木曜日です

例の味気の無い記述方法です（笑
今日はこの例の内容で少しデザインを変えてみます。
記述の方法はこれまでの復習ばかりです。
しっかり思い出してくださいね(〃⌒▽⌒)

例）
<h1 style="border-bottom:solid 1px #0000ff;border-top:solid 1px #0000ff;width:500px;background-color:#cccccc;color:#009900;">◆　B　</h1>
<h2 style="border-bottom:double 3px #ff00ff;border-top:double 3px #ff00ff;width:500px;color:#0000cc;">◇表示可能ブラウザ</h2>
<p>
[IE4][IE5][IE6][NN4][NN6][OP7]
</p>
<h2 style="border-bottom:double 3px #ff00ff;border-top:double 3px #ff00ff;width:500px;color:#0000cc;">◇解説</h2>
</p>
Bタグで囲んだ文字を太字にする
スタイルシートでの記述を推奨
強調文字はStrongタグを使用する
</p>
<h2 style="border-bottom:double 3px #ff00ff;border-top:double 3px #ff00ff;width:500px;color:#0000cc;">例</h2>
<h3 style="border:dotted 5px #ffcccc;width:500px;">◇ソース</h3>
<p>
今日は<B>木曜日</B>です
</p>
<h3 style="border:dotted 5px #ffcccc;width:500px;">◇表示</h3>
<p>
今日は<b>木曜日</b>です
</p>

表示結果）

◆　B　

◇表示可能ブラウザ

[IE4][IE5][IE6][NN4][NN6][OP7]

◇解説

Bタグで囲んだ文字を太字にする
スタイルシートでの記述を推奨
強調文字はStrongタグを使用する

例

◇ソース

今日は<B>木曜日</B>です

◇表示

今日は木曜日です

どうですか？
少し見やすくなりましたよね(￣▽￣人)
もちろん、文字色、背景色、線の種類などなど・・・
自由に変えることができます(〃⌒▽⌒)

ここで大事なのは、全てのページのデザインを統一する、ってことです。
「楽天」でページを作ると、ある程度デザインは統一されますよね。
ただ、フリーページを作る際など、ばらばらで気まぐれなページ構成にされていないですか？
ばらばらなページ構成がだめだと言ってしまいますと言いすぎになってしまいますが
サイト全体に統一感を持たせると
見てくれている訪問者の方は安心感と好感を持たれるようです。

今回紹介した内容を使って
ページ全体の構成とデザインに統一感を持たせてみてはいかがでしょうか？
サイト全体の印象もがらっと変わると思いますよ(〃⌒▽⌒)

明日は更にこの例を見やすくして、連載の最終回とします。
いえ、一日一タグの最終回ではないですよ？（笑
このつまらない連載の最終回です。
もう一日だけおつきあいくださいm（_ _）m

ではまた明日ー(ﾟ▽^*)ﾉ⌒☆