WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。

フェリカテクニカルアカデミー

スマートフォンサイト制作4

アプリ風レイアウト


index.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>

<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@exsample.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&copy;2014 Emoto Kahori</small></p>
</footer>
<script src="js/iphone.js"></script>
</body>
</html>

style.css

/*=================================================
 * サイト全体の基本スタイル
 * ================================================= */

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 {
 border-bottom: 1px solid #ffffff;
 height: 44px;
 line-height: 44px;
 background-color: #75D9D0;
 background-image: -webkit-gradient(linear, left top, left bottom, from(#D9F5F3), to(#75D9D0)); /*グラデーションの記述*/
}
.page-heading {
 margin: 0 auto;
 width: 140px;
 color: #333333;
 font-size: 16px;
 text-align: center;
 overflow: hidden;  /*文字が長い場合に省略される*/
 white-space: nowrap;  /*文字が長い場合に省略される*/
 text-overflow: ellipsis;   /*文字が長い場合に省略される。上の2つとセット*/
 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 {
 margin: 0 10px;
 font-size: 12px;
}
.comment p {
 margin-top: 0;
}
.nav-portfolio {
 margin-top: 10px;
 padding-top: 5px;
}

.nav-portfolio img {
 margin-bottom: 6px;
 width: 60px;
 height: 60px;
 border-radius: 30px;  /*画像の隅を丸くする*/
 box-shadow: 0 0 3px #333333;  /*影をつける*/
}
.nav-portfolio ul {
display: block;
overflow: hidden;
}
.nav-portfolio li {
 margin: 5px 0 10px 16px;
 float: left;
 text-align: center;
}
.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: #75D9D0;
}
.copyright {
 margin: 0;
 color:  #ffffff;
 text-align: center;
}

/*イラスト詳細ページのホームに戻るボタン*/
.nav-page {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
}
.nav-page-left {
 position: absolute;
 top: 0;
 left: 10px;
}
.nav-page a {
 padding: 6px 12px;
 border: 1px solid #75D9D0;
 background-color: #D9F5F3;
 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;
}