読者です 読者をやめる 読者になる 読者になる

求職者支援訓練webサイト制作科1月クラス

フェリカテクニカルアカデミー池袋の求職者支援訓練webサイト制作科1月クラスの授業解説ブログです。

スマートフォン専用サイトの制作

スマートフォン専用サイトの制作。まずは動きの少ないシンプルなレイアウトのスマートフォン専用サイトを制作します。
スマートフォン専用サイトなので、HTML5とCSS3を積極的に使います。


画像素材


f:id:yachin29:20150619111447p:plain

トップページ

<!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="stylesheet" href="css/style.css">
<!-- iOS Safari and Chrome -->
<link rel="apple-touch-icon" sizes="192x192" href="touch-icon.png">
<!-- Android標準ブラウザ(一部) -->
<link rel="shortcut icon" href="http://〇〇〇〇.com/touch-icon.png">
</head>

<body>
<header class="global-header">
<h1 class="page-heading">エモトカホリ</h1>
<nav class="nav-page">
<p class="nav-page-left">
<a href="#">PCサイトへ</a>
</p>
</nav>
</header>

<section class="block" id="box">
<h1 class="block-heading">エモトカホリのポートフォリオサイト</h1>
<p><img src="img/logo.png" class="img-illust"></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="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>
<li><a href="#">PCサイトはこちら</a></li>
</ul>
 </nav>
 <p class="copyright"><small>Copyright&copy;2017 ○○○</small></p>
</footer>
</body>
</html>

スタイルシート

@charset "utf-8";
/*=================================================
 * ブラウザのデフォルトのスタイルをリセットする
 * ================================================= */

html, body, h1, 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;
}

a {
text-decoration:none;
}

img {
 border: 0;
 vertical-align: bottom;
}

ul, ol {
 list-style: none;
}

table {
 border-spacing: 0;
 empty-cells: show;
}

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

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 {
 height: 44px;
 line-height: 44px;
 background-color: #132543;
 box-shadow: inset 0 0 7px rgba(255,255,255,.4);
 border: solid 1px #2a849d;
 background-image: linear-gradient(to top, #48a5bf, #7ec4d8);
}
.page-heading {
 text-align:center;
 color: #FFFFFF;
 font-size: 16px;
 text-shadow: 1px 1px 1px #000000;
}
.img-illust {
 margin: 0 auto;
 display: block;
 border: 10px solid #F5F5F0;
}
.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;
}
.nav-portfolio {
 margin-top: 10px;
}
.nav-portfolio img {
 margin: 5px 0;
 width: 60px;
 height: 60px;
 border-radius: 50%;  /*画像の隅を丸くする*/
 box-shadow: 0 0 3px #333333; /*影をつける*/
}
.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;
}
.nav-portfolio a:before {
 display: block;
 content: attr(title);  /*imgタグに書かれているtitleを表示させる*/
 font-size: 12px;
 text-align: center;
 width: 60px;  /*文字がwidthを超えると省略される*/
 overflow: hidden;  /*文字が長い場合に省略される*/
 white-space: nowrap;  /*文字が長い場合に省略される*/
 text-overflow: ellipsis;   /*文字が長い場合に省略される。上の3つとセット*/;
}

.nav-about {
 margin: 10px;
}
.nav-about ul {
 border-radius: 8px;
 padding: 0;
 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;
}
footer {
 padding: 10px 0;
 background-color: #75D9D0;
}
.copyright {
 margin: 0;
 color:  #000000;
 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: #86e0e1;  
 border-radius: 4px;
 box-shadow: 0 1px #D9F5F3;;
}