CSSに関してメモっておきたいことが最近つづいたので、その為の覚書きです。
要素の中央寄せに絡んで、段組みのコードを作りモバイル対応の為の「float解除」が効かないとか、記事中だけのCSSにするため「body」内に「style」を記述することなど、まとまりが無いですがそんなことのまとめです。
段組レイアウトとモバイルのfloat解除
Simplicity2のスタイルシートには“段組レイアウト”が無いので作ってみました。
とりあえず横２列のものです。
コードは以下の通りです。
.col2-wrap{
margin: 0 auto;
}
.col2-wrap .col{
box-sizing: border-box;
float: left;
padding: 15px;
}
.col2-wrap .col{
width: 49%;
}
@media screen and (max-width:500px){
.col2-wrap .col{float:none;}
}
段組み全体を中央寄せにしたいので［margin: 0 auto;］としてます。
［box-sizing: border-box;］はCSS3では必須のプロパティで、ブロック要素のWidthにPaddingやborder幅を含めて計算するので、ブロック要素の巾が予想よりも大きくなってデザインが崩れることを防いでくれます。
コードを見ると分かりますが段組みのひとつのボックスの巾は「width:49%」です。二つのボックスが横並びするのでwidth合計は98％になります。
さらにボックス「.col」のpaddingは「15px」を指定しているので、［box-sizing: border-box;］が書かれていないと、ボックス二つの横幅が100％を超えてしまい、横並びにならない可能性もあります。
［box-sizing: border-box;］の記述があると、ボックスにpaddingも含むので、意図した通り横並びの配置が実現します。
また、モバイルでは「float：left」の解除をしておかないと、横方向に縮小されてしまうので、モバイルフレンドリーではなくなってしまいます。
そのためのfloat解除の書き込みが
「@media screen and (max-width:500px){.col2-wrap .col{float:none;}」です。
ベンダープレフィックスについて
段組のコードは“賢威”のCSSを参考にしたのですが、賢威のCSSには［-webkit-box-sizing: border-box;］が［box-sizing: border-box;］の前に記述されています。
これは、ベンダープレフィックスと言って、先行実装される拡張機能に対してつけるもので、すでに［box-sizing: border-box;］は勧告されているようなので、ベンダープレフィックスは削除しました。
段組レイアウトの例示を記録するページにだけ有効なCSS
段組みの例示ということで“猫”の画像を掲載しましたが、段組みのCSSは「style.css」には書かず、このページ内に直接書込んでいます。
CSSは<head>～</head>に記述するか又は外部ファイルへのリンクを<head>～</head>に記述するのがルールですが、HTML5では<body>内に直接記述することができます。
この件に関して検索で関連情報を調べると、<style scoped>を使用するなどの記述があるのですが、現在は<style scoped>はサポートされておらず、普通に直接書込んでも問題なく反映されています。
ちなみにこのページの「ソースの表示」をみると、しっかりと直接記述していることが分かると思います。
段組レイアウトの代わりに使う「inline-block」
段組みのようなレイアウトを行うもう一つの方法があります。
「inline-block」のプロパティを使います。
上と同様にこの記事に直接CSSを書込んでみます。
インラインブロック１
インラインブロック１
インラインブロック１
インラインブロック１
インラインブロック２の巾を大きく
.box9{
display: inline-block;
margin: 0.5em;
width: auto;
height: auto;
background: #eee;
vertical-align:top;
}