トップ>>chapter4>>こんなこともできます

こんなこともできます

まあ、ここはひとつお茶でも ( * ^^ ) _旦 ~~
えーと何だっけ。ああそうかスタイルシートの話だったね。さてこのスタイルシート、結構凄いんですよ。
まず border の話をしましょう。border や margin や padding は上下左右にそれぞれ違う指定ができるのですが、
実はこの border 、線の種類や色まで自由に指定できるのです。
このページの左側の二重線や、見出しのふせんのようなレイアウトも border のみで行っています。
メリハリをつけたりアクセントが欲しい時などいろいろ試してみてはいかがでしょうか。
まあ、多用しすぎるとうるさくなってしまいますが ^^;
次に、リンクが貼られている文字にマウスの矢印が重なった時の色の変化。
これもスタイルシートで処理を行っています。
これを指定するのに疑似クラスというものを使うのですが、まあこの際名前は置いておいて。
指定方法ですが、 a : hover { color : 色指定 ; } これだけです。簡単ですね!
ちなみに : hover の箇所を : visied にすると訪問済みのリンクを、 : link にすると通常のリンクへの指定ができます。
文字の色以外にも文字に背景をつけたり枠で囲ってみたり下線を無くしたりすることもできます。
これらの指定を行う場合、一つ注意があります。それは、指定する順番です。
スタイルシートには優先順位があり、同じ順位の中では後から書いたほうが優先されます。
なので、リンクの指定を行う場合は :link , : visited , : hover の順に書かなければいけません。


ちょっと戻ってHTMLでも

まあ説明を忘れていたとかそんなことじゃないです。ええ。
テーブルについての解説をしましょう。テーブルと言うのはその名の通り「表」です。まあこんなやつですね。

ID 名前 所属
001 犬山犬尾 ○○課
002 猫川猫美 △△課
003 熊田熊吉 □□課

テーブルの利点と言えばレイアウトが崩れないことじゃないでしょうか。
でもレイアウトのためにテーブルを使うのは良くないとされています。
なのでこのような表を作る際に利用されています。あと書き方が結構面倒くさいです。

< table >
< tr >
< th > ID < /th >
< th > 名前 < /th >
< th > 所属 < /th >
< /tr >
< tr >
< td > 001 < /td >
< td > 犬山犬尾 < /td >
< td > ○○課 < /td >
< /tr >
< tr >
< td > 002 < /td >
< td > 猫川猫美 < /td >
< td > △△課 < /td >
< /tr >
< tr >
< td > 003 < /td >
< td > 熊田熊吉 < /td >
< td > □□課 < /td >
< /tr >
< /table >

とまあこんな感じでごちゃごちゃしていて非常に見づらいですね。
< table > ~ < /table > の部分は「ここからここまでは表です」という意味です。
< tr > ~ < /tr > の部分は「ここからここまでは一行です」という意味です。
< th > ~ < /th > の部分は「ここからここまでは表の見出しです」という意味です。
< td > ~ < /td > の部分は「ここからここまでは表の項目です」という意味です。
table の中に tr が入って、その tr の中に th や td が入る、と覚えると分かりやすいでしょう。


chapter4メニューに戻る

yVoC[UNLIMITȂ1~] ECirŃ|C Yahoo yV LINEf[^[Ōz500~`I


z[y[W ̃NWbgJ[h COiq 萔O~ył񂫁z COsیI COze