[スマートフォンサイト]
6月19日 今日のWORK
スマートフォン専用サイト
HTML
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <meta name="format description" content="telephone=no, email=no"> <link rel="apple-toch-icon.png" href="apple-touch-icon.png"> <link rel="stylesheet" href="style.css"> <title>スマートフォン専用サイト</title> </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="#" 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="mailto:mail@example.com?subject=【エモトカホリの他の作品について】">メールでお問い合わせ下さい。</a></p> </section> <footer> <nav class="nav-about"> <ul> <li><a href="#">エモトカホリの紹介</a></li> <li><a href="#">イラストの販売について</a></li> <li><a href="#">仕事の依頼・お問い合わせ</a></li> </ul> </nav> <p class="copyright"><small>Copyright©2014 Emoto Kahori</small></p> </footer> <script src="js/iphone.js"></script> </body> </html>
@charset "UTF-8"; /* reset*/ html, body, h1,p, nav, ul, li, a, img,header, footer, small, section, div { margin: 0; padding: 0; font-size: 100%; } body { line-height: 1.0; -webkit-text-size-adjust: none; /*テキストのサイズを自動調整する機能*/ } article, aside, canvas, details, figcaption. figure, footer, header, menu, nav,section,summary { display: block; } img { border: none; vertical-align: bottom; } ul { list-style: none; } body { background-color: #D9F5F3; line-height: 1.6; font-family: "Hiragino Kaku Gothic ProN", Helvetica, sans-serif; } /* サイトのレイアウト */ .global-header { height: 44px; line-height: 44px; background-image: -webkit-linear-gradient(top, #cfe1ed, #7faaca);/*グラデーション*/ background-image: linear-gradient(to top, #cfe1ed, #7faaca); border: solid 1px #5a83a1; } .page-heading { margin: 0 auto; color: #333; font-size: 16px; text-align: center; width: 140px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-shadow: 1px 1px 1px #FFF; } .img-illust{ margin: 0 auto; display: block; border: 10px solid #F5F5f0; } .introduction { margin: 15px 10px; padding: 5px 10px; background: #75D9D0; font-size: 12px; border-radius: 8px; } .block{ margin-bottom: 20px; } .block-heading { margin:10px; padding: 5px; border-left: 5px solid #75D0D0; font-size: 14px; } .comment { margin: 0 10px; font-size: 12px; } .nav-portfolio { margin-top: 10px; } .nav-portfolio img { margin: 5px 0; width: 60px; height: 60px; border-radius: 30px; /*元の画像がサイズが60pxなので、半分のサイズを半径とする*/ box-shadow: 0 0 3px #333333; /*boxshadowにベンダープレフィクスは不要*/ } .nav-portfolio ul { display: block; overflow: hidden; } .nav-portfolio li { margin: 0 0 10px 16px; float: left; text-align: center; } .nav-portfolio a { display: block; text-decoration: none; } /*navのタイトルについての指定*/ .nav-portfolio a:after { display: block; content: attr(title); font-size: 12px; text-align: center; width: 60px; /*タイトルが60px以上の内容は省略する*/ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } footer { background: #75D9D0; padding: 10px; } /*footer .nav-about { margin: 10px; } */ footer nav ul { background: #FFF; border-radius: 15px; } footer nav ul li { font-size: 12px; line-height: 44px; padding: 0 10px; } footer nav ul li { border-bottom: 2px solid #75D9D0; } footer nav ul li:first-child { border-top-left-radius: 15px; border-top-right-radius: 15px; } footer nav ul li:last-child { border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; } footer nav ul li a { text-decoration: none; display: block; } footer p.copyright { font-size: 12px; text-align: center; color: #FFF; }