残暑お見舞い

Illustrator Photoshop HTML CSS JavaScript

「夏季限定・かき氷」

ちょっとした涼のために大変な時間をかけてしまいましたが、
お楽しみいただければ幸いです。

画像作るのにかかった時間（起動してからの実作業）
Illustratorで作成

  • シロップ（linkとhover）→1時間
  • かき氷のれん→1時間

Photoshopで作成

  • テーブルとスプーン（学校のCS5.5使用）→30分
  • かき氷（5種類・器も込み）→1.5時間

かき氷の画像もjs制御でいけたんではないかと思うものの、
リセットさせることにも配慮した結果、
自分は1ページずつ作る方がまだ早かったので、
シロップごとに別ページを作成して対応。

もっとJsやphpに強くなって、スマートにできるようにならないとなあ。

2012/09/01（追記）
ソースです。
《style.css》

@charset "utf-8";

* {
	margin:0;
	padding:0;
	list-style-type: none;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

body {
	width:740px;
	margin:10px;
}

#back {
	margin:10px;
}
#flag {
	visibility:visible !important;
	visibility:hidden;
	position:absolute;
	top: 0;
	left: 0;
	z-index: 10;
}

nav {
	margin-left: 210px;
}
nav ul li {
	float: left;
	margin-left: 20px;
}
footer {
	height: 60px;
	margin: 20px 0;
	text-align: center;
}

《index.html》

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>夏季限定・かき氷</title>
<link rel="stylesheet" href="style.css">
<script src="rollover.js" type="text/javascript"></script>
<!--[if lte IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if lte IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
<style>
	article, section, figure, header, nav { display: block; }
</style>
</head>
<body>
	<header>
	<div id="flag"><img src="img/flag.png" alt="かき氷のれん" width="190" height="210"></div>
	<nav>
		<ul>
			<li><a href="berry.html"><img src="img/syrup_01.gif" alt="syrup_berry" class="imgover"></a></li>
			<li><a href="melon.html"><img src="img/syrup_02.gif" alt="syrup_melon" class="imgover"></a></li>
			<li><a href="lemon.html"><img src="img/syrup_03.gif" alt="syrup_lemon" class="imgover"></a></li>
			<li><a href="blue.html"><img src="img/syrup_04.gif" alt="syrup_blue" class="imgover"></a></li>
		</ul>
	</nav>
</header>
<div ="back"><img src="img/ice_base.jpg" alt="かき氷プレーン" /></div>
<footer><small>Copyright (C) 2012 <a href="http://2012fight.hotcom-web.com">http://2012fight.hotcom-web.com</a> All Rights Reserved.</small></footer></body>
</html>