webの授業・スマートフォンサイト制作
今日の授業はスマートフォン専用サイト。
スマートフォン専用サイトはクロームのF12の開発ツールで確認できるようだ。
クロームのF12を押して左上のスマートフォンのアイコンをクリックすると各種デバイスでの動作をエミュレーションできる。
スマートフォンは小さいため情報量を少なくする工夫が必用になるようだ。
1ページ目
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>エモトカホリ</title> <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"> <!--user-scalableは拡大させないnoもしくは0はさせない yesもしくは1はさせる--> <!--initial-scale=1.0は横向きになったとき角度をかけない--> <meta name="format-detection" content="telephone=no"> <!--telephone=no、電話と勝手に認識させないようにさせる--> <link rel="apple-touch-icon" href="apple-touch-icon.png"> <!--ショートカットのアイコン設定--> <link rel="stylesheet" href="css/style.css"> </head> <body> <header class="global-header"> <h1 class="page-heading">エモトカホリ</h1> </header> <img src="img/logo.png" class="img-illust" /> <p class="introduction"> エモトカホリのポートフォリオサイトです。<br /> 動物や植物を中心にしたイラストを書いています。 </p> <section class="block"> <h1 class="block-heading">イラスト集</h1> <p class="comment"> エモトカホリの作品集です。絵をクリックするとイラストのページに移動します。 </p> <nav class="nav-portfolio"> <ul> <li><a href="flying-penguin.html" title="ペンギン" ><img src="img/thumbnail_flying-penguin.png" alt="群れをなして空を飛ぶペンギンたちのイラスト"></a></li> <li><a href="love-bluebird.html" title="コトリ"><img src="img/thumbnail_love-bluebird.png" alt="恋する二人を見守る小鳥がハート型に赤い糸を咥えているのイラスト"></a></li> <li><a href="dreaming-elephant.html" title="ゾウ"><img src="img/thumbnail_dreaming-elephant.png" alt="クジャクの上に乗って空を飛ぶことを夢見るゾウのイラスト"></a></li> <li><a href="star-bear.html" title="クマ"><img src="img/thumbnail_star-bear.png" alt="星を虫取りアミでたくさん捕まえているクマのイラスト"></a></li> <li><a href="present-dog.html" title="イヌ"><img src="img/thumbnail_present-dog.png" alt="プレゼントの箱を体につけたイヌのイラスト"></a></li> <li><a href="flying-cat.html" title="ネコ"><img src="img/thumbnail_flying-cat.png" alt="色とりどりの風船を持って空を飛ぶネコのイラスト"></a></li> <li><a href="rabbit.html" title="ウサギ"><img src="img/thumbnail_rabbit.png" alt="花に恋するウサギ"></a></li> <li><a href="tortoise.html" title="カメ"><img src="img/thumbnail_tortoise.png" alt="森で長生きしているカメ"></a></li> </ul> </nav> <p class="comment"> こちらで紹介している作品以外の作品もありますので、ご覧になりたい方は<a href="mailto:mail@exsample.com?subject=【エモトカホリの他の作品について】">メールでお問い合わせください。</a> </p> </section> <footer> <nav class="nav-about"> <ul> <li><a href="emotokahori.html">エモトカホリの紹介</a></li> <li><a href="sales.html">イラストの販売について</a></li> <li><a href="contact.html">仕事のご依頼・お問い合わせ</a></li> </ul> </nav> <p class="copyright"><small>Copyright©2014 Emoto Kahori</small></p> </footer> <script src="js/iphone.js"></script> <!--検索バーを隠す--> </body> </html>
2ページ目
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>空飛ぶペンギン - エモトカホリ作品</title> <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> <meta name="format-detection" content="telephone=no"> <link rel="apple-touch-icon" href="apple-touch-icon.png"> <link rel="stylesheet" href="css/style.css"> </head> <body> <header class="global-header"> <h1 class="page-heading">空飛ぶペンギン</h1> <nav class="nav-page"> <p class="nav-page-left"> <a href="index.html">ホーム</a> </p> </nav> </header> <section class="block"> <img src="img/flying-penguin.png" width="300" height="200" class="img-illust" alt="*"/> <h1 class="block-heading">空飛ぶペンギン</h1> <p class="comment"> 空飛ぶペンギンの群れです。 </p> </section> <section class="block"> <h1 class="block-heading">他のイラスト</h1> <nav class="nav-portfolio"> <ul> <li><a href="love-bluebird.html" title="コトリ"><img src="img/thumbnail_love-bluebird.png" alt="恋する二人を見守る小鳥がハート型に赤い糸を咥えているのイラスト"></a></li> <li><a href="dreaming-elephant.html" title="ゾウ"><img src="img/thumbnail_dreaming-elephant.png" alt="クジャクの上に乗って空を飛ぶことを夢見る"></a></li> <li><a href="star-bear.html" title="クマ"><img src="img/thumbnail_star-bear.png" alt="星を虫取りアミでたくさん捕まえているクマのイラスト"></a></li> <li><a href="present-dog.html" title="イヌ"><img src="img/thumbnail_present-dog.png" alt="プレゼントの箱を体につけたイヌのイラスト"></a></li> <li><a href="flying-cat.html" title="ネコ"><img src="img/thumbnail_flying-cat.png" alt="色とりどりの風船を持って空を飛ぶネコのイラスト"></a></li> <li><a href="rabbit.html" title="ウサギ"><img src="img/thumbnail_rabbit.png" alt="花に恋するウサギ"></a></li> <li><a href="tortoise.html" title="カメ"><img src="img/thumbnail_tortoise.png" alt="森で長生きしているカメ"></a></li> </ul> </nav> </section> <footer> <nav class="nav-about"> <ul> <li><a href="emotokahori.html">エモトカホリの紹介</a></li> <li><a href="sales.html">イラストの販売について</a></li> <li><a href="contact.html">仕事のご依頼・お問い合わせ</a></li> </ul> </nav> <p class="copyright"><small>Copyright©2014 Emoto Kahori</small></p> </footer> <script src="js/iphone.js"></script> </body> </html>
CSS
@charset "utf-8"; /*================================================= * ブラウザのデフォルトのスタイルをリセットする * ================================================= */ html, body, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, header, hgroup, section, article, aside, hgroup, footer, figure, figcaption, nav { margin: 0; padding: 0; font-size: 100%; } body { line-height: 1.0; -webkit-text-size-adjust: none;/*古いブラウザは勝手に文字を大きくする機能があるのでadjusリセット*/ } article,aside,canvas,details,figcaption,figure, footer,header,hgroup,menu,nav,section,summary { display:block;/*HTML5ではインライン要素となっているためブロック要素に置き換える。*/ } img { border: 0; vertical-align: bottom; } ul, ol { list-style: none; } table { border-spacing: 0; empty-cells: show; } /*================================================= * サイト全体の基本スタイル * ================================================= */ body { background-color: #D9F5F3; font-family: "Hiragino Kaku Gothic ProN", Helvetica, san-serif; font-size: 14px; line-height: 1.6; } a { color: #336699; } /*================================================= * サイトのレイアウト * ================================================= */ .global-header{ height: 44px; line-height:44px; background-color: rgba(0,0,0,0); -webkit-box-shadow:inset 0 -2px rgba(255,255,255,.3), inset 0 0 3px rgba(255,255,255,.3); box-shadow: inset 0 -2px rgba(255,255,255,.3), inset 0 0 3px rgba(255,255,255,.3); border: solid 1px #7a96ac; background-image: -webkit-linear-gradient(bottom, #ceeafd 30%, #a4cde9 80%); background-image: linear-gradient(to top, #ceeafd 30%, #a4cde9 80%); } h1.page-heading{ margin:0 auto; width:140px; color:#333333; font-size:16px; text-align:center; overflow:hidden;/*文字が長い場合省略させる3つセット*/ white-space:nowrap;/*文字が長い場合省略させる3つセット*/ text-overflow:ellipsis;/*文字が長い場合省略させる3つセット*/ text-shadow:0 1px #ffffff; } .introduction{ margin:15px 10px; padding:5px 10px; background-color:#75D9D0; font-size:12px; border-radius:8px; } .block{ padding-bottom:20px; } .block-heading{ margin:10px; padding:5px; border-left:5px solid #75D9D0; font-size:14px; } .comment p{ margin-top:0; } .nav-portfolio{ margin-top:10px; } .nav-portfolio img{ margin-top:5px; margin-bottom:6px; width:60px; height:60px; border-radius:30px; box-shadow:0 0 3px #333333; } .comment{ margin:0 10px; font-size:12px; } .nav-portfolio li{ margin:0 0 10px 16px; float:left; text-align:center; } .nav-portfolio ul{ overflow:hidden; } .nav-portfolio a{ display:block; text-decoration:none; } .nav-portfolio a:after{ display:block; content:attr(title);/*img属性に書かれているtitleを表示させる*/ font-size:12px; width:60px; text-align:center; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; } .img-illust{ margin:0 auto; display:block; border:10px solid #f5f5f0 } .nav-about{ margin:10px; } .nav-about ul{ border-radius:8px; box-shadow:0 0 3px #333333; } .nav-about li{ border-top:1px solid #d9f5f3; border-bottom:1px solid #75d9d0; height:44px; line-height:44px; background-color:#ffffff; } .nav-about li:first-child{ border-top-right-radius:8px; border-top-left-radius:8px; } .nav-about li:last-child{ border-bottom-right-radius:8px; border-bottom-left-radius:8px; } .nav-about a{ padding:0 14px; display:block; text-decoration:none; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; } footer{ padding:10px 0; background-color:1px solid #75d9d0; } .copyright{ margin:0; color:#FFF; text-align:center; } /*2ページ目*/ .nav-page{ position:absolute; top:0; left0:0; width:100%; } .nav-page-left{ position:absolute; top:0; left:10px; } .nav-page a{ padding:6px 12px; border:1px solid #75d9d0; background-image: -webkit-gradient(linear, left top, left bottom, from(#D9F5F3), color-stop(45%, #c8e4e2), color-stop(55%, #86e0e1), to(#75D9D0)); /*グラデーションの記述*/ border-radius:4px; box-shadow:0 1px ##d9f5f3; text-decoration:none; }