スニペットとは
スニペット（英: Snippet）は直訳すると断片や切れ端という意味です。 Web制作で「スニペット」と言う場合は、切り貼りして再利用できる部品、コンポーネントを指します。
CSSプロパティやデザインの検索をすると
「コピペで使える装飾コード特集」
「コピペで使えるCSS小技」
のようなページが出てきますよね。
こういったページで紹介されているコードもスニペットです。
下図のような、CodePenの埋め込みもよく見かけますね。
Web上には様々なスニペットが公開されています。 複雑な配置であったり、キーフレームのタイムライン作成はイチから作ると大変。
作りたいデザイン・動きに近いスニペットを使わうと、作業時間が大幅に短縮します。 「こうやって組むとこうなるのか」と勉強になる点も多いので、ぜひ使ってみましょう！
マウスホバー時のリンク文字を変更
下記サイトで紹介されているエフェクトを、ナビゲーション部分に取り入れてみましょう。
コピペでできる！CSS3の素敵効果でテキストリンクを装飾する小技あれこれ https://www.webcreatorbox.com/tech/css3-text-link
上記のサイト（5. 光を放つグロー効果）からcssコードをコピーします。 cssファイル、ナビバーの記述がある辺りに貼り付けてみましょう。
ナビバーにだけ適用したいので、子孫セレクタにして適用条件を加えます。 ついでにインデントも揃えておきましょう。
保存して、ブラウザで表示を確認します。 ページトップだと見えにくいので、少しスクロールしてカーソルを重ねてみましょう。
出来てますね。 お好みに合わせて、colorやtext-shadowの色を変えると雰囲気が変わります。
↓
画像にマウスオーバーでテキストを表示
画像にマウスカーソルを重ねると、タイトルや説明文が出てくる設定。 初期状態ではスッキリと見えるので、ブログ・メディアサイトでよく実装されていますね。
この仕組をスニペットからコードをもらって、このエフェクトを再現してみましょう。
コードをコピペする
下記サイトからコードをお借りして、自分のサイトに合わせてセレクタ等を変更してみます。
画像のマウスオーバー時に文字を表示させるエフェクトをCSSで実装 - KUBOGEN
ページを少しスクロールダウンしていくと「共通のHTML/CSS」という項目があります。 まずは、こちらのHTML・CSSそれぞれのコードをコピーしましょう。
今回、エフェクトを加えたいのはPortfolio部分の画像です。 ですので、とりあえず、imgタグの近くにコードを貼り付けてみましょう。
↓
タブルクオートが全角になっていたり、imgタグの参照先（画像）がなかったりするので、確認できるように変更します。
修正後HTML
<figure class="hover-parent">
<img src="img/work-2.jpg">
<figcaption class="hover-mask">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</figcaption>
</figure>
KUBOGENさんのページに戻って、エフェクト分のスタイルをコピーします。
基本となる「黒の透過マスクと白文字を表示」のコードをコピー。
先程貼り付けたスタイルの下あたりにペーストします。
しかし、CSSの方もうまく効いてくれません。 これは、スペースが全角になっているためのようです。
認識されるよう、半角に修正しましょう。
修正後CSS
figure.hover-parent{
width: 250px;
height: 175px;
position: relative;
margin-bottom: 30px;
overflow: hidden;
}
figcaption.hover-mask{
width: 250px;
height: 175px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0,0,0,0.5);
opacity: 0;
color: #fff;
display: flex;
align-items: center;
text-align: center;
padding: 30px;
}
figure.hover-parent:hover .hover-mask {
opacity: 1;
}
ここまでを保存して、ブラウザで表示を見てみます。
レイアウトは崩れていますが、動作はしていますね。 （画像部分がグレーなのは、画像が原寸表示になっているためです）
表示を整える
次に、カードの画像部分に収まるようにコードを変更していきます。
HTMLでは元画像をコメントアウトし、figure内のimdタグに置き換えます。
<h3 class="w-title">内のテキストもコメントアウトし、figcaption内に移動。
HTML
次にCSSでは、画像がはみ出さないように調整します。 変更箇所が分かりやすいようにコメントアウトして書き直していますが、実際に使う際はプロパティ値を打ち替えればOKです。
CSS
もう一度、ブラウザで確認してみましょう。
カード枠内に落ち着きましたね。
下の方にあるエフェクトから、コードをコピーするともっと動きが出ます。
↓
※上や横からのスライドインは、サイズを指定しないと綺麗に出来ません。
お好みで、文字背景色や文字サイズ、変化時間などを調整すれば完成です。
CSSライブラリとは
CSSライブラリは専用のスタイルシートファイルを読み込ませ、規定の構成・クラス名を使用することで簡単にデザインを再現できるというもの。CSSフレームワークとも言います。 BootstrapもCSSフレームワークの一つです。
CSSフレームワークとライブラリの呼び分けは人によって違いますが、本講座では以下のように呼び分けています。
- CSSフレームワーク：ページのレイアウト構成を手軽に作れるもの
- CSSライブラリ：アニメーションなどのエフェクト系パーツが主体
画像ホバーエフェクトをグレードアップ
Izmir Hover Effectsという画像ホバーエフェクトのCSSライブラリを使ってみましょう。 先程コードをコピーして実装したより簡単に、綺麗な画像ホバーエフェクトが実装できます。
1.CSSファイルを読み込む
Githubの ciar4n/Izmir を開きます。 緑色の「Code」ボタンをクリックし、ZIPファイルをダウンロードしてください。
https://github.com/ciar4n/Izmir
↓
ダウンロードしたフォルダを解凍し、izmir.min.cssをコピー。
作成中のフォルダに貼り付けます。
index.htmlを開いて、izmir.min.cssを読み込ませて下さい。
これで準備は完了です。
2.コードを確認し実装
https://ciar4n-izmir.netlify.app/を開いて下さい。
Getting started > Installationを開きます。
3.Use the following markup to~ の下にあるコードをコピー。
index.htmlのポートフォリオセクション、２枚めの画像部分にコピーしたコードを貼り付けます。
画像のパスを、元々使っていたimg/work-2.jpgに変更します。
また、コピーしてきたデモコードでは</figcaption>になるべき箇所が</div>になっています。
このままだとレイアウトが崩れてしまうので、直しておきましょう。
保存してブラウザで見てみましょう。
これだけで、もう出来ていますね！！ イチからCSSを書くのは大変なエフェクトが、簡単に実装できました。
最後に、マウスホバーで表示されるタイトルを変えましょう。 元々のカードタイトル「Loreda Cuno Nere」でも、お好きな文字を設定していただいても構いません。
<div class="col-md-4 mb-5">
<div class="card shadow">
<figure class="c4-izmir">
<img src="img/work-2.jpg" alt="Sample Image">
<figcaption>
<h3>
Loreda Cuno Nere
</h3>
</figcaption>
</figure>
<div class="card-body row align-items-center">
<div class="col-sm-9">
<div class="w-more">
<span class="w-blue">Web Design</span> / 18 Sep. 2018
</div>
</div>
<div class="col-sm-3 text-right w-blue">
<i class="fas fa-2x fa-plus-circle"></i>
</div>
</div>
</div>
</div>
実習
Izmir Hover Effectsを使って、よりデザイン性の高いエフェクトをwork-3.jpg部分に実装してみましょう。
必要なCSSクラスは、下記のページで確認できます。
https://ciar4n-izmir.netlify.app/#/customisation
実習のヒント
customisationのページでは、上でご紹介したベースとなるデモコードに、オプションとして追加していくCSSクラス等が紹介されています。
例えば、ホバー時に枠線を付けたかったら、figureタグに「c4-border-●●」クラスを追加する、という形です。
実習サンプルについて
講座で行った設定+実習部分のサンプル（解答）となるファイルを素材欄にアップロードしています。 確認としてご利用下さい。
素材のフォルダではすべて同一階層になっています。
- cssファイルはcssフォルダ
- jsファイルはjsフォルダ
と、それぞれ場所を移してから確認して下さい。
※使用したライブラリ/プラグインは素材データに含まれていません。