スポンサーリンク

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

HTML・CSS

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

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

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

きらり

アレンジってどんなことするの?

結耶

そうねぇ。テキストが複数行になったとき行頭を揃えたり、複数行でも画像やアイコンが縦中央に表示されるようにするとか…かな?w

スポンサーリンク

テキストが複数行のとき

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;                       /*アイコンの位置(上)*/
}
結耶

上のサンプルのCSSはこんあ感じです。
この場合だとアイコンはテキストの一番最初の文字の前に画像がつきます。

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

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

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(内側の余白)」です。

2行目 padding:5px 10px 5px 55px;

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

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

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

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

11行目 position:absolute;

12行目 top:7px;

13行目 left:0;

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

結耶

数値や色などはご自分の見出しデザインに合わせて変更してくださいね

きらり

「relative」「absolute」よくわかんないけどとりあえずコードをコピーして使ってみようかな?

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

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%);
}
きらり

複数行になるとアイコンが縦の中央に表示されるんだね。

結耶

そうそう。上で説明した「行頭を揃える」のCSと似てるけどちょっと違うので説明するね。

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

2行目 padding:5px 10px 5px 55px;

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

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

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

11行目 position:absolute;

12行目 top:50%;

13行目 left:0;

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

きらり

結耶~画像が縦中央に表示されないよ!ちょっとズレてる~(^^;

結耶

そうなんだよ!topを50%と指定しただけじゃちゃんと縦中央に表示されないんだよ!
だから下の2行を追加してね。

14行目 -webkit-transform:translateY(-50%);

15行目 transform: translateY(-50%);

きらり

あっ!この2行を入れたらちゃんと縦中央に表示されたぁ。
この「-webkit」何とかとか「transform」とかって何?

結耶

うーん(^^; 私もよく理解出来てないんだよね。

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

最後に

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

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

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

応援よろしくお願いします。
      ブログランキング・にほんブログ村へ

お問い合わせはこちら
この記事を書いた人
結耶(ゆうや)

2017年9月からブログを始め、2018年1月にWordPressに変更しました。知識ゼロのから始めた超初心者で、WordPressやHTML、CSSなど勉強したことを書いています。
愛知県在住。多発性硬化症(MS)という難病と闘っています。

登場キャラクター
きらり
きらり

ある日ひょっこり現れ住みついた居候(いそうろう)。今は結耶と一緒にWordPressやアフィリエイトのことを勉強している。
性別は♂ 。どこから来たかは不明。

楽天ROOM