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

flexcssを使って横並びにする方法(ページ制作に超便利です)

どうも、チャーさんです。   あなたはflexというcssのプロパティを使い、 要素を横並びにする方法を知りたい。 そう思っていませんか?   この記事ではcssのflexを使い、 …

no image

webページのコーディングを効率化し3分の1の時間で制作する方法

どうも、チャーさんです。   あなたはwebページのコーディングを、 効率的にしたいと思っていませんか?   1ページ作るのに10時間とかかかって、 困ってる、という状態ではありま …

no image

cssでレスポンシブ対応にするための方法、具体的な手順を解説します

どうも、チャーさんです。   あなたはcssでレスポンシブにするには、 何を書けばいいのか?と思っていませんか?   この記事では、cssでレスポンシブにするための、 方法や、記述 …

no image

cssで文章を省略する方法。コピペでok

どうもチャーさんです。   あなたはcssで文章を省略したいと、 思っていませんか?   この記事では、cssを使い、 文章を省略する方法を書いています。   &nbsp …

no image

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

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

no image

htmlの画像の階層について詳しく説明(知らないと画像表示で困ります)

html 画像 階層   どうも、チャーさんです。   あなたはhtmlファイルで画像を表示したいのに、 できない。と悩んでいませんか?   実は画像ファイルが表示できな …

no image

javascriptをhtml内で使う方法「完全初心者向け」

どうもチャーさん(@chaa___san)です。   あなたはjavascriptをhtmlで使えないのか? と疑問に思っていませんか?   結論からいうと使えます。   …

no image

ブートストラップの使い方を初心者向けに紹介

どうも、チャーさんです。   あなたはブートストラップを使ってみたい、 または使わないといけないけど、 使い方がわからない。   導入の仕方も、何したらいいかもわからない。 そんな …

no image

cssでボタンにhoverした時に色を変える方法

どうもチャーさんです。   あなたは、cssでボタンにhoverして、 色を変える方法を探していますか?   この記事では、ボタンホバーで、 ボタンの色を変える方法について、 お話 …

no image

cssスマホサイズ時のレイアウトはこれが良いですよ

どうも、チャーさんです。   あなたはcssを書いていて、 スマホサイズの時のレイアウトを、 どうしたらいいか悩んでいませんか?   この記事では、スマホサイズ時の 良いレイアウト …

no image

cssの書き方をまとめました「よく使う内容を網羅」

どうも、チャーさんです。 あなたはcssの書き方について、 網羅的に知りたいですか?   この記事ではcssの書き方について、 よく使われるものについてまとめてみました。   なの …

no image

インライン要素にmarginの上下が効かない時の解決方法「簡単です」

  どうもチャーさんです。   あなたはインライン要素にmarginの上下を、 効かせたいのに効かなくて困ってませんか?   この記事では、そんな状態の解決方法を、 書い …

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

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

no image

cssで画像をトリミングする方法。「記述1行で完了」

どうも、チャーさんです。   あなたはcssで画像をトリミングしたい。 そう思っていませんか?   photoshopでトリミングするのめんどい、 cssでできんかな?と思ってませ …

no image

cssの書き方これらのセレクタを知ってればほぼ困りません

どうも、チャーさんです。   あなたはcssの書き方でセレクタに ついて色々な書きかたがあってよくわかってない、 と感じていませんか?   この記事では様々なセレクタの指定方法を …

最新記事

チャーさん

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

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

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