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してテキストを揃える

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

eコマースサイトで使えるフリーアイコンなど色々前のページ

ブラウザに好きな時間のタイマーをセットしてカウントダウンしてくれるE.gg Timerがとても便利次のページ

関連記事

  1. CSS

    CSS3でシンプルで簡単なボタンを作ってみる

    CSS3を使って簡単なボタンを作ってみました。画像を使わなくてもCSS…

  2. CSSで上下の要素を入れ替えて配置させるやり方

    CSS

    CSSのレイアウトで上下の要素を入れ替えて逆に配置させるやり方

    CSSでレイアウトを組む時に、上下に二つ並んでいる要素を入れ替えて逆に…

  3. CSS

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

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

  4. CSS Only Fab Icon Menu

    CSS

    CSSで実装できるコンパクトで可愛いメニュー「CSS Only Fab Icon Menu」

    CSS Only Fab Icon MenuはCSSによるコンパクトで…

  5. CSS

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

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

  6. nth-child()とnth-last-child()

    CSS

    CSSのnth-child()とnth-last-child()の使い方をまとめてみる

    毎回使おうとする度に記憶が曖昧になっちゃってるんでここにまとめておこう…

コメント

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

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

最近の記事

  1. NIVEA MEN CREME
  2. チャイラテ
  3. ベーコンエッグアボカドトーストとゆずジンジャーアップル
  4. COMOLI ナッピングウールショーツ
  5. 川上庵(麻布十番)牡蠣天せいろ
PAGE TOP