難易度:★★★☆☆
試作
およそ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領域と、それより外にはみ出さないようにしています。