2017年3月30日木曜日

【border-styleについて】


[HTMLタグ]線のスタイル(点線、破線などの指定、線の色の指定)


border-styleについて
テーブルや水平線、テキストエリアの枠線など、さまざまな線のスタイルを指定することが出来るborderStyle属性。

使いやすいものをいくつかまとめました。


・solid
    シンプルな実線。

・double
    二重線になります。

・groove
    ぺこっと凹んだような立体的な線。

・ridge
    ぷくっとした立体的な線。

・inset
    右と下の線が明るく、左と上の線が暗くなり、立体感が出ます。
    枠線の中がへこんでみえるようになります。  

・outset
    右と下の線が暗く、左と上の線が明るくなり、立体感が出ます。
    枠線の中が盛り上がって見えます。

・dashed
    ステッチのような破線です。

・dotted
    点線です。線の幅を太くし過ぎると、点が四角に見えます。




【border-style:solid  見本】

ここに文字

ソース


<table style="border-style:solid; border-width:4px; border-color:#0033FF; background:#ffffff" cellpadding="10" cellspacing="1" width="320">
<tr><td>
ここに文字
</td></tr>
</table>




【border-style:double  見本】

ここに文字

ソース


<table style="border-style:double; border-width:4px; border-color:#0033FF; background:#ffffff" cellpadding="10" cellspacing="1" width="320">
<tr><td>
ここに文字
</td></tr>
</table>


【border-style:dashed  見本】

ここに文字

ソース


<table style="border-style:dashed; border-width:4px; border-color:#0033FF; background:#ffffff" cellpadding="10" cellspacing="1" width="320">
<tr><td>
ここに文字
</td></tr>
</table>


【border-style:dotted  見本】

ここに文字

ソース


<table style="border-style:dotted; border-width:4px; border-color:#0033FF; background:#ffffff" cellpadding="10" cellspacing="1" width="320">
<tr><td>
ここに文字
</td></tr>
</table>


【border-style:groove  見本】

ここに文字

ソース

<table style="border-style:groove; border-width:4px; border-color:#0033FF; background:#ffffff" cellpadding="10" cellspacing="1" width="320">
<tr><td>
ここに文字
</td></tr>
</table>



【border-style:ridge  見本】

ここに文字

ソース

<table style="border-style:ridge; border-width:4px; border-color:#0033FF; background:#ffffff" cellpadding="10" cellspacing="1" width="320">
<tr><td>
ここに文字
</td></tr>
</table>



【border-style:inset  見本】

ここに文字

ソース

<table style="border-style:inset; border-width:4px; border-color:#0033FF; background:#ffffff" cellpadding="10" cellspacing="1" width="320">
<tr><td>
ここに文字
</td></tr>
</table>



【border-style:outset  見本】

ここに文字

ソース

<table style="border-style:outset; border-width:4px; border-color:#0033FF; background:#ffffff" cellpadding="10" cellspacing="1" width="320">
<tr><td>
ここに文字
</td></tr>
</table>



border-colorについて

border-color属性では、テーブルやテキストエリア、画像の枠線などの、線の色を指定することが出来ます。
このborder-color属性で指定出来るのは一色だけではありません。
四角い枠線の、上下左右の色をそれぞれ別々に指定することも可能です。

指定のパターンは4種類あります。


(1)1色を指定
border-color:#カラーコード;
これが一番かんたんな指定方法ですね。この指定方法では、枠線の4辺がすべて同じ1色になります。



(2)2色を指定
border-color:#カラーコード #カラーコード;
1色目のカラーコードの後に、半角スペースを入れ、その後に続けて2色目のカラーコードを指定します。1色目に指定した色が上下の枠線の色に、2色目に指定した色が左右の枠線の色になります。

【2色指定】

2色指定

ソース


<table style="border-style:solid; border-width:4px; border-color:#0033FF #FF3300; background:#ffffff" cellpadding="10" cellspacing="1" width="320">
<tr><td>
2色指定
</td></tr>
</table>



(3)3色を指定
border-color:#カラーコード #カラーコード #カラーコード;
1色目、2色目のカラーコードの後に、半角スペースを入れ、その後に続けて3色目のカラーコードを指定します。1色目に指定した色が上の枠線の色に、2色目に指定した色が左右の枠線の色に、3色目に指定した色が下の枠線の色になります。

【3色指定】

3色指定

ソース


<table style="border-style:solid; border-width:4px; border-color:#0033FF #FF3300 #00FF33; background:#ffffff" cellpadding="10" cellspacing="1" width="320">
<tr><td>
3色指定
</td></tr>
</table>




(4)4色を指定
border-color:#カラーコード #カラーコード #カラーコード #カラーコード;
1色目、2色目、3色目のカラーコードの後に、半角スペースを入れ、その後に続けて4色目のカラーコードを指定します。1色目に指定した色が上の枠線の色に、2色目に指定した色が右の枠線の色に、3色目に指定した色が下の枠線の色に、4色目に指定した色が左の枠線の色になります。上から、時計周りの順と覚えましょう。


【4色指定】

4色指定

ソース


<table style="border-style:solid; border-width:4px; border-color:#0033FF #FF3300 #00FF33 #FF00FF; background:#ffffff" cellpadding="10" cellspacing="1" width="320">
<tr><td>
4色指定
</td></tr>
</table>




枠線4辺のそれぞれにborder-styleを指定する

実は、この4辺の枠線の色の指定方法と同様にして、4辺の枠線それぞれにborder-styleの指定をすることも出来るのです。

記述の仕方は、色を指定した時とほとんど一緒です。


"border-style:  の後に、枠線の上の線から時計周りの順に、半角スペースを空けながらstyleを記述します。


style="border-style:上の線 右の線 下の線 左の線;

(線の種類)
    solid、double、dotted、dashedなど。



1)border-styleを1つ指定
border-style:線の種類;
これが一番かんたんな指定方法ですね。この指定方法では、枠線の4辺がすべて同じスタイルの線になります。


(2)border-styleを2つ指定
border-style:線の種類1 線の種類2;
1つ目の線の種類の後に、半角スペースを入れ、その後に続けて2つ目の線の種類を指定します。
1つ目に指定したスタイルの線が上下の枠線の色に、2つ目に指定したスタイルの線が左右の枠線になります。

【2つ指定】

2つ指定

ソース


<table style="border-style:solid double; border-width:4px; border-color:#0033FF; background:#ffffff" cellpadding="10" cellspacing="1" width="320">
<tr><td>
2つ指定
</td></tr>
</table>



(3)border-styleを3つ指定
border-style:線の種類1 線の種類2 線の種類3;
1つ目、2つ目の線の種類の後に、半角スペースを入れ、その後に続けて3つ目の線の種類を指定します。
1つ目に指定したスタイルの線が上の枠線に、2つ目に指定したスタイル線が左右の枠線に、3つ目に指定したスタイルの線が下の枠線になります。

【3つ指定】

3つ指定

ソース


<table style="border-style:solid double dotted; border-width:4px; border-color:#0033FF; background:#ffffff" cellpadding="10" cellspacing="1" width="320">
<tr><td>
3つ指定
</td></tr>
</table>




(4)border-styleを4つ指定
border-style:線の種類1 線の種類2 線の種類3 線の種類4;
1つ目、2つ目、3つ目の線の種類の後に、半角スペースを入れ、その後に続けて4つ目の線の種類を指定します。
1つ目に指定したスタイルの線が上の枠線に、2つ目に指定したスタイルの線が右の枠線に、3つ目に指定したスタイルの線が下の枠線に、4つ目に指定したスタイルの線が左の枠線になります。上から、時計周りの順と覚えましょう。

【4つ指定】

4つ指定

ソース


<table style="border-style:solid double dotted dashed; border-width:4px; border-color:#0033FF; background:#ffffff" cellpadding="10" cellspacing="1" width="320">
<tr><td>
4つ指定
</td></tr>
</table>





枠線4辺それぞれの線の太さを指定する

上記の、枠線の色の指定方法、枠線の種類の指定方法を見たかたはもう察しがついているかと思います。
そうです、線の太さも、上記と同様にして4辺それぞれの太さを個別に指定することが出来るのです。



"border-width:  の後に、枠線の上の線から時計周りの順に、半角スペースを空けながら線の太さをピクセル値またはブラウザの横幅に対する%で指定します。



style="border-width:上の線 右の線 下の線 左の線;"



・上の線のみ太さを5pxに指定

ここに文字

ソース





・右の線のみ太さを5pxに指定

ここに文字

ソース





・下の線のみ太さを5pxに指定

ここに文字

ソース






・左の線のみ太さを5pxに指定

ここに文字 

ソース






・上と左の線のみ太さを5pxに指定

ここに文字 

ソース




・右と下の線のみ太さを5pxに指定

ここに文字 

ソース



などなど、いろいろと応用がききます。




上級編

もっと細かく枠線のデザインを指定したい
ここまで、線の色を4辺それぞれ指定する方法、線の種類を4辺それぞれ指定する方法、線の太さを4辺それぞれ指定する方法、と紹介してきました。

そしてさらに、4辺それぞれに対して、色も種類も太さも個別に指定したい!というこだわり派のかたへピッタリの指定方法があります。



それが、border-top(上辺)、border-right(右辺)、border-bottom(下辺)、border-left(左辺)へ対して線のスタイルを指定する方法です。


書き方としては、border-top: またはborder-right: 、border-bottom: 、border-left: のあとに、半角スペースを空けて記述する方法です。

border-top:線の色 線の種類 線の太さ;

border-right:線の色 線の種類 線の太さ;

border-bottom:線の色 線の種類 線の太さ;

border-left:線の色 線の種類 線の太さ;





この方法で指定すると、かなり詳細に枠線のデザインを指定することが出来ます。

border-top:#FF0000 dotted 3px;
border-right:#FF00FF double 5px;
border-bottom:#0000FF ridge 8px;
border-left:00FFFF solid 2px;
で指定しています。

ソース





こんなことや、


border-top:#CCFF66 groove 5px;
border-right:#FFCC99 dotted 9px;
border-bottom:#99CC33 groove 5px;
border-left:#FFFF99 dotted 9px;
で指定しています。

ソース






こんなことや、


border-top:#FF3366 double 12px;
border-right:#009966 dashed 2px;
border-bottom:#3399FF solid 9px;
border-left:#99FFCC ridge 12px;
で指定しています。

ソース





こんなことも出来ちゃいます。



ただし、この方法での指定だと、表示するブラウザ、環境によっては、正しく表示されない場合もあるようです。

自分の見ている環境、自分のサイトをみてもらいたい人の環境で正しく表示されるのか事前に確認した上でご使用下さい。