お知らせ

現在サイトのリニューアル作業中のため、全体的にページの表示が乱れています。
はてブ数
投稿日:
言語::HTML言語::CSS

Bioサイトを作っていた時にimgタグの下に謎の隙間ができることに気がついたので、その対処録。

問題

画像の下に謎の隙間があり、DevToolsで見るとaタグがはみ出ているように見える。marginpadding0にしても効果なし。

imgタグの下に隙間がある

aタグがimgタグの下にはみ出ているように見える

aタグを外して、imgタグ単体にしても起きる。

aタグを外し、imgタグ単体にしても起きる

再現コード例

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <title>lycolia.info</title>
  </head>
  <body>
    <a href="https://example.com">
      <img src="example.png" width="200" height="40" alt="example">
    </a>
  </body>
</html>

原因

imgタグはinline要素なので vertical-align の既定値が baseline になっている関係で、文字の下端と画像の下端が合う状態になっているために、隙間が生まれていることが確認できる。

文字の下端と画像の下端が合う状態になっている

解決策

imgタグに対してvertical-alignbottomないしtopを指定すれば解消する。

vertical-alignaを指定したときの例、下の隙間がなくなっている

勿論この状態で横に文字を並べると、その文字は当然浮くが、今回はこの解決方法は扱わない。

横に文字を並べた例、空白分文字がずれている

参考コード

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>lycolia.info</title>
  </head>
  <body>
    <a href="https://example.com">
      <img style="vertical-align: bottom;" src="example.png" width="200" height="40" alt="example">
    </a>
  </body>
</html>
はてブ数
投稿日:
言語::CSS

レスポンシブにdisplayを切り替えるCSSを書いててハマったので備忘録。

今回は例として画面幅に応じて表示する項目数を変動させるCSSを書いてみます。media queryとnth-childを使って表示数を切り替えていく感じです。

イメージとしてはこんな感じ。

SP View PC View
SPビュー
PCビュー

上手くいかないケース

このコードでは画面幅を変えても項目数に変化がありません。理由としてはnth-child(n + 4)display: none;が900pxでも保持されたままだからです。試しにdisplay: none;font-weight: bold;とかに変えてみると良くわかります。

デモページ

.example li:nth-child(n + 4) {
    display: none;
}

@media screen and (min-width: 900px) {
    .example li:nth-child(n + 6) {
        display: none;
    }
}

上手くいくケース

以下のコードではnth-childで非表示にしている部分を900pxの時に表示指定にすることで3項目表示と5項目表示が切り替わるようになっています。そりゃ指定してなければ表示されないよねっていう単純な話ですね…。

デモページ

.example li:nth-child(n + 4) {
    display: none;
}

@media screen and (min-width: 900px) {
    /** 明示的に表示させる */
    .example li:nth-child(n + 4) {
        display: list-item;
    }

    .example li:nth-child(n + 6) {
        display: none;
    }
}
はてブ数
投稿日:
言語::HTML言語::CSS

画像マーカーを使ったリストタグを使った時に文字列がvertical-align: middle的になってほしい!

が結論から言うと多分無理です

なってくれないんだなこれが!

  • 残念ながら現実にはなりません

縦中央に来ない

  • 上の画像のソースはこんなん
    • ::beforecontent に画像を置くとかしても無駄です
<ul>
  <li>リストの要素だよ~</li>
  <li>改行のある<br>リストの要素だよ~</li>
</ul>
ul {
    list-style-image: url("https://i.imgur.com/hX2OCbY.png");
}

li {
    vertical-align: middle;
}

どうにか対策してみる

  • 一見するとなんとかなったように見えますが、改行すると崩れます
    • ぶっちゃけ無理にリストタグ使う必要もないと思うので、素直に div とかで代替するのが一番だと思います
      • 何が何でもリストタグ使いたい場合はリストタグでラップしてしまうのが一番でしょうね…

力づく

  • 上の画像のソースはこんなん
    • リストのマーカーを使うことを放棄しているので、画像を抜けると字が落ちるのはどうしようもないですね
<ul>
  <li>リストの要素だよ~</li>
  <li>改行のある<br>リストの要素だよ~</li>
</ul>
    .ul {
      list-style: none;
    }

    .li::before {
      padding-right: 3px;
      min-height: 36px;
      content: url("https://i.imgur.com/hX2OCbY.png");
      vertical-align: middle;
    }