カテゴリー別アーカイブ: サンプル

HTML YouTubeのポップアップ表示

youtyube動画をポップアップで表示するサンプルです。

VideoBoxを使用しています。
下記サンプルの「watch?v=g-urOCW1QT4」部分を書き換えてください。

<html>
	<head>
		<meta charset="utf-8">
		<title>サンプル10</title>
		<script type="text/javascript" src="build/video/js/mootools.js"></script>
		<script type="text/javascript" src="build/video/js/swfobject.js"></script>
		<script type="text/javascript" src="build/video/js/videobox.js"></script>
		<link rel="stylesheet" href="build/video/css/videobox.css" type="text/css" />
	</head>
	<body>
	<a href="http://www.youtube.com/watch?v=g-urOCW1QT4" rel="vidbox 600 450" title="我が家の犬">動画をポップアップ</a>
	</body>
</html>

上記コードのデモはこちら


Bookmark this on Yahoo Bookmark
Bookmark this on Google Bookmarks
Share on LinkedIn
LINEで送る
Pocket

レスポンシブ デザイン サンプル

今回はレスポンシブデザインのサンプルをご紹介します。

主にプレゼンテーション時や自己紹介で使えそうです。

ページ内容は書き「section」の間に記述します。

続きを読む


Bookmark this on Yahoo Bookmark
Bookmark this on Google Bookmarks
Share on LinkedIn
LINEで送る
Pocket

レスポンシブ デザイン 問い合わせサンプル

puresccでシンプルな問い合わせページを作成してみました。
ご自由にお使いください。
そういえば、Yahooのトップページがスマホ対応しましたね。
purecssぽいです。

続きを読む


Bookmark this on Yahoo Bookmark
Bookmark this on Google Bookmarks
Share on LinkedIn
LINEで送る
Pocket

レスポンシブ デザイン タイル表示のサンプル

puresccでタイル表示のサンプルを作成してみました。
該当部をコピペし、画像を差し替え頂ければ簡単に使用できます。
ご自由にお使いください。
続きを読む


Bookmark this on Yahoo Bookmark
Bookmark this on Google Bookmarks
Share on LinkedIn
LINEで送る
Pocket

レスポンシブ デザイン 技術紹介サンプル

puresccでシンプルな技術紹介ページを作成してみました。
ヘッダー、フッターには紫色の背景色を指定しています。
ご自由にお使いください。
続きを読む


Bookmark this on Yahoo Bookmark
Bookmark this on Google Bookmarks
Share on LinkedIn
LINEで送る
Pocket

レスポンシブ デザイン 会社概要サンプル

puresccでシンプルな会社概要ページを作成してみました。
ヘッダー、フッターには紫色の背景色を指定しています。
ご自由にお使いください。
続きを読む


Bookmark this on Yahoo Bookmark
Bookmark this on Google Bookmarks
Share on LinkedIn
LINEで送る
Pocket