こんにちは、工藤です。
今回は個人的に知っておくと便利だなと思うcssの小技part4をご紹介します。
display:inline-blockで要素を並べた時に隙間を作らない
以前の記事でさらっと説明してしまったので、改めてご紹介です。
display:inline-blockで要素を横に並べると『text-align』や『vertical-align』の要素が使えて実はfloatよりも便利だなあと思っています。
が、1つ問題があってどうしても要素同士に隙間ができてしまいます。
今回はそれを解決するための、個人的に一番簡単な方法をご紹介します。
DEMO
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
/*特に何も指定していないリスト*/ ul.incorrectList li{ display:inline-block; vertical-align:top; padding:15px; height:80px; width:80px; } /*親要素にfont-size:0;を指定*/ ul.inlineblockList{ font-size:0; } ul.inlineblockList li{ display:inline-block; vertical-align:top; font-size:13px; padding:15px; height:80px; width:80px; color:#FFF; text-align:center; } |
やり方は親要素（今回はul）に『font-size:0;』の指定をするだけ。
理屈としてはテキストの改行で起きる隙間が0を指定することでなくなる…みたいです。
その時にもし子要素（今回はli）にテキストが入る場合は『font-size:13px;』など、フォントのサイズを指定してあげないとテキストのサイズが0のままで表示されなくなってしまうので注意してください。
これで完了です。
色々方法はありますがこの記述が一番ソースもまとまるのでおすすめです。
可変のblock要素の比率を、ウィンドウサイズを変えても維持する
レスポンシブのだと地味にblock要素を比率を保たせて表示させたい、という時があるのですがいざやろうと思うと思いつく範囲だと組むのが難しく、jsを入れたり…なんてこともあります。
が、実はcssで簡単に組めます。
DEMO
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
ul.variableList{ font-size:0; } ul.variableList li{ display:inline-block; font-size:13px; vertical-align:top; width:50%; height:auto; } ul.variableList li:before { display:block; content:""; padding-top:100%; } |
子要素に『:before 』で上記のような記述をします。
『padding-top:100%;』で正方形に、例えば80%くらいにして長方形で可変させる…ということも可能です。
DEMOで使っているように例えばレスポンシブで画面サイズが小さい場合にのみ表示させる場合は下記のような感じに。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
ul.variableList{ font-size:0; } ul.variableList li{ display:inline-block; font-size:13px; vertical-align:top; width:100px; height:100px; color:#FFF; } ul.variableList li:first-child{ background:url(photo01.jpg) no-repeat center 50%; background-size:cover; } ul.variableList li:nth-child(2){ background:#66CCCC; } ul.variableList li:nth-child(3){ background:#6666CC; } ul.variableList li:last-child{ background:url(photo02.jpg) no-repeat center 50%; background-size:cover; } @media screen and (max-width: 768px) { ul.variableList li{ width:auto; height:auto; width:50%; } ul.variableList li:before { display:block; content:""; padding-top:100%; } } |
簡単にできるので、ぜひ使ってみてください。
