線をまとめて指定 border-style｜CSS辞典｜HTMLタグ・CSS

Home≫CSS辞典≫線をまとめて指定 border-style

線をまとめて指定 border-style

≪ 線の色 border-color	【 HOME 】	≫

Yahoo!ブックマークに登録

Google Bookmarks に追加

はてなブックマークに登録

livedoorに記事をクリップ

線をまとめて指定（詳細情報）
字体	border:★ ★ ★;　　線をまとめて指定。 border-top:★ ★ ★;　　線の上だけ指定。 border-left:★ ★ ★;　　線の左だけ指定。 border-right:★ ★ ★;　　線の右だけ指定。 border-bottom:★ ★ ★;　　線の下だけ指定。
指定	★の部分に下記の「」内の効果を指定していきます。「solid」枠線を１本線で表示する。「double」枠線を２本線で表示する。（太さが細いと隙間がなくなる）「groove」枠線を立体的にへこんだように表示する。「ridge」枠線を立体的な飛び出したように表示する。「inset」枠線が外側に飛び出したように表示する。「outset」枠線が内側に飛び出したように表示する。「dashed」枠線を破線で表示する。（ Internet Explorer 5 ↑）「dotted」枠線を点々に表示する。（ Internet Explorer 5 ↑）「hidden」表示しない。「none」通常の初期状態にする。「数字px」数字で枠線の太さを指定します。（px：ピクセルのみ) 「thin」細い線を指定する。「medium」細い線と太い線の中間の線を指定する。「thick」太い線を指定する。「#RRGGBB」 R（赤）、G（緑）、B（青）の部分に２桁ずつの英数字を指定（色見本）「#RGB」上の方法を省略することができます。（２桁が同じ場合だけ）　例： #aa4466 → #a46 、#3399ff → #39f 「rgb(R,G,B)」 R（赤）、G（緑）、B（青）の部分に 0～255 の数字を指定。「rgb(R%,G%,B%)」 R（赤）、G（緑）、B（青）の部分に 0～100 の数字を指定。「カラーネーム」決められているカラーネームを記入するとその色になります。　例： red　blue　green　yellow　orange　purple　pink　black　white 対応CSS ：線の種類 border-style:★; 対応CSS ：線の太さ border-width:★; 対応CSS ：線の色 border-color:★;
効果	ボックスの枠線の種類、太さ、色をまとめて指定することができます。
例１	<div style="border: solid 5px red;">ホームページの素材屋です</div>
結果	ホームページの素材屋です
例２	<div style="border: double 10px #999; padding: 6px;">ホームページの素材屋です</div>
結果	ホームページの素材屋です
例３	<div style="border: groove 2px #008; background-color: #ddf; padding: 5px;">ホームページの素材屋です</div>
結果	ホームページの素材屋です
例４	<div style="border: dotted 1px #093; padding: 10px; text-align: center;">ホームページの素材屋です</div>
結果	ホームページの素材屋です
例５	<div style="border: outset 4px #962; padding: 6px; width: 200px;">ホームページの素材屋です</div>
結果	ホームページの素材屋です
例６	<div style="border: solid 2px #940; background-image: url(img/test_bg01.gif); text-align: center; width: 300px; padding: 10px; margin: 0 auto;">ホームページの素材屋です</div>
結果	ホームページの素材屋です

≪ 線の色 border-color	【 HOME 】	≫

練習用書き込みフォーム（サンプル表示）

素材の森

素材NAVI

素材R

素材・壁紙

イラスト素材

素材・作成

素材ランキング

無料素材リンク

素材ファン

無料ＨＰ素材、ホームページテンプレート、HTMLタグ・CSS、質問・用語の検索

サイトの説明

素材使用方法

質問集/用語集

作成練習場

カラー見本