ねこきっくぱんちのメモ帳

webの勉強メモです。 HTML,CSS,JavaScript,PHP,Illustrator,Photoshopなど。

jQuery007 カルーセル「Slick」

ルーセル「Slick」

f:id:neko_kick_panch:20170608023905p:plain
f:id:neko_kick_panch:20170608023735p:plain

■メモ
・RWD対応してるプラグイン
・カスタマイズが楽。css,jsなど必要なものはマスターからコピーして所定のディレクトリで管理。それに合わせてパス修正。
・.slider,.slick-slideクラスあたりでcssを整える。
・埋め込みは外部ファイル化した方がすっきりする。

■コード
htmlのみ

<!DOCTYPE html>
<html>
<head>
  <title>Slick Playground</title>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="css/slick.css">
  <link rel="stylesheet" href="css/slick-theme.css">
  <link rel="stylesheet" href="css/style.css">
<style>
h1{
  text-align: center;
}
</style>

</head>
<body>
<h1>regular slider</h1>
  <section class="regular slider">
    <div>
      <img src="http://placehold.it/350x300?text=1" alt="">
    </div>
    <div>
      <img src="http://placehold.it/350x300?text=2" alt="">
    </div>
    <div>
      <img src="http://placehold.it/350x300?text=3" alt="">
    </div>
    <div>
      <img src="http://placehold.it/350x300?text=4" alt="">
    </div>
    <div>
      <img src="http://placehold.it/350x300?text=5" alt="">
    </div>
    <div>
      <img src="http://placehold.it/350x300?text=6" alt="">
    </div>
    <div>
      <img src="http://placehold.it/350x300?text=7" alt="">
    </div>
  </section>
  <script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
  <script src="js/slick.js" charset="utf-8"></script>
  <script src="js/script.js"></script>
</body>
</html>

参考
http://on-ze.com/archives/4996
http://kenwheeler.github.io/slick/

jQuery006 モーダル「Lightbox」

プラグインLightbox

f:id:neko_kick_panch:20170605233335p:plain
f:id:neko_kick_panch:20170605233319p:plain


公式よりDL。
Lightbox
サンプルのindex.htmlがあるため、使いやすい形に修正する。
今回は画像はサムネイルとメインの2つを用意。


■コード
html

<!DOCTYPE html>
<html lang="en-us">
<head>
  <meta charset="utf-8">
  <title>Lightbox Example</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><!-- ★ -->
  <link rel="stylesheet" href="css/lightbox.css"><!-- ★ -->
</head>
<body>

<section>
  <h3>A Four Image Set (jQuery plugin "Lightbox")</h3>
  <div>
    <a class="example-image-link" href="img/tokage_top.jpg" data-lightbox="example-set" data-title="Click the right half of the image to move forward."><img class="example-image" src="img/tokage_sml.jpg" alt="tokage"/></a>
    
    <a class="example-image-link" href="img/frog_top.jpg" data-lightbox="example-set" data-title="Or press the right arrow on your keyboard."><img class="example-image" src="img/frog_sml.jpg" alt="frog" /></a>
    
    <a class="example-image-link" href="img/taki_top.jpg" data-lightbox="example-set" data-title="The next image in the set is preloaded as you're viewing."><img class="example-image" src="img/taki_sml.jpg" alt="waterfall" /></a>
    
    <a class="example-image-link" href="img/bird_top.jpg" data-lightbox="example-set" data-title="Click anywhere outside the image or the X to the right to close."><img class="example-image" src="img/bird_sml.jpg" alt="bird" /></a>
  </div>
  </section>

  <section>
    <p>
      For more information, visit <a href="http://lokeshdhakar.com/projects/lightbox2/">http://lokeshdhakar.com/projects/lightbox2/</a>
    </p>
  </section>

<!-- <script src="js/lightbox-plus-jquery.min.js"></script> -->
<script src="js/lightbox.js"></script><!-- ★ -->
</body>
</html>

■参考
その他のプラグイン
・colorbox:http://www.jacklmoore.com/colorbox/
・fancybox:商用利用は有料

jQuery005 スライダー「bxSlider」

プラグイン「bxSlider」

f:id:neko_kick_panch:20170605231058p:plain

■インストール(公式抜粋)
Step 1: Link required files
 →HTMLでjQuery,bxsliderjs,cssを読み込み
Step 2: Create HTML markup
 →スライドさせたいイメージをマークアップ
Step 3: Call the bxSlider
 →.bxsliderクラスに対してsliderを呼び出し


■ポイント
・所定のディレクトリに必要なものだけ配置
・imgのパスをディレクトリ構成に合わせて置換
 ※minファイルを利用せずカスタマイズする場合
・記述ミスによる各ファイルのinclude失敗に注意
・動作指定オプションは多数あるため、こちらもサイトに合わせてカスタマイズ


html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>bxslider</title>
<meta name="description" content="">
<link href="css/style.css" rel="stylesheet">
<meta name="viewport" content="width=device-width">
<!-- jQuery library (served from Google) -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- bxSlider Javascript file -->
<script src="js/jquery.bxslider.js"></script>
<!-- bxSlider CSS file -->
<link href="css/jquery.bxslider.css" rel="stylesheet" />
<script src="js/script.js"></script>
</head>

<body>
<header>
<h1>bxSlider</h1>
<p>sliderの学習</p>
</header>
<div class="container">
<ul class="bxslider">
  <li><img src="img/bxslider1.jpg"></li>
  <li><img src="img/bxslider2.jpg"></li>
  <li><img src="img/bxslider3.jpg"></li>
  <li><img src="img/bxslider4.jpg"></li>
</ul>
</div>
</body>

</html>
$(document).ready(function(){
  $('.bxslider').bxSlider({

//自動でスライドする設定
    //auto: true,
    //autoControls: true,
//表示エフェクトの指定
    mode:'fade',
//スライドの速度指定
    speed: 1000,
//下にある点をこれで表示/非表示
    //pager: true, 
//左右の矢印の表示/非表示。初期値はtrue;
    //controls: true,
});
});

■参考
http://bxslider.com/
https://hozunomiya.xyz/?p=83
http://on-ze.com/archives/1658

Mac001 ファインダーからパスをコピー

ファインダーからパスをコピー

■手番
・対象ファイル/ディレクトリを、「control+右クリック」でコンテキストメニュー表示
その状態で⌥(option / alt)を押下
・[◯◯のパス名をコピー]へ表示が切り替わる。

※El Capitan からは標準でその機能は実装済みの模様とのこと

■参考
http://qiita.com/ohkawa/items/c84fcb1347dfb3a73c6d
http://qiita.com/akiporoyopida/items/506cd3f569d4ae0ee7ff

Photoshop007 ブラシのプリセット追加

ブラシのプリセット追加

f:id:neko_kick_panch:20170603235902p:plain
f:id:neko_kick_panch:20170604000254p:plainf:id:neko_kick_panch:20170604000309p:plain

■手番
事前準備
・フリーのブラシのプリセットファイル(.abr)をダウンロードする。
・.abrファイルをプリセット格納場所に移動する。
/Applications/Adobe Photoshop CC 2017/Presets/Brushes/~~.abr ココ★
Photoshopの再起動が必要

ブラシに追加
・ウィンドウ>ブラシ>ブラシプリセット>ハンバーガーメニューを押下し、配置したブラシプリセットが入っていることを確認する。
・対象のプリセットをクリックし「追加」を押下する。

以上

※使い方自体は通常のブラシと同様なため、カラー、サイズ、透明度などを調整して利用する。


■参考
Floral_brushes
Free Floral Brush Pack - Free Photoshop Brushes at Brusheezy!

Photoshop006 「エッジ(境界線を調整)機能」で女性の髪を綺麗に合成する

エッジ(境界線を調整)機能」で女性の髪を綺麗に合成する

f:id:neko_kick_panch:20170602005956p:plain
f:id:neko_kick_panch:20170602011343p:plain
f:id:neko_kick_panch:20170602011402p:plain


■手番
・対象人物を「クイック選択ツール」で枠を取る。
 ※背景と図の反転は「cmd+shift+i」
ツールバーの「境界線を調整」を選択。
 ※最新verの「選択とマスク」
・以下の項目を調整し、OKを押下する。
 表示モード:見やすい色へ。白黒が見やすい。
 エッジの検出:20~30pxあたりで髪がもわっと切り抜ける状態になる。
 出力:不要なカラーの除去にチェックを入れる。
 出力先:「新規レイヤー(レイヤーマスクあり)」
・あとはレイヤーマスクを通常の使い方で微調整を行う。
・できたら合成したい背景画像などに貼り付ける。

以上です。

web025 CSSのみでのキャプションエフェクト

CSSのみでのキャプションエフェクト

f:id:neko_kick_panch:20170531235507p:plain

■考え方
・positionレイアウト
・キャプションはimgの下に配置しておき、overflow:hidden;で非表示にしておく。
・hoverでpositionのbottomを変更し表示する。
・リセットcssにfigure,figcaptionなど入れ忘れに注意。

■コード
html

<div class="main2">
<figure>
<img src="img/tokage.png" alt="とかげ">
<figcaption>
<h3>キャプションタイトル</h3>
<p>キャプション本文</p>
</figcaption>
</figure>
</div><!-- .main2 -->

css

/*----------------------------.main2*/
.main2{
  width: 500px;
  height: 500px;
  margin: 20px auto;
  overflow: hidden;
  border: 1px solid #555;
}
.main2 figure{
  margin: 0 auto;
  position: relative;
}
.main2 figcaption{
  background-color: rgba(0,0,0,0.5);
  width: 500px;
  height: 150px;
  text-align: center;
  position: absolute;
  bottom: -150px;
  transition: 1.5s;
}
.main2 figure:hover figcaption{
  bottom: 0px;
}
.main2 figcaption h3{
  color: #fff;
}
.main2 figcaption p{
  color: #fff;
}

■参考
CSSのみで実装するキャプションエフェクト 20 | NxWorld