CSS

CSSで画像をfloatさせた時にテキストの行間を綺麗に揃えるやり方

何気にこういう細かい部分を調整してあげると見た目も綺麗なりますよね。CSSで画像をfloatしてテキストを回り込ませた時に、画像の下の余白が1行分くらい空いたりすることってあるかと思います。そんな時はテキストのfont-sizeとline-heightに合わせて画像サイズを決めると綺麗に表示させることができます。ということで以下やり方です。

[ads_center]

テキストの行を画像に合わせる

以下のように画像の下に余白ができる時ってありますよね。

CSSで画像をfloatした時の隙間

これを綺麗に揃えていきます。Webデザインレシピさんの記事が参考になりました。

まずは1行分の高さを計算していきます。font-sizeが14pxでline-heightを1.5にすると

14px × 1.5 = 21px

1行が21pxになります。で、それを8行分にしたとすると

21px × 8行 = 168px

8行で168pxになり、最後にfont-sizeの半分を引きます。

168px – 7px = 161px

これで画像の高さを161pxにしてfloatさせてみると、こんな感じで綺麗に揃うことができました。

CSSで画像をfloatしてテキストを揃える

やっぱり文字が揃っていると綺麗ですね。

関連記事

  1. Alerts.css

    CSS

    シンプルでピュアなCSSによるアラート実装「Alerts.css」

    Alerts.cssはシンプルでピュアなCSSを使ったアラートを実装で…

  2. CSSで背景画像をアニメーションさせる

    CSS

    CSSを使ってテキストに背景画像を設定して背景をアニメーションさせるやり方

    ちょっと個人的にいいなって思ったTipsがあったのでご紹介します。CS…

  3. CSS

    CSSのfloatで回り込みさせたテキストを画像や要素の下に回り込ませないやり方

    ちょっとしたCSSのTipsです。結構使う機会があるのでメモがてら残し…

  4. CSS

    CSSを使って画像にホバーするとキャプションを表示させるエフェクト

    CSSを使ったホバーエフェクトがとてもよかったのでご紹介します。画像に…

  5. CSS

    CSSだけを使ったストライプ(斜め・水平・垂直など)の作り方

    CSSだけを使ったストライプの作り方「Stripes in CSS」が…

  6. Animated Transition Effects

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

  1. YAECA ワイドテーパードデニム 10-13WW
  2. ADR-3ML39シリーズ
  3. キュレル モイスチャーバーム
  4. FUJIFILM X-Pro3
  5. iPhone 11 ProとApple Watch Hermès

アーカイブ

PAGE TOP