Oops! It appears that you have disabled your Javascript. In order for you to see this page as it is meant to appear, we ask that you please re-enable your Javascript!

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

webページにトップへ戻る機能をつける簡単な方法「2行書けばできます」

どうも、チャーさんです。   あなたはwebページにトップへ戻る機能を、 つけたいと思っていませんか?   この記事ではトップへ戻るを作る方法を、 紹介してます。   & …

no image

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

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

no image

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

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

no image

cssで平行四辺形を作る方法「1行足せばできますよ」

どうも、チャーさんです。   あなたは、cssで平行四辺形に できないものかと思っていませんか?   この記事では、要素をcssで平行四辺形に する方法を書いています。 &nbsp …

no image

cssで文字を回転させる方法「10秒以内にできます」

どうも、チャーさんです。 あなたはcssで文字を回転させたい、 そう思っていませんか?   この記事では、cssで文字を 回転させる方法を書いています。   なので、あなたがこの記 …

no image

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

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

no image

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

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

no image

ブートストラップを使う利点をわかりやすく説明します。習得方法も紹介。

  どうもチャーさんです。   あなたはブートストラップを使う利点は、 何だろうと思っていませんか?   css使えばデザインなんてできる、 何でわざわざブートストラップ …

no image

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

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

no image

cssで背景色をつける方法とコードの書き方

  どうも、チャーさん(@chaa___san)です。   あなたはcssで背景色をつけたいんだけど、 どうすればいいかわからない。   そう思っていませんか? &nbs …

no image

コーダーになるにはこの5つのステップを踏みましょう

どうも、チャーさんです。   あなたはコーダーになるには、 どうすれば、どんな手順を踏めばなれるのかな、 と思ってませんか?   この記事では完全に0から、 コーダーになるそのため …

no image

wordpressで条件分岐でcss(デザイン)を切り替える方法

どうもチャーさんです。 あなたはwordpresで、条件分岐させて、 css(デザイン)を切り替えたいと思っていませんか?   ページごとに違うデザインを施せるように したい、そう思っていま …

no image

cssで背景画像を表示するコードと方法「コピペOK」

どうもチャーさん(@chaa___san)です。     あなたはcssで背景画像を表示したいですか?   この記事ではcssで背景画像を表示する方法、 コード、あなた自 …

no image

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

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

no image

z-indexが効かない時の簡単な解決策。1行あれを足せば解決ですよ

z index 効かない   どうも、チャーさんです。   あなたはz-indexが効かないと、 困っていませんか?   ページ制作をしてて、 z-indexを書いたのに …

最新記事

チャーさん

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

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

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