2018-04-27

最新情報をトップページに設けることにしたのですが、サムネイルにちょっとした簡易情報をと思って並べても、一行にひとつだと間延びするので一行に2つ入れることにしたのですが・・・
つまり、こういうことですね。Aがサムネイル、Bが簡易文章ですね。
A B
これが一行に2つあるので、Cがサムネイル、Dが簡易文章として追加します。
A B ・ C D
これがPCで見たときの並びです。しかしながら、このHome Pageはレスポンシブ対応なので携帯で見ることを考えると、モバイル表示時には下記のようにならないといけません。
A
B
・
C
D
つまりサムネイルの下に簡易説明文が来るように縦並びに変形しないと携帯で見づらくなってしまうということですね。
画面表示が小さくなるとAの下にBが潜り込むように設定するのですが、それが2つあるとどうも同じテーブルでは表示にうまく行かず、結局、骨組みとなるテーブルにもう一つ、差し込む形で体裁を整えることに。
レスポンシブでなければ、なんでもよいのですが、携帯やタブレット閲覧時も考えないといけないのでテーブルでの作成はちょっと手間がかかってしまうというお話でした。
PCでもブラウザのウィンドウをドラッグして小さくしてみると、変形するのがご覧いただけます。

Ny