Web筋トレも使っているサーバー!ロリポップを使ってみない?

優秀サイトに学ぼう〜モッピー

Sponser Link

情報量の多いサイトの余白のつけ方が上手いな〜と感心したので、

モッピー(https://pc.moppy.jp/)のデザインを分析して行きたいと思います。

メリハリがついて見やすい、読みやすい!

Sponser Link

全体サイズ

左カラム:245px

間隔:25px

メインカラム:1010px

=1280px

Sponser Link

商品一覧の場合

ul>liをdisplay:flexで並べている。

li>a(全体を覆っている)にdisplay:flexでそれぞれの商品レイアウトしている。

一つの商品のHTML

 ul

li

li>a

文字サイズや余白

この文字サイズと余白が絶妙なのだと思います。

Sponser Link

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA