スタイルシートマニア

ホームページカスタマイズ Tips

改めてFluid Grid Layoutを勉強してみる。完結

AdobeのTen steps to building a photo gallery website with Adobe Dreamweaver CS6は結局大したことなかったけどとりあえずポイントだけまとめ。

@media only screen and (min-width: 横幅) {
CSSスタイル
}

っという使い方でそれぞれのブラウズサイズを判断してCSSを適用してくれるという事。
ここにつきます。
これが出来れば、スマホサイトやらタブレット向けの最適化はかなり楽にできます。
特に、WordPressみたいに一つのソースで複数の端末向けに見せなきゃいけない場合には重宝します。
Ktai Styleもなんだかんだでガラケー向けになっていてスマホ向けには少々物足りない感じがするのでなおさらですね。
まあ、頭の良い人達が開発しているので今後いくらでも改善されると思いますが。

ただ、以前からどちらにした方がいいのか迷っていたのがPCサイズを基本にしてそこからそれぞれにサイズ別でスタイルを上書きするのか、スマホサイズを先に作ってそこからPCサイズを作っていくのかっという問題。
今回の例で行けばスマホサイズを先に作ってそこからPCサイズを上書きするスタイルでした。
っと言っても結局同じスタイルを書いているのでなんの参考にもならなかったんですが、よりシンプルなスタイルが書ける方をベースとした方が後々リセットしたり上書きしたりする手間が省けるので効率がいいんです。
でも、答えは出ない。
まあ、その時々でデザインは違うし必要になることも違ってくるのでケースバイケースでということが答えかなっと思います。
この辺は経験を積むしかないですね。
ただ一つ言える事は、あらかじめ各サイズのデザインやレイアウトを考えておくことが余計な作業を減らすコツです。（何においても言える事ですが）
まずは、「全体像をつかんで流れを考える」大事です！

参考までに僕が制作に携わったFluid Grid Layoutのサイトをご紹介
窓用フィルムで遮熱ウィンドウフィルム施工専門店 フィルムラボ 福岡

コメント(1)

改めてFluid Grid Layoutを勉強してみる。 CSS編

んー、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を使った新機能についてはよく説明してあると思います！
だけど！中のソースを理解してさえいれば正直いらない代物だったりします。

コメント(0)

改めてFluid Grid Layoutを勉強してみる。　レイアウト

まず最初に、ページのレイアウトを考えます。
何においても事前に計画を立てて全体像を把握するのは手際のいい仕事の第一歩ですね。
っということで、ページ全体のレイアウトを考えます。

まあ、ご覧いただければ分かっていただけるかと思いますが、メインで表示する大きな画像があってその下に画像の説明とナンバーが入っていてナビゲーションのサムネイル画像が入っているような感じですね。シンプルです。
HTML構造はページ全体をgildConteinerで囲って、「メイン画像」をLayoutDiv1、「説明」をLayoutDiv2、「ナビゲーション」をLayoutDiv3でそれぞれ囲ってスタイルを設定していくということになります。

コメント(0)

改めてFluid Grid Layoutを勉強してみる。（初めに）

以前、Dreamweaver CS6 を使って作るフォトギャラリー 10のステップでもご紹介したFluid Grid Layoutを改めて勉強してみようと思います。

iPhoneを筆頭にスマホやタブレットが世に浸透しつつある昨今ですが、こんな様々な端末のサイズに合せて表示できるようにCSSで対応してしまおうというのがFluid Grid Layout。こうすると一つのソースで様々なサイズのブラウザに対応できるようになります。
なんとハイブリッドな技術でしょう！ある意味怠けていますけど。

では、Ten steps to building a photo gallery website with Adobe Dreamweaver CS6を参考にしながらすすめてみます。

コメント(0)