45日目 メディアクエリ カラム落ちとフルードグリッド
メディアクエリでレスポンシブ対応
画面が小さくなるにつれてカラム落ちさせる
javascriptでTOPに戻るようにする
→
→
http://tototo.webcrow.jp/BlogUp/okazu/index.html
[html]
<!DOCTYPE html> <html land="ja"> <head> <meta charset="utf-8"> <title>楽しいおかず</title> <meta name="viewport" content="width=device-width"> <link rel="shortcut icon" href="favicon.ico" type="image/vnd.microsoft.ico"/> <link rel="stylesheet" href="css/style.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script> $(function(){ var topBtn = $('#toTop'); topBtn.hide(); //スクロールがトップから100pxに達したらボタン表示 $(window).scroll(function () { if ($(this).scrollTop() > 100) { topBtn.fadeIn(); } else { topBtn.fadeOut(); } }); $('a[href^=#]').click(function(){ var speed = 500; var href= $(this).attr("href"); var target = $(href == "#" || href == "" ? 'html' : href); var position = target.offset().top; $("html, body").animate({scrollTop:position}, speed, "swing"); return false; }); }); </script> </head> <body id="top"> <div id="container"> <div class="column"> <header> <h1><img src="img/logo01.png" alt="logo"></h1> <nav> <ul> <li><img src="img/nav01_01.png" alt="#"></li> <li><img src="img/nav02_01.png" alt="#"></li> <li><img src="img/nav03_01.png" alt="#"></li> <li><img src="img/nav04_01.png" alt="#"></li> </ul> </nav> </header> <ul> <li><img src="img/ph01_l.jpg" alt="#"></li> </ul> <ul> <li><img src="img/ph02_mt.jpg" alt="#"></li> <li><img src="img/ph03_s.jpg" alt="#"></li> <li><img src="img/ph04_s.jpg" alt="#"></li> </ul> <ul> <li><img src="img/ph05_my.jpg" alt="#"></li> <li><img src="img/ph06_s.jpg" alt="#"></li> <li><img src="img/ph07_s.jpg" alt="#"></li> </ul> </div><!--.column--> <div class="column"> <ul> <li><img src="img/ph08_my.jpg" alt="#"></li> <li><img src="img/ph09_s.jpg" alt="#"></li> <li><img src="img/ph10_s.jpg" alt="#"></li> </ul> <ul> <li><img src="img/ph11_l.jpg" alt="#"></li> </ul> <ul> <li><img src="img/ph12_s.jpg" alt="#"></li> <li class="right"><img src="img/ph13_mt.jpg" alt="#"></li> <li><img src="img/ph14_s.jpg" alt="#"></li> </ul> <ul> <li><img src="img/ph15_l.jpg" alt="#"></li> </ul> <ul> <li><img src="img/ph16_s.jpg" alt="#"></li> <li><img src="img/ph17_s.jpg" alt="#"></li> <li><img src="img/ph18_my.jpg" alt="#"></li> </ul> </div><!--.column--> <div class="column three"> <ul> <li><img src="img/ph19_l.jpg" alt="#"></li> </ul> <ul> <li><img src="img/ph20_s.jpg" alt="#"></li> <li class="right"><img src="img/ph21_mt.jpg" alt="#"></li> <li><img src="img/ph22_s.jpg" alt="#"></li> </ul> <ul> <li><img src="img/ph23_s.jpg" alt="#"></li> <li><img src="img/ph24_s.jpg" alt="#"></li> <li><img src="img/ph25_my.jpg" alt="#"></li> </ul> <ul> <li><img src="img/ph26_s.jpg" alt="#"></li> <li><img src="img/ph27_s.jpg" alt="#"></li> <li><img src="img/ph28_s.jpg" alt="#"></li> <li><img src="img/ph29_s.jpg" alt="#"></li> </ul> <ul> <li><img src="img/ph30_l.jpg" alt="#"></li> </ul> <!--タブレット用のfooter--> <footer id="sp"> <p><small>Copyright © 2016 ○○○ All Rights Reserved.</small></p> </footer> </div><!--.column--> </div><!--#container--> <footer id="pc"> <p><small>Copyright © 2016 ○○○ All Rights Reserved.</small></p> </footer> <p id="toTop"><a href="#top"><img src="img/top.png" alt="#"></a></p> </body> </html>
[css]
@charset "utf-8"; /* CSS Document */ /* reset */ html, body, div, h1, h2, h3, h4, h5, h6,p, blockquote, pre, address,ul, ol, li, dl, dt, dd,table, th, td, form, fieldset { margin: 0; padding: 0; line-height: 1.0; font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; } table { border-collapse: collapse; border-spacing: 0; } ul, ol { list-style: none; /* マーカーを消す */ } a { text-decoration: none; /* 下線を消す */ } img { border: 0; } img, input { vertical-align: bottom; } #container { width: 960px; overflow: hidden; margin: 10px auto; } .column { float: left; } header { width: 320px; overflow: hidden; } h1 { margin: 10px; } ul { width: 320px; overflow: hidden; } .column ul li { margin: 10px; float: left; } .column ul li.right { float: right; } footer#pc { background: #666; text-align: center; font-size: 18px; line-height: 18px; padding:30px; color: #FFF; } footer#sp { display: none; } #toTop { position: fixed; bottom: 65px; right: 5%; } #toTop a { width: 100px; height: 100px; display: block; text-decoration: none; opacity: 0.5; } #toTop a:hover { opacity: 1; } @media screen and (max-width:959px){ #container { width: 640px; } /*3つ目のcolumnにクラス名を追加*/ .three { width: 640px; overflow: hidden; } .three ul { float: left; } footer#pc { display: none; } footer#sp { display: block; width: 300px; height: 300px; background: #999; float: left; margin: 10px; } footer#sp p { color: #FFF; font-size: 18px; line-height: 300px; text-align: center; } } @media screen and (max-width:640px){ #container { width: 320px; } .column{ float: none; } .three ul { float: none; } footer#pc { display: block; padding:30px; color: #FFF; } footer#sp { display: none; } }
ファビコンを作成する
ファビコンのサイズ
pcは16ｘ16px
macとサファリは32ｘ32px
スマホは144ｘ144px
今回はpc用を作成
photoshopで32ｘ32のpng画像を作成
photoshopが古いバージョンの場合はジェネレーター（http://ico.bradleygill.com/index.php）で拡張子を「.icon」にする
ファイル名は「favicon」
htmlと同じ階層に必ず置く
htmlに
<link rel="shortcut icon" href="favicon.ico" type="image/vnd.microsoft.ico"/>
を加える
フルードグリッドでレスポンシブ対応
レイアウトは変わらずそのまま縮小されていく
http://tototo.webcrow.jp/BlogUp/okazu-FluidGrid/index.html
[css]
@charset "utf-8"; /* CSS Document */ /* reset */ html, body, div, h1, h2, h3, h4, h5, h6,p, blockquote, pre, address,ul, ol, li, dl, dt, dd,table, th, td, form, fieldset { margin: 0; padding: 0; line-height: 1.0; font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; } table { border-collapse: collapse; border-spacing: 0; } ul, ol { list-style: none; /* マーカーを消す */ } a { text-decoration: none; /* 下線を消す */ } img { border: 0; } img, input { vertical-align: bottom; } #container { width: 960px; overflow: hidden; margin: 10px auto; } .column { float: left; } header { width: 320px; overflow: hidden; } h1 { margin: 10px; } ul { width: 320px; overflow: hidden; } .column ul li { margin: 10px; float: left; } .column ul li.right { float: right; } footer#pc { background: #666; text-align: center; font-size: 18px; line-height: 18px; padding:30px; color: #FFF; } footer#sp { display: none; } #toTop { position: fixed; bottom: 65px; right: 5%; } #toTop a { width: 100px; height: 100px; display: block; text-decoration: none; opacity: 0.5; } #toTop a:hover { opacity: 1; } @media screen and (max-width:959px){ #container { width: 98%; /*960px÷980(960pxにmarginを足してる分)px=0.98×100=98%*/ margin: 0 auto; } .column { width: 33.33%; /*３つある.columnを3等分した％幅*/ } header { width: 100%; /*親要素の.columnの幅の中で何%で表示したいか*/ } h1 { width: 93.75%; /*header幅100%に対し両方のマージン分の6.25％を引いた値*/ margin: 3.125%; /*10px÷320px(親要素のheaderの幅)×100*/ } ul { width: 100%; } .column ul li { margin: 3.125%; /*10px÷320px×100*/ } .size-2x2 { width: 93.75%; /*300px÷320px ×100*/ } .size-2x1 { width: 93.75%; } .size-1x2 { width: 43.75%; /*140px÷320px ×100*/ } .size-1x1 { width: 43.75%; /*140px÷320px ×100*/ } img { max-width: 100%; /*フルードイメージ*/ } }
