【勉強メモ】スマホ用サイト1〜htmlコード〜
htmlコード
<!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"> <meta name="format-detection" content="telephone=no, email=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> <section class="block"> <h1 class="block-heading">ポートフォリオサイト</h1> <p><img src="img/logo.png" class="img-illust" alt="イラストを描く2匹のリス"></p> <p class="introduction"> エモトカホリのポートフォリオサイトです。<br> 動物や植物を中心にしたイラストを書いています。</p> </section> <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="#" title="コトリ"> <img src="img/thumbnail_love-bluebird.png" alt="恋する二人を見守る小鳥がハート型に赤い糸を咥えているのイラスト"></a></li> <li><a href="#" title="ゾウ"> <img src="img/thumbnail_dreaming-elephant.png" alt="クジャクの上に乗って空を飛ぶことを夢見るゾウのイラスト"></a></li> <li><a href="#" title="クマ"> <img src="img/thumbnail_star-bear.png" alt="星を虫取りアミでたくさん捕まえているクマのイラスト"></a></li> <li><a href="#" title="イヌ"> <img src="img/thumbnail_present-dog.png" alt="プレゼントの箱を体につけたイヌのイラスト"></a></li> <li><a href="#" title="ネコ"><img src="img/thumbnail_flying-cat.png" alt="色とりどりの風船を持って空を飛ぶネコのイラスト"></a></li> <li><a href="#" title="ウサギ"><img src="img/thumbnail_rabbit.png" alt="花に恋するウサギ"></a></li> <li><a href="#" title="カメ"><img src="img/thumbnail_tortoise.png" alt="森で長生きしているカメ"></a></li> </ul> </nav> <p class="comment"> こちらで紹介している作品以外の作品もありますので、ご覧になりたい方は<a href="#">フォームでお問い合わせください。</a></p> </section> <footer> <nav class="nav-about"> <ul> <li><a href="#">エモトカホリの紹介</a></li> <li><a href="#">イラストの販売について</a></li> <li><a href="#">仕事のご依頼・お問い合わせ</a></li> <li><a href="#">PCサイトはこちら</a></li> </ul> </nav> <p class="copyright"><small>Copyright©2014 Emoto Kahori</small></p> </footer> <script src="js/iphone.js"></script> </body> </html>
