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

デベロッパーツールの使い方を紹介します。「コーダーは知るの推奨です」

どうも、チャーさんです。   あなたはデベロッパーツールって、 どう使ったらいいのか?と思っていませんか。   そもそもどんな使い道があるん? と疑問に思っていませんか。 &nbs …

no image

cssの書き方カンマについての疑問はこの記事で解消

どうも、チャーさんです。   この記事ではcssの書き方の1つである カンマについて書いてます。   なのでこの記事を読めば、あなたは cssのカンマについての疑問が解消され、 さ …

max-widthとmin-widthの違いについてわかりやすく説明します

  あなたはmax-widthとmin-widthの 違いについて疑問を持ってますか?   この記事では、max-widthとmin-width の違いを説明してるので、これを読め …

no image

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

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

no image

cssで要素の位置調整をする方法を丁寧に解説コピペもok

どうも、チャーさん(@chaa___san)です。   あなたはcssで画像やdivで作った要素の位置調整を、 したいと思っていませんか?   この記事ではcssでそれらの要素の位 …

no image

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

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

no image

メニューに下線をだすcss(マウスでホバーした時に)

どうもチャーさんです。 あなたはメニューに下線をだすcssを 探していますか?   この記事では、メニューの上に マウスを持っていくと、メニューに下線が 表示される方法を書いています。 &n …

no image

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

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

no image

cssの書き方でフォントサイズについて知りたいならこの記事

どうも、チャーさんです。   この記事では、cssでフォントサイズ (文字の大きさ)を変える方法を書いてます。     なので、この記事を読めば、 あなたはフォントサイズ …

no image

レスポンシブでフォントサイズを可変にする方法「手間いらず」

どうもチャーさんです。   あなたはレスポンシブで、 フォントサイズを可変にする方法を 探していますか?   この記事では、フォントサイズをレスポンシブで 自動調整できる方法を書い …

no image

cssの読み込み方法を3つ紹介「どれも簡単です」

どうも、チャーさん(@chaa___san)です。   あなたはcssの読み込み方法がわからず、 困っていますか?   この記事ではcssの読み込み方法を3つ紹介してます。 なので …

no image

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

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

no image

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

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

no image

cssの書き方class編(初学者向け)

どうも、チャーさんです。 この記事では、cssの書き方を書いています。   具体的にはclass、classを複数使う方法、 idについてとcss書き方についての内容なので、 この記事を読め …

no image

cssの書き方で大なりと書くとどうなるか知りたいならこの記事。

どうも、チャーさんです。   あなたはcssの書き方で大なり (例 .class > p )のように書くと、 どう動くのか疑問に思ってませんか?   この記事では、大なりで書 …

最新記事

チャーさん

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

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

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