229528 ランダム
 ホーム | 日記 | プロフィール 【フォローする】 【ログイン】

七鍵@楽天

【毎日開催】
15記事にいいね!で1ポイント
10秒滞在
いいね! --/--
おめでとうございます!
ミッションを達成しました。
※「ポイントを獲得する」ボタンを押すと広告が表示されます。
x

PR

コメント新着

k.kyouka@ すきやき占い 『しいたけ』の重要度27% 『しいたけ』…
なな@ Re:迷っています(11/01) レオ がいいですよ☆★
マロン@ かわいい キュート
foolish☆foo@ Re[1]:お久しぶりです。(07/15) >実演を踏まえてテストをしておりました…

バックナンバー

May , 2024
Apr , 2024
Mar , 2024

フリーページ

タグ辞書【A】


タグ辞書【ABBR】


タグ辞書【ACRONYM】


タグ辞書【ADDRESS】


タグ辞書【APPLET】


タグ辞書【AREA】


タグ辞書【B】


タグ辞書【BASE】


タグ辞書【BASEFONT】


タグ辞書【BDO】


タグ辞書【BGSOUND】


タグ辞書【BIG】


タグ辞書【BLINK】


タグ辞書【BLOCKQU…】


タグ辞書【BODY】


タグ辞書【BR】


タグ辞書【BUTTON】


タグ辞書【CENTER】


タグ辞書【CITE】


タグ辞書【CODE】


タグ辞書【COL】


タグ辞書【COLGROUP】


タグ辞書【COMMENT】


タグ辞書【CAPTION】


タグ辞書【DD】


タグ辞書【DEL】


タグ辞書【DFN】


タグ辞書【DIR】


タグ辞書【DIV】


タグ辞書【DL】


タグ辞書【DT】


タグ辞書【EM】


タグ辞書【EMBED】


タグ辞書【FIELDSET】


タグ辞書【FONT】


タグ辞書【FORM】


タグ辞書【FRAME】


タグ辞書【FRAMESET】


タグ辞書【H】


タグ辞書【HEAD】


タグ辞書【HR】


タグ辞書【HTML】


タグ辞書【I】


タグ辞書【IFRAME】


タグ辞書【ILAYER】


タグ辞書【IMG】


タグ辞書【INPUT】


タグ辞書【INS】


タグ辞書【ISINDEX】


タグ辞書【KBD】


タグ辞書【LABEL】


タグ辞書【LAYER】


タグ辞書【LEGEND】


タグ辞書【LI】


タグ辞書【LINK】


タグ辞書【LISTING】


タグ辞書【MAP】


タグ辞書【MARQUEE】


タグ辞書【MENU】


タグ辞書【META】


タグ辞書【MULTICOL】


タグ辞書【NOBR】


タグ辞書【NOEMBED】


タグ辞書【NOFRAMES】


タグ辞書【NOLAYER】


タグ辞書【NOSCRIPT】


タグ辞書【OBJECT】


タグ辞書【OL】


タグ辞書【OPTGROUP】


タグ辞書【OPTION】


タグ辞書【P】


タグ辞書【PARAM】


タグ辞書【PLAINTEXT】


タグ辞書【PRE】


タグ辞書【Q】


タグ辞書【RB】


タグ辞書【RP】


タグ辞書【RT】


タグ辞書【RUBY】


タグ辞書【S】


タグ辞書【SAMP】


タグ辞書【SCRIPT】


タグ辞書【SELECT】


タグ辞書【SMALL】


タグ辞書【SPACER】


タグ辞書【SPAN】


タグ辞書【STRIKE】


タグ辞書【STRONG】


タグ辞書【STYLE】


タグ辞書【SUB】


タグ辞書【SUP】


タグ辞書【TABLE】


タグ辞書【TBODY】


タグ辞書【TD】


タグ辞書【TEXTAREA】


タグ辞書【TFOOT】


タグ辞書【TH】


タグ辞書【THEAD】


タグ辞書【TITLE】


タグ辞書【TR】


タグ辞書【TT】


タグ辞書【U】


タグ辞書【UL】


タグ辞書【VAR】


タグ辞書【WBR】


タグ辞書【XMP】


タグ辞書【コメントアウト】


タグ辞書【!DOCTYPE】


piyo


サンプル


HP作成のためのコラム


スタイルシートをゼロからお勉強


HTMLタグに挑戦


Aug 28, 2004
XML
カテゴリ:タグ教室
なんだかぱっとしない連載もついに最終回を迎えました。
しつこいようですが、一日一タグの最終回じゃないですよ(笑
まぁ、とりあえずは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 


◇表示可能ブラウザ



[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: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ページに色が違うスクロールあるでしょ?
色の組み合わせによってはおしゃれなワンポイントになりますので
楽しみにしておいて下さいね(〃⌒▽⌒)

ではまた明日ー(゚▽^*)ノ⌒☆





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

最終更新日  Aug 28, 2004 09:14:36 PM
コメント(6) | コメントを書く
[タグ教室] カテゴリの最新記事



© Rakuten Group, Inc.