Lopan.jp

よこ並びのCSS。

float, table layout, inline-block, flexible layout

スマホサイトが優勢な昨今、要素をよこ並びにする機会は減ってきているのかな。とも思いますけれど、大きい画面で見るサイトでは、ナビゲーションやタブや、アイテムリストなど、よこ並びにレイアウトする機会はまだまだあるんじゃないでしょうか。もちろん画面幅にはレスポンシブで。
そんな「よこ並びにするためのCSS」も、やり方はさまざま。お馴染みのやつから、新参者まで、順番に見ていくことにします:)。
以下は目次です。クリックするとそのセクションへ移動します。

フロートでレイアウト。

今でもよく使われているよこ並びCSSといえば、floatプロパティ。ずっと前からよこ並びといえばfloatプロパティでした(2017年2月現在)。けど本来は、よこ並びするためのプロパティというよりも、特定の要素を左右に寄せて配置するためのプロパティです。例えば、下のサンプルみたく、文章中の挿絵をレイアウトする時。img要素に対してfloat: left;と指定すれば、画像は左側に寄り、float: right;と指定すれば、画像は右側に寄り、その後に続く要素は、画像を避けながら、その隣に回り込むようにレイアウトされます。

フロートでのよこ並び

よこ並びのナビゲーションでは、連なったli要素すべてにfloat: left;を指定して、続々と左へ寄せることで、横一列に並べているわけですねー。横幅を指定しなければ、その要素の内容(ここでは文字数)に準拠した横幅でよこ並びになります。

※フロートした後には、フロート解除も忘れずに。ここでは、.cfというクラスでclearfixを適用しています。

clearfixについては下記記事が詳しいです。
floatを解除する手法のclearfix と 次世代のレイアウトの話|Web Design KOJIKA17(2013.6.30)

ナビゲーションを中央に配置する

ナビゲーション全体が左に寄っちゃってますけれど、中央に配置したいなって時には、ナビゲーションのさらに親の要素にtext-align: center;を指定して、ナビゲーション自体にはdisplayプロパティでinline-blockと指定することで、中央に配置されます。ここではul要素をnav要素で括って、そこにtext-align: center;を指定してます。

よく見ると、ナビゲーションの下に妙な余白があるのがわかりますね…。inline-blockを指定したことで、ul要素の縦方向の位置が、ベースラインに揃うようになったのが原因。

inline-blockな要素は、テキストと同じように扱われる

ベースラインに揃うのは、vertical-alignプロパティの初期値、baselineの影響なので、ここではvertical-align: middle;と指定することで、余白が出ないようにしています。


親要素が居ない、という時には下のサンプルのように中央に配置することができます。

ul要素に、position: relative;と指定することで、leftプロパティで要素の位置を動かせるようになります。left: 50%という指定で、ul要素の左辺が画面の中央(左端から50%の位置)にくるように配置されます。さらに、transformプロパティのtranslateX()という関数を使って、ul要素の横幅の50%分、左方向へ移動しています。
ただしこのままだと、ul要素の横幅が画面の横幅と同じなので、結局元の位置に戻ることになっちゃいます…。そこで、ul要素にdisplay: inline-block;と指定します。これで、ul要素の大きさが要素の内容(ここではナビゲーションの幅)に準拠した大きさになるので、うまく中央に配置されるってわけです。

translateX()でのパーセント指定は、その要素の横幅が基準となる

ナビゲーションを横幅いっぱいにレイアウトする

ナビゲーション全体を親要素の横幅いっぱいに広げたい場合には、下のサンプルみたくli要素の横幅を、widthプロパティの値の合計が100%となるように指定します。ここではボタンの横幅をぜんぶ20%に指定しています。
※width/heightプロパティとpadding/borderプロパティを一緒に指定する時は、box-sizingプロパティborder-boxを指定しておくと、特にパーセントで横幅を指定する時に便利です:)

ただ、文字数によって改行すると、ボタンの大きさが揃わなくてかっこ悪いです。なるべく1行になるように、文字数に合わせてボタンの横幅を調整するのは、面倒臭いからちょっとヤかも…。

目次に戻る

テーブルレイアウト。

そんな時にはテーブルレイアウトです。displayプロパティのtableという値を使います。
ul要素にdisplay: table;と指定し、li要素にはdisplay: table-cell;と指定すれば、ul/li要素がtable/td要素さながらにレイアウトされます。

テーブルは万能

ナビゲーションを中央に配置するときも、tableならばmarginプロパティで左右にautoと指定すれば、中央に配置されるし、ul要素の横幅100%と指定すれば、親要素いっぱいに広がって。しかも、li要素の横幅はその要素の内容に合わせてよしなに伸縮してくれるんです:D。なによりclearfixしなくてよいのも良いです。

もちろん、li要素の横幅を指定すれば、ボタンの横幅を統一することもできます。
td要素(=table-cellを指定した要素)はvertical-alignプロパティで、横に並ぶ要素の縦方向の位置を制御することもできるから、下のサンプルみたくvertical-align: middle;を指定すれば、要素を上下中央に揃えることができるのが特徴ですよね。けどやっぱりフロートの時と同じく、文字数によってボタンの大きさがマチマチになっちゃいますね…:(

行数が違ってもボタンのサイズを揃える

a要素に敷いている背景色をli要素に敷くようにすれば、見ため的にはボタンの大きさが揃うけれど、リンクエリア自体はさっきのままなので、文字数の少ないボタンは上の方と下の方がクリックできないまま。クリックできると思わせぶりな、意地悪ナビゲーションになっちゃいます…:(

やっぱり背景色はa要素に敷いておいて、それでいてボタンの大きさを揃えるためには、下記のようにCSSを指定します。

a要素の上下にpaddingプロパティで多めに余白を指定することでa要素のリンクエリアを広げておいて、marginプロパティで上下にネガティブマージンを指定して、paddingで広げた分を元に戻します。ここでは、もともと1emだった上下のpaddingプロパティの値を5emに広げたので、marginプロパティでは上下に-4emを指定しています。
このままだとa要素の背景色が広がったままなので、li要素にoverflow: hidden;を指定することで、li要素からはみ出す部分を非表示にします。パディングによってa要素の領域が広がるけれど、ネガティブマージンでは、親要素の領域だけ元に戻る、というトコがポイントです。
ボタンの大きさが揃って、それでいて、ボタンのどこもクリックできるようになりました:D

table-cellを指定した要素の縦幅は、その列の一番大きい要素に揃う

レスポンシブにする

このままだとスマホで見た時、いくらなんでもボタンが縦に長すぎですよね。とはいえ、こういったナビゲーションは、スマホで表示する際には、だいたいたて並びにすることが多いです。

レスポンシブに表示を切り替えるにはメディアクエリを利用します。@mediaルールを使って、スタイルが適用される時の画面の横幅を制限することで、画面幅に合わせて、レイアウトを切り替えることができるようになるんです。
下のサンプルでは、画面の横幅が、767px以下の時には、ul要素もli要素もdisplay: block;にして、隙間を空けているパディングの向きを変えて、たて並びになるようにしてます。あと、行数が違った時にボタンの高さを揃える必要がなくなるので、a要素に指定していた、ネガティブマージンや余計なパディングも、元通りにしておきます。
※767px以下とはつまりiPad未満(iPadを含まない、それよりも小さい画面サイズ)ということ。

メディアクエリについては下記ページを参照のこと。
メディアクエリの利用 - CSS | MDN(2016.10.18)

目次に戻る

インライン・ブロックでレイアウト。

li要素にdisplayプロパティでinline-blockと指定するだけでもよこ並びにすることができます。ul要素に指定したtext-align: center;によって、ボタン自体も画面中央に配置されるので、この方法が一番お手軽かも。

妙な隙間をなくす

ただし、ボタンとボタンの間に妙な隙間ができてしまいます。これはli要素の後の改行コード半角スペースとして表示されてるのが原因。

隙間を埋めるには、HTMLソースで改行しないようにするのが一番手っ取り早いです。

CSSで対応するならば、ul要素の文字間を半角スペースが詰まるくらい狭く指定して、li要素で元の文字間に戻す方法があります。ここではul要素にletter-spacingプロパティで-0.5emと指定して、li要素で0に戻しています。

ul要素への指定で、li要素の文字間が詰まるが、li要素への指定で、a要素内の文字間が元に戻る

横幅いっぱいにレイアウトする

ナビゲーションの横幅を親要素の横幅いっぱいにするのは、フロートの時と同じ方法でできます。ここではli要素に20%と指定しています。改行してボタンの大きさが変わっちゃいましたが、inline-blockを指定したことで、縦方向の位置がベースラインに揃うようになるため、ボタンの底辺で揃ってるのがわかりますね。

ということはつまり、vertical-alignプロパティで中央に揃えることができるということ。

ということはつまり、tableの時と同じようにやれば、ボタンのサイズを揃えることもできるということ…?だけどまったく同じ方法じゃ上手くいかなくて…。
table-cellを指定した要素は高さがぜんぶ揃うからいいけど、inline-blockを指定した要素は、要素の内容に準拠した高さになってます。なので、overflowプロパティを、li要素じゃなくて、ul要素に指定すれば大丈夫。

table-cellは同じ列の要素の高さが揃うけど、inline-blockはマチマチのまま

スマホでの表示は、テーブルレイアウトの時と同じく、たて並びにしましょう。
@mediaルールを使って、767px以下の時には、li要素をdisplay: block;にして、パディングの向きを変えて、横幅もautoとしておきます。あと、a要素のマージンやパディングも元に戻せばできあがり。

目次に戻る

フレキシブルボックスレイアウト。

floatプロパティは要素を左右に寄せるためのプロパティだし、displayプロパティのtableは、テーブル(ひょう)をレイアウトするための値だし、inline-blockはあくまでブロック要素だし、どれも特別にナビゲーションをよこ並びするためのプロパティというわけではありませんでした。
けれどもフレキシブルボックスレイアウトは、指定した要素の大きさを柔軟に伸縮させ、画面サイズに対して最適な大きさで表示させるために用意された値で、まさにこのナビゲーションのために用意された値なんですよね!要素を柔軟にレイアウトするための仕様なんです。

フレキシブルボックスの特徴

フレキシブルとは、“柔軟性がある様子”のこと。具体的には、displayプロパティでflexという値を指定することで、その要素でフレキシブルボックスが利用可能になります。

ちょっとだけtable/table-cellの仕組みと似てて、display: flex;と指定した要素自体がよこ並びになるわけではなくて、flexと指定した要素の直接の子要素が、よこ並びされる対象となります。ただ、table-cellみたく、特別にCSSを指定する必要はなくて、親要素にdisplay: flex;と指定した子要素は勝手によこ並びになるので、ちょっと不思議な感じですよね。

さぁ、もうすでに上のli要素はすべてフレキシブルな要素となっています。フレキシブルボックスレイアウト用に用意された様々なプロパティを使うことで、思い通りのレイアウトが可能となります。

display: table;と指定することで、div要素が突如table要素さながらとなったように、display: flex;と指定した要素は、唐突にフレキシブルな要素に様変わりします。
テーブルはつまり表なレイアウトなのでわかりやすかったですが、フレキシブルボックスはいままで出会ったことのないレイアウト方法なので、なかなか慣れないですけれど、大きく以下のような特徴があります。

displayプロパティでflexを指定した要素は、「コンテナ」と呼ばれるようになります。
そして、コンテナの直接の子要素はすべて「アイテム」と呼ばれ、フレキシブルボックスレイアウト関連のプロパティの初期値によって、すべてよこ並びでレイアウトされます。
要素が並ぶ進行方向となる軸を「主軸」、それに直角な方向の軸を「交差軸」と呼びます。

直接の子要素という点もポイントで、孫要素はフレキシブルにはならないということ

フレキシブルボックスについて、詳しくは下記ページを参照のこと。
CSS flexible box の利用 - CSS | MDN(2016.8.6)

ナビゲーションを中央に配置する

要素を中央に配置するには、justify-contentプロパティを使います。このプロパティは、アイテムの配置の仕方を調整するためのプロパティになります。ここではcenterという値を指定しています。

他には、始端寄せのflex-start、終端寄せのflex-end、コンテナの両端まで詰めて均等配置するspace-between、アイテム両脇に余白を空けて均等配置するspace-aroundがあります。下のサンプルでは、space-betweenspace-aroundを指定したものを並べてみました。(こういうレイアウトってどんな場面で使うのかな…。)

ボタンのサイズを揃える

アイテムの横幅を制限するにはflex-basisプロパティを使います。下のサンプルでは、10emに指定しています。文字数によって改行したボタンの大きさが揃わないのは、フロートやテーブルの時と同じですね…。

縦方向の位置を制御するには、テーブルやインライン・ブロックの時にはvertical-alignプロパティを使いましたが、フレキシブルボックスではフレキシブルボックス専用のalign-itemsプロパティを使います。ここでは中央に揃えるためalign-items: center;を指定しています。middleじゃないので注意です。
これまたテーブルやインライン・ブロックの時と同様、字面的には中央に揃えど、ボタンのサイズは揃わぬままです…。

そこで、li要素だけじゃなく、a要素と、さらにその中のテキストもフレキシブルに扱えるように、li要素とa要素にもdisplay: flex;を指定しちゃいます!つまり、li要素もa要素も、アイテムでありコンテナになるということ。
さらに、justify-contentプロパティも同じくli要素、a要素にも指定して、flex-basisプロパティも、li要素、a要素に、同じく10emを指定します。
ここまでの指定で、ボタンの大きさが揃いました。align-itemsプロパティは、初期値としてstretchという値が指定されているため、特に何も指定しなければ、アイテムは交差軸(縦方向)の端から端まで埋まった状態なんですねー:D。あとは、中のテキストを上下中央に配置します。

ぜんぶ、アイテムでありコンテナ

a要素にdisplay: flex;を指定したことで、a要素の子要素がアイテムになるわけですが、a要素には子要素がないですよね…。そんな場合には、その中のテキストが、無名の要素ってことで、アイテムとして扱われるんですねー。
a要素にalign-itemsプロパティでcenterと指定すれば、そのアイテムとなるテキストだけが上下中央に配置されるはずです。

要素がない時はテキストがアイテムとして扱われる

横幅いっぱいに広げる

横幅いっぱいに広げるには、アイテムに対して、flex-growプロパティ1以上の数値を指定します。
ここで指定した数値は、コンテナ内の余った領域を、各アイテムにどう分配するかの割合を表します。ここではアイテム全てに対して1を指定しているので、アイテムそれぞれに同じ分ずつ余白が分配されることになります。
きちんと分配しているので、table-cellよりも、アイテムのバランスがよいのがわかりますね。

詰めて並べた時に余ってる領域(横幅)を、各アイテムに分配している

そして、スマホではたて並びになるようにしましょう。テーブルやインライン・ブロックの時と同じように、フレキシブルにしてる要素をdisplay: block;に指定するでもよいんですが、せっかくフレキシブルなので、flex-directionプロパティを使って並びの向きを変えることにします。
ul要素にflex-direction: column;と指定すれば、たて並びになります。あと、パディングの向きも変えたらできあがり。


目次に戻る

商品一覧のレイアウト。

ナビゲーションの他に、商品の一覧なんかもよく、よこ並びにしますよね。ナビゲーションと違って、横だけじゃなくて、縦にもズラズラと並ぶので、改行にも意識しなくちゃいけません。
ここでは、6つの商品が並ぶ一覧を、ここまでに見てきた方法を使って作ってみます。

フロートで商品一覧

3分割なので、li要素の横幅を、全体の33.333333%と指定して、それぞれにfloat: left;を指定します。

2段になるはずが、4つめの商品が真ん中に配置されちゃって、グチャグチャになっちゃいました…X(。フロートした要素の後に続く要素は、フロートした要素の隣へ隣へと並びたがるので、ちょっとでも隣に並べそうな隙間があるとそこへ並んじゃうんです…。最初の商品が、あとの2つの商品よりも文量が多くて縦に長い分、4つめの商品が、その隣に並んでしまってます。

これを正すために、clearプロパティを使います。clearプロパティを指定した要素は、先行する要素の隣に並ぼうとしなくなるんです。たとえば、clear: left;と指定した要素は、先行する要素が左へフロートしていても、それに流されることなく下へ配置されるということ。
3列に並んでるので、改行しなきゃならん要素は、“3つめの次”。これを:nth-child擬似クラスを使って下図のように表します。

綺麗に並びました。けど、スマホで見ている人は気づいてしまっているかもしれませんが、横幅が狭い時に、商品がすっごい小さくなってしまってます。こういう時はメディアクエリです:)
ここでは、767px以下の時は2列、414px以下の時には1列になるようにします。
※414pxはちょうどiPhone6 Plusの画面の横幅サイズになります。

2列の時にまたグチャッちゃいました…。2列ずつになって改行位置が変わったので、clearする要素を変えねばなりません。今度は、“2つめの次”にclearプロパティを適用します。“3つめの次”に指定してたclearプロパティは、noneと指定しておきます。
414px以下の時には、“2つめの次”のclearプロパティもnoneと指定しておきましょう。
フロートで商品一覧は一丁あがり!

目次に戻る

テーブルで商品一覧

テーブルレイアウトするには、displayプロパティで、ul要素にtable、li要素にtable-cellを指定するんでしたね。あとはフロートの時と全く同じく、li要素の横幅を33.333333%にしたり、10pxのパディングを指定したりします。

テーブルなので改行しません…X0table-cellは横へ伸び続けますが、横幅を33.333333%と指定してるからなるべくそうあろうと頑張るんだけれど、並びきらない分は小さくしてでも並ぼうと懸命で…、見てて申し訳ない気持ちでいっぱいですX(。
テーブルが折り返さないのは仕方のないことなので、ここはHTMLの構造を変更するしかないです。下のサンプルのように、ul要素をふたつに分けました。

とはいえ、幅が狭い時には、2列になったり1列になったり、とても対応しきれないー…X(
テーブルレイアウトは商品一覧には向いてない、ということですね…。

目次に戻る

インライン・ブロックで商品一覧

フロートする代わりに、displayプロパティにinline-blockと指定します。
すると、下のサンプルのように、2つずつで改行されてしまいました。インライン・ブロックにすると改行コードが半角スペースとして表示されるんでしたね…。それから、となり同士の商品が、なんだかガタガタしてます。縦方向の位置が、li要素の底辺で揃ってるみたいです。

そこで、ナビゲーションの時と同じく、letter-spacingプロパティで半角スペース分が詰まるように指定します。あとは、li要素が上辺で揃うよう、vertical-alignプロパティでtopと指定します。

レスポンシブに列を切り替えるためのメディアクエリを指定します。これもフロートの時と同じく、767px以下の時には2列、414px以下の時には1列になるようにしましょうか。
li要素の横幅を指定しなおすだけです。フロートと違ってclearしなくて良い分とっても簡単にできちゃいましたね!

目次に戻る

フレキシブルボックスで商品一覧

ul要素に、displayプロパティでflexとすれば、ul要素がコンテナ、li要素がアイテムとして、フレキシブルボックス関連のプロパティで扱えるようになるんでしたね。
早速、li要素が横並びになりましたが、全部一列で並んじゃいましたー!ちゃんと均等に並んでるからテーブルよりは綺麗だけれども…:(
※つまり、フレキシブルボックスのアイテムにはwidthプロパティは無効ということ…。

アイテムを改行させるには、専用のflex-wrapプロパティを使って、改行する旨を指定せねばなりません。初期値がnowrapで、改行しないことになってるんです。wrapと指定すれば、改行するようになります。

あとはレスポンシブに列を切り替える指定ですが、フレキシブルボックスならではの、便利な指定方法があるので、そちらを使ってみます!
指定するのはひとつ、flexプロパティだけ。displayプロパティの値のflexとはまた別の、「flex」というプロパティ名になります。
flexプロパティは、アイテムの伸縮率を決めるためのプロパティで、実はこのプロパティ、ひとつめの値がflex-growプロパティ、ふたつめの値がflex-shrinkプロパティ、みっつめがflex-basisプロパティを指定することになっていて、3つのプロパティをまとめて指定するためのショートハンドプロパティになってるんです。それぞれの値を、半角スペースで区切って指定します。
ここでは、1 1 300pxと指定しました。コンテナの余った領域を均等に割り振って、アイテムの横幅を300pxに制限するってことです。下のサンプルの画面サイズを縮めていくと、アイテムの横幅が300px以下になるタイミングで勝手に改行するのがわかります。

ただ、ちょっと改行するのが早いかなーとも感じますね…。1列になった時の商品が大きすぎるので、flex-basisプロパティの値をもっと少し小さく、200pxにしてみます。これで、1列になる時のアイテムの横幅は、399pxになるはずです。

画面幅が400px未満になった時、アイテムの横幅が200px未満となるので、1列になる

横幅が狭い時は良い感じなんですけれど、200pxまで小さくなれるようになったため、横幅が1000pxの時には5つ並べるってことになってしまったんですね…!しかも最後のアイテムはコンテナの余った領域を独り占めしちゃって大変なことになってます…X(
そこで、アイテムにはmin-widthプロパティ33.333333%と指定して、3分の1以下にはならないように指定します。
うむ、落ち着いたかな…。

しかし!7つめの商品を追加した途端、やっぱり最後の商品だけ大変なことに…。3分の1以下にならないようにするだけじゃなくて、3分の1以上にもならないようにしなきゃダメか…。

いや、3分の1以上にならないということはずっと3分割ということだから意味ないですね…X(

ということで結局、下記のように指定することに…。
flexプロパティの値を0 1 33.333333%に指定しました。もう拡張はしないことにします!そして、メディアクエリを使って、flex-basisプロパティの値を切り替えます。横幅が767px以下の時には50%、414px以下の時には100%、ということで落ち着きました。:D
あまりフレキシブルの良いところを活かせてないかも…。

目次に戻る

おわりに。

ナビゲーションと、商品一覧というシチュエーションでよこ並びしてきましたが、どの方法も一長一短だなぁと感じました。長らくフロートでよこ並びしてきたこともあって、フロートの方が馴染みがあるのだけれど、やはりフレキシブルボックスの方が柔軟性はある感じ。けど今の所は「便利なテーブル」くらいの感覚かな…¦(。もっと小慣れてきたらもっと便利に感じるんだと思います;D。それに、フレキシブルボックスレイアウトはよこ並びだけじゃないですものね!
他にもこんな使い方があるよ!とか、フレキシブルボックスとはそもそも…などありましたら、ぜひ教えてくださいー。また、記事の中で、間違った使い方や、間違った説明してるところがあったらどしどしご指摘いただけると嬉しいです!

以上、「よこ並びのCSS」でした!最後まで読んでいただきありがとうございますXD

引用・参考文献

  • このエントリーをはてなブックマークに追加
  • ツイート

Comment & Pingback

8 Comments! for よこ並びのCSS。

  1. ピンバック: Twitter 人気のつぶやき 2/4~2/17 2017 | Webクリエイターボックス

  2. duu

    毎回、記事をとても楽しみにしております。
    初歩的な内容で恐縮なんですが、

    テーブルレイアウト。の
    行数が違ってもボタンのサイズを揃える
    のところで
    「marginプロパティでは上下に-4emを指定」されていますが、
    この状態では
    「タモリ倶楽部のボタン」画像の点線で示されている領域部分が
    「ミュージックステーションのボタン」よりも上下1px狭くなっているので
    リンク領域は狭まったままのようになると思っていました。

    これは
    ポイントとして書かれている
    「ネガティブマージンでは、親要素の領域だけ元に戻る」とありますので
    ここでいう一番縦の領域が大きい「ミュージックステーションのボタン」まで戻るということで
    「タモリ倶楽部のボタン」の上下1pxは影響しなくなるという考えでよろしいですか。
    (つまり、結果「タモリ倶楽部のボタン」に於いては上下3pxだけ戻る)

    そしてその「ネガティブマージンでは、親要素の領域だけ元に戻る」
    というのは親要素であるli にtable-cellを指定しており
    「table-cellを指定した要素の縦幅は、その列の一番大きい要素に揃う」から
    なのでしょうか。

    以上、初歩的な質問で申しありませんがご教授いただけたら幸いです。
    よろしくお願いいたします。

    Reply

    • _watercolor

      > duuさん

      コメントありがとうございます。
      記事の更新がめっちゃんこ遅くて恐縮です〜…。。
      コメントいただいた件、その通りです!
      ネガティブマージンを指定することで、li要素自体は結局もとの大きさに戻るんですが、table-cellを指定した要素の縦幅は、その列の一番大きい要素に揃うから、ボタンの高さが揃うってことです:)。
      要素を検証して見ると、その列の一番大きい要素に合わせて、li要素の上下の余白が、パディングみたいなので埋められてるのがわかります。


      ではでは、今後ともLopan.jpをどうぞよろしくです;)。

      Reply

      • duu

        早速のご返答、
        スッキリしました!
        ありがとうございました。
        また次回の更新を楽しみにしております。

        Reply

  3. {name}

    テーブルレイアウトの場合、display: table; を設定した要素にtable-layout: fixed; を設定することでセルの幅が均等割り付けになります。
    セルにwidthを設定した場合は要素数が変わった場合に不都合が出やすいですが、fixedレイアウトにすることで要素数に関わらず均等にレイアウトできます。

    Reply

    • _watercolor

      > {name}さん

      コメントいただきありがとうございます!
      たしかに!ul要素にtable-layoutプロパティを指定すれば、li要素にわざわざ均等を計ったwidthプロパティを指定しなくても、均等にレイアウトできますね!
      そちらの方がスマートな気がします。下にサンプルを作ってみましたー。

      table-layoutプロパティ – よこ並びのCSS。

      ul要素に指定した横幅を基準に均等に横幅を割り振ってるんですねー:D。テーブルは万能だなぁ。。
      教えていただきありがとうございましたー!
      ではでは、今後ともLopan.jpをよろしくですX)!

      Reply

  4. 774

    私も最近仕事でCSSに触れる機会が増えたので、
    「あー分かる分かる、見えないところでいろいろな事が起こっているからCSSって大変だよねー」とか知ったかぶりしつつ読んでました(笑)
    後半は初めて知ったプロパティたくさんですが・・・(^^;
    同じものを作ろうとしても、いくつも手法があるCSSって面倒だけど面白いですよねー
    苦労して書いたCSSで、思い通りの表示がされたときの快感はたまらんです(笑)

    Reply

    • _watercolor

      > 774さん

      コメントどうもありがとうございます!
      そうですねー、上手に書けた時はすごく充実した気持ちになりますよね!自己満足かもしれないけれど。X)
      どんどん新しくなっていくし、どんどん便利になっていくけど、どんどんシンプルに、ややこしくなってくから、迷路みたいで楽しいです:)。
      今後ともCSSをよろしくです!

      Reply

コメントを残す

*がついている欄は必須項目です。