レスポンシブWebデザイン最近、会社のサイトをリニューアルする機会があったんですが、サムネイルのサイズがみんなバラバラ!ってことがあったんですよね。今まではそれを横幅だけ揃えて高さはバラバラなまま表示してたりして、なんだか統一感のないデザインだったんですが、そんな悩みを解決してくれるcssを覚えたので、メモとして書き残しておきます!画像の可変幅にも対応できているので、レスポンシブWebデザインにも使えますよ!サムネイルの画像サイズがみんなバラバラ・・・サムネイルの画像サイズがバラバラだと、どうしても表示に統一感がなくなってしまいますよね。Pinterestのような、サムネイルのバラバラ感を逆に活かしたレイアウトであればいいのですが、使い所が限られてきます。以下が実装用のコードです。「CSS」のタブをクリックして確認してみてくださいね。CodePen.実装のポイント画像をトリミング範囲となる外枠で囲むまずは画像を外枠で囲います。hidden;を設定すると、枠からはみ出た部分が非表示になります。画像は枠に対して以下のように絶対指定で中央配置されているため、ちょうど画像の真ん中でトリミングしたように表示されるというわけです。画像自体を可変にするのであれば、幅を100%に指定してあげるだけで比率を保持したまま自由に伸縮できます。...が、画像を囲っている枠を可変にするためには、枠にpadding-top(またはpadding-bottom)を指定して高さを出してあげる必要があります。今回は、画像を4:3の比率でトリミングしているため、以下のようにpadding-topの値を75%に指定しています。*/この75%という数値は、画像の比率にもとづいて計算されています。比率4:3の画像の、横幅に対する高さの割合を求めればいいので、「高さ÷幅×100%」で答えが出ます。Spiceちなみに、トリミングするサイズが固定であれば、以下のようにサイズを指定してあげればOKです。画像の比率がトリミング範囲と違いすぎると余白が生まれるここでは、非表示の部分の方が大きくなってしまうのを防ぐため、画像にmax-widthとmax-heightを指定して画像の最大サイズを定めています。150%;つまり、外枠のサイズより画像が大きい場合でも、画像は枠の1.5倍のサイズ以上は大きくなりません。最大サイズを定めることによって、トリミングする範囲をできるだけ小さくすることができますが、大幅に異なる比率の画像を入れてしまうと余白が生まれてしまうのです。枠からはみ出た部分は本当にトリミングされたわけではないPhotoshopを使ったように枠からはみ出た部分がカットされてとっても便利な手法ですが、はみ出た部分は本当にトリミングされたわけではなく、CSSで非表示になっているだけです。なんとなく画像をドラッグしてみた時や、スマホでリンクをタップした時に元画像の形が見えてしまい、ちょっとカッコ悪い思いをすることもあります。ま、気にしなければ支障はないですけどね。表示サイズよりも大きい画像を読み込むと読み込み速度が遅くなることもありますし、先述したように意図した表示にならない可能性もあります。いった注意点をふまえた上で、この方法がお役に立てればいいなーと思います。追記スマホなら、リンクをタップした時に出るハイライトカラーを無効化する方法がありました。transparent;これなら元の画像の形がバレてしまって恥ずかしい思いをすることはなくなります。タップ時のハイライトカラーは、ユーザーに「自分がリンクを押した」という感覚を教えてくれるとても重要な要素だと思うので、よく考えて使いましょう!「transform」はIE10以上に対応!今回のCSSのキモは「transform」というプロパティですが、こちらはIE10以上に対応しています!IE9にも「-ms-」というベンダープレフィックスをつければ対応できるようですが、私が確認した限り、レイアウトがくずれてしまったようなので、IE10以上と記述しました。個人的にはIE11に対応できていれば最近では問題ないかなと考えています。その他のブラウザでもほぼ問題なしです。安心ですね!今回の記事は、以下のサイトを参考に書かせていただきました!どちらもcssで画像をトリミングすることのメリット・デメリットなどをわかりやすく解説してくださっています。web.contempo.jpさいごに最近はブラウザの対応状況などをあまり気にせず、どんどんcssで色々なことができるようになって本当にうれしいです。PM大野はじめまして。記事を読んでいただいてありがとうございます!画像の横並びを増やすには、liのwidthの数値をいじってあげると変わります!たとえば3つ並びにしたい場合はためしにwidthを30%とかにしてもらうと変わると思います。数値は100を並べたい数で割ると出すことが出来ます。2つ並びは単純に100÷2=50で、50%にすれば2つ並びになります(ソースコードでは48%となっていますが、両端にmarginで1%の余白を設けているためです)。余白を設けなければ、3つ並びなら100÷3で約33%。4つ並びなら25%ですね。わかりづらい説明で申し訳ないのですが、解決できましたでしょうか・・・!もし何かコメントをいただければ幸いです。ご指摘等も大歓迎です。