<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>エモトカホリ</title>
<meta name="viewport" content="width=device-width">
<meta name="format-detection" content="telephone=no">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<link rel="stylesheet" href="css/iphone.css" media="screen">
</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 class="global-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©2010 Emoto Kahori</small></p>
</footer>
<script src="js/iphone.js"></script>
</body>
</html>
@charset "UTF-8";
/*=================================================
* ブラウザのデフォルトのスタイルをリセットする
* ================================================= */
html, body, h2, 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;
}
article,aside,canvas,details,figcaption,figure,
footer,header,hgroup,menu,nav,section,summary {
display:block;
}
img{
border:0;
vertical-align:bottom;
}
ul,ol{
list-style:none;
}
table{
border-spacing: 0;
empty-cells: show;
}
/*=================================================
* サイト全体の基本スタイル
* ================================================= */
body{
background-color: #d9f5f3;
font-family:Helvetica;
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;
overflow: hidden;
color: #333333;
font-size:16px;
text-align: center;
white-space: nowrap;
text-overflow:ellipsis;
text-shadow: 0 1px #ffffff;
}
.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));
-webkit-border-radius:4px;
border-radius:4px;
-webkit-box-shadow: 0 1px #d9f5f3;
box-shadow:0 1px #d9f5f3;
text-decoration: none;
}
.introduction{
margin: 15px 10px;
padding: 5px 10px;
}
.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;
}
.nav-portfolio img {
margin-bottom: 6px;
width: 60px;
height: 60px;
-webkit-border-radius: 30px;
border-radius: 30px;
-webkit-box-shadow: 0 0 3px #333333;
box-shadow: 0 0 3px #333333;
}
.nav-portfolio li {
margin: 0 0 10px 16px;
float: left;
text-align: center;
}
.nav-portfolio ul:after {
content: '';
display: block;
clear: both;
}
.nav-portfolio a{
display: block;
text-decoration: none;
}
.nav-portfolio a:after {
display: block;
content: attr(title);
font-size: 12px;
width: 60px;
text-align: center;
white-space: nowrap;
text-overflow: ellipsis;
}
.img-illust {
margin: 0 auto;
display: block;
border: 10px solid #F5F5F0;
}
.nav-about {
margin: 10px;
}
.nav-about ul {
-webkit-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: 0 0 3px #333333;
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 {
-webkit-border-top-right-radius: 8px;
-webkit-border-top-left-radius: 8px;
border-top-right-radius: 8px;
border-top-left-radius: 8px;
}
.nav-about li:last-child {
-webkit-border-bottom-left-radius: 8px;
-webkit-border-bottom-right-radius: 8px;
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;
}
.global-footer {
padding: 10px 0;
background-color: #75D9D0;
}
.copyright {
margin: 0;
color: #ffffff;
text-align: center;
}
