どうも、チャーさんです。
あなたは見出しの横に、横線を表示させたい。
そう思っていませんか？
この記事では、見出しに横線をつける方法を、
書いています。(以下のようなのができます)
なのであなたがこの記事を読めば、
無事に横線を表示させれるようになるでしょう。
ということで、見出しに横線をつけたければ、
このまま下にスクロールし読んでみてください。
スポンサードサーチ
目次
見出しに横線を表示させる方法
はい、でまず結論から行きます。
見出しに横線をつける方法は以下です。
まずコードですが、
こちらです。
css
.line::before {
content:””;
width:20px;
border-bottom:2px solid black;
height:2px;
margin:auto;
top:0;
bottom:0;
left:-30px;
position:absolute;
}
.line {
margin-left:30px;
position:relative;
}
html
<h1 class=”line”>見出し</h1>
すると以下の画像のように、
横線が表示されます。
あなたが実際にすぐに使いたい場合は、
上記のcss全部と、このlineというクラス名を、
横線をつけたい見出しにつけるといいです。
すると横線がだせます。
で、ここからはあなたがこの見出しの横線を、
使って色々したい場合を想定して書きます。
横線の長さを変えたい場合
ちなみに横線の長さですが、
あなたが実際に使いたい場合は、
.line::before{}のcss記述の中にある、widthを変更してください。
ここの数値で長くしたり、短くしたりできます。
横線の表示位置を変えたい場合
また横線の表示位置ですが、
.line::before{}の中の、left:oopx;
という部分の数値をいじれば、左に寄せたり、
右に寄せたりが可能です。
見出しの表示位置を変えたい場合
また、leftを操作して、表示位置を変えた場合、
h1タグでmargin-leftであけてるスペースを、
合わせていじると、あなたが表示させたい間隔を実現できます。
見出しの右側に横線を表示させたい場合
その場合はafterと書きましょう。
コード例としては、以下の感じです。
.line::after {
content:””;
width:20px;
border-bottom:2px solid black;
height:2px;
margin:auto;
top:0;
bottom:0;
left:100px;
position:absolute;
}
すると上記の例でかくと、
右側に表示されます。
ということで、使用方法についてはざっとですが、
以上です。
スポンサードサーチ
見出しに横線をつけるコードの説明
で一応仕組みを説明するのですが、
こちらは擬似要素を使って見出しに横線を表示してます。
横線自体は、擬似要素でborder-bottomを使い、
表示させ、widthで長さを指定し、
それをposition:absoluteとmargin:auto、
top:0; bottom:0で縦に中央寄せしてる、
という形です。
またabsoluteの起点をh1タグに合わしたかったので、
h1タグにはposition:relativeを指定してます。
また、見出しの横に表示させたいので、
見出しに当たるh1タグでは、
margin-leftを使って、左にスペースを作ってます。
これによって、左のスペースに、
横線が表示され、見出しの横線が実現してるわけです。
コードの説明としては以上だったのですが、
ややこしい場合は、コードをそのまま使ってもらった方が、
見出しに横線を表示できますので、そちらでどうぞ。
スポンサードサーチ
まとめ
それではまとめに入ります。
見出しに横線を表示させたい場合は、
以下のコードです。
css
.line::before {
content:””;
width:20px;
border-bottom:2px solid black;
height:2px;
margin:auto;
top:0;
bottom:0;
left:-30px;
position:absolute;
}
.line {
margin-left:30px;
position:relative;
}
html
<h1 class=”line”>見出し</h1>
上記を書けば、見出しに横線をつけれますよ。
ということで、これであなたは、
見出しに横線をつける方法がわかったと思います。
なので、あなた自身でも一度コードを記述して、
試してみましょう。
するとあなたのコーディング力が、
上昇しますよ。
それでは、読んでもらってありがとうございました。
チャーさん
