[CSS]「display: contents;」がすごい便利！ラッパーを使った実装が大きく変わるこれからのテクニック
例えばカードで、見出しが1行・3行、本文の量が多かったり少なかったりする場合、それぞれの高さを揃えるのは非常に難しく、かなりトリッキーな実装が必要でした。もしくは、JavaScriptを使用しなくてはできなかった実装です。 こういったレイアウトをセマンティックなHTMLで実装できるようになるdisplay: contents;の基礎知識と使い方を紹介します。 How display: contents; Works 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 【更新】 2021/9/4: 現在の環境に合わせて、内容をアップデートしました。 まずはおさらい、CSSのボックス モデル 「display: contents;」を使用すると、どうなるか 「display: contents;」について詳しく解説 「display:
![[CSS]「display: contents;」がすごい便利！ラッパーを使った実装が大きく変わるこれからのテクニック](https://cdn-ak-scissors.b.st-hatena.com/image/square/377c5eeb9c23ceb8880cd655b04f3d4733502acc/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201802%2F2018040106.png)
【デザインの敗北】東京ミッドタウン日比谷の『極力シンプルで美しいデザインにしよう』という意識がトイレのアイコンを小さくしすぎて看板が設置されてしまう
Simon_Sin @Simon_Sin 東京ミッドタウン日比谷の「極力シンプルで美しいデザインにしよう」というデザイナーの欲求がトイレのアイコンを小さくしすぎて「トイレはどこ？」という質問が多発して看板が設置されるの、まさに『デザインの敗北』というほかなくてとてもすき pic.twitter.com/kpI8LnWkq7 リンク www.hibiya.tokyo-midtown.com 東京ミッドタウン日比谷 東京ミッドタウン日比谷公式ウェブサイト。東京ミッドタウン日比谷は、約60店舗に及ぶショップ＆レストラン、オフィス、映画館、空中庭園や広場空間が集約された複合施設です。芸術文化・エンターテインメントの街「東京ミッドタウン日比谷」。上質な時間と、未来志向の新たな体験を東京ミッドタウン日比谷で。 6 users 729
昨日の夜 ちょっと気がかりなことがあって、 ぼんやり家を出て家族との待..
昨日の夜 ちょっと気がかりなことがあって、 ぼんやり家を出て家族との待ち合わせ場所に向かってたの 考えても仕方ないことだよなあ。とかいいきかせて、 1歩1歩あるいてたら、 すみませーん、写真撮ってください☆ 近所のレストランで結婚式の二次会終わりの新郎新婦とおそらく幹事のみなさんがいてさ。 もちろん！よろこんで！ と、スマホを借りて、 じゃーとりまーす 男性のひとりが せーの、だっちゅーの！ 笑ってシャッターボタン押せなかったし、 それでまたみんなが笑うし。 おめでとうございます！ と新郎新婦に言いながらスマホ返して、 横断歩道わたってちょっと振り返ったらまだレストランの前でみんな笑い合ってた。 薄く風がふいて、満月だった。わたしはやっぱり幸運だとおもった。 …… 閑話休題 気がかりな事は、 夫が風俗にいってること。 それはいいとしても顔面騎乗の店 というのが、かなり無理で もう、顔がまと
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
在宅ワーカーのためのハンドブック