画像やテキストを左右の線で挟む!見出しを線で挟む方法!

テキスト 画像 左右 線 挟む 見出し

この記事では、下記のことができるようになります。

できるようになること

  • 左右を線で挟まれた見出しを作れます。
  • テキストのみの線で挟まれた見出しを作れます。
  • 画像を含めた線で挟まれた見出しを作れます。

after

シンプルな線

シンプルな線

色を変えた線

色を変えた線

点線

点線

方側のみの線

方側のみの線(左)

方側のみの線(右)

画像を挟んだ線

画像とテキストを挟んだ線

とテキスト

注意
この記事ではstyle.cssを修正します。

必ずバックアップを取得するようにお願い致します。

1. シンプルな線

結果

シンプルな線

HTML
<p class="line-headline1">シンプルな線</p>
style.css
.line-headline1 {
	font-size: 24px;
	display: flex;
	align-items: center;
}
.line-headline1:before, .line-headline1:after {
	content: "";
	flex-grow: 1;
	height: 1.5px;
	background: #000000;
	display: block;
}
.line-headline1:before {
	margin-right: .4em;
}
.line-headline1:after {
	margin-left: .4em;
}

2. 色を変えた線

結果

色を変えた線

HTML
<p class="line-headline2">色を変えた線</p>
style.css
.line-headline2 {
	font-size: 24px;
	display: flex;
	align-items: center;
	color: #6088c6;
}
.line-headline2:before, .line-headline2:after {
	content: "";
	flex-grow: 1;
	height: 1.5px;
	background: #6088c6;
	display: block;
}
.line-headline2:before {
	margin-right: .4em;
}
.line-headline2:after {
	margin-left: .4em;
}

シンプルな線に対して、文字のcolorと線のbackgroundの色を変更。

3. 点線

結果

点線

HTML
<p class="line-headline3">点線</p>
style.css
.line-headline3 {
	font-size: 24px;
	display: flex;
	align-items: center;
}
.line-headline3:before, .line-headline3:after {
	content: "";
	flex-grow: 1;
        border-top: 4px dotted #000000;
	display: block;
}
.line-headline3:before {
	margin-right: .4em;
}
.line-headline3:after {
	margin-left: .4em;
}

シンプルな線に対して、線のbackgroundheightを削除して、border-topを追加。

4. 片側のみの線

方側のみの線(左)

結果

片側のみの線(左)

HTML
<p class="line-headline4">片側のみの線(左)</p>
style.css
.line-headline4 {
	font-size: 24px;
	display: flex;
	align-items: center;
}
.line-headline4:before {
	content: "";
	flex-grow: 1;
	height: 1.5px;
	background: #000000;
	display: block;
}
.line-headline4:before {
	margin-right: .4em;
}

CSSから、:afterの要素を削除します。

方側のみの線(右)

結果

片側のみの線(右)

HTML
<p class="line-headline5">片側のみの線(右)</p>
style.css
.line-headline5 {
	font-size: 24px;
	display: flex;
	align-items: center;
}
.line-headline5:after {
	content: "";
	flex-grow: 1;
	height: 1.5px;
	background: #000000;
	display: block;
}
.line-headline5:after {
	margin-left: .4em;
}

CSSからの:beforeの要素を削除します。

5. 画像を挟んだ線

結果

HTML
<p class="line-headline1"><img style="width: 100px;" src="https://jaminlifelog.com/wp-content/uploads/2020/05/image_header.png" /></p>

好きな線とimgを組み合わせます。

style="width: 100px;"で好きなサイズ感と、src="#"の中身をファイルのパスに書き換えることで簡単に修正できます。

6. 画像とテキストを挟んだ線

結果

とテキスト

HTML
<p class="line-headline1"><img style="width: 100px;" src="https://jaminlifelog.com/wp-content/uploads/2020/05/image_header.png" />とテキスト</p>

好きな線とimgを組み合わせます。

style="width: 100px;"で好きなサイズ感と、src="#"の中身をファイルのパスに書き換えることで簡単に修正できます。

また、画像の前後にテキストを挿入することも可能です。

7. まとめ

CSSを更新した後は、キャッシュを削除するか、「Ctrl + F5」でスーパーリロードをしてください。

この見出しをトップページなどに挿入しておくと、トップページがより華やかになることでしょう。

ぜひ、左右に伸びる線を活用してみてください。