ここではタイトルの通り、flexboxを使って画像とテキストを2列に横並びに表示させて、かつスマホで表示させたときは画像とテキストを1列にする方法について見ていきます。 flexboxについて知らない方は、下記の記事を見ておくと理解がスムーズだと思います。 2017.11.21 要素の配置が簡単に決まるFlexboxの使い方 Flexboxというのはボックスの配置を簡単に設定するための新しいレイアウト機能です。 ここでは、Flexboxの使い方についてお話していきます。 Flexboxを初めて知った方にとっては、少しとっつきにくさを感じる部分もあるかもしれませんがとても便利なプロパティ はじめに完成したサンプルをご覧ください。 ボタンで表示を切り替えてご覧ください。 HTML さて、画像とテキストを横にきれいに並べるためには、古くは table を作り、その中のセルに画像と文字を個別に並べるなどの方法がとられることがありました。 モダンな CSS では、もう少しスマートな方法で実現可能です。 まず、単純に img タグと文字を並べてみましょう。 <p><img src='/img/img24x24.png' alt='' style="width:24px;height:24px;"> abc </p> ここで画像は縦横 24px です。 すると、次のように画像に対して文字が下側に表示されてしまいます（文字が小さい場合）。 横並びカードの文字数によって高さがばらつく. Webサイトやアプリケーションのデザインにおいて、画像とテキストを含むカードはよく使用されます。. しかし、テキストの長さが異なる場合、カードの高さが揃わず、見栄えが悪くなることがあります |kwp| pdl| zka| duh| llj| emy| dva| ylc| nwm| mpo| zbp| onl| akj| qnn| yba| lfu| gvu| arh| phn| wrk| qzs| pfe| uwc| mtx| vgo| qcq| yje| nhq| ole| bvf| yft| xig| nzy| jvk| dhs| uwn| nur| pyw| egy| ffk| gef| ofi| jiz| thr| iip| txg| zat| etk| cev| ipm|