css

【css】floatとvertical-alignを併用しようとしてがっつりハマった話

css

先日書いたブログに、先輩がこんな風にコメントしてくれたにもかかわらず、がっつりハマったので戒めのためにもメモしておきます。 なにが起きたか 要件としては、高さの違う2つのボックスを横並びにして、上下中央寄せにする、というものでした。 <div class="wrapper"> <div class="left">左は<br>二行</div> <div class="right"></div></div>…

【CSS】横幅が可変な要素を中央寄せにする

css

margin: 0 auto;で中央寄せするためには要素の幅を指定しないといけないので、横幅が可変な場合はこの方法では中央寄せにできません。 inline-blockを使えばできるみたいです。 <div class="pager_wrapper"> <ul class="pager"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </div> .pager_wrapper { text-align: center; } .pager { display: inl…

【css】MediaQueryを使ってみた

css

PCとスマホのページを1ソースで作るために、ウィンドウの幅に応じてスタイルを変更する、css3のMediaQueryを使ってみました。 @media screen and (max-width: 640px) { body { background-color: red; } } MediaQueryを使用する時は、Mediaを明示的に指定し…

cssが適用される優先順位

css

たまに混乱してしまうのでまとめます。 idはclassより強い 階層が深いほうが強い styleを直接書くのが一番強い idはclassより強い この場合は、idの方が強いので背景色は赤色になります。 <div id="hoge" class="hoge"></div> #hoge { background-color: red; } .hoge { background-color: gree…

cssで条件以外の要素に対してスタイルを指定する

css

最初の要素以外のものにスタイルを適用したいというケースがよくあったのですが、その度にいちいち全体に指定した後、first-childだけを元に戻す、みたいなことをしていました。そしたら、そんなことせずともできる方法がありました。 :notを使う :not(selec…