閉じる
CSS
  • 2011.08.27 (Sat)

編集機能要素も利用出来るHTML5を使用した拡大画像ギャラリー

ブラウザ上で直接編集ができるようにする機能を付けるHTML要素[contenteditable]、HTML5でもどうやらサポートされているようです。

そこで、HTML5で画像ギャラリーを作成し、contenteditableを付けてみました。

contenteditableを使用しなくても、画像ギャラリーとしても使えます。

contenteditableの値について、

true=編集モードをオンにします。

false=編集モードをオフにします。

対象ブラウザはWebKitブラウザとFirefox 4 +でのみサポートされています

まずは完成イメージ

デモページはコチラ

左半分の2枚の画像はfalseを適用し編集不可になっていますが、右半分2枚はtrueを適用し編集が可能となっています。

実際に触ってみると画像では拡大、縮小の変形ができます。

テキストの編集も可能です

HTML5マークアップ

<!DOCTYPE HTML>
<html xml:lang="ja">
<head>
<meta http-equiv="charset=UTF-8" />
<link rel='stylesheet' type='text/css' href='css/style.css' />
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>

<div id="page-wrap">

	<h3>平成版仮面ライダー</h3>
	<p>テキスト</p>
	<section class="image-gallery group">

		<figure tabindex="1" contenteditable="false"><!--編集不可-->
			<img src="images/img-1.jpg" alt="仮面ライダー響鬼"/>
			<figcaption>仮面ライダー響鬼</figcaption>
		</figure>

		<figure tabindex="2" contenteditable="false"><!--編集不可-->
			<img src="images/img-2.jpg" alt="仮面ライダーディケイド"/>
			<figcaption>仮面ライダーディケイド</figcaption>
		</figure>

		<figure tabindex="3" contenteditable="true"><!--編集許可-->
			<img src="images/img-3.jpg" alt="仮面ライダーW"/>
			<figcaption>仮面ライダーW</figcaption>
		</figure>

		<figure tabindex="4" contenteditable="true"><!--編集許可-->
			<img src="images/img-4.jpg" alt="仮面ライダーオーズ"/>
			<figcaption>仮面ライダーオーズ</figcaption>
		</figure>

	</section>
	<p>テキスト</p>
</div>
</body>
</html>

css

h3 { font: bold 32px Helvetica, Sans-Serif, ヒラギノ角ゴ Pro W3, メイリオ; letter-spacing: -1px; margin: 0 0 15px 0; }

article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }

.group:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }

#page-wrap { width: 660px; margin: 60px auto; font: 14px/1.4;}
.image-gallery { margin: 20px 0 25px 0; }

figure { 
  width: 120px; 
  float: left; 
  margin: 0 20px 0 0; 
  background: white;
  border: 10px solid white; 
  -webkit-box-shadow: 0 3px 10px #ccc; 
  -moz-box-shadow: 0 3px 10px #ccc;
  -webkit-transform: rotate(5deg); 
  -moz-transform: rotate(5deg);
  -webkit-transition: all 0.7s ease; 
  -moz-transition: all 1s ease;
  position: relative;
}

figcaption { 
  text-align: center; 
  display: block; 
  font-size: 12px; 
  font-style: italic; 
}

figure img { 
  width: 100%; 
}

figure:hover {
    -webkit-transform: rotate(-1deg); -moz-transform: rotate(1deg);
    -webkit-box-shadow: 0 3px 10px #666; -moz-box-shadow: 0 3px 10px #666;
}

figure:focus {
    outline: none;
    -webkit-transform: rotate(-3deg) scale(2.5); -moz-transform: rotate(-3deg) scale(2.5);
    -webkit-box-shadow: 0 3px 10px #666; -moz-box-shadow: 0 3px 10px #666;
    z-index: 9999;
}

画像のフォーカス部分については、マウスオン時に画像を少し回転、クリックされた時画像を展開し再び回転、影など下記スタイル部分で適用させています。

figure:hover {
    -webkit-transform: rotate(-1deg); -moz-transform: rotate(1deg);
    -webkit-box-shadow: 0 3px 10px #666; -moz-box-shadow: 0 3px 10px #666;
}

figure:focus {
    outline: none;
    -webkit-transform: rotate(-3deg) scale(2.5); -moz-transform: rotate(-3deg) scale(2.5);
    -webkit-box-shadow: 0 3px 10px #666; -moz-box-shadow: 0 3px 10px #666;
    z-index: 9999;
}

デモページはコチラ