HTML・CSSで見出しの両端（左右）に線を引く方法。absoluteなしで応用簡単！

Webサイトの見出しを少し印象的にしたいとき、文字の左右に細い線を入れるだけでもぐっとデザイン性が高まります。

今回は、CSSの基本的なプロパティだけで実装できる「両端に線を引く見出しデザイン」の作り方を紹介します。z-indexやabsoluteを一切使わない方法なので、応用や調整も簡単。コード量も少なく、初心者の方にもおすすめです。

CSSで使用している「flex-grow:1;」は領域いっぱいまで伸びるので、いやな場合は削除してください。代わりに「width: 100px;」など固定の数値を入れてあげてください！

シンプルな左右に線がある見出し

見出し

<h1 class="title-bdr01">見出し</h1>
.title-bdr01 {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px; /* テキストのサイズ */
    font-weight: 600; /* テキストの太さ */
    color: #776342; /* テキストの色 */
}
/* 左側の線 */
.title-bdr01::before {
    margin-right: 20px; /* 左線とテキストの間の余白 */
    content: '';
    flex-grow: 1; /* 領域いっぱいまで広げる */
    height: 1px; /* 左線の太さ */
    display: inline-block;
    background-color: #776342; /* 線の色 */
}
/* 右側の線 */
.title-bdr01::after {
    margin-left: 20px; /* 右線とテキストの間の余白 */
    content: '';
    flex-grow: 1; /* 領域いっぱいまで広げる */
    height: 1px; /* 右線の太さ */
    display: inline-block;
    background-color: #776342; /* 線の色 */
}

デザイン性がある左右に線がある見出し

見出し

<h1 class="title-bdr02"><span>見出し</span></h1>
.title-bdr02 {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.title-bdr02 span {
    width: 100%;
    max-width: 180px;
    height: 44px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px; /* テキストのサイズ */
    font-weight: 600; /* テキストの太さ */
    color: #fff; /* テキストの色 */
    background-color: #776342; /* テキストの背景色 */
    border-radius: 200px; /* 四角の丸み */
}
/* 左側の線 */
.title-bdr02::before {
    content: '';
    flex-grow: 1; /* 領域いっぱいまで広げる */
    height: 1px; /* 左線の太さ */
    display: inline-block;
    background-color: #776342; /* 線の色 */
}
/* 右側の線 */
.title-bdr02::after {
    content: '';
    flex-grow: 1; /* 領域いっぱいまで広げる */
    height: 1px; /* 右線の太さ */
    display: inline-block;
    background-color: #776342; /* 線の色 */
}

記事一覧に戻る