HTML・CSSのおさらい! アイコンとテキストを横並びに配置する方法まとめ - ICS MEDIA
視覚的に情報を伝えられる「アイコン」は、ボタンやナビゲーションなどのUIによく使用されています。なかでもアイコンとテキストを横並びにするレイアウトは実務で組む場面が多くあります。 横並びのレイアウトはさまざまな実装方法が存在し、それぞれに注意すべき点があります。たとえば、Flexboxで横並びのレイアウトを作ると以下のようなレイアウト崩れが発生する場合があります。経験したことのあるHTMLコーダーの方もいるのではないでしょうか？ さらに、アニメーションやアクセシビリティも考慮すると実装方法に向き不向きがあります。この記事では横並びのレイアウトを例に、4つの実装方法とその注意点を紹介します。 ※この記事のサンプルコードでは、CSSクラスの親子関係をわかりやすく、読みやすくするためにSass（SCSS）を使用しています。 レイアウトの実装方法 まずはレイアウトの実装方法から紹介します。以下の条
レスポンシブWebデザインで、スクリーンサイズが中途半端なときにデザインが崩れないようにするための実装方法
Webページを実装する際、注意すべき点の一つは表示されるスクリーンサイズです。スマホとタブレット、そしてデスクトップの3種類を想定している人も多いと思いますが、現在ではさまざまなサイズのスクリーンが存在しています。 スクリーンサイズが中途半端な「中間のデザイン」で、デザインの見栄えが悪くなったり、崩れたりしないようにするための実装方法を紹介します。横一行配置のアイコンが改行してしまう、画像が横長になってしまう、フォームの入力欄がやたら広くなる、など一般的なデザインで見かけると思います。 Thinking About The In-between Design Cases by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 レスポンシブにおける中間のデザイン 中間のデザインとは 中間のデザインに備えて
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
