ウェブサイト作成にスタイルシートで枠線を引こう!

HTML

ウェブサイトを作成していて、
文字や段落、画像などに枠線があると
他との区別が出来て読みやすくなりますよね。

そのような、文字などに枠線を引きたいときの
プロパティを紹介します。

これはいろいろなHTMLタグに使えるので便利です。

枠線のスタイル

・border-style(枠線のスタイル)
値:none(線なし)、solid(実線)、dotted(点線)、
  dashed(破線)、double(二重線)、inset(内側が凹形)、
  outset(内側が凸形)、groove(立体的に窪んだ線)、
  ridge(立体的に隆起した線)

・border-color(枠線の色)
値:カラーネームやカラーコードによる色指定

・border-width(枠線の太さ)
値:px、em などで指定

まとめて指定する場合

・border(ボーダーのスタイル・色・太さをまとめて指定)
例:<font style=”border:solid green 1px;”>文字</font>
上記例のように各項目の間に半角スペースをいれ、
最後にセミコロン(;)を入れます。

枠線の上下左右を変更

border-style、border-color、border-widthでは
値の指定方法で、枠線の上下左右を変えることも出来ます。

値が1つの場合:[上下左右]
値が2つの場合:記述順に[上下][左右]
値が3つの場合:記述順に[上][左右][下]
値が4つの場合:記述順に[上][右][下][左]

<記述例>

<span style="border:3px solid; border-color:red blue green yellow;">
  カラフルな枠線
</span>

<表示例>

カラフルな枠線

枠線の上下左右を個別指定

また、枠線の上下左右を個別指定するには、以下の設定をします。

・border-top(枠線上の指定)
・border-bottom(枠線下の指定)
・border-left(枠線左の指定)
・border-right(枠線右の指定)

<記述例>

<p style="border-bottom:solid 2px navy; border-left:solid 10px blue;">
  タイトル
</p>

<表示例>

タイトル

枠線で囲まれたテキストのサンプル

枠線で囲まれたテキストのサンプルとして、
具体的な例を紹介していきます。

これは、何かを紹介するときに分かりやすいように
枠線で囲み目立たせるために使います。

3つの例を紹介します。

例1:

<記述例>

<div style="border: solid 1px blue;
padding: 6px;
background-color: beige;
text-align: left;
width:300px;">
枠線が青い1ピクセルの実線<br>
文字と枠線との余白6ピクセル<br>
背景がベージュ<br>
左寄せ文字<br>
幅300ピクセル<br>
</div>

<表示例>

枠線が青い1ピクセルの実線
文字と枠線との余白6ピクセル
背景がベージュ
左寄せ文字
幅300ピクセル

例2:

<記述例>

<div style="border: 1px dotted green;
padding: 10px;
margin-bottom: 10px;
text-align: left;
width:300px;">
枠線が緑の1ピクセルの点線<br>
文字と枠線との余白10ピクセル<br>
枠線下の外側余白10ピクセル<br>
左寄せ文字<br>
幅300ピクセル<br>
</div>

<表示例>

枠線が緑の1ピクセルの点線
文字と枠線との余白10ピクセル
枠線下の外側余白10ピクセル
左寄せ文字
幅300ピクセル

また、箇条書きリストを枠で囲むことも出来ます。

例3:

<記述例>

<div style="border: dotted 2px red;
padding: 6px;
background-color: lavenderblush;
text-align: left;
line-height: 175%;
width:300px;">
<ul>
<li>枠線が赤い2ピクセルの点線</li>
<li>文字と枠線との余白6ピクセル</li>
<li>背景色がラベンダー・ブラシ</li>
<li>左寄せ文字</li>
<li>行の高さ175%(行間75%)</li>
<li>幅300ピクセル</li>
</ul>
</div>

<表示例>

  • 枠線が赤い2ピクセルの点線
  • 文字と枠線との余白6ピクセル
  • 背景色がラベンダー・ブラシ
  • 左寄せ文字
  • 行の高さ175%(行間75%)
  • 幅300ピクセル

枠線を引くことができれば、
次は、文字と枠線との間の余白を入れたくなりますよね。

次回は、スタイルシートでその余白を
設定する方法について紹介します。

コメント

タイトルとURLをコピーしました