css HTML

見出しに横線をつける方法「webページ制作に便利」

投稿日:

Pocket

うも、チャーさんです。

 

あなたは見出しの横に、横線を表示させたい。

そう思っていませんか?

 

この記事では、見出しに横線をつける方法を、

書いています。(以下のようなのができます)

 

見出し 横線

 

なのであなたがこの記事を読めば、

無事に横線を表示させれるようになるでしょう。

 

ということで、見出しに横線をつけたければ、

このまま下にスクロールし読んでみてください。

 

スポンサードサーチ

見出しに横線を表示させる方法

 

はい、でまず結論から行きます。

見出しに横線をつける方法は以下です。

 

まずコードですが、

こちらです。

 

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>

 

上記を書けば、見出しに横線をつけれますよ。

 

 

ということで、これであなたは、

見出しに横線をつける方法がわかったと思います。

 

なので、あなた自身でも一度コードを記述して、

試してみましょう。

 

するとあなたのコーディング力が、

上昇しますよ。

 

 

それでは、読んでもらってありがとうございました。

 

チャーさん

 

 

-css, HTML


スポンサードサーチ

関連記事

no image

レスポンシブデザインを3秒で確認できる方法「各サイズ」

どうも、チャーさんです。   あなたは、レスポンシブデザインの確認方法を、 探していませんか?   この記事では、レスポンシブデザインを、 スマホサイズ、タブレットサイズ、pcサイ …

cssの効率的な学習方法を知りたいなら読んでください。

  あなたはcssの学習方法を模索していますか? どうしたらもっと効率よく早く学習し上達できるのか、 その方法を探していますか?   この記事では、cssの学習方法について お話し …

no image

cssを最初の要素にのみ適用する方法

どうも、チャーさんです。   あなたはcssを最初の要素にのみ、 適用させたいがどうしたらいいか悩んでませんか?   この記事では、cssを最初の要素にのみ、 適用させれる方法を紹 …

no image

cssで背景画像をレスポンシブ対応させる方法「1行記述すればok」

どうも、チャーさんです。   あなたはcssで背景画像をレスポンシブ対応させたい、 そう思っていませんか?   この記事では、cssで背景画像を、 レスポンシブ対応させる方法を書い …

no image

cssで背景色を二色表示させる方法「コードつき」

どうも、チャーさんです。   あなたはcssで背景色を二色表示するには、 どうしたらいいんだろう? と思っていませんか。   この記事では、cssで背景色を二色 表示させる方法とコ …

no image

cssでボタンをレスポンシブ対応にする方法(微調整必要なしで楽ですよ)

どうも、チャーさんです。   あなたはcssでボタンをレスポンシブにしたい、 かつブレークポイントごとに微調整する手間ひまの、 必要のないボタンを作る方法はないかと思ってませんか? &nbs …

no image

cssで画像を丸くする方法「15秒以内にできます」

どうも、チャーさんです。   あなたはcssで画像を丸くしたい、 そう思っていませんか?   この記事では、cssで画像を丸くする方法を、 書いています。   &nbsp …

no image

cssで背景色を背景画像の上に重ねる方法「コードつき」

どうも、チャーさんです。   cssで背景色を背景画像に重ねる方法が、 知りたい。そう思っていませんか?   この記事では、cssで背景色を 背景画像の上に重ねる方法を書いています …

no image

cssのborderを初学者でもわかりやすいよう説明します

どうも、チャーさん(@chaa___san)です。   あなたはcssのborderとは何か? と疑問に思っていませんか?   この記事ではcssのborderについて、 初学者で …

no image

cssの背景画像が繰り返しになるのを解決する方法

どうも、チャーさんです。   あなたはcssで背景画像を設置すると、 繰り返しになっていて困っていませんか?   この記事では、cssで表示した背景画像が、 繰り返しにならない方法 …

no image

htmlのテーブルを結合させたい場合は読んでください。

  どうも、チャーさんです。 あなたは、htmlで作るテーブルのセルを、 結合させたい、くっつけたいと思っていませんか?   この記事では、htmlのテーブルのセルを、 結合させる …

no image

cssのレスポンシブの書き方「初心者向け記事」

どうも、チャーさんです。   あなたはcssのレスポンシブの書き方を、 知りたいと思っていませんか?   この記事では、cssのレスポンシブの書き方、 メディアクエリ、コードの具体 …

no image

htmlで改行をする方法(3秒で習得できます)

  どうも、チャーさんです。   あなたはhtmlを勉強していて、どうすれば 改行できるのか?と悩んでいませんか。   また色々タグを覚えて、プログラミングを上達させたい …

no image

liタグのメニューにアイコンを表示させる方法(コード例つき)

どうもチャーさんです。   あなたはliタグで作ったメニューに、 アイコンを表示させたいと思っていませんか?   この記事では、liタグのメニューに アイコンを表示させる方法を書い …

no image

cssを動画で学習したいならこの記事をどうぞ

どうも、チャーさんです。 あなたは、cssを始めたい、 で、わかりやすく動画で学習したい、   そう思っていませんか?   この記事では、cssを動画で学習できるよう、 僕がとった …

最新記事

チャーさん

プログラミング・筋トレ・unity系の記事などを書いてます。

大学卒業後→開業→個人事業主7年目ぐらいです。webサイト制作したり、unityでゲーム開発しております。

youtubeもやってまして、主にプログラミング動画とかunity系の動画をあげてるので見てください。