画像やアイコンつきの見出しで複数行のときの行頭揃えや画像・アイコンの位置

2022年5月15日HTML・CSS

以前「CSSを使って見出しなどに画像やアイコンをつける方法」という記事を描きました。

この記事では擬似要素「before」「after」を使って見出しなどに画像をつける方法を紹介しています。

今回は画像やアイコンをつけた見出しなどをちょっとアレンジしてみたいと思います。

テキストが複数行のとき

「CSSを使って見出しなどにアイコンをつける方法」で紹介した方法で画像やアイコンをつけた場合、テキストが複数行になると以下のようになります。

h2 {
    padding:5px 10px;      /*内側の余白*/
    border-bottom:2px dashed #a61919;  /*下線の太さ 種類 色*/
    font-size:26px;           /*文字サイズ*/
    font-weight:bold;
}

h2:before {
    content: url("画像のURL");  /*画像のURL*/
    margin-right:10px;    /*画像右の余白*/
    position:relative;
    top:7px;                       /*アイコンの位置(上)*/
}

見出しなどのデザインや好みによってはテキストの行頭を揃えたいと思うのでちょっとやってみようと思います。

複数行のとき行頭を揃える

h2 {
    padding:5px 10px 5px 55px;;  /*内側の余白*/
    border-bottom:2px dashed #a61919;  /*下線の太さ 種類 色*/
    font-size:26px;
    font-weight:bold;
    position:relative;
}

h2:before {
    content: url("/webimg/md-piyo.PNG");  /*画像のURL*/
    position:absolute;
    top:7px;                 /*アイコンの位置(上)*/
    left:0;                     /*アイコンの位置(左)*/
}

まずは2行目の「padding(内側の余白)」です。

これは見出しの内側の余白(上・右・下・左)を指定しています。ポイントは左側の余白です。

アイコンを表示させるための余白を作り、テキストの行頭を揃えるために55pxと指定しています。(55pxはご自分の画像やアイコンに合わせて変更してください。)

次のポイントは6行目の「position:relative」と11行目の「position:absolute」です。これはアイコンの位置を指定するためのものです。

position:relativeを親要素である「h2」側に記述します。そして子要素の「h2:before」側にposition:absoluteを記述して「top」「left」でアイコンの位置を指定します。

「top」「left」でアイコンの位置を指定してください。

見出し複数行のとき画像やアイコンを縦中央にする

h2 {
    padding:5px 10px 5px 55px;;  /*内側の余白*/
    border-bottom:2px dashed #a61919;  /*下線の太さ 種類 色*/
    font-size:26px;
    font-weight:bold;
    position:relative;
}

h2:before {
    content: url("/webimg/md-piyo.PNG");  /*画像のURL*/
    position:absolute;
    top:50%;
    left:0;
    -webkit-transform:translateY(-50%);
    transform: translateY(-50%);
}

まずは2行目の「padding(内側の余白)」です。

左側の余白はアイコンを表示させる分の余白を指定します。

次のポイントは6行目の「position:relative」と11行目の「position:absolute」です。これはアイコンの位置を指定するためのものです。

position:relativeを親要素である「h2」側に記述します。そして子要素の「h2:before」側にposition:absoluteを記述して「top」「left」でアイコンの位置を指定します。

「top」「left」でアイコンの位置を指定しますが、この場合は縦中央に表示させるためにtopの値を50%と指定します。

上記2行については下のサイトを参考にしてみてください。

最後に

今回は見出しの複数行の場合のテキストの行頭を揃える方法や画像やアイコンの位置などについて私の備忘録も兼ねて書いて見ました。

今回はサンプルに画像を使いましたが、アイコンでも同じようにできます。(アイコンの指定方法は以下の記事を参考にしてください。)

また見出しだけではなくいろいろ応用できるのでデザインの幅も広がると思います。