[CSS]これは簡単！レスポンシブ対応のスケルトンを数分で作成できるオンラインサービス -Responsive Web Css

サイト構築 -CSS

Post on:2013年8月19日

sponsorsr

ちょちょいと設定するだけで、あなた用のスマフォやタブレットなどのレスポンシブ対応のHTMLとCSSのスケルトンを簡単に作成できるオンラインサービスを紹介します。

表示デバイスとか決まっているのであれば、1分くらいで完了します。

Responsive Web Css

使い方は簡単で、これから作成するページでも今運営しているページでも利用できます。
中央の「Get Started」ボタンをクリックして、レイアウト作成ページに移動します。

レイアウト作成ページ

まずは、使用するページとページ内のセクションを加えていきます。

初期画面

「index.html」と「about.html」を作成し、コンテンツに「header」「content」「footer」を加えます。
※拡張子「.html」は自動で加わるので、いらないみたいです。

各ページとページ内のセクションを用意

次に、想定するデバイスをチェックします。
スマフォ・タブレットとさまざまなデバイスが用意されています。

想定デバイスの選択

終了すると、こんな感じに。
レイアウトの表示は、チェックしたデバイスで変更されます。

ここまでの作業は、1分たらず

最後にHTMLとCSSファイルの生成をするために、下部の「Export」ボタンをクリックします。

HTMLとCSSのファイルは「page.zip」として一つのファイルで、自動ダウンロードされます。
ファイルの中身は、下記のようになりました。

HTML

HTMLのスケルトンです。
必要最小限のもののみの構成です。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title></title>
        <meta name="generator" content="Responsive Web Css (www.responsivewebcss.com)" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="Stylesheet" href="index.html.css" />
    </head>
    <body>
        <div id='root'>
            <div class='box' id='header'></div>
            <div class='box' id='content'></div>
            <div class='box' id='footer'></div>
        </div>
    </body>
</html>

CSS

レスポンシブ対応用にするためのスタイルシートです。
各デバイスごとにコメントされているので、その箇所にそれぞれ用のスタイルを記述します。

.box { float: left; }
#root { max-width: 1200px; margin: 0 auto; }

#header { width: 100%; }
#content { width: 100%; }
#footer { width: 100%; }


/* Laptop/Tablet (1024px) */
@media only screen and (min-width: 481px) and (max-width: 1024px) and (orientation: landscape) {
	#header { width: 100%; }
	#content { width: 100%; }
	#footer { width: 100%; }
}

/* Tablet Portrait (768px) */
@media only screen and (min-width: 321px) and (max-width: 1024px) and (orientation: portrait) {
	#header { width: 100%; }
	#content { width: 100%; }
	#footer { width: 100%; }
}

/* Phone Landscape (480px) */
@media only screen and (min-width: 321px) and (max-width: 480px) and (orientation: landscape) {
	#header { width: 100%; }
	#content { width: 100%; }
	#footer { width: 100%; }
}

/* Phone Portrait (320px) */
@media only screen and (max-width: 320px) {
	#header { width: 100%; }
	#content { width: 100%; }
	#footer { width: 100%; }
}