七鍵＠楽天

コメント新着

うしまる＠ @ Re:タグを覚えよう【第１５回目】　-　中央寄せ表示の際の小技(08/21) タグの検索でぐぐってたらコチラに辿り着…

k.kyouka @ すきやき占い『しいたけ』の重要度27% 『しいたけ』…

なな@ Re:迷っています(11/01) レオ　がいいですよ☆★

マロン@ かわいいキュート

ｆｏｏｌｉｓｈ☆ｆｏｏ @ Re[1]:お久しぶりです。(07/15) ＞実演を踏まえてテストをしておりました…

バックナンバー

Dec , 2024
Nov , 2024

Oct , 2024

フリーページ

HTMLタグに挑戦

< 新しい記事

新着記事一覧(全310件)

過去の記事 >

Aug 28, 2004

タグを覚えよう【第２２回目】　-　プロのようなページ作成テクニック（其の四）

(6)

テーマ：タグに挑戦！(102)

カテゴリ：タグ教室

なんだかぱっとしない連載もついに最終回を迎えました。

まぁ、とりあえずは１～３回までの復習を・・・

例）
<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>

</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>

今日は<b>木曜日</b>です
</p>

表示結果）

◆　B　

◇表示可能ブラウザ

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

◇解説

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

例

◇ソース

今日は<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: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　

◇表示可能ブラウザ

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

◇解説

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

例

◇ソース

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

◇表示

今日は 木曜日 です

ここまで引っ張っておいてたったこれだけか・・・
って思われるかもしれませんが(´･ω･`)
たったこれだけなんですよ（笑
でもなんだか見やすくなったでしょ(〃⌒▽⌒)

当然、
margin-top
margin-right
margin-bottom
などで、いろいろな箇所の余白を指定することもできるのです。
たくさん改行を記入したりたくさんスペースを挿入することで余白作ってないですか？
こちらの方がスマートですよね(￣▽￣人)
ページのワンポイントと言うよりは
サイト全体のデザインに使用してください(〃⌒▽⌒)

明日は楽天で変更できるスクロールバーの色について解説します。
うちのTOPページに色が違うスクロールあるでしょ？
色の組み合わせによってはおしゃれなワンポイントになりますので
楽しみにしておいて下さいね(〃⌒▽⌒)

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

お気に入りの記事を「いいね！」で応援しよう