CSS Flexboxで実装されたマンガのコマ割り風にデザインされたレスポンシブ対応のレイアウト
Post on:2016年5月11日
sponsors
CSS Flexboxで実装されたマンガのコマ割り風にデザインされたカード型レイアウトを紹介します。しかもレスポンシブ対応で、スクリプトは使用されていません。
コマ割りレイアウトはレスポンシブ対応で、表示サイズによってレイアウトが変化します。各コマの吹き出しとかは位置を保持したまま変化します。
マンガだとコマの位置に意味があるので、変化してしまうのはダメですが、カード型レイアウトにコマ割り風のデザインを適用と考えるといろいろと使えそうです。
コマ割り風レイアウトの実装
実装はシンプルです。
HTML
各カードは「<div class="panel"></div>」で実装されており、その中に画像やテキストや吹き出しを自由に配置できます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<article class="comic"> <div class="panel"> <p class="text top-left">Suddenly...</p> <p class="text bottom-right">...something amazing happened</p> </div> <div class="panel"> <p class="text top-left">Try resizing...</p> <p class="text bottom-right">...it's responsive</p> </div> <div class="panel"> <p class="speech">A speech bubble</p> </div> <div class="panel"></div> <div class="panel"></div> <div class="panel"></div> <div class="panel"></div> <div class="panel"></div> <div class="panel"> <p class="text bottom-right">THE END</p> </div> </article> |
CSS
レイアウトの基本のCSSもシンプルです。
|
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 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
html, body { margin:0; padding:0; } .comic { display:flex; flex-wrap:wrap; font-family:'Comic Sans', cursive; padding:1vmin; } .panel { background-color:#fff; border:solid 2px #000; box-shadow:0 6px 6px -6px #000; display:inline-block; flex:1 1; height:200px; margin:1vmin; overflow:hidden; position:relative; } .panel:nth-child(1) { flex-basis: 400px; } .panel:nth-child(2) { flex-basis: 200px; } .panel:nth-child(3) { flex-basis: 200px; } .panel:nth-child(4) { flex-basis: 200px; } .panel:nth-child(5) { flex-basis: 200px; } .panel:nth-child(6) { flex-basis: 200px; } .panel:nth-child(7) { flex-basis: 400px; } .panel:nth-child(8) { flex-basis: 200px; } .panel:nth-child(9) { flex-basis: 200px; } |
あとは、テキストや吹き出しを配置します。
|
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 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
.text { background-color:#fff; border:solid 2px #000; margin:0; padding:3px 10px; } .top-left { left:-6px; position:absolute; top:-2px; transform:skew(-15deg); } .bottom-right { bottom:-2px; position:absolute; right:-6px; transform:skew(-15deg); } .speech { background-color:#fff; border:solid 2px #000; border-radius:12px; display:inline-block; margin:.5em; padding:.5em 1em; position:relative; } .speech:before { border:solid 12px transparent; border-left:solid 12px #000; border-top:solid 12px #000; bottom:-24px; content:""; height:0; left:24px; position:absolute; transform:skew(-15deg); width:0; } .speech:after { border:solid 10px transparent; border-left:solid 10px #fff; border-top:solid 10px #fff; bottom:-19px; content:""; height:0; left:27px; position:absolute; transform:skew(-15deg); width:0; } |
sponsors
