【Vintalight】は、pug, sass y vanilla JS (Babel). で作成されたlightbox（ライトボックス）エフェクトを備えたレスポンシブインスタントスタイルフォトギャラリーです。
この記事の内容
プレビュー
LICENSE:MIT
MITライセンスでは、商用利用だけでなく、コピーの使用、複製、変更、統合、公開、配布、サブライセンス、複製物を販売することが認められています。ただし、使用時には著作権表示とライセンス表示をする必要があります。ソースコード上（css、html）内に、著作権およびライセンス表示をすれば、サイト上で公開し表示する義務はありません。参照：MITライセンス（日本語翻訳）
Vintalight ダウンロード
Vintalight 設置方法
Vintalight css 記述方法
スタイルシート（css）『style.css』は<head></head>内に記述！
<link rel="stylesheet" type="text/css" href="css/style.css" />
Vintalight JavaScript 記述方法
JavaScriptは『script.js』<body></body>内の終了タグ直前に記述します。
<script type="text/javascript" src="js/script.js"></script>
Vintalight 設置例
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">
<title>レスポンシブ ポラロイドギャラリー【Vintalight】デモ </title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<div class="container">
<h1>レスポンシブ ポラロイドギャラリー【Vintalight】デモ </h1>
<section class="vintalight" id="vintalight">
<figure class="vintalight__container">
<div class="vintalight__photo"><img class="vintalight__img" src="img/01.jpg" alt="Happy Moment"></div>
<figcaption class="vintalight__caption">
<h3 class="vintalight__text">Happy Moment</h3>
</figcaption>
</figure>
<figure class="vintalight__container">
<div class="vintalight__photo"><img class="vintalight__img" src="img/02.jpg" alt="Happy Moment"></div>
<figcaption class="vintalight__caption">
<h3 class="vintalight__text">Happy Moment</h3>
</figcaption>
</figure>
<figure class="vintalight__container">
<div class="vintalight__photo"><img class="vintalight__img" src="img/03.jpg" alt="Happy Moment"></div>
<figcaption class="vintalight__caption">
<h3 class="vintalight__text">Happy Moment</h3>
</figcaption>
</figure>
<figure class="vintalight__container">
<div class="vintalight__photo"><img class="vintalight__img" src="img/04.jpg" alt="Happy Moment"></div>
<figcaption class="vintalight__caption">
<h3 class="vintalight__text">Happy Moment</h3>
</figcaption>
</figure>
<figure class="vintalight__container">
<div class="vintalight__photo"><img class="vintalight__img" src="img/05.jpg" alt="Happy Moment"></div>
<figcaption class="vintalight__caption">
<h3 class="vintalight__text">Happy Moment</h3>
</figcaption>
</figure>
<figure class="vintalight__container">
<div class="vintalight__photo"><img class="vintalight__img" src="img/06.jpg" alt="Happy Moment"></div>
<figcaption class="vintalight__caption">
<h3 class="vintalight__text">Happy Moment</h3>
</figcaption>
</figure>
</section>
<script src="js/script.js"></script>
</div>
</body>
</html>
こんにちは。【検索上位表示ホームページ制作】中小企業様の集客に特化したコンテンツ作成＆Webマーケティングのアドバイザーをしております。貴社の魅力を引き出し大企業と渡り合えるコンテンツ作りには自信がございます。Web事業歴15年目。「地域一番を目指したい」と言うweb担当者様お気軽にご相談ください。