【CSS】見出しの左右両端に線を入れる

難易度:★★★☆☆

試作

およそ93px:743px:93px(画面幅1023pxで)

タイトル

テキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキスト

HTML


<div class="wrapper">
    <div class="inner">
        <p class="title"><span>タイトル</span></p>
        <p>テキストテキストテキストテキストテキストテキストテキスト<br>
            テキストテキストテキストテキストテキストテキストテキスト<br>
            テキストテキストテキストテキストテキストテキストテキスト<br>
            テキストテキストテキストテキストテキストテキストテキスト<br>
            テキストテキストテキストテキストテキストテキストテキスト<br>
            テキストテキストテキストテキストテキストテキストテキスト
        </p>
    </div>
</div>
 

CSS


.wrapper{
	background-color: #ffa040;
}

.inner{
	width: 80%;
	margin: auto;
	background-color: #f0f0f0;
}

.title{
	font-family: 游明朝, "Yu Mincho", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", HGS明朝E, メイリオ, Meiryo, serif;
	font-size: 3vw;
	text-align: center;
	overflow: hidden;
	color: #000;
	position: relative;
	margin: 1.5vw 0;
}

.title span{
	position: relative;
	padding: 0 36px;
}

.title span::before,
.title span::after{
	position: absolute;
	top: 50%;
	content: '';
	width: 50vw;
	height: 1px;
	background-color: #000;
}

.title span::before{
	right: 100%;
}

.title span::after{
	left: 100%;
}
 

解説

pタグはブロック要素の一種であり、デフォルト設定では、
width:100%、つまり横幅一杯に広がります。
また、text-alignプロパティは、直下のブロック要素に影響を与える事なく、
内部のテキストを任意の位置に揃える事が出来ます。

ここでは、”タイトル”の文字列はspan要素で、インライン要素である為、
同じように、親側のtext-alignプロパティによって制御されます。

次に、::beforeおよび::afterの疑似要素について、
それぞれ左右の位置を100%に指定しています。

この100%は、paddingを含む親要素の幅から計算されます。
absolute配置でも、paddingの領域も計算されるのです。

そして、疑似要素自体の横幅を50vwに設定していますが、
そのままでは、ブロック要素の外に飛び出してしまいます。
それを防止する為に、ブロック要素にoverflow: hidden;を設定する事により、
margin領域と、それより外にはみ出さないようにしています。

みらいワークの施設利用者
チュンチュン

「WordPress」でのHTML・CSS・JavaScriptに関する情報を、
提供させて頂く予定です。
使用プラグインは「Simple Custom CSS and JS」で、
JavaScriptの表示位置は必ず「要素内」です。
ただし、使用環境により異なる事をご了承ください。

サイト制作
「みらいワーク」利用者ノート
タイトルとURLをコピーしました