cssのborderで様々な枠線やタイトル線を作成する方法を紹介!

csscoding

takato@enjoying_freeです!

web制作をしていると、文字に枠線を作成する機会がありますよね。

どのようにすれば枠線を作成することができるのか、紹介したいと思います。

borderとは?

cssの「border」とは、枠線を作成するのに必要な要素です。

枠線を作成したいクラスにborder要素を当てることで、枠線を作成することができます。

記載方法

border要素の記載方法は下記の通りです。

border:solid 1px #000;

「solid」部分は、枠線の形を表しています。

solidはシンプルな枠線を表しますが、solid以外にも枠線の形がいくつかあります。

枠線の種類

・solid 一本線
・double 二本線
・dashed 破線
・dotted 点線

下記がそれぞれの枠線のビジュアルです。

See the Pen bGqbepR by takato (@ttakkatto) on CodePen.


「1px」は枠線の太さ、「#000」は枠線の色を表しています。

応用篇

上記の記入方法を踏まえ、応用篇の紹介をします。

枠線の場所を指定する

「border」と記入すると、要素の上下左右に枠線が作成されますが、一部だけに線を作成することも可能です。

線を一部のみに作成する方法

・border-top 要素の上に線を作成する
・border-right 要素の右側に線を作成する
・border-bottom 要素の下に線を作成する
・border-left 要素の左側に線を作成する

下記のように、それぞれの場所に線が作成されます。

See the Pen VwpZjKL by takato (@ttakkatto) on CodePen.

枠線の太さ・色を指定する

枠線の太さと色を変更することも可能です。

See the Pen Rwpbaxz by takato (@ttakkatto) on CodePen.

左だけに線を作成するとタイトルのように表示することができたり、要素の上に線を作成すると情報を分けることができます。

色々とアレンジしてみてください。

最後に

borderは枠線以外にもタイトル線などとして活用することができます。是非web制作の際に活用してください。

コーディングに関しては、こちらの記事もおすすめです。