よこ並びのCSS。
スマホサイトが優勢な昨今、要素をよこ並びにする機会は減ってきているのかな。とも思いますけれど、大きい画面で見るサイトでは、ナビゲーションやタブや、商品一覧など、よこ並びにレイアウトする機会はまだまだあるんじゃないでしょうか。そんな「よこ並びにするためのCSS」も、やり方はさまざま。お馴染みのやつから、新参者まで、順番に見ていくことにします:)。
つくるレイアウト
ここでは、よこ並びの定番、下図のような「よくあるナビゲーション」と、商品写真と商品名などがズラズラ並ぶ「よくある商品一覧」のレイアウトを作るためのCSSを紹介してゆきます。
下のお品書きから、各CSSでのレイアウトの記事へ移動します:)。
Comment & Pingback
12 Comments! for よこ並びのCSS。
アシベ
もう少し書き込もうとしたら既に前のコメントを送信してしまってました・・・
少し質問なのですが、後半の商品一覧レイアウトのHTML内でul+liタグ内にdl+dt+ddタグの記述でたまにいろんなサイト様のソースコードをみていると見かけます。これはどのような利点があるのでしょうか？
_watercolor
> アシベさん
コメントありがとうございますー！“前のコメント”が送信されてきてないみたいで、気になるところですが…X(、
早速ご質問について…、
li要素の中にdl要素を入れる利点は、ズバリ、HTML文書に意味を持たせるためです:D！
この記事の中では、商品一覧のところで、ul/li要素の中でdl/dt/dd要素を使ってます。
商品一覧は“リスト”なので、ul/li要素でマークアップしています。
ul/li要素で括った文書は、ただの文章ではなく、「一覧である」ということを表せるんです。
これで、“商品が並んでいる”ことを、ブラウザに伝えることができます。
これだけでも、商品一覧としては十分ですけれど、さらに詳しく、商品ひとつひとつの中の、商品名と、説明、お値段にも意味を持たせるために、dl/dt/dd要素を使っています。
dl/dt/dd要素で括った文書は、「用語とその説明である」ことを表せます。
ここでは商品名をdt要素でマークアップして、その説明となる、文章とお値段をdd要素でマークアップしています。
これで、「バター風味豊かなサクサクの…」と「¥220」という文章が、クイニーアマンの説明であることをブラウザに伝えています。
ということで、利点というか、“心遣い”といった感じなのかなぁと思います:)。（自己満足なところもありますけれど…）
マークアップの方法は人それぞれになっちゃうと思いますけれど、僕はいまのところ、こんな風なマークアップで落ち着いてます、ということです。
ではではX)！
アシベ
>watercolorさん
コメントありがとうございます。
前回のコメントが反映されていませんでした(数分前に書き込んだ内容も反映されずまた打ち直し中)
久しぶりにサイトを覗いてみましたら更新されておりましたのでさっそく読ませていただきました。
横並びに必要なプロパティの解説が1つ1つとても詳しく記載されており、度忘れした場合やレイアウトの手法の違いについて検討している際にとても重宝する記事だとおもいました。
(flex)プロパティの登場により以前よりも柔軟かつ保守性の高いレイアウトが可能になり、いままでの友(float)の出番がなくなったと解説しているサイトなどもたまにみかけますが、
個人的に(float)は画像などを格子状に大きい画像と小さい画像数枚をぴったりとさせたい特に便利だと感じています。
(table-cell)は(float)のデメリット(clearfix)の記述なしでぴったりとなりますがその反面(margin)が効かないので思わぬ修正の際に苦労するときがあります。
(flex)プロパティはレスポンシブの際に特に大きなカラム変化などがない場合は利用しなくてもいいのかなと思い始めました。
まあ、それでも重宝するのはグローバルナビゲーションやフッターナビを組み合わせるときには強力ですね。
コンポーネントに応じて横並びプロパティを考えていけばいいんだろうけど現状の私ではどれがいいのかと迷い放題です。
CSSも思い通りの表示がされたときは大変うれしいですが、数か月間触れていないと忘れていますので不思議ですよね
_watercolor
> アシベさん
コメント反映されずお手数かけてしまってごめんなさい、、改めてコメントありがとうございます！
floatをと呼ぶあたり共感です。そうですね、なんだかんだ言って、僕もfloatプロパティはまだ使い勝手よい気がしてて、まだよく使います！
そしてフレキシブルボックスは、という点も、共感です;)。
フレキシブルボックスは、まだなんだか使いこなせてない感じ、使える場面が見出せてない感じですね…。
display: gridを使ったグリッドレイアウトも使えるようになってきたり、レイアウトするためのCSSプロパティがてんこ盛りですけれど、デザインとかデバイスに合わせて、使い分けるのが大事だと感じます。僕もしょっちゅう忘れるので、備忘録って大事だな！と思いますよーXD。
duu
毎回、記事をとても楽しみにしております。
初歩的な内容で恐縮なんですが、
テーブルレイアウト。の
「行数が違ってもボタンのサイズを揃える」
のところで
「marginプロパティでは上下に-4emを指定」されていますが、
この状態では
「タモリ倶楽部のボタン」画像の点線で示されている領域部分が
「ミュージックステーションのボタン」よりも上下1px狭くなっているので
リンク領域は狭まったままのようになると思っていました。
これは
ポイントとして書かれている
「ネガティブマージンでは、親要素の領域だけ元に戻る」とありますので
ここでいう一番縦の領域が大きい「ミュージックステーションのボタン」まで戻るということで
「タモリ倶楽部のボタン」の上下1pxは影響しなくなるという考えでよろしいですか。
（つまり、結果「タモリ倶楽部のボタン」に於いては上下3pxだけ戻る）
そしてその「ネガティブマージンでは、親要素の領域だけ元に戻る」
というのは親要素であるli にtable-cellを指定しており
「table-cellを指定した要素の縦幅は、その列の一番大きい要素に揃う」から
なのでしょうか。
以上、初歩的な質問で申しありませんがご教授いただけたら幸いです。
よろしくお願いいたします。
_watercolor
> duuさん
コメントありがとうございます。
記事の更新がめっちゃんこ遅くて恐縮です〜…。。
コメントいただいた件、その通りです！
ネガティブマージンを指定することで、li要素自体は結局もとの大きさに戻るんですが、table-cellを指定した要素の縦幅は、その列の一番大きい要素に揃うから、ボタンの高さが揃うってことです:)。
要素を検証して見ると、その列の一番大きい要素に合わせて、li要素の上下の余白が、パディングみたいなので埋められてるのがわかります。
ではでは、今後ともLopan.jpをどうぞよろしくです;)。
duu
早速のご返答、
スッキリしました！
ありがとうございました。
また次回の更新を楽しみにしております。
{name}
テーブルレイアウトの場合、display: table; を設定した要素にtable-layout: fixed; を設定することでセルの幅が均等割り付けになります。
セルにwidthを設定した場合は要素数が変わった場合に不都合が出やすいですが、fixedレイアウトにすることで要素数に関わらず均等にレイアウトできます。
_watercolor
> {name}さん
コメントいただきありがとうございます！
たしかに！ul要素にtable-layoutプロパティを指定すれば、li要素にわざわざ均等を計ったwidthプロパティを指定しなくても、均等にレイアウトできますね！
そちらの方がスマートな気がします。下にサンプルを作ってみましたー。
ul要素に指定した横幅を基準に均等に横幅を割り振ってるんですねー:D。テーブルは万能だなぁ。。
教えていただきありがとうございましたー！
ではでは、今後ともLopan.jpをよろしくですX)！
774
私も最近仕事でCSSに触れる機会が増えたので、
「あー分かる分かる、見えないところでいろいろな事が起こっているからCSSって大変だよねー」とか知ったかぶりしつつ読んでました（笑）
後半は初めて知ったプロパティたくさんですが・・・(^^;
同じものを作ろうとしても、いくつも手法があるCSSって面倒だけど面白いですよねー
苦労して書いたCSSで、思い通りの表示がされたときの快感はたまらんです（笑）
_watercolor
> 774さん
コメントどうもありがとうございます！
そうですねー、上手に書けた時はすごく充実した気持ちになりますよね！自己満足かもしれないけれど。X)
どんどん新しくなっていくし、どんどん便利になっていくけど、どんどんシンプルに、ややこしくなってくから、迷路みたいで楽しいです:)。
今後ともCSSをよろしくです！