Ulkit（cssフレームワーク）の使い方【1：lightbox】

まずは公式サイトからファイルをDLしてリンクします。
getuikit.com

DLしたファイルの中で必要なのは、下記3つです。

<link rel="stylesheet" href="css/uikit.min.css" />
<script src="js/uikit.min.js"></script>
<script src="js/uikit-icons.min.js"></script>

Ulkitのメディアクエリは4つに設定されております。
変えたい場合はuikit.min.cssの数字を置換するしかないですね…
クラス名
uk-hidden@s 　→640px以上のデバイス幅にのみ影響します。
uk-hidden@m 　→960px以上のデバイス幅にのみ影響します。
uk-hidden@l 　→1200px以上のデバイス幅にのみ影響します。
uk-hidden@xl 　→1600px以上のデバイス幅にのみ影響します。

各使用方法はDocumentationのページで紹介されております。
https://getuikit.com/docs/introduction

今回は【1】として、

lightboxの使い方です。

https://getuikit.com/docs/lightbox

画像をクリックするとモーダルで画像が拡大で表示され、次の写真をスライドさせましょう。

公式サイトのマークアップです。

<div class="uk-child-width-1-3@m" uk-grid uk-lightbox="animation: slide">
<div>
<a class="uk-inline" href="images/photo.jpg" data-caption="Caption 1">
<img src="images/photo.jpg" alt=""></a>
</div>
<div>
<a class="uk-inline" href="images/dark.jpg" data-caption="Caption 2">
<img src="images/dark.jpg" alt=""></a>
</div>
<div>
<a class="uk-inline" href="images/light.jpg" data-caption="Caption 3">
<img src="images/light.jpg" alt="">
</a>
</div>
</div> <!-- .uk-child-width-1-3@m -->

これだけの記述で簡単にlightboxが完成です！！
※こちらのマークアップはグリッドレイアウトも加わっております。

class名の説明をします。

uk-child-width-1-3@m

グリッドレイアウトのクラス名です。
一行に3枚の画像を並べ、「@m」というのは960px以上のデバイス幅対象ということです。
なので、959以下になるとグリッドが解消され縦一列になります。
https://getuikit.com/docs/width
上記URLを参照して、自分の好きなサイズ・可変にしましょう！

uk-grid

クラス名ではありませんが、「uk-grid」を入れるとグリッドレイアウトになります。
uk-gridを入れないと「uk-child-width-1-3@m」などのクラス名を入れてもグリッドされません。

uk-lightbox="animation: slide"

lightboxにする記述です。
「="animation: slide"」の部分がアニメーションの種類になります。
上記ではslideを指定しておりますが、デフォルトがslideなのでslideでいいのであれば
「uk-lightbox」だけで大丈夫です。

アニメーションの種類は3種類あります。
・slide（デフォルト）
・fade
・scale

uk-inline

aタグにあるclass名ですが、これは名の通りaタグをinline-blockに命令してるclass名です。

.uk-inline{
display: inline-block;
position: relative;
max-width: 100%;
vertical-align: middle;
}

このようなcssが設定されてますね。

data-caption="Caption 1"

モーダルしたときに画像の下に出てくるタイトルです。
説明文や名前を入れたいときは使用しましょう。
無くても問題ありません。

画像以外も使える！！

画像以外にも「video」「youtube」「Googlemap」なども使用できます。
＞＞＞詳しくはこちらから

※しかし、タグでlightboxを実装しているのでvideoを入れることはできますが、
初期設定を「ミュート」にすることはできないようです…？？
ミュートに出来たら完璧なのにな…
ミュートにしたい場合はlightboxを使用せず、モーダルを使用してvideoタグやiframeを使うことが必要そうです。
モーダルは記述も多くなるのでlightboxだけで出来たら最高なのですが…
出来る方いましたら教えていただきたいです。

モーダルはまた別途記事で。