失敗談:display:flexを使った画面づくりの時の注意点(gridに転向か併用)

ブログ

Blog
  1. ホームページ制作・運営はアウラ:ホーム
  2. ブログ
  3. 失敗談:display:flexを使った画面づくりの時の注意点(gridに転向か併用)

失敗談:display:flexを使った画面づくりの時の注意点(gridに転向か併用)

失敗談:display:flexを使った画面づくりの時の注意点(gridに転向か併用)

こんにちは牧野です。

デザインって聞くと、「組み合わせ」とか「形」とか「色」とか「全体像」とか「効果的に見せるための特殊なアニメーション」や「画像作り」(.etc)。何万通りもありすぎて圧倒されてしまうし、考える要素がたんまりなんですが、テキスト数は1行60文字(pc画面)とか30~40文字(スマートフォン画面)、フォントの種類の選定、そのテキストの行数によって見せ方を変える考え方は重要のようです。

会社の事業内容や商品紹介をするときに効果的な見せ方として、

フレックス例2

こんなんだったり、

フレックス例1

こんなんだったりをよく見かけます。

いざ、コーディング

いくつかこのような画面を作るときにflexとか、inline-blockなどを用いて配置を整えたり、いろんなやり方があっても、flexに用意されているプロパティが便利すぎて、なにかと多用してしまいます。しかし、flexとflex-basisを用いてこのような配置でコーディングしたところがテキスト量によって改行量が多くなって、見えている画像の大きさが異なってしまい、あえなくやり直し・・・抜けてました。画像の大きさも本来の大きさに書き出しなおしました(汗)。

FlexとGrid

で、display:gridさんのお世話になっております。

画像とテキスト

flexだと、画像とテキストの長さが相互に依存してるもんですから、猫画像が縦伸びしてまともな画像が取れないんですが、グリッドだと適当なところで文章を切って小分けにセクション分けできるから新聞記事っぽいレイアウトで人物紹介してみたり、画像についての商品説明を加えてみたりと意味合いの出し方に幅が広がります。align-selfで縦中央配置することやコンテンツごとの比率分割もできるので便利です。

しかし、一部ブラウザでプロパティが読み込まれない場合が場合があるので、ブラウザ対応が必要な場合があるので要注意です。

 

 

前後の記事

【Web制作者必見】デスクワークの強い味方!最強の相棒(マウス)はこれだ!

こんにちは!アウラ広報部です。   先日の台風15号、関東方面で甚大な被害が出たと連日報道されていますね。 想像以上に酷い被害状況を知り、去年の今頃に近畿で猛威を振るった台風を思い出しました…

お電話でのお問い合わせはこちら:06-6292-8577。受付時間は平日9:30~18:30 インターネットからは24時間受付中!お問い合わせフォームはこちら