深夜のテンションでサムネ画像作ったらこんなことになりました。いい感じにハイになってます。 …さて、Webサイトの制作時、画像の下に謎の余白が生まれることがありますよね？これ、初心者の方は結構悩みそうなので、理由と解決方法を載せておきます。 ちなみに写真は愛車のCBR400Rちゃんです。 謎の余白が生まれる理由 これ結構忘れがちなんですが、画像ってテキストと同じインライン要素なんですよね。なので、配置されるのは下端ではなくベースラインです。このベースラインと下端の間が、余白として現れてしまいます。 あ、ベースラインって何ぞや？って人はググってね。 解決方法 display: block 画像をブロック要素にするのが一番簡単な方法です。 なお、ブロック要素にはtext-alignが効かないので、中央寄せしたいならmargin: 0 autoを使いましょう。

こんにちは。フロントエンドのつっちーです。 要素の表示と非表示を切り替える方法って、同じことをやっているように見えて、実はたくさんありますよね。 これまで無意識に使い分けていましたが、いま一度整理しておこうということで、まとめてみました。 表示・非表示の切り替えに使えるCSSプロパティ 他にもあるかもしれませんが、私は主に下記のプロパティで切り替えを実現しています。 opacity visibility display では一つひとつ、特徴と用例をみていきましょう。 1. opacityの切り替え See the Pen 191001 by ligdsktschy (@lig-dsktschy) on CodePen. 特徴 非表示のときも、領域が確保される クリック／タップ可 transition可 用例 「要素を、スクロールによって画面内に入ったときに表示させる」など。見えるか見えない

z-indexを指定して要素を重ねている時、下になっている要素にリンクを設定したのですが、そのままだとクリック出来ない状態で困りました。 解決方法についてメモしておきます。 問題 もともとz-indexが指定してあり、２つの要素が重なっておりました。 重なっている要素のうち下の要素にリンクを設定したかったのですが、普通に設定しただけだとクリック出来ない状態でした。 解決方法 上になっている要素に、pointer-events: none; を付け加えます。 #zindex2 { // z-indexを指定して上になっている要素 略 z-index: 2; pointer-events: none; } すると、下になっている要素がクリックできるようになります！！ しかしこのままだと、上の要素にもリンクがある場合、そちらがクリック出来なくなってしまいます。 それを解決するには、上の要素の配下