スタイルシートマニア
改めてFluid Grid Layoutを勉強してみる。 CSS編 | ホームページカスタマイズ Tips
んー、Ten steps to building a photo gallery website with Adobe Dreamweaver CS6をよーく眺めてみてもDreamweaver CS6の使い方が書いてあるだけで、事の真相にはたどり着けそうにないので、ここで使われているCSSを解読してみましょう！というか、ここが肝心なところなので、ここばっかり行きます！
assets/boilerplate.cssの方は基本設定のファイルになっているので、肝心なのはassets/gallery_template.css！
これを見ていきます。
img, object, embed, video {
max-width: 100%;
}
/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
width:100%;
}
まずは基本！画像ファイルの最大横幅を設定しています。
IE6にも対応できるように.ie6 imgで設定しています。
.ie6 imgは以下のようにして、ブラウザを判断してhtmlのclassに設定しています。
<!--[if lt IE 7]> <html class="ie6 oldie"> <![endif]-->
このやり方はあんまりスマートではないので僕はあまり好きじゃないんですけどね。。。
どうなんでしょう・・・。
どうやら先にモバイルのレイアウトから設定していくようです。
/* Mobile Layout: 480px and below. */
.gridContainer {
margin-left: auto;
margin-right: auto;
width: 87.6521%;
padding-left: 1.1739%;
padding-right: 1.1739%;
border: solid 10px #000;
background-color: #000;
}
#LayoutDiv1 {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
#LayoutDiv2 {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
padding-top: 12px;
padding-bottom: 12px;
}
#LayoutDiv3 {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
#LayoutDiv4 {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
まあ、なんの変哲もない普通のレイアウトを組むためのCSSですが、しいて言うと横幅が100%で設定されていて伸縮することが想定されているのがポイントと言ったところでしょうか？
そして、タブレットのレイアウトですね。
ここでポイントとなるのが@media only screen and (min-width: 481px)最小で481pxより小さいものには適用しないという設定ですね。
っということは、横幅が481px以上のブラウザであれば以下のCSSでスタイルを上書きすると言うことです。
コメントアウトでも書いてある通り481px～768pxがここで想定するブラウズサイズのようです。
/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */
@media only screen and (min-width: 481px) {
.gridContainer {
width: 88.5326%;
padding-left: 0.7336%;
padding-right: 0.7336%;
}
#LayoutDiv1 {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
#LayoutDiv2 {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
#LayoutDiv3 {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
#LayoutDiv4 {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
}
あんまり違いはないですね（笑）
.gridContainerのwidthが87.6521%から88.5326%になったぐらいでしょうか？
後、#LayoutDiv2のpaddingが消えてますね。
もうひとつ！.gridContainerの左右のpaddingが 0.7336%;になってました。
ざっと、見た感じはそれくらいですね。
そのあたりを意識してみてみると確かに、モバイルサイズとタブレットサイズでは画像のキャプション部分の上下にpadding（余白）がつきます。
画像が滑らかに伸縮するのでわかりにくいですが・・・。
続いてデスクトップサイズ（要はPC）サイズの設定です。
@media only screen and (min-width: 769px)っとしているので、769px以上のブラウザには以下のスタイルが上書きされるわけですね。
/* Desktop Layout: 769px to a max of 1232px. Inherits styles from: Mobile Layout and Tablet Layout. */
@media only screen and (min-width: 769px) {
.gridContainer {
width: 88.826%;
max-width: 1232px;
padding-left: 0.5869%;
padding-right: 0.5869%;
margin: auto;
}
#LayoutDiv1 {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
#LayoutDiv2 {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
#LayoutDiv3 {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
#LayoutDiv4 {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
}
ここに至っては、.gridContainerのwidthとpaddingが変わっているだけでしたね。
ん～、なんの参考にもならなかった・・・。
むしろ、無駄が多いですよこれ。
@media only screen and (min-width: 769px)などで度々下記ましたが、769px以上のブラウザにはこの設定を「上書き」するんです。
つまり改めてclear: both;やらfloat: left;やら同じことを書かなくても一番最初の設定で書いていれば改めて書く必要がないんです。
この辺りは、全自動でやってくれるDreamweaver CS6が勝手にやっている事かどうかは知らないですが、かなり無駄ですね。
この辺りまでコントロールできてこそ使いこなせているということになるんだと僕は思いますが。
Adobeもこの辺りまで考えて作ればいいのに・・・。
でも、だいぶ進化しています。
僕がもっとこうすればいいのにっと思う部分がかなり実現されてきていますから。
だけど、ホームページ○○ダーみたいな「素人にも扱えますよ」的なコンセプトはやめてもらいたいです。
後、@media only screen and (min-width: 769px){ CSSスタイル }っというやり方をしていますが、importを使って@import “smart/import.css” all and (max-width: 480px);っというように@import “読み込むファイル” 対象メディア and (メディアサイズ)というような事もできます。
この場合は短いので一つのCSSファイルの中に書いてしまうのがスマートですが、一つのサイトを作る時には膨大な量になるのでimportで振り分けるのをお勧めします。
っということで、改めて勉強しなおそうと思っていたことが逆にAdobeの批評になってしまったFluid Grid Layoutでした。
WordPressのTwenty ElevenのCSS解読した方が勉強になったかも。
まあ、Dreaweaver CS6を使った新機能についてはよく説明してあると思います！
だけど！中のソースを理解してさえいれば正直いらない代物だったりします。
| « 前の記事 | 次の記事 » |
庄野英朗
Source Marine 代表
デザイン・コーディング・PHPアプリケーションまでこなす。
マルチデザインプログラマ。