|
テーマ:タグに挑戦!(102)
カテゴリ:タグ教室
なんだかぱっとしない連載もついに最終回を迎えました。
しつこいようですが、一日一タグの最終回じゃないですよ(笑 まぁ、とりあえずは1~3回までの復習を・・・ 例) <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◇表示可能ブラウザ
◇解説Bタグで囲んだ文字を太字にする スタイルシートでの記述を推奨 強調文字はStrongタグを使用する 例◇ソース
◇表示
ある意味これで完成ということにしてもいいのですが・・・ なんだか見にくくないですか? ほんのちょっとした気配り、ってわけで次のように変更してみましょう。 例) <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:480px;color:#0000cc;margin-left:20px;">◇表示可能ブラウザ</h2> <p style="margin-left:30px;"> [IE4][IE5][IE6][NN4][NN6][OP7] </p> <h2 style="border-bottom:double 3px #ff00ff;border-top:double 3px #ff00ff;width:480px;color:#0000cc;margin-left:20px;">◇解説</h2> <p style="margin-left:30px;"> Bタグで囲んだ文字を太字にする スタイルシートでの記述を推奨 強調文字はStrongタグを使用する </p> <h2 style="border-bottom:double 3px #ff00ff;border-top:double 3px #ff00ff;width:480px;color:#0000cc;margin-left:20px;">例</h2> <h3 style="border:dotted 5px #ffcccc;width:460px;margin-left:40px;">◇ソース</h3> <p style="margin-left:60px;"> 今日は<B>木曜日</B>です </p> <h3 style="border:dotted 5px #ffcccc;width:460px;margin-left:40px;">◇表示</h3> <p style="margin-left:60px;"> 今日は<b>木曜日</b>です </p> 表示結果) ◆ B◇表示可能ブラウザ
◇解説
例◇ソース
◇表示
ここまで引っ張っておいてたったこれだけか・・・ って思われるかもしれませんが(´・ω・`) たったこれだけなんですよ(笑 でもなんだか見やすくなったでしょ(〃⌒▽⌒) 当然、 margin-top margin-right margin-bottom などで、いろいろな箇所の余白を指定することもできるのです。 たくさん改行を記入したりたくさんスペースを挿入することで余白作ってないですか? こちらの方がスマートですよね( ̄▽ ̄人) ページのワンポイントと言うよりは サイト全体のデザインに使用してください(〃⌒▽⌒) 明日は楽天で変更できるスクロールバーの色について解説します。 うちのTOPページに色が違うスクロールあるでしょ? 色の組み合わせによってはおしゃれなワンポイントになりますので 楽しみにしておいて下さいね(〃⌒▽⌒) ではまた明日ー(゚▽^*)ノ⌒☆ お気に入りの記事を「いいね!」で応援しよう
[タグ教室] カテゴリの最新記事
|