[RWD]Google 画像検索ページ風ギャラリー
本日の授業内容
1.「.htaccess」によるデバイス毎の自動振り分け
*デバイスによって閲覧するページを振り分ける
今回はスマートフォン用(SP)とPC・タブレット用(PC)と2種類作っている
「.htaccess」ファイルによって振り分けるようになっている
「.htaccess」ファイルはMacのデフォルト設定では不可視ファイルのため、最初は「htaccess.txt」をつくる。
サーバーにアップロード後にファイル名&拡張子を変更
htaccess.txt内容
<IfModule mod_rewrite.c> RewriteEngine On RewriteCond %{HTTP_USER_AGENT} (iPhone|Android.*Mobile|Windows.*Phone) [NC] RewriteCond %{QUERY_STRING} !mode=pc RewriteRule ^$ /pc/sp/ [R,L] Header set Vary User-Agent </IfModule>
3行目
RewriteCond %{HTTP_USER_AGENT} (iPhone|Android.*Mobile|Windows.*Phone) [NC]
「HTTP_USER_AGENT」は、アクセス端末の種類。
4行目
RewriteCond %{QUERY_STRING} !mode=pc
URLの末尾に「?mode=pc」という文字列が付いていた場合には、スマートフォン用ページに移動させない(リダイレクトしない)ようにする記述
5行目
RewriteRule ^$ /pc/sp/ [R,L]
リダイレクト先のアドレス。PC用のトップページ(index.html)からみたサイトルートを書く。
ここはSP用フォルダの位置によって変わるところなので注意が必要
サーバーにアップしたものはこちら↓↓
http://kuropanther.html.xdomain.jp/pc/
(PC用は構築中です。スマホで見てね)
2.Google画像検索ページ風のギャラリーを作成
これを改良してサイト100選を作る予定。
レスポンシブにも対応しています。
サーバーにアップしたものはこちら↓↓
http://kuropanther.html.xdomain.jp/googleimgsearch/
HTML
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="style.css"> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <![endif]--> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="js/GoogleImgSearch.js"></script> </head> <body> <header> <h1>jQuery GoogleImgSearch風</h1> </header> <div id="container"> <ul class="listCover"> <li class="listItem"> <img src="img/adobemusecc.png" alt=""> <div class="selfRep"> <div class="selfRepInner"> <div class="secLeft"><img src="img/adobemusecc.png" alt=""></div> <div class="secRight"><p>エリア1のダミーテキスト エリア1のダミーテキスト エリア1のダミーテキスト エリア1のダミーテキスト</p> <div class="view">View</div> </div><!--/.secRight--> </div><!--/.selfRepInner--> </div><!--/.selfRep--> </li><!--/.listItem--><!-- --><li class="listItem"> <img src="img/busenaterrace.png" alt=""> <div class="selfRep"> <div class="selfRepInner"> <div class="secLeft"><img src="img/busenaterrace.png" alt=""></div> <div class="secRight"><p>エリア2のダミーテキスト エリア2のダミーテキスト エリア2のダミーテキスト エリア2のダミーテキスト</p> <div class="view">View</div> </div><!--/.secRight--> </div><!--/.selfRepInner--> </div><!--/.selfRep--> </li> 以下繰り返し </ul> </div><!--/#container--> </body> </html>
@charset "UTF-8"; html, body, div, h1, p, ul, li, a, img { margin: 0; padding: 0; } img { vertical-align: bottom; -ms-interpolation-mobile: bicubic; border: none; } html { font-size: 75%; -webkit-text-size-adjust: none; } a { -webkit-tap-highlight-color: transparent; text-decoration: none; } ul { list-style: none; } /* HTML5 ELEMENTS */ header,article,aside,section,footer, nav,menu,details,hgroup,summary { display: block; } body { overflow-y :scroll; } *html body {overflow-y: auto;} /* IE6 */ *first-child+html body {overflow-y: auto;} /* IE7 */ h1 { background: #000; color: #FFF; font-size: 18px; font-weight: bold; text-align: center; margin-bottom: 20px; padding: 15px 0; } ul.listCover { text-align: left; margin: 0 auto; } /* .listItem */ ul.listCover li.listItem { text-align: center; display: inline-block; *display: inline; *zoom: 1; padding: 10px 0; cursor: pointer; } ul.listCover li.listItem img { width: 200px; /*サムネイルの大きさ*/ } .listCover .active { background:url(img/activeArrow.gif) no-repeat bottom center; } .listCover .listItem .selfRep { display: none; } footer{ background : #CCC; height: 40px; } footer p{ text-align: center; font-size: 12px; padding-top: 10px; } /* .expandField */ .expandField { width: 100%; text-align: left; display: block; background: #222; float: left; position: relative; overflow: hidden; padding: 0; } .expandField .btnClose { top:10px; right: 0; width: 60px; height: 60px; display: block; background: url(img/close.png) no-repeat top left; position: absolute; overflow: hidden; cursor: pointer; } .expandField .btnPrev { top: 120px; left: 0; width: 60px; height: 60px; display: block; background: url(img/prev.png) no-repeat top left; position: absolute; overflow: hidden; cursor: pointer; } .expandField .btnNext { top: 120px; right: 0; width: 60px; height: 60px; display: block; background: url(img/next.png) no-repeat top left; position: absolute; overflow: hidden; cursor: pointer; } .expandField .selfRepInner { text-align: center; position: relative; padding: 20px 50px; } .expandField .selfRepInner .secLeft, .expandField .selfRepInner .secRight { width : 50%; float: left; } .expandField .selfRepInner .secLeft { text-align: center; } .expandField .selfRepInner .secRight { text-align: left; width: 40%; color: #FFF; } .secRight p { font-size: 16px; line-height: 1.2em; } .view { border: 1px solid white; border-radius: 5px; padding: 10px 0; width: 60%; text-align: center; margin: 160px auto; transition: 0.3s ease-in-out; } .view:hover { background: #FFF; color: #333; cursor: pointer; } /* SizeAdjustment */ @media screen and (max-width: 600px){ .expandField .selfRepInner .secLeft img { width :80%; } } @media screen and (max-width: 480px) { .expandField .selfRepInner .secLeft { display: none; } .expandField .selfRepInner .secRight { width: 100%; Float: none; } } /* ======================================= ClearFix ======================================= */ .listCover:before, .listCover:after, .expandField .selfRepInner:before, .expandField .selfRepInner:after { content: " "; display: table; } .listCover:after, .expandField .selfRepInner:after {clear: both;} .listCover, .expandField .selfRepInner {*zoom: 1;}