初めてのレスポンシブ・ウェブデザイン

ここ数日、初めてレスポンシブ・ウェブデザインでサイトを作っていて、（自分の）既存サイトを移行しているところです。
まだまだ調整が必要な所が沢山ありますが、公開しながらちょっとずつ修正して行こうと思ってます。

上記サイトなどを参考にさせて頂いてサイトを作っています。
すごく丁寧に分かりやすく説明してあるので、思っていたより早く進んでいる気がします。
ありがとうございます。

サイトですが、iPhoneなど小さい画面のレイアウトからPCサイトの大きい画面のレイアウトの順番で、全体のレイアウトを考えてから作るのが良いようですが、初めてなのであまり想像も出来なかったので、とりあえず慣れているPCサイトを作ってみました。

更に一番単純そうなワンカラムレイアウトのサイトを作る事にします。
メインコンテンツの一部に３段表示と２段表示があります。
画面サイズによって２段にしたり、１段にしたり、表示しないなどを考えてます。

HTMLはだいたいこんな感じで作りました。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8" />
	<title></title>
	<meta name="viewport" content="width=device-width; initial-scale=1.0">
	<link media="screen" rel="stylesheet" href="style.css" type="text/css" />
	<!--[if lt IE 9]>
		<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->
</head>
<body>

<div id="pagewrap">

	<header id="header">
		<hgroup id="hgroup">
			<h1 id="site-logo"><img src="images/logo.png" /></h1>
		</hgroup>
		<nav id="main-nav">
			<ul>
				<li id="nav-blog"><a href="#">Blog</a></li>
				<li id="nav-work"><a href="#work">Work</a></li>
				<li id="nav-hello"><a href="#footer">Hello</a></li>
			</ul>
		</nav>
	</header>
	
	<div id="content">
		<article id="slide">
			<a href="#"><img src="images/xxxx.png" /></a>
			<img src="images/xxxxx2.jpg" />
			<img src="images/xxxxx3.jpg" />
		</article>
		<article id="work">
			<h2>Work</h2>
			<div class="sub-article"></div>
			<div class="sub-article"></div>
			<div class="sub-article"></div>
		</article>

		<article id="passion">
			<h2>passion</h2>
			<ul class="sub-box">
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</article>
	</div>

	<footer id="footer">
		<p>XXXX All Rights Reserved.</p>
	</footer>
	
</div>

</body>
</html>

<!DOCTYPE html>

<head>

<!--[if lt IE 9]>

<![endif]-->

</head>

<body>

</hgroup>

<ul>

<li id="nav-hello"><a href="#footer">Hello</a></li>

</ul>

</nav>

</header>

</article>

</article>

<h2>passion</h2>

</ul>

</article>

</div>

</footer>

</div>

</body>

</html>

かなり省略したCSSです。

/* メイン構造のCSSを記述（全体に適用） */
#pagewrap {
	width: 1236px;
	margin: 0 auto;
}
#header {
	height: 72px;
}
・
・
・
@media screen and (max-width: 1238px) {
	/* 横幅が1238px以下の時適用 */
}
@media screen and (max-width: 980px) {
	/* 横幅が980px以下の時適用 */
}
@media screen and (max-width: 650px) {
	/* 横幅が650px以下の時適用 */
}
@media screen and (max-width: 480px) {
	/* 横幅が480px以下の時適用 */
}

/* メイン構造のCSSを記述（全体に適用） */

#pagewrap {

width: 1236px;

margin: 0 auto;

}

#header {

height: 72px;

}

・

@media screen and (max-width: 1238px) {

/* 横幅が1238px以下の時適用 */

}

@media screen and (max-width: 980px) {

/* 横幅が980px以下の時適用 */

}

@media screen and (max-width: 650px) {

/* 横幅が650px以下の時適用 */

}

@media screen and (max-width: 480px) {

/* 横幅が480px以下の時適用 */

}

max-width: で表示幅を制御します。
今回は1238px, 980px, 650px, 480pxで分けてます。

小さいサイズになるにしたがって、
・横並びを縦並びにしたり
・コンテンツを非表示にしたり
している所をオーバーライドして、設定を新たに適用するのでしょうね。

月	火	水	木	金	土	日
« 7月				9月 »
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	31

サイバーまめカン鹿児島の出水市でプログラミングしてる人のブログ

MacとSwift, Ruby, Pythonと温い日常。Linuxも少々。