文章や文字、画像を囲む枠の種類を指定する
HTML文書を使った ホームページやブログなどのウェブサイトで、BORDER-WIDTHを使って文章や文字、画像を枠で囲んで表示する際に、枠線の種類を指定することができます。BORDER-STYLEで指定します。
四辺の枠線の種類をまとめて指定する場合
<タグ名 style="border-style:枠線の種類">～</タグ名>
上辺の枠線の種類のみを指定する場合
<タグ名 style="border-top-style:枠線の種類">～</タグ名>
下辺の枠線の種類のみを指定する場合
<タグ名 style="border-bottom-style:枠線の種類">～</タグ名>
左辺の枠線の種類のみを指定する場合
<タグ名 style="border-left-style:枠線の種類">～</タグ名>
右辺の枠線の種類のみを指定する場合
<タグ名 style="border-right-style:枠線の種類">～</タグ名>
- タグ名：P、DIV および SPAN タグなどが一般的ですが、ほとんどのブロックタグおよびインラインタグが使用可能です。
- 枠線の種類：下記の中から指定できます。
枠線の種類 説明 サンプル none なし hidden なし dotted 丸い点線 dashed 四角い点線 solid 実線 枠線の種類 説明 サンプル double 二重線 groove 凹んだような立体枠 ridge 尖ったような立体枠 inset 中央が凹の立体枠 outset 中央が凸の立体枠
サンプルです。この中から、『 double 』で枠線を指定してみます。
この段落文章を、太さ 10ピクセルの赤色の二重線の枠で囲みます。
枠で囲むことで、文章を強調したり、見やすくすることができます。
枠で囲むことで、文章を強調したり、見やすくすることができます。
このソースは、次のようになります。
<div style="border-style:double;border-color:red;border-width:10px">
この段落文章を、太さ 10ピクセルの赤色の二重線の枠で囲みます。<br>
枠で囲むことで、文章を強調したり、見やすくすることができます。
</div>
枠で囲むことで、文章を強調したり、見やすくすることができます。
ランキングに参加中です! お役に立てたらクリックをお願いします→
同一カテゴリ内一覧
コンピュータとインターネット > データ形式 > HTML > リファレンス