232862

ホーム | 日記 | プロフィール

【フォローする】【ログイン】

七鍵＠楽天

コメント新着

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

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

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

最終更新日 Aug 28, 2004 09:14:36 PM
コメント(6) | コメントを書く

[タグ教室] カテゴリの最新記事

■コメント

おはようございま～す

ゆりん☆ さん

スタイルシートって、こんな風になってるんだ･･･
という事が４回の講習で分かりました。
テンプレを借りていて、少々カスタムしようと思っても、
『え～っ、何これ～』でした。
色やセル間隔、変更してみましたよ～(*^^)v

あ、分からないタグがあったのですが、
何だったか忘れました。
明日聞きますね(~_~;)

ところで、<B>と大文字になると、
どうして反映されないのですか？
私は、大文字小文字ごちゃ混ぜで使ってますが
反映されてるんですが･･･？？？
(Aug 29, 2004 09:59:09 AM)

返事を書く

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

れーちゃんさん

ヽ(*⌒∇⌒*)ﾉやっほー♪七鍵ちゃん♪

実は今朝からこの楽天以外での自分のHPを
七鍵ちゃんが教えてくれてる知識を元に
一生懸命作ってます☆＾∇゜）ニパッ！！
やってみて…七鍵ちゃんが１回目から書いてくれている
ことが、理解できかけてきたよ～ヽ(*⌒∇⌒*)ﾉ
少し時間かかったけれど
やっと、TOPページが出来たよ～♪

いつもありがとうね～（@⌒ー⌒@）

でも内容は私を知ってる人には公開しないつもりです。
ごめんなさい(´･ω･`)

これからはもっと真面目に勉強しに来ます(ﾟ▽^*)ﾉ⌒☆

(Aug 29, 2004 12:15:01 PM)

返事を書く

Re:おはようございま～す(08/28)

＃七鍵さん

ゆりん☆さん

いらっしゃいませー(〃⌒▽⌒)
スタイルシートは更に覚えるのめんどいですよね(´･ω･`)
数も書き方もたくさんありますし。
ただ、全部覚えなくても

http://www.7key.jp/program/hp/style_use.html
http://www.7key.jp/program/hp/style_abc.html

の辺りをカンペとしてご利用ください(〃⌒▽⌒)

ちなみに<B>　と　<b> をHTMLでは区別しません。
ですので挙動は同じですよ(〃⌒▽⌒)
フリーページでは大文字でも小文字でも通常通り太字になりました。

ゆりんさんどこで試しました？
少し気になったのが・・・
楽天ではHTMLとXMLを混在して使ってますので
動かない場合も十分考えられます。

#　XMLではタグを全て小文字で書くため。

まぁ、不安なようでしたら全て小文字で統一された方がいいかもしれませんね(〃⌒▽⌒)

(Aug 29, 2004 03:38:25 PM)

返事を書く

Re[1]:タグを覚えよう【第２２回目】　-　プロのようなページ作成テクニック（其の四）(08/28)

＃七鍵さん

れーちゃんさん

やほー(〃⌒▽⌒)

別のとこでも作ってるのね(￣▽￣人)
公開しない？
だめだめ(〃⌒▽⌒)
ちゃんと先生にも見せなさい？
返事は？
ふふふ(〃⌒▽⌒)

(Aug 29, 2004 03:40:39 PM)

返事を書く

返事は･･･

RainbowAngel さん

＃七鍵さん

お返事はしばらく「お預け」にしときます(´･ω･`)
自分でやってみて、その内容を心行くまで満喫して
「見せても良いかな」って思えたらお見せします。
(*- -)(*_ _)

それまで待っててね♪…って時間かかりそうだけどね。
わがままな落ちこぼれ生徒を
お許し下さいまし～|||(ﾍ; _ _)ﾍ|||

(Aug 29, 2004 06:20:31 PM)

返事を書く

Re:返事は･･･(08/28)

＃七鍵さん

RainbowAngelさん

いらっしゃいませーllllll(-_-;)llllll
お預けくらったllllll(-_-;)llllll
ええんやけどねllllll(-_-;)llllll
ふふふ(´･ω･`)

まぁ、気が向いたら教えてね(ﾟ▽^*)ﾉ⌒☆

(Aug 30, 2004 12:41:10 AM)

返事を書く