読者です 読者をやめる 読者になる 読者になる

のんじゃんる

何でも書こう、ネタになる

レスポンシブWebデザインの秘密はCSSにあり!

webデザイン

どうも、@とよしー です。

以前紹介した現在作成中のwebサイトの近況です。
このサイトは「レスポンシブWebデザイン「超」実践デザイン集中講義」という書籍を元に制作しています。

レスポンシブWebデザイン「超」実践デザイン集中講義

レスポンシブWebデザイン「超」実践デザイン集中講義

スマホ版の画面はこんな感じです。
f:id:tktyo:20140730134632j:plain

PC版の画面はこんな感じです。
f:id:tktyo:20140730134714j:plain

レスポンシブWebデザインがシームレスに各解像度に最適化する仕組みは、CSS にあります。
CSS にはスマホで見た時の画面、タブレットで見た時の画面、PCでみた時の画面の
CSSが記載されており、一定の解像度になった時(タブレット、PCで見た時)に
レイアウトを変更します。
実際に CSSソースコードの例を見ていきましょう。

/*
共通設定_スマホの画面
*/
body{
	width:100%;
	margin:0;
	padding:0%;
	font-size:0.9em;
	line-height:1.5em;
	background-coler:#fff;
}

~省略~

/*
タブレット向けのスタイル: 481px~768px
*/
@media only screen and (min-width: 481px){
nav{
	margin:0;
	padding:0 0 0 78;
}
nav ul {
	padding:0;
}
nav ul li{
	float:left;
	width:100px;
	margin:0;
	text-align:center;
	line-height:3.0em;
	border-left:1px solid #fff;
	border-right:1px solid #ccc;
	border-bottom:none;
}
~省略~

/*
PC向けのスタイル:769~
*/
@media only screen and (min-width: 769px){
	article.main{
		width:65%;
		float:right;
	}

~省略~

上記のような感じで、「@media only screen and (min-width: XXXpx)」と指定すると、
その解像度でのレイアウトを設定できます。この仕組みはメディアクエリと呼ばれる仕組みです。
画面に表示される画像も一緒に各解像度に最適化する必要があります。
この仕組みはについては追々紹介していきたいと思います。

では、このへんで