https://hmaster.net/


HTMLタグとCSSを使いメモ帳だけで無料でホームページを作成する 方法を分かりやすく解説しているサイトです。 初心者向けに見やすい、読みやすい作りになっています。

枠線の色を指定する

{border:太さ 線の種類 線の色;} でボックスを作ることができます。 線の色は記述しなくても枠線は表示されます。 ボックスは<span>タグ、<div>タグ、見出しタグ、<p>タグ 等で作れます。

■ 枠線の色の指定方法

ボックスの枠線の色の指定方法は以下の通りです。
{border-color:transparent;}でボックスの枠線の色を透明にするこ
とができます。(デフォルト)

枠線の色の指定 説明
border-color:色; 上下左右 全ての枠線の色を指定します。
border-color:色1 色2; 色1が上下、色2が左右の枠線の色を指定します。
border-color:色1 色2 色3; 色1が上、色2が左右、色3が下の枠線の色を指定します。
border-color:色1 色2 色3 色4; 色1が上、色2が右、色3が下、色4が左の枠線の色を指定します。

ボックスの枠線の色を個別に指定するパターンは以下の通りです。

枠線の色を個別に指定 説明
border-top-color:色; 上の枠線の色を指定します。
border-bottom-color:色; 下の枠線の色を指定します。
border-left-color:色; 左の枠線の色を指定します。
border-right-color:色; 右の枠線の色を指定します。

【ブラウザ表示】

上下左右 紫色の線

上下がnavy、左右が青色

上がアクア、左右が青、下の線が黄色

上が赤、右が青、下が黄色、左が緑色の線

上が赤、右が青、下が黄色、左が緑色の線


ソース

<p class="iro1">上下左右 紫色の線</p>
<p class="iro2">上下がnavy、左右が青色</p>
<p class="iro3">上がアクア、左右が青、下の線が黄色</p>
<p class="iro4">上が赤、右が青、下が黄色、左が緑色の線</p>
<p class="iro5">上が赤、右が青、下が黄色、左が緑色の線</p>

外部ファイル

p.iro1{border:1px solid; border-color:purple;}
p.iro2{border:1px solid; border-color:navy blue;}
p.iro3{border:1px solid; border-color:aqua blue yellow;}
p.iro4{border:1px solid; border-color:red blue yellow green;}
p.iro5{
border:1px solid;
border-top-color:red;
border-right-color:blue;
border-bottom-color:yellow;
border-left-color:green;
}


<body>~</body>に直接記入する場合

<p style="border:1px solid; border-color:purple;">
上下左右 紫色の線
</p>
<p style="border:1px solid; border-color:navy blue;">
上下がnavy、左右が青色
</p>
<p style="border:1px solid; border-color:aqua blue yellow;">
上がアクア、左右が青、下の線が黄色
</p>
<p style="border:1px solid; border-color:red blue yellow green;">
上が赤、右が青、下が黄色、左が緑色の線
</p>
<p style="border:1px solid; border-top-color:red; border-right-color:blue; border-bottom-color:yellow; border-left-color:green;">
上が赤、右が青、下が黄色、左が緑色の線
</p>

このエントリーをはてなブックマークに追加 Instagram

■ その他の項目

枠線の太さを指定する
枠線の種類を指定する
個別の枠線を一括に指定する
ボックスの横幅、高さを指定する
外側、内側の余白を指定する
背景色や画像を指定する
背景画像の表示方法を指定する
背景画像の表示位置を指定する
ボックスを並べる
はみ出る部分を表示させる
ボックスの配置方法を指定する
背景画像の表示領域を指定する
枠線の4隅の角丸を指定する
枠線の4隅の角丸を個別に指定する

スタイルシート一覧のページに戻る