テンプレートとアクセスアップのでめらら楽天日記

< 新しい記事

新着記事一覧(全372件)

過去の記事 >

2005.05.18

スタイルシート（20）

(14)

テーマ：アクセス向上(301)

カテゴリ：【実験中】

スタイルシート>>全般>>HR（horizontal rule=水平線）関連

■width: ***; height: ***;（水平線のサイズ「長さと太さ」を指定する）
■text-align: ***; margin-***: ***;（水平線の「位置位置と余白」を指定する）
■color: ***; background-color: ***;（水平線に色を付ける）
■background-image: url(***);（水平線の背景に画像を使う）
■border: ***;（水平線の枠線を指定する）

【HTMLタグで使えるプロパティ(属性)】

□size=「太さ」
□color=「色」
□noshade「平面化」
□align=「横方向の位置指定」
HTMLタグでもある程度の装飾を施すことができますが、以上のようになります。スタイルの場合と比較してみていただくと簡素なことがわかります。
しかしこれはシンプルなのではなくHTMLコンテンツに直接書かれた主要構造部の一部なわけですから本当はできるだけ使いたくない指定方法なのです。
これをスタイルで指定することによって主要構造部をシンプルにして、かつ詳細なデザインをすることができるようになるのですから、スタイルってほんとに素晴らしい発想だと思います。

////////////////////////////////////////////////////////////////////////

▲直接指定の記述方法

■width: ***; height: ***;（水平線のサイズ「長さと太さ」を指定する）
（width 線の長さを指定します：height 線の太さを指定します）

□length（単位で指定する場合）
『相対値指定の単位　em: フォントの大きさ ex: 小文字の高さ px: ピクセル』
『絶対値指定の単位 in: インチ。2.54 cm cm: センチメートル mm: ミリメートル pt: ポイント。1/72 インチ pc: ピカ。12 ポイント』

<hr style=" width: 80%; height: 20px; ">

■text-align: ***; margin-***: ***;（水平線の「位置位置と余白」を指定する）
（text-align: ***;は本来は文章の位置を指定するものですが、hrタグに指定すると位置を変えてくれます）
□left ･･･････････････････左寄せにします。
□right ･･･････････････････右寄せにします。
□center ･･･････････････････中央揃えにします。

<hr style="width: 33%; height: 10px; text-align: left; ">
<hr style="width: 33%; height: 10px; text-align: right; ">
<hr style="width: 33%; height: 10px; text-align: center; ">
こんな感じですね（＾＾）↓

(テーブルタグの中でも箱の位置指定にspacingやpaddingで余白を決めますが、スタイルでも同じ考え方でmarginとpaddingをセットで覚えるのが便利だと思います）
□margin-top･･･････････････････上マージンを指定します。
□margin-bottom･･･････････････下マージンを指定します。
□margin-left･･･････････････････左マージンを指定します。
□margin-right･･････････････････右マージンを指定します。
□margin･･･････････････････････マージンに関する指定をまとめて行います。それぞれの数値が上、右、下、左の順番で指定されたものとしますが以下のように指定できます。
値を1つ指定した場合：指定した値が[上下左右]の余白になります。
値を2つ指定した場合：記述した順に[上下][左右]の余白になります。
値を3つ指定した場合：記述した順に[上][左右][下]の余白になります。
値を4つ指定した場合：記述した順に[上][右][下][左]の余白になります。

<hr style="width: 33%; height: 10px; margin-top: 30px; ">
<hr style="width: 33%; height: 10px; margin-bottom; 10pt; ">
<hr style="width: 33%; height: 10px; margin-left: 20%; ">
<hr style="width: 33%; height: 10px; margin-right: 30px; ">
<hr style="width: 33%; height: 10px; margin: 10 20 30 40 ; ">
こんな感じですね（＾＾）↓

■color: ***; background-color: ***;（水平線に色を付ける）
IEではcolor: ***;で指定できますが、NNではbackground-color: ***;になります。
両方で見えるようにするには両方指定しちゃいましょう（＾＾）
またborder: 0;を指定しないと境界線が表示されてしまいます（＞＜）

<hr style=" color: #FF0000; background-color: #FF0000; border: 0; ">
<hr style=" color: #0000FF; background-color: #0000FF; border: 0; ">
こんな感じですね（＾＾）↓

■background-image: url(***);（水平線の背景に画像を使う）

<hr style="height: 20px; background-image: url(http://plaza.rakuten.co.jp/img/user/99/06/4429906/39.gif); ">
<hr style="height: 40px; background-image: url(http://plaza.rakuten.co.jp/img/user/99/06/4429906/12.gif); background-color: #E2F5E0; background-repeat: no-repeat; background-position: right; ">
こんな感じですね（＾＾）↓

■border: ***;（水平線の枠線を指定する）
テーブルタグの1-9 でご紹介しましたborder枠線がhrにも使えます。

<hr style=" border: 1px #A52A2A solid; background-color: #CD853F2; color: #CD853F; height: 10px;">
<hr style=" border-style: solid; border-width: 2px; border-color: #7FFFD4 #20B2AA #20B2AA #7FFFD4; background-color: #E0FFFF; color: #E0FFFF; height: 10px;">
<hr style=" border-style: dotted none none none; border-top-width: 3px; border-top-color: #FF0000; height: 3px;">
こんな感じですね（＾＾）↓

▲CSS本来の記述方法
<style type="text/css">

</style>

*****************************************************

【庶事所感】
昨日、大型電気店で血圧計を見てきました。
じつは、血筋なのか血圧が高いので、この頃気にし始めたのですが、そこで買おう！と決めないで「イヤイヤインターネット見てからにしよう」
わたくしの生活の中にはホントしっかりインターネットが入り込んでいます（＞＜）

*****************************************************

なぜか行掛かりでBlogLankingに参加しました(^^;)面白かったらポチして下さいネ