以前の記事で、Illustratorのブラシを使用した手描き風の線をご紹介しました。
今回は「不透明マスク」を利用した、塗りを手描き風にみせる方法をご紹介します。
まずオブジェクトを選択後、透明パネルの「マスクを作成」をクリックし「不透明マスク」を作成します。
右側の黒い四角形をクリックし「不透明マスクの編集」モードに。
「クリップ」のチェックを外します。
できるだけガサガサしたブラシを選択し線の色を黒（K100）にした状態で
オブジェクトの上をなぞります。
今回はブラシライブラリの「アート_木炭・鉛筆」から下のブラシを使用しました。
なぞった部分が透明になり、アナログのがさがさした塗り残しのような表現ができました。
透明パネルの左側の四角形（オブジェクトが表示されている方）をクリックすると
編集完了です。
イラストだけではなく記号や線などに使っても、アナログ感のあるちょっとしたあしらいにできるのでおすすめです。
簡単な一手間でできるものなので、ちょっと違った表現を取り入れたいときなどに
ぜひお試しください。
月別: 2016年1月
PHPからJavaScriptへの変数渡し
もはやアプリ化しているホームページですが、プログラム部分で使われる基本的な言語が『PHP』と『JavaScript』かと思います。
それぞれに得意とする部分がありますので、その得意とする部分で言語を分けて書いて行くと異言語間の変数の共有が必要になってくると思います。
今回、PHPとJavaScriptでの変数の受け渡しについてお教えします。
※［××××××.php］ファイルでの記述方法になります。
【PHPからJavaScriptへ 基本 変数編】
PHPで使っている変数の内容をJavaScriptへ渡しjQueryなんかで処理したい事が多いかもしれません。
JavaScript記述内で
|
1 |
var $aa = "<? php echo $bb; ?>;"; |
とするだけで変数 $bbの内容が$aaへ代入する事ができます。
【PHPからJavaScriptへ 配列変数編】
まず、基本的にJavaScriptが多次元配列に対応していないため、通常の配列の受け渡しについて説明します。
[PHP側での準備] $ab = implode(“,”,$aa);
『implode』をつかって配列をカンマ区切りの文字列情報へ組み替えます。
JavaScript内で
|
1 2 |
var $bb_csv = "<?php echo $ab; ?>"; // 変数受け渡し。 $bc = bb_csv.split(",", -1); // bb_csvをsplit()でカンマ区切り配列に再編成。 |
こうすることで、PHPでデーベースなどの処理を行ない、表示部分ではJavaScriptでjQueryなどを使った柔軟な表示がおこなえます。
制作事例 神田エンジニアリング様
新築からリフォームまで、Stylish Homeでは「すべては、お客様のために、社会のために」を企業理念として、「家づくり」に取組んでいます。
公開 2016年01月28日
URL http://www.stylish-home.jp/
●制作内容
・レスポンシブwebデザイン
・CMSの導入。
・ページ巡回を促すため「プラン」「プロポーザル」「施工実績」のリンクを各項目ごとに配置
レスポンシブWebデザインに対応！Slick.jsを使ってスライドの サムネイルの位置を切り替える
年末からの体調不良からいっこうに立ち直れないyasaiです。先日の大寒波からみなさんは立ち直ったでしょうか？
さて僕としては2016年1回目のブログとなります。気合い入れていきます!!なんていうと、あとが続かなくなるので、今回はサラッと軽めに参ります。
みなさんはサイト制作するとき、メインに使うスライダーって決めてますか？僕の本命は bxSliderとslickです。この2本の使い分けって感じですねー
先日やらせていただいた案件で、メインのスライドエリアの横にサムネイル表示されるパターンのものがあったので、今回はその時のお話です。スマホの時はサムネイルを下へ移動します。
今回はslickを使いました。slickの素敵な所は、画面幅にによってオプションを切り替えられるところですね。それと今回の案件でslickを使うことにしたのは、サムネイルの表示が別のHTMLとして書くことができて、CSSでの制御がしやすかったからです。
まずはslick.jsとCSSを読み込みます。jQueryのプラグインですので、お約束jQueryと一緒に。
|
1 2 3 |
<script src="jquery.js"></script> <script src="slick.min.js"></script> <link rel="stylesheet" href="slick.css"> |
※追記
slick-theme.cssは読み込んでいません。slick-theme.cssを読み込むと縮めたときに「戻る」ボタンの表示がうまくいかないようです。
一応回避方法を考えてみましたのでコメントをご覧ください。
スライダー部分のHTMLはこんな感じに。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<div class="slider container"> <div class="slider-for"> <div class="sp-slide"><img src="images/01.png" alt=""></div> <div class="sp-slide"><img src="images/02.png" alt=""></div> <div class="sp-slide"><img src="images/03.png" alt=""></div> <div class="sp-slide"><img src="images/04.png" alt=""></div> <div class="sp-slide"><img src="images/05.png" alt=""></div> <div class="sp-slide"><img src="images/06.png" alt=""></div> </div> <div class="slider-nav-wrap"> <div class="slider-nav"> <div class="sp-thumbnail"><img src="images/01.png" alt=""></div> <div class="sp-thumbnail"><img src="images/02.png" alt=""></div> <div class="sp-thumbnail"><img src="images/03.png" alt=""></div> <div class="sp-thumbnail"><img src="images/04.png" alt=""></div> <div class="sp-thumbnail"><img src="images/05.png" alt=""></div> <div class="sp-thumbnail"><img src="images/06.png" alt=""></div> </div> <div class="slick-nav-arrows"> <div class="slick-next"></div> <div class="slick-prev"></div> </div> </div> </div> |
スライダーのメイン部分を.slide-for、サムネイル部分を.slider-nav、矢印を.slick-nav-arrowsでマークアップしています。ひとつポイントなのが、.slider-navと.slick-nav-arrowsを.slider-nav-wrapでひとくくりにしているところでしょうか。
動作のためのJavascriptをこんな感じです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
$(document).ready(function(){ $('.slider-for').slick({ slidesToShow: 1, slidesToScroll: 1, arrows: false, fade: false, asNavFor: '.slider-nav' }); $('.slider-nav').slick({ slidesToShow: 4, slidesToScroll: 1, asNavFor: '.slider-for', dots: false, centerMode: true, focusOnSelect: true, vertical: true, arrows: true, prevArrow: $('.slick-prev'), nextArrow: $('.slick-next'), responsive: [ { breakpoint: 768, settings: { centerMode: true, vertical: false } } ] }); }); |
メイン.slider-forとサムネイル.slider-navの両方ともスライダーとして動作させます。
メインである.slider-forのオプションで「asNavFor : ‘.slider-nav’」として、.slider-navがサムネイルボタンとして機能するようにします。
サムネイルの方は、今回は4枚並ぶ形にしました。「slidesToShow: 4」
「the last carousel 」なんていうサブタイトルがついてるくらい、使いやすいカルーセルスライダーですなんですよね。
そしてslickのよいところ、オプション「responsive」でブレイクポイントを設定し、表示を切り替えます。今回は768pxをブレイクポイントとし、縦型のスライダーにするかどうかを切り替えています。その他詳しいオプションなどは、本家サイトをご覧ください。
見た目の方のCSSはこんなです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 |
.slider{ position: relative; max-width: 960px; } .slider img{ max-width: 100%; height: auto; } .slider .slider-nav-wrap{ position: relative; } .slider .slider-nav-wrap .slider-nav .slick-list{ padding: 0 !important; } .slider .slider-nav-wrap .slider-nav .slick-track{ left: 0 !important; width: 100%; opacity: 1; } .slider .slider-nav-wrap .slider-nav .slick-slide{ -webkit-transition: opacity .3s ease; transition: opacity .3s ease; opacity: 1; padding: 5px; } .slider .slider-nav-wrap .slider-nav .slick-slide:hover{ opacity: .5; } .slider .slider-nav-wrap .slick-arrow{ position: absolute; top: 50%; width: 0; height: 0; border-style: solid; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .slider .slider-nav-wrap .slick-prev{ right: 0; border-width: 6px 0 6px 12px; border-color: transparent transparent transparent #444444; } .slider .slider-nav-wrap .slick-next{ left: 0; border-width: 6px 12px 6px 0; border-color: transparent #444444 transparent transparent; } @media (min-width: 768px){ .slider .slider-for{ float: left; width: 79.1666%; } .slider .slider-nav-wrap{ position: absolute; top: 50%; right: 0; width: 16.6666%; padding: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .slider .slider-nav-wrap .slider-nav .slick-list{ padding: 0 0 !important; } .slider .slider-nav-wrap .slider-nav .slick-track{ left: 0 !important; } .slider .slider-nav-wrap .slider-nav .slick-slide{ padding: 0; } .slider .slider-nav-wrap .slick-arrow{ left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); } .slider .slider-nav-wrap .slick-prev{ top: auto; bottom: -1.5em; border-width: 18px 9px 0 9px; border-color: #444444 transparent transparent transparent; } .slider .slider-nav-wrap .slick-next{ top: -1.5em; border-width: 0 9px 18px 9px; border-color: transparent transparent #444444 transparent; } } |
ちょっと長いですけど、基本的にはたいしたことしてないですね。
メディアクエリで768px以上の場合はメイン部分を左に寄せて、サムネイル部分は天地のセンターをとりたかったので、絶対配置で右寄せにしているだけです。この時に幅を％で指定してあるから縮んでいくよ、というからくり。(imgをmax-width:100％にしています)
.slider-navと.slick-nav-arrowsを.slider-nav-wrapでひとくくりにしたのは.slick-nav-arrowsをうまいこと配置したかったから、ということです。(.slider-navの位置に合わせて天地or左右のセンターをとりたかった)
スマホのときは特にfloatも絶対配置もしていないので、メインの下にサムネイルがやってくるという仕掛けになってます。
DEMOのブラウザ幅を広げたり縮めたりするを動作を確認いただけると思います。
今回はコードばかりでいつも以上にとっつきにくいですね。スイマセン・・・
追記(2016/04/25)
サンプルその2も作ってみました。よろしければこちらもどうぞ！
Slick.jsを使ってカルーセルスライダーの中央の画像を大きくする【レスポンシブWebデザインでもOK】
制作事例 学校法人わかば幼稚園様
新発田市を中心に幼稚園と保育園を展開している法人様です。
昭和43年に開園した歴史ある幼稚園です。
公開 2016年01月27日
URL http://www.wakaba-net.ed.jp/wakaba/
●制作内容
・わかば福祉会としてのデザインの統一
・CMSの導入
Internet Explorer 8・9・10 のサポート終了
2016年1月12日でInternet Explorer 8・9・10 のMicrosoftサポートが打ち切られました。
では、Microsoftのサポートが打ち切られたらどうなるのでしょう。
Internet Explorer 8・9・10を使用するデメリット
●セキュリティの更新
サポートが終了するので、更新が止まります。
セキュリティの問題が発生しても更新されないので、ウィルスや情報漏えい脅威にさらされ攻撃を受けやすくなります。
●ウェブサイトの対応
サポートが終了するブラウザにウェブサイトが対応しなくなってきます。
今後、見れないウェブサイトが次々と出てきます。
現在、お使いのOSでサポートされているInternet Explorer
| OS | サポートされているIE |
| Windows Vista SP2 | Internet Explorer 9 |
| Windows 7 SP1 | Internet Explorer 11 |
| Windows 8.1 | Internet Explorer 11 |
| Windows 10 | Internet Explorer 11 |
※Windows Vistaのみ2017年4月11日（Windows Vistaのサポート終了）までInternet Explorer 9がサポートされます。
もちろん使い続けることはできますが、約1年後に同じ問題に直面します。
これを機会にPCを買い換えるか、OSをアップグレードすることをおすすめいたします。
まだVistaを利用したいのであれば他のWebブラウザへ移行することをお勧めします。
対応策
セキュリティ面を考えると、サポートが終了したInternet Explorer 8・9・10から
お使いのOSでサポートされているInternet Explorerにバージョンアップを行う。
もしくは、他のWebブラウザへ移行することで、問題は解決致します。
これを機会にぜひバージョンアップすることをお勧めいたします。