くろひょうのwebデザインのお勉強帳

フェリカテクニカルアカデミー web制作科の受講生です。授業の要点、復習でつまづいた点などを記録し、レベルアップに励みます。

クリエイターになるための、お勉強の記録帳

[スマートフォンサイト]

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


CSS

@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;
}