Coooooool!!商品ラインナップを作ろう!まずは基本モデルの作成まずはタグを用意!ザックリとベースのモデルを作成します。今回はリンク付きの横並びボックスにします。–></ul></div>[/html]これで基本タグが完成しました!あとはこの『<li>~</li>』をコピペして行けば、個数が増やせるというお手軽テンプレートの完成です。リンク内の各コンテンツにはそれぞれ独立したスタイルシートを適用させたり、汎用性を持たせる為に全てにクラスを振ってあります。無い方がすっきりしますが、そこは用途によって変えて良いと思います。タグをリセット各タグにはそれぞれ初期設定があらかじめ決まっています。/>タグには下に1行分の余白が設定されている等。自由にデザインを配置する為、そういった値を全て0にリセットします。none;}[/css]floatで横並びにする左詰めに並んで行くように、floatで横並びにします。列数は4列くらいにしましょうか。ブラウザの幅などで見えたり見えなかったりという風にならないよう柔軟に対応させる為、値は『%』で指定します。最初の内は結構困惑しがちですが、floatを掛けると親要素の高さが無くなります。これはfloatの意味通り要素を『浮かせる』と言う意味なので、親要素にキッカリ引っかかっていた子要素が浮いてしまったため、引っかかりが無くなって高さが無くなる...と僕は解釈しています(笑)ゴムがバチーン!って感じじゃないですかね。完全に意味不明ですけど。hidden;』を仕様して、高さを復帰させます。hidden;』を設定すると、高さが計算されるという仕様を利用したものです。他にも『:afterを用いたクリアフィックス』という方法もありますが、今回は割愛します。hidden;}[/css]表示画像の大きさも調整さらに画像も小さい分には特に支障はありませんが、大きすぎるとはみ出てみっともないので、最大サイズをボックス内までに設定します。文字に濃淡を出してメリハリを出すここからもっと見やすく、デザイン設定をしていこうと思います。文字の色や大きさをそれぞれ差別化して、メリハリを出したいと思います。bold;}[/css]見やすさを出すために余白を活用あまり詰まりすぎていると非常に窮屈かつ見づらいので、余白を使って見やすくします。余白を入れすぎると今度は逆に見づらいので注意!画像は、大きさが足りない場合には真ん中になるように調整します。CodePen.[/codepen_embed]でもこれだと、隣のアイテムとの余白が無いので、まだちょっと見づらいですね。次は隣との余白を付けてみたいと思います。リキッドなフロートボックスを作成では試しに普通に作ってみましょう!今回は隣との余白は30pxという設定で作成します。CodePen.[/codepen_embed]どうでしょう。横の数4列に設定したはずが3列になってしまいました。これは、横幅25%+30pxという設定なので、横幅が合計120pxオーバーする形になり最後の1個が回り込んでしまったと言う事です。/>にマージンを入れてみましょう。CodePen.[/codepen_embed]これでブラウザ幅に関係なく4個入るようになりました!ただ、右端の余白30pxが邪魔になりませんか?普通に見たら中央ではなく30px分左に寄っている様に見えてしまったあまりカッコよくないですね。次はこの右端の30pxを何とかしてみましょう。ネガティブマージンを利用して余白を作るネガティブマージンとは、なんかの技名みたいですが、単純にmarginの値にマイナス値を付けるだけです。下と右に付けた場合は、『その方向にある要素が自分の方にに引っ張る。幅を指定していない場合はpaddingのような使い方になる。画像にしてみました!こんな感じ。英語ですがこちらに詳しく書いている様です。Margins右端の30pxを見えなくする右端の30pxをなくす為に以下の工程を進めます。/>』の右側に30px分のネガティブマージンを設定し、余白を作る。/>の右30px分の余白を非表示にする。Year!!イメージとしてはこんな感じです。CodePen.[/codepen_embed]ちなみにそんな難しい事しなくても、ただ余分に右側に30px多く設定すればいいんじゃないの?と思うかもしれませんが、今回はリキッドレイアウトで作成している為、そういった細かい設定が出来ません。今回のケースではネガティブマージンが一番手っ取り早く、管理も楽ちんです。右は完成しましたが、下の余白も同じく入れたいですね。単純に入れると先ほど同様で、一番下だけ余計な30px分の余白が出来てしまい、これまたあまりかっこよくありません。ここでもネガティブマージンの『下に設定すると下の要素を自分に移動させる』原理を利用して疑似的に無くし、上下左右余白が均等になるようにします。CodePen.[/codepen_embed]折り返しが崩れないようにするここまで来たら殆ど完成ですね!あとはフロートレイアウトにありがちな『レイアウト崩れ』を回避したいと思います。普通に使うと気づかないことが多いですが、レスポンシブデザインやリキッドレイアウトにした場合、1行の文字数が定まらないことが多く、もし高さ一定でない場合、折り返した際に引っかかってしまう場合があります。both;』を追加して、必ず左端から表示されるように調整します。調整には『nth-of-type』の疑似セレクタを使用します。CodePen.[/codepen_embed]並びをレスポンシブにするこれだけでもどのブラウザサイズによっても柔軟に対応出来るボックスモデルになっていますが、やはりスマホデバイスで4個並びは小さくなりすぎますね。最後にデバイスサイズ毎に見やすいようにレスポンシブにしたいと思います。通常は4個並び、タブレットサイズでは3個並び、スマホサイズでは2個並びにしてみましょう。サイズは某Bootstrapで使用されているようなサイズを利用し、メディアクエリを利用して実装します。ここらへんは、デバイス多様化のせいで、特に決まりって無いですよね。iphoneもでかくなっちゃったし、WindowsPhone日本に殆ど来ないし。both;}}[/css]完成!これでデバイス毎に列の数が変わってリキッドな商品一覧が完成です!ちょっと分かりづらいですが、スマホ等でみたり、ブラウザの幅をグニョグニョして頂けると、横列の数が変わると思います。CodePen.[/codepen_embed]まとめいやぁページ制作って面白いですね!これはあくまでも一例ですが、他にもいろいろ方法はあります。結果表示出来れば全て正解です。自分なりの管理しやすい作り方を考えて作ってみて下さい!シェアするこうじいつもする作業をもっとミス無く楽ちんに出来るような環境が提供できれば幸いです。マジックキーボードは買い?買ってトクする人はこんな人2021.03.17AppleiPadの英字入力で最初が大文字になってしまう方に朗報2020.04.03生活&ダイエット生活Instagramはじめてます。2018.10.11生活&ダイエット2018年、明けましておめでとうございます!2018.01.01生活&ダイエット2017年ありがとうございました。