<p>この記事では文字の横に線がびよーんと伸びる見出しスタイルの作成の仕方について説明します。</p>

<p>画像のようなスタイルです。</p><h2 id="h1a6fbb500c">指定するタグ</h2><p>html</p><pre><code>&lt;h1 class="sideLine"&gt;見出し&lt;/h1&gt;</code></pre><p>css</p><pre><code>.sideLine {
&nbsp;display: flex;
&nbsp;align-items: center;
}
.sideLine:before,
.sideLine:after {
&nbsp;content: '';
&nbsp;height: 1px;
&nbsp;flex-grow: 1;
&nbsp;background-color: #000000;
}
.sideLine:before {
&nbsp;margin-right: 20px;
}
.sideLine:after {
&nbsp;margin-left: 20px;
}</code></pre><h2 id="hf16d73cee1">タグの解説</h2><pre><code>.sideLine {
&nbsp;display: flex;
&nbsp;align-items: center;
}</code></pre><p>見出しを<code>display:flex</code>にすることで、要素を横並びにしています。</p><p><code>align-items: center;</code>で縦の位置が中央にそろうように設定。</p><pre><code>.sideLine:before,
.sideLine:after {
&nbsp;content: '';
&nbsp;height: 1px;
&nbsp;flex-grow: 1;
&nbsp;background-color: #000000;
}</code></pre><p>見出しの前後に空の要素を作ります。</p><p><code>flex-grow: 1;</code>で自動的に親要素全体に線が伸びるように設定。</p><p><code>height</code>を変えると線の太さが、<code>background-color</code>を変えると線の色が変わります。</p><pre><code>.sideLine:before {
&nbsp;margin-right: 20px;
}
.sideLine:after {
&nbsp;margin-left: 20px;
}</code></pre><p>それぞれに<code>margin</code>を設定して、文字との間の隙間を設定しています。</p><p><br></p><h2 id="h86fc8dfcaa">おまけ：scssでの指定方法</h2><p>最近はスタイルをscssで作成することが多いので、scssでの指定方法も記載しておきます。</p><pre><code>.sideLine {
&nbsp;display: flex;
&nbsp;align-items: center;
&nbsp;&amp;:before,
&nbsp;&amp;:after {
&nbsp;&nbsp;content: '';
&nbsp;&nbsp;height: 1px;
&nbsp;&nbsp;flex-grow: 1;
&nbsp;&nbsp;background-color: #000000;
&nbsp;}
&nbsp;&amp;:before {
&nbsp;&nbsp;margin-right: 20px;
&nbsp;}
&nbsp;&amp;:after {
&nbsp;&nbsp;margin-left: 20px;
&nbsp;}
}</code></pre>

文字の横に線がびよーんと伸びる見出しスタイルをCSSで実現する方法について説明します

CSSで文字の横に線がびよーんと伸びる見出しを作成する

<p>コンテンツ量が少ないときにフッターとページ最下部との間にできてしまう隙間の解消方法について説明します。</p><p>ヘッダー＋メインコンテンツ＋フッターという構造を想定しています。</p><p>HTML＋CSSでの実装方法を解説します。</p><h2 id="h4f4cfd3663">HTML＋CSSの設定のポイント</h2><p>隙間を作らず、フッターを最下部に表示したいときのポイントは4つです。</p><ol><li>ヘッダー＋メインコンテンツ＋フッターの外側にwrapper用の要素を作成して、<code>display: flex</code>を指定</li><li>wrapper要素に<code>flex-direction: column</code>を設定</li><li>wrapperクラスに<code>min-height: 100vh</code>を設定</li><li>footerに<code>margin-top: auto</code>を設定</li></ol><h3 id="hc684259255">サンプルコード</h3><p>イメージしやすいようにサンプルコードを作成しました。</p><iframe class="embedly-embed" src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fcodepen.io%2Fsakelog%2Fembed%2Fpreview%2FPoQjVXG%3Fdefault-tabs%3Dcss%252Cresult%26height%3D600%26host%3Dhttps%253A%252F%252Fcodepen.io%26slug-hash%3DPoQjVXG&display_name=CodePen&url=https%3A%2F%2Fcodepen.io%2Fsakelog%2Fpen%2FPoQjVXG&image=https%3A%2F%2Fshots.codepen.io%2Fsakelog%2Fpen%2FPoQjVXG-512.jpg%3Fversion%3D1653124612&key=94335756f04b424b8ce3ce71cbe3de0a&type=text%2Fhtml&schema=codepen" width="800" height="600" scrolling="no" title="CodePen embed" frameborder="0" allow="autoplay; fullscreen" allowfullscreen="true"></iframe><p>サンプルはわかりやすいようにパーツごとに色を付けています。</p><p>main要素の大きさに関わらずfooterが最下部に表示されているのが分かると思います。</p><p>実際に使用する際は、wrapperクラスの背景色にmainの背景色と同じ色を指定するか、mainに<code>flex-grow: 1</code>を指定すると良いです。</p><h3 id="h800b32a212">コードの解説</h3><h4 id="h7b8fd41f23">wrapper要素の作成</h4><p>外側のwrapper要素を設定し、wrapper要素の高さを設定しています。</p><p><code>min-height: 100vh</code>で、最小の高さを画面の縦幅いっぱいにしています（超えた場合は自動的に広がる）。</p><p><code>display: flex</code>と<code>flex-direction: column</code>で内側の要素を縦に配置しています。</p><h4 id="h4cb1ff7ae9">footerのmargin設定</h4><p>外側の要素の高さを設定しているので、footerに`margin-top: auto`を設定することで、外側の高さ分までmarginが自動で設定されます。</p><h4 id="h3de35099b3">参考</h4><p><code>display: flex</code>については、下記ページで詳しく解説されています。</p><p><a href="https://www.webcreatorbox.com/tech/css-flexbox-cheat-sheet" target="_blank" rel="noopener noreferrer">日本語対応！CSS Flexboxのチートシートを作ったので配布します | Webクリエイターボックス</a></p><p><br></p>

コンテンツ量が少ないときにフッターとページ最下部との間にできてしまう隙間の解消方法について説明します

タグ: CSS

CSSで文字の横に線がびよーんと伸びる見出しを作成する

HTMLとCSSだけでフッターの隙間を解消する方法