マルチデバイス―レイアウトの設定
画面サイズごとのデザイン
レイアウトの設定
- Lサイズ:横幅960px
- Mサイズ:横幅620px
- Sサイズ:横幅300px
Lサイズのレイアウト設計
Sサイズのレイアウト設計
ソースコード【 HTML 】
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>SAMPLE</title> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="css/style-l11.css"> <link rel="stylesheet" href="css/style-m4.css" media="only screen and (min-width:640px) and (max-width:979px)"> <link rel="stylesheet" href="css/style-s4.css" media="only screen and (max-width:639px)"> <!-- Webフォントの設定 --> <link href='http://fonts.googleapis.com/css?family=Maven+Pro:900,400' rel='stylesheet' type='text/css'> </head> <body> <!-- #conteiner --> <div id="container"> <!-- #header --> <div id="header"> <!-- #site --> <div id="site"> <h1><img src="html5_img/images/00.png" alt="PICKUP STREAM"></h1> </div><!-- ▲/ #site --> <!-- #nav --> <div id="nav"> <ul> <li><a href="#">HOME</a></li> <li><a href="#">CATEGORY</a></li> <li><a href="#">ABOUT</a></li> <li><a href="#">CONTACT</a></li> </ul> </div> </div> <!-- #header --> <!-- #headerpost --> <div id="headerpost"> <img src="html5_img/images/05.png" alt=""> <div id="lead"> <h2>買い物に出掛けよう</h2> <p>隣町に新しくできたショッピングセンターには楽しいお店がたくさんあります。1か所にまとまっているので、たくさん歩き回る必要もなく、楽々とお買い物ができておすすめです。</p> <p class="date">2012年8月3日</p> <p class="more"><a href="url">MORE</a></p> </div> </div><!-- ▲/ #headerpost --> <!-- #content --> <div id="content"> <div class="post"> <a href="#"> <img src="html5_img/images/06.png" alt=""> <h2>カラフルなファイル</h2> <p>風車は風を受けて回転します。このとき、効率よく風を受けるためには、風上に向かって真正面をむかなければなりません…</p> <p class="date">2012年8月1日</p> <p class="more_s">MORE</p> </a> </div> <div class="post"> <a href="#"> <img src="html5_img/images/07.png" alt=""> <h2>勉学のための参考書</h2> <p>ツル植物は太い木の幹に巻きつき、どんどんとツルを伸ばしていきます。太陽の当たる方向に葉をつけ、枝を伸ばしていく…</p> <p class="date">2012年7月28日</p> <p class="more_s">MORE</p> </a> </div><!-- ▲.post --> <!-- ▼.post --> <div class="post"> <a href="#"> <img src="html5_img/images/07.jpg" alt=""> <h2>勉学のためのインテリア</h2> <p>海岸には砂や貝殻しかないように思ってしまいますが、よく見ると草花も生えていることがわかります。ただし、海水や潮風…</p> <p class="date">2012年7月20日</p> <p class="more_s">MORE</p> </a> </div><!-- ▲.post --> <div class="post"><!-- ▼.post --> <a href="#"> <img src="html5_img/images/05.jpg" alt=""> <h2>勉学のための教材</h2> <p>原生花園では今年も色とりどりの花が咲いています。特に今年は原色の色鮮やかな花がたくさん咲いていますので、週末には…</p> <p class="date">2012年7月5日</p> <p class="more_s">MORE</p> </a> </div><!-- ▲.post --> </div> <!-- ▲#content --> <!-- #footer --> <div id="footer"> <!-- title--> <p>PICKUPxSTREAM</p> <!-- #iconmenu --> <div id="iconmenu"> <ul> <li><a href="#"><img src="html5_img/img/twitter.png" alt="Twitter"></a></li> <li><a href="#"><img src="html5_img/img/facebook.png" alt="Facebook"></a></li> <li><a href="#"><img src="html5_img/img/googleplus.png" alt="Google Plus"></a></li> <li><a href="#"><img src="html5_img/img/rss.png" alt="RSS Feed"></a></li> </ul> </div><!-- ▼#iconmenu --> <!-- submenu --> <div id="submenu"> <ul> <li><a href="#">Privacy Policy</a></li> <li><a href="#">Terms of Use</a></li> <li><a href="#">Contact</a></li> </ul> </div><!-- ▲/ #submenu --> <!-- コピーライト --> <small>Copyright © PICKUP STREAM, all rights reserved.</small> </div> <!-- #footer --> </div> <!-- #container --> </body> </html>
<< style-l.css >>
@charset "utf-8"; @font-face { font-family: Makiba; src: url(MakibaFontBP13/MakibaFontBP13.ttf) format("truetype"); } @import url(http://fonts.googleapis.com/css?family=Uncial+Antiqua); @import url(http://fonts.googleapis.com/css?family=Playball); /* IE */ @font-face { font-family: Makiba; src: url(MakibaFont13.eot); } /* Firefox, Opera, Safari */ @font-face { font-family: Makiba; src: url(MakibaFont13.ttf) format("truetype"); } /* layout */ body { margin: 24px 10px; font-family: メイリオ, 'Hiragino Kaku Gothic Pro', sans-serif; } h2 { font-size: 28px; font-family: Makiba, メイリオ, 'Hiragino Kaku Gothic Pro', sans-serif;} #container { width: 960px; margin: auto; } #header { margin-bottom: 10px; overflow: hidden; } #headerpost { margin-bottom: 30px; } #content { margin-bottom: 30px; } /* link */ .post a { color: #000; text-decoration: none; display: block; overflow: hidden; } .post a:hover { background-color: #cfffb2; } /* content */ #content { overflow: hidden; } .post { float: left; width: 216px; margin-right: 32px; margin-bottom: 25px; } .post:last-child { margin-right: 0; } .post + .post + .post + .post { margin-right: 0; } /* .post */ .post img { width: 216px; height: auto; vertical-align: bottom; border: none; } .post h2 { font-size: 20px; margin: 5px 0 0; } .post p { font-size: 12px; margin: 10px 0; } .post .date { float: left; margin: 0; } .post .more_s { float: right; color: #fff; font-size: 14px; font-family: 'Maven Pro', Helvetica, Arial, sans-serif; background-color: #666; background-color: #666; background-image: url(../html5_img/images/04.png); background-repeat: no-repeat; background-position: 94% 50%; padding: 3px 25px 3px 5px; margin: 0; } .post a { color: #000; text-decoration: none; display: block; overflow: hidden; } .post a:hover { backgrund-color: #cfffb2; } /* #site */ #site { float: left; } #site h1 { margin: 0; } #site img { vertical-align: bottom; } /* nav */ #nav { float: right; font-size: 22px; font-family: 'Uncial Antiqua', cursive, 'Maven Pro', Helvetica, Arial, sans-serif; padding-top: 30px; } #nav ul { margin: 0; padding: 0; } #nav li { list-style-type: none; float: left; } #nav li a { display: block; float: left; margin-left: 20px; text-decoration: none; border-bottom: 5px solid transparent; color: #000; } #nav li a:hover { border-bottom-color: #ff1e97; } /* #headerpost */ #headerpost img { float: left; vertical-align: bottom; } #headerpost #lead { float: left; width: 300px; color: #fff; margin-left: 25px; overflow: hidden; } #headerpost h2 { margin: 20px 0; } #headerpost .more { font-size: 18px; font-family: 'Maven Pro', Helvetica, Arial, sans-serif; text-align: right; } #headerpost .more a { color: #fff; background-image: url(../html5_img/images/10.png); background-repeat: no-repeat; background-position: right center; display: block; padding: 10px 40px 10px 0; text-decoration: none; } #headerpost { background-colro: #333; background: webkit-gradient(linear,left top, left bottom, from(#000), to(#888)); background: -webkit-linear-gradient(#000 0%, #888 100%); background: -moz-linear-gradient(#000 0%, #888 100%); backgournd: -o-linear-gradient(#000 0%, #888 100%); background: -ms-linear-gradient(#000 100%, #888 100%); background: linear-gradient(#000 0%, #888 100%); overflow: hidden; } /* #footer */ #footer { font-family: 'Maven Pro', Helvetica, Arial, sans-serif; color: #ffffff; background-color: #333333; padding: 10px 10px 20px; } #footer p { float: left; margin: 0; } /* #iconmenu */ #iconmenu { float: right; } #iconmenu ul { margin: 0; padding: 3px 0 0; } #iconmenu li { display: inline; list-style-type: none; } #iconmenu img { border: none; } /* #submenu */ #submenu { clear: both; } #submenu ul { margin: 10px 0; padding: 3px 0 0; font-size: 12px; } #submenu li { display: inline; list-style-type: none; } #submenu a { color: #ff1e97; font-weight: bold; border-right: 1px solid #fff; padding-right: 6px; margin-right: 3px; text-decoration: none; } #submenu li:last-child a { border: none; } #submenu li + li + li a { border: none; } /* Copyright */ small { font-family: 'Playball', cursive; font-size: 12px; font-weight: bold; display: block; }
<< style-m.css >>
@charset "utf-8"; /* layout */ #container { width: 620px; } /* .post */ .post { width: 300px; margin-right: 20px; } .post:nth-child(even) { margin-right: 0; } .post img { width: 300px; } .post h2 { font-size: 22px; } .post p { font-size: 16px; } .post .more_s { font-size: 18px; } /* nav */ #nav { padding-top: 0; } #nav li:nth-child(2) { float: none; overflow: hidden; } /* #headerpost */ #headerpost { position: relative; } #headerpost img { float: none; } #headerpost #lead { float: none; position: absolute; left; 0; bottom: 0; background-color: rgba(0,0,0,0.7); width: auto; padding: 10px 20px; margin: 0; } #headerpost h2 { font-size: 20px; margin: 10px 0 10px; 0; } #headerpost p { font-size: 14px; margin: 0 0 20px 0; } #headerpost .date { float: left; margin: 0; } #headerpost .more { float: right; margin: -12px 15px 0 0; }
<< style-s.css >>
@charset "utf-8"; /* layout */ #container { width: 300px; } .post { float: none; width: 300px; margin-right: 0; } /* post */ .post img { width: 300px; } .post h2 { font-size: 22px; } .post p { font-size: 16px; } .post .more_s { font-size: 18px; } /* site */ #site { float: none; } #site img { width: 300px; height: auto; } /* nav */ #nav { float: none; font-size: 14px; padding-top: 6px; } #nav ul li a { margin-left: 0; margin-right: 10px; } /* #headrpost */ #headerpost img { float: none; width: 300px; height: auto; } #headerpost #lead { float: none; backgrund-color: #252525; width: auto; padding: 10px 10px; margin: 0; } #headerpost h2 { font-size: 20px; margin: 10px 0 10px 0; } #headerpost p { font-size: 14px; margin: 0 0 20px 0; } #headerpost .date { float: left; margin: 0; } #headerpost .more { float: right; margin: -12px 15px 0 0; }
ブラウザで表示【 Chrome 】
- Lサイズで表示
- Mサイズで表示
- Sサイズで表示