2005.05.18
テーマ： アクセス向上(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">
<!--
hr
{
height: ***;
text-align: ***;
margin-***: ***;
background-color: #FF8080;
color: #FF8080;
border-style: solid;
border-width: 2px;
border-color: #C40000 #FFDFE2 #FFDFE2 #C40000;
}
-->
</style>
*****************************************************
【庶事所感】
昨日、大型電気店で血圧計を見てきました。
じつは、血筋なのか血圧が高いので、この頃気にし始めたのですが、そこで買おう！と決めないで「イヤイヤインターネット見てからにしよう」
わたくしの生活の中にはホントしっかりインターネットが入り込んでいます（＞＜）
*****************************************************
なぜか行掛かりでBlogLankingに参加しました(^^;)面白かったらポチして下さいネ
リンクはフリーですご自由にどうぞ(バナーリンクタグはprofileのページ年表欄にあります）
////////////////////////////////////////////////////////////////////////
■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">
<!--
hr
{
height: ***;
text-align: ***;
margin-***: ***;
background-color: #FF8080;
color: #FF8080;
border-style: solid;
border-width: 2px;
border-color: #C40000 #FFDFE2 #FFDFE2 #C40000;
}
-->
</style>
*****************************************************
【庶事所感】
昨日、大型電気店で血圧計を見てきました。
じつは、血筋なのか血圧が高いので、この頃気にし始めたのですが、そこで買おう！と決めないで「イヤイヤインターネット見てからにしよう」
わたくしの生活の中にはホントしっかりインターネットが入り込んでいます（＞＜）
*****************************************************
なぜか行掛かりでBlogLankingに参加しました(^^;)面白かったらポチして下さいネ
リンクはフリーですご自由にどうぞ(バナーリンクタグはprofileのページ年表欄にあります）
お気に入りの記事を「いいね！」で応援しよう
[【実験中】] カテゴリの最新記事
-
fontバリエーション(2) 2005.08.26 コメント(11)
-
スタイル一覧（後編） 2005.06.19 コメント(165)
Re:スタイルシート（20）(05/18)
こんにちは(^^)♪
お世話になりますm(__)m
だんだんとカラフルになっていきますね(*^^*) 楽しいわ♪
毎日これだけ素晴らしい内容をまとめるのには大変ですよね･･･。
本当にありがとうございます(^^)♪
血圧ですか･･･。
高いのですね。私は低くて困っています(^^;)
最近は立ちくらみが続いて病院へ行って来ました(^^;)
元気いっぱいなんですけどね～(^^)！
高すぎても低すぎても困りますよね。
気をつけましょうね(*^^*)！
(2005.05.18 14:21:50)
お世話になりますm(__)m
だんだんとカラフルになっていきますね(*^^*) 楽しいわ♪
毎日これだけ素晴らしい内容をまとめるのには大変ですよね･･･。
本当にありがとうございます(^^)♪
血圧ですか･･･。
高いのですね。私は低くて困っています(^^;)
最近は立ちくらみが続いて病院へ行って来ました(^^;)
元気いっぱいなんですけどね～(^^)！
高すぎても低すぎても困りますよね。
気をつけましょうね(*^^*)！
(2005.05.18 14:21:50)
Re:スタイルシート（20）(05/18)
カモミール9828
さん
水平線だけでもイメージ変わりますね。
血圧高いんですか。
私はko-harubiyoriさんと同じで低すぎて
立ちくらみの嵐です・・・
ほどほどの血圧になりたいですね。 (2005.05.18 14:43:47)
血圧高いんですか。
私はko-harubiyoriさんと同じで低すぎて
立ちくらみの嵐です・・・
ほどほどの血圧になりたいですね。 (2005.05.18 14:43:47)
Re[1]:スタイルシート（20）(05/18)
でめらら58
さん
ko-harubiyoriさん
-----
こんにちは（＾＾）コメントありがとうございます♪
区切れ線なども楽しいデザインで作りたいですよね！
父親が昔50歳頃に脳血栓をやってますので、わたくしもホント気をつけなければと思ってます。
食事に気をつけてずっとイイカンジ(^^)だったのですが、年齢的なものでしょうね（＞＜）
そうですね、気をつけなければ（＞＜） (2005.05.18 15:17:52)
-----
こんにちは（＾＾）コメントありがとうございます♪
区切れ線なども楽しいデザインで作りたいですよね！
父親が昔50歳頃に脳血栓をやってますので、わたくしもホント気をつけなければと思ってます。
食事に気をつけてずっとイイカンジ(^^)だったのですが、年齢的なものでしょうね（＞＜）
そうですね、気をつけなければ（＞＜） (2005.05.18 15:17:52)
Re[1]:スタイルシート（20）(05/18)
でめらら58
さん
カモミール9828さん
-----
こんにちは（＾＾）コメントありがとうございます♪
区切り線でけっこうサイトのイメージ変わりますよね（＾＾）
女性はけっこう低血圧のかた多いですよね（★o★）
気をつけて安定したいですよね（＞＜）
(2005.05.18 15:23:00)
-----
こんにちは（＾＾）コメントありがとうございます♪
区切り線でけっこうサイトのイメージ変わりますよね（＾＾）
女性はけっこう低血圧のかた多いですよね（★o★）
気をつけて安定したいですよね（＞＜）
(2005.05.18 15:23:00)
Re:スタイルシート（20）(05/18)
だらんちょろん
さん
Re[1]:スタイルシート（20）(05/18)
でめらら58
さん
だらんちょろんさん
-----
こんにちは（＾＾）コメントありがとうございます♪
水平線もいろんな装飾を施してあげるとオリジナリティも出てきますし、見やすくできるのではないかと思います（＾＾）
(2005.05.18 16:56:32)
-----
こんにちは（＾＾）コメントありがとうございます♪
水平線もいろんな装飾を施してあげるとオリジナリティも出てきますし、見やすくできるのではないかと思います（＾＾）
(2005.05.18 16:56:32)
Re:スタイルシート（20）(05/18)
きのこせいじん
さん
Re[1]:スタイルシート（20）(05/18)
でめらら58
さん
きのこせいじんさん
-----
こんばんは（＾＾）コメントありがとうございます♪
仰るとおり、正直ややこしいとは思いますよね（＾＾）
でも、思ったように出来たときは嬉しいですよね！
(2005.05.18 23:00:01)
-----
こんばんは（＾＾）コメントありがとうございます♪
仰るとおり、正直ややこしいとは思いますよね（＾＾）
でも、思ったように出来たときは嬉しいですよね！
(2005.05.18 23:00:01)
Re:スタイルシート（20）(05/18)
jasmintea7
さん
こんばんは！日記を書いてるblogのBBSを違う表示にしたいのになかなかできない私です。
でめららさん血圧高いですか？
ストレスが一番悪いそうです。あと寝不足！
お忙しいことかと思いますがくれぐれもお体にはお気をつけ下さいね (2005.05.18 23:34:07)
でめららさん血圧高いですか？
ストレスが一番悪いそうです。あと寝不足！
お忙しいことかと思いますがくれぐれもお体にはお気をつけ下さいね (2005.05.18 23:34:07)
Re[1]:スタイルシート（20）(05/18)
でめらら58
さん
jasmintea7さん
-----
こんばんは（＾＾）コメントありがとうございます♪
わたくしも決まった形のブログなどは正直苦手です（＞＜）楽天広場もやっとこさってカンジですもの(;大汗)
ずっと血圧は平常値だったのですがここへきてちょっと高めが続いているのです（ToT）
ストレスはそんなに無いと思うのですが、やはり睡眠が問題ですね（＞＜）
気をつけねば！
(2005.05.19 00:12:31)
-----
こんばんは（＾＾）コメントありがとうございます♪
わたくしも決まった形のブログなどは正直苦手です（＞＜）楽天広場もやっとこさってカンジですもの(;大汗)
ずっと血圧は平常値だったのですがここへきてちょっと高めが続いているのです（ToT）
ストレスはそんなに無いと思うのですが、やはり睡眠が問題ですね（＞＜）
気をつけねば！
(2005.05.19 00:12:31)
Re:スタイルシート（20）(05/18)
だらんちょろん
さん
Re[1]:スタイルシート（20）(05/18)
でめらら58
さん
だらんちょろんさん
-----
おはようございます（＾＾）
＜hr＞がふたつなりみっつ続くのであればその間はpaddingやmarginで数字を変えれば相当細かく調整はつくと思いますが、「便箋」と仰るとその間に一行ずつ文字が入るのでしょうか？
もしそうなら、タグやスタイルの文字数が膨大になるでしょうから、テーブルなどを組んだほうがよいと思いますよ。 (2005.05.19 11:53:33)
-----
おはようございます（＾＾）
＜hr＞がふたつなりみっつ続くのであればその間はpaddingやmarginで数字を変えれば相当細かく調整はつくと思いますが、「便箋」と仰るとその間に一行ずつ文字が入るのでしょうか？
もしそうなら、タグやスタイルの文字数が膨大になるでしょうから、テーブルなどを組んだほうがよいと思いますよ。 (2005.05.19 11:53:33)
いただきました
るるるっこ
さん
Re:いただきました(05/18)
でめらら58
さん
るるるっこさん
-----
（＾＾）もし画像部分が http://plaza.rakuten.co.jp/img/user/99/06/4429906/39.gif のままでしたら、是非DLしておいてくださいね！、わたくしのほうでは画像が一杯になりましたら削除するかもしれませんので･･･（＞＜）
(2005.05.20 23:58:37)
-----
（＾＾）もし画像部分が http://plaza.rakuten.co.jp/img/user/99/06/4429906/39.gif のままでしたら、是非DLしておいてくださいね！、わたくしのほうでは画像が一杯になりましたら削除するかもしれませんので･･･（＞＜）
(2005.05.20 23:58:37)
【毎日開催】
15記事にいいね！で1ポイント
PR
Keyword Search
▼キーワード検索
Category
カテゴリ未分類
(96)【blog基本とマナー】
(8)【サイト作りの基礎】
(87)【テンプレート】
(49)【検索エンジンの理解】
(18)【検索エンジンに登録】
(5)【楽天広場のサイト】
(11)【アフィリエイト】
(12)【便利ツール】
(10)【実験中】
(76)Comments
© Rakuten Group, Inc.
