https://hmaster.net/


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

個別の枠線を一括に指定する

{border-位置:太さ 線の種類 線の色;} でボックスの個別の枠線の 太さ、線の種類、線の色を一括に指定することができます。 一括指定できる枠線の位置は上下左右です。

■ 個別の枠線を一括に指定する方法

個別の枠線を一括に指定する方法は以下の通りです。

個別の枠線を一括に指定 説明
border-top:太さ 線種 線の色; 上の枠線の太さ、種類、色を指定します。
border-bottom:太さ 線種 線の色; 下の枠線の太さ、種類、色を指定します。
border-left:太さ 線種 線の色; 左の枠線の太さ、種類、色を指定します。
border-right:太さ 線種 線の色; 右の枠線の太さ、種類、色を指定します。

【ブラウザ表示】

上の枠線のみ一括指定

右の枠線のみ一括指定

下の枠線のみ一括指定

左の枠線のみ一括指定


ソース

<p class="all1">上の枠線のみ一括指定</p>
<p class="all2">右の枠線のみ一括指定</p>
<p class="all3">下の枠線のみ一括指定</p>
<p class="all4">左の枠線のみ一括指定</p>

外部ファイル

p.all1{border-top:5px dotted green;}
p.all2{border-right:5px dotted green;}
p.all3{border-bottom:5px dotted green;}
p.all4{border-left:5px dotted green;}


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

<p style="border-top:5px dotted green;">上の枠線のみ一括指定</p>
<p style="border-right:5px dotted green;">右の枠線のみ一括指定</p>
<p style="border-bottom:5px dotted green;">下の枠線のみ一括指定</p>
<p style="border-left:5px dotted green;">左の枠線のみ一括指定</p>

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

■ その他の項目

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

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