モバイルテンプレートでレスポンシブに3つの要素を並べる方法

ページ

 

モバイルテンプレートでレスポンシブに3つの要素を並べる方法

2015年3月29日日曜日
モバイルテンプレート

僕がやっているもう一つのブログ「キセノンテンター」のモバイルテンプレートは、スマートフォンやタブレットで良い感じに表示させようと努力しています。

そんな中でも、wordpress popular postsのプラグインを使って、サムネイルとタイトル付きで人気記事のを3つだけ表示しているコーナーが有ります。

これを良い感じにひょじしたい。そして少し困ったことになり、解決もしました。

3つの要素を並べる

3つの要素を並べる

まる、簡単に思いついたのが、要素の横幅(width)を指定してあげて、その間にmarginを着けてあげる方法です。これなら簡単に思いつくと思います。

ただ、このやり方はスマートじゃありません。全くスマートじゃありません。おそらくこれをするにはDIV-A,DIV-B,DIV-Cと言った具合にそれぞれの要素を指定してわざわざmarginの値をpxで設定してあげるという。

あほらしい。

しかも、このやり方だと、画面サイズによって表示方が変わっちゃうからダメだ。


写真で言うとココね。

そこでこういう感じにしました。

widthを%にする

widthを%で固定

そこで思いついたのが、要素のwidthを「%」で指定してあげます。表示させたい記事が3つだったので、要素のwidthを30%にしました。


また、僕の理想としては、要素の並び郡の両端に「a」の幅、要素同士の間に「b」の幅を当てたかったです。



よって、こうなりました。



cssはこんな感じ

.yousonokatamari{
     margin-left: -2%;
}
.youso{
     float: left;
     display: block;
     margin-left: 3%;
     width: 30%;
    overflow: hidden;
}

「youso」にwidthを30%つけて、margin-leftを3%ずつつけると、30+3+30+3+30+3=99%になります。


ここで、margin-left: -2%;をつかって、左の「3%」を「1%」にしてあげるとOKです。この時、「%」自体が「全体のサイズの何%」という意味なので、すっぽりとはまります。はみ出た分はoverflowで無視されますしね。

これで、両端に「1%」のmarginがあき、要素同士の間が「3%」の並びが完成しました。

これにより、画面サイズが変わっても非常にレスポンシブな3つの並びになったということです。

今回はwidth=30%でやりましたが、はみ出さない程度にmargin-leftを付けて、右端の残り%をみて、margin-leftから引いてやればOKなのです。

わからんだら聞いて

@kissatenもぶっちゃけ左をmargin-leftで引いてやれば帳尻が合うことにびっくりしたのですが、良く考えたら「全体の何%」と言うことなんだなと。

それで考えたら、10個でも20個でも要素を良い感じにレスポンシブに並べれますね。






この記事が気に入ったら
いいね!しよう

最新情報をお届けします

Twitterで喫茶店の部屋をフォローしよう!

 

▶ 関連する新着記事