table「あの程度で落ちるとは、横並び四天王の面汚しよ。」
flex「だが奴はわれら四天王の中で最弱。」

そのころ、一方・・・

float「俺は落ちてない。落ちたのはカラムだ。ちくしょう、clearできる要素さえあれば・・・。」
???「おやおや、情けないお姿だ。」
float「だれだ！？・・・お前はoverflow！」
overflow「float解除ができず、お困りのようですね。私が力をお貸ししましょう。」
float「力だと？」
overflow「はい。」

○floatについて
floatは要素を左または右に寄せて、スペースを空け、そこにほかの要素を入れることで横並びを実現するCSSプロパティです。
floatの特徴は要素を左（または右）に寄せたときその要素が浮き上がったようになってしまうということです。そうなるといくつか問題が起こります。
まず一つ目の問題は、隙間がある限り下にある要素が入り込んできてしまうということです。すると横並びにするつもりのないものまで横並びになってしまったり、レイアウトが崩れてしまったりします。
二つ目の問題は、子要素をすべてfloatさせた場合、親要素の高さが0になってしまいます。なので、背景画像などを入れている場合は出なくなってしまいます。
DEMO(float解除できてない)

直しました。
DEMO(float解除)

この問題を解決するためのプロパティがclearです。clearはfloatしている要素の下の要素にかける必要があります。



しかし、floatしている要素の下に要素がないと、clearをかけることができません。そんな時に登場するのがclearfixとoverflowです。
clearfixとは疑似要素でfloat要素の下にclearするための要素を作り出す方法です。以下のコードをCSSに書き、float要素の親要素にクラス属性として付与することで機能させます。

overflowは実際の機能としては、内側の要素の見え方を指定するプロパティです。これをfloat要素の親要素にかけることで、親要素の高さが戻ってきます。値はvisible以外にしましょう。
DEMO

floatについてはこのサイトが詳しくて、わかりやすかったです。
CSSの【float】についてちょっと本気出して説明してみた。（たねっぱさん）

 

inline-block「さて、次は俺の番だな。」

○inline-block
inline-blockはdisplayプロパティの値の一つで、inlineのように横に並びますが、blockのように幅・高さを取れるというものです。一見、ナビゲーションなどのような要素を横並びするには便利なように見えますが、一つ問題があります。 下のようにコード内で改行してしまうと、その分要素の間に隙間が空いてしまうということです。これはinlineの特性を持っているためです。
DEMO

この問題はinline-blockをかける要素を改行しないか、親要素にfont-size:0をかけるかすることで解決できます（子要素にfont-sizeを設定しなおすのを忘れないように注意）。
DEMO

さらにtext-alignの値によってカラム落ちしたときの挙動が変わります。こちらは最後のまとめDEMOにのせていますので、確認してください。

 

table「お前などまだまだだ。俺の力を見せてやろう。」

○table
これは親要素にdisplay:table、子要素にdisplay:table-cellを設定します。こうすると、子要素が横並びになります。
文字通りtableと同じようになるので、幅が縮まってもカラム落ちしません。さらに親要素にtable-layout:fixedをかけると子要素が同じ幅で親要素に収まるようになります（子要素にwidthを設定していない場合）。


DEMO

注意する点は、tableなのでmarginが効かないということです。他もいろいろtableと一緒です。

 

flex「真の強者がだれか、そろそろはっきりとさせる時がきたようだな。」

○flex
flexとはdisplayプロパティの値の一つです。以前はdisplay:boxだったりdisplay:flexboxだったりしたそうですが、現在では統一されて、モダンブラウザではほぼ使えるようです。 使い方は親要素にdisplay:flexをかけるだけです。 こう書くと簡単に思えますが、これだけではflexの利点はあまりありません。ここからいろいろと設定していきます。


DEMO

ここで使用しているプロパティは以下の通り。

・flex-wrap:wrap（はみ出した要素を折り返す）
・justify-content:center（子要素を中央揃えで配置）
・flex-grow:1（子要素の大きさの比。同じものは同じ大きさに。数字の大きいものが大きくなる。）
・flex-shrink:1（子要素の縮み具合の比。0にすると縮まない。）
・flex-basis:100px（基本となる大きさを設定する。あとは親要素の幅に従う。要するに幅を設定する。）

非常にざっくりした説明ですが、いろいろ試してみてください。以下のサイトが詳しいです。
CSS3 Flexbox の各プロパティの使い方をヴィジュアルで詳しく解説（colissさん）

 

○横並び比較
4種類の横並びを一つにしてみましたので、画面を縮めたりして試してみてください。

DEMO

コードはこちら（HTMLはすべてul,liで組んでいます。すべてのタグにmargin:0 padding:0 box-sizing:borderboxをかけています。）


それぞれに良さがありますので、状況に応じて使い分けていきましょう。今回は紹介が目的なので簡単な説明だけにしましたが、今後、機会があればそれぞれについて詳しく書いていきたいと思います。

太郎君がコーディングをしています。
太郎「あれ？なんでだろう・・・。」
博士「どうしたんじゃ、太郎君？」
太郎「あ、博士。実は、余白を大きくしようとしてmargin-bottomを大きくしたんだけど、変わらないんですよ。」
博士「ふむ、どれどれ。・・・おや、これは」
太郎「博士、どうしたんですか？」
博士「太郎君、これをchromeのディベロッパーツールで見てみるのじゃ。」→こちら
太郎「はい。あれ、margin-bottomがかかってない。」
博士「そう、上下のmarginは、重なるときはどちらか大きいほうを取り、小さいほうは無視されるのじゃ。」
太郎「そうだったんですね。博士、余白についてもっと詳しく聞かせてください。」
博士「よかろう。ではいろいろ見ていこう。」

 

———————————————————————————————————-

 

○マージンとパディングの違い

 

まずは、marginとpaddingの違いについて確認しておきましょう。
ざっくり言えばマージンが外側、パディングが内側なのですが、では何が変わるのでしょうか。
余白をマージンでとった場合（左）と、パディングで取った場合（右）で見比べてみましょう。
DEMO①

 

マージンで取った場合は、背景色が文字の後ろにしかなく、ボーダーは文字の周りに着いていますが、パディングの場合は背景色、ボーダーともに広がっています。つまり、パディングなら背景色、背景画像の表示できる範囲が広がるのです。背景画像を入れるときは画像の大きさ分のボックスの大きさを作ってあげないといけないので、ここでパディングが活躍するわけですね。

 

 

○marginの特徴
次にmarginの特徴についてです。上下のmarginについては、さっきも見た通りですが、それ以外に子要素のマージンも注意が必要です。
DEMO②

 

デモをディベロッパーツールで見てもらうとわかるのですが、親要素にmargin-top:30px、子要素にmargin-top:60pxをかけているのですが、上の要素との余白は60pxしか空いていません。これは親要素と子要素の上マージンでは、子要素のマージンは飛び出してしまって、大きいほうが採用されてしまうのです。下マージンも同様のことが起こります。

 

 

○box-sizing:border-box
余白に関係するお話として、border-boxのお話をしておきましょう。
border-boxとはbox-sizingというCSSプロパティの値の一つです。これを設定するとwidthにborderとpaddingを含んでくれます。

 

どういうことか。もう少し詳しく説明しますね。
width:100px; border:1px; padding:30px;の要素が3つ並んでいたとしたら、横幅の合計は(100＋1＋30)*3で393pxになります。しかし、この要素にbox-sizing:border-boxをかけると、3つの横幅の合計は300pxになるのです。
DEMO③

 

レスポンシブ対応するときにwidthを％で設定するときなどに便利ですので、ぜひ使ってほしいと思います。

 

———————————————————————————————————-

 

博士「ということじゃ。わかったかな？」
太郎「はい、博士。」
博士「今日、話したのはほんの一部じゃ。自分でいろいろ調べてみることが大切じゃな。」

 

以上です。。抜けてることも多々あるかと思いますので、ご意見・ご感想お待ちしております。Facebookページ

みなさん、お疲れ様です。

 

突然ですが、CSSが動かないことってありますよね。なぜ動かないのか、すぐに見つかればいいのですが、コードがぐちゃぐちゃだとどこが間違っているのか探すだけでも一苦労ということも・・・。

今回はそんなCSSの解決方法について考えたいと思います。

 

CSSが動かないとき、私がいつも理由として考えるのは主に以下の3つです。

①CSSファイルが正しく読み込まれていない。

②セレクタが間違っている。

③詳細度

 

スタイルが効いてないコードを見ると、この3つに当てはまることが多い気がします。

では、それぞれの解決方法を考えていきましょう。

 

①CSSファイルが正しく読み込まれていない。

これはHTMLでlinkタグで読み込むときに、パスを間違えているわけですが、これはきちんとパスを確認してあげれば大丈夫ですね。特に途中でディレクトリの構造を変更したときは注意が必要です。

 

②セレクタが間違っている。

単純なスペルミスもありますが、それ以外に指定したくない要素にも効いてしまっているというパターンがあります。特に要素を指定する場合は多いと思います。これを解決するには、新たにクラス名を付けるという方法もありますが、セレクタの指定方法を変えることで解決できる場合があります。以下にいくつか紹介します。すべて覚える必要はないと思いますが、知っておくと便利です。

 

子孫セレクタ （a b）	言わずと知れた子孫セレクタ。半角スペースを空けて指定するセレクタです。子要素以下すべての内包する要素を指定できます。
子セレクタ （a>b）	子孫セレクタと違い、子要素のみを指定します。多重構造のリストなどに使えます
属性セレクタ （E[attribute=”属性値”]）	指定した属性値のattribute属性を持つEという要素を指定するセレクタです。例えばimg[src=”photo.png”]みたいにするとその画像だけを指定するといった使い方です。 いくつかバリエーションがあります。
[n]	n属性を持つ要素 ex.）[title]・・・タイトル属性を持つ
[n^=”a”]	属性値がaで始まるn属性を持つ要素 ex.）[class^=”item-“]・・・item-で始まるclass属性を持つ
[n$=”a”]	属性値がaで終わるn属性を持つ要素 ex.）[src$=”.png”]・・・.pngで終わるsrc属性を持つ
[n*=”a”]	属性値がaを含むn属性を持つ要素 ex.）[href*=”about”]・・・aboutを含むhref属性を持つ
nth-child疑似クラス	その要素が何番目かで指定します。1番目のliならli:first-child、2番目ならli:nth-child(2)、最後ならli:last-childといった具合。 ちなみに偶数ならeven、奇数ならodd、3つおきなら3nという指定も可能。

 

 

 

今、紹介したものはほんの一部です。気になる方はいろいろ調べてみてください。今回は以下のサイトを参考にさせていただきました。
意外と知らない!?CSSセレクタ20個のおさらい

 

③詳細度

詳細度とはセレクタの優先順位のことです。順位は

１．!important

２．インライン記述（style属性）

３．IDセレクタ

４．クラスセレクタ・属性セレクタ・疑似クラス

５．要素セレクタ、疑似要素

６．ユニバーサルセレクタ

のようになっています。この順番は基本的にひっくり返らないみたいです。

 

ここで注意してほしいのは、JavaScriptでスタイルを設定する場合とメディアクエリーに記述する場合です。

まず、JavaScriptでスタイルを設定する場合ですが、この場合はstyle属性としてスタイルが記述されるので、CSSファイルの記述が上書きされてしまうということです。なので、JavaScriptでスタイルを変更する場合は、CSSにそのスタイルを記述しないほうがよさそうです。

 

2点目のメディアクエリーですが、こちらでうまくいかない人が多いみたいです。

@mediaの中に記述するのがメディアクエリーですが（ざっくりしすぎですが）、実は@media内に記述したからといって必ずその画面サイズで適用されるというわけではないのです。

例えば下の場合

この場合、画面幅600px以下でliの背景色は何色になるでしょう？

 

 

 

答えは、赤色です。

メディアクエリーは、その画面サイズになったときに@media内の記述を読みこむようになるだけで、優先順位は詳細度によるのです。なので@media内に記述するときにセレクタを省略して記述すると、「スタイルが効かない！」なんてことになるのです。

というわけで、@media内に記述するときはセレクタを同じにしておくのが良いと思います。

 

今回は概要だけまとめました。今後、機会があれば一つひとつ掘り下げてみたいと思います。

以前投稿したCSSのボタンを紹介する記事がうまく動かなくなったので、投稿しなおします。
中身は前と変わってません。

 

動きとしてはホバーすると色が変わり、押すとへこむというものです。

下にDEMOがあります。リンクしてないので、押しまくって楽しんでください。
 
以下はコードです。

 

 
DEMO