[CSS]これは簡単！レスポンシブ対応のスケルトンを数分で作成できるオンラインサービス -Responsive Web Css
Post on:2013年8月19日
sponsors
ちょちょいと設定するだけで、あなた用のスマフォやタブレットなどのレスポンシブ対応のHTMLとCSSのスケルトンを簡単に作成できるオンラインサービスを紹介します。
表示デバイスとか決まっているのであれば、1分くらいで完了します。
使い方は簡単で、これから作成するページでも今運営しているページでも利用できます。
中央の「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%; }
}
sponsors
