こんにちは、ナカムラです。
前回はレスポンシブページを作る時の工夫していることをご紹介しました。
今回は動的なページを組む時の工夫についてご紹介します。
動的なページとは、プログラムによってテキストなどの要素が出力されるページです。
このブログも動的なページです。扱う情報の型は決まっているものの、記事ごとに内容が違います。
tech.arms-soft.co.jp
テキストの増減
まずよくあるのが文字数の違いです。
表示する領域は決まっているのに文字数が多かったり少なかったりすることがあります。
表示する領域からはみ出した場合の隠し方として三点リーダー（…）をつける方法と続いているかのように隠す方法があります。
See the Pen css:長〜いテキストどうすんの by Nakamura (@takayo-nakamura) on CodePen.
この他にも、四隅に飾りをつけているデザインのものや、背景に画像を敷いている領域の場合、長文が入った時に背景画像が繰り返されるのか、逆に短文だった場合、最低限必要な高さを考慮する必要があります。
画像サイズ（アスペクト比）
画像のサイズ調整についてはレスポンシブ編でご紹介しましたが、今回は”アスペクト比を保つ”というところに注目したいと思います。
できれば画像サイズは統一してもらった方が良いですが、どうしてもバラけてしまうことがあります。（一覧のサムネイルなど）
縦長と横長のどちらが表示されても欠けることなく画像全体を表示させたい場合は”内接リサイズ”を、余白が出てしまうと見た目もばらけた印象になるのでイメージ重視の場合は”外接リサイズ”にする、といった具合でそのページの目的に合わせて調整します。
See the Pen css：画像のリサイズパターン by Nakamura (@takayo-nakamura) on CodePen.
アイテム数が増減する時
一覧ページでは、登録されている情報を同じHTMLタグで内容だけ変えて生成されます。
登録件数によって表示される件数が変わることを考慮しましょう。
縦一列に並ぶ場合は気にしなくても大丈夫ですが、横並びの一覧の場合は注意が必要です。
余白付きの3列で折り返したい場合、折り返し地点の要素にclassを当てて調整するのはループ処理が複雑になるので、classを当てなくても折り返せるように作ります。
また、3列の一覧でアイテム数が5件だった場合、左寄せにならないものがありますのでご注意ください。
See the Pen アイテム数が増減する時 by Nakamura (@takayo-nakamura) on CodePen.
最後に
動的なページで工夫しているものは以上です。
前回のレスポンシブ編と合わせて、これで基本的な組み方はお伝えできたと思います。
あとはこれらの繰り返しだったり組み合わせになるので思い出して使ってみてください。
CSSで表示の調整はある程度行えますが、プログラムやjsを使って適度な情報量に調整する方法や、そもそも入力するところで規格統一するようにするなど、データの持ち方も検討した方が無駄なく作れて良いですね。これについては開発の初期段階で検討しましょう。
