今回は個人的に知っておくと便利だなと思うcssの小技part11 -ボーダー編-です。
バックナンバー
線の最初だけ色を変える
タイトルなどでよくあるボーダーの最初だけ色を変えるあれです。今までは結構画像などでやることも多かったのですが、レスポンシブが多くなってからはcssでやってしまうのが一番いい感じですね。
DEMO
HTML
|
1 |
<p class="title">タイトルによく使えます</p> |
css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
.title{ font-weight: bold; font-size: 15px; padding-bottom: 15px; border-bottom: solid 3px #DDD ; position: relative; } .title::before{ content: ''; background:#D52023; height: 3px; width: 80px; position: absolute; bottom: -3px; left: 0; display: block; } |
まずは本体になる部分に下地になるボーダー（今回はグレーの線）とposition: relative;を指定します。
そのあとは::beforeでボーダーの最初の要素（今回は赤い線）を装飾していきます。
まずは::beforeを使うためにcontent: ”;の指定をします。displayはblock;にしておいてください。
赤の色はborderじゃなくbackgroundで指定します。
そしてheightでグレーの線と同じ高さに、widthは好きな幅にします。これで擬似的なボーダーの出来上がりです。
そしてpositionはabsoluteにして本体の上にのせる、という風にします。
そのあとはbottomの指定ですが、これは-（マイナス）線の太さを指定してください。これでグレーの線に赤い線がかぶさります。
これで完成です！理屈が分かれば結構簡単にできちゃいます。
style="display:block"
data-ad-client="ca-pub-4667789978705365"
data-ad-slot="9480048027"
data-ad-format="auto">
グラデーションのボーダーで要素を囲う
ちょっと雰囲気を変えられるグラデーションのボーダー。これも理屈が分かれば結構簡単にできます。
DEMO
HTML
|
1 2 3 4 5 |
<div class="borderBox"> <div class="boxinner"> 要素 </div><!--//boxinner--> </div><!--//borderBox--> |
css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
#c02 .borderBox{ width:100%; font-size: 15px; text-align: center; font-weight: bold; border-left: solid 2px #36CFD1; border-right: solid 2px #C97BE5; height:100%; } #c02 .borderBox::before, #c02 .borderBox::after{ width:100%; content: ''; display: block; background: #36cfd1; background: -moz-linear-gradient(left, #36cfd1 0%, #c97be5 100%); background: -webkit-linear-gradient(left, #36cfd1 0%,#c97be5 100%); background: linear-gradient(to right, #36cfd1 0%,#c97be5 100%); height: 2px; } #c02 .borderBox .boxinner{ padding: 30px; } |
まずは囲う要素の左右にボーダーを指定します。色についてはグラデーションの最初と最後の色を今回は指定しておきます。
あとは::beforeと::afterで上下の線を指定します。
とりあえず::beforeと::afterでおなじみのcontent: ”;を指定します。displayはblock;にしておいてください。
そして擬似的にボーダーを作るために背景にグラデーションを指定します。
さっき左右に指定した最初と最後の色のグラデーションをここに設定します。
一応対応していないブラウザのためにベタの背景も指定しておくと無難ですね。
あとは高さ指定です。今回は左右のボーダーが2pxなのでそれに合わせて2pxの指定をしてください。
これで完成です！
ちなみにpaddingはまた違う要素で中を囲って使ってくださいね。（今回はboxinner）
