Illustratorで手描き風【塗り編】

以前の記事で、Illustratorのブラシを使用した手描き風の線をご紹介しました。

今回は「不透明マスク」を利用した、塗りを手描き風にみせる方法をご紹介します。

13

 

まずオブジェクトを選択後、透明パネルの「マスクを作成」をクリックし「不透明マスク」を作成します。

11

 

右側の黒い四角形をクリックし「不透明マスクの編集」モードに。
「クリップ」のチェックを外します。

12

できるだけガサガサしたブラシを選択し線の色を黒(K100)にした状態で
オブジェクトの上をなぞります。

今回はブラシライブラリの「アート_木炭・鉛筆」から下のブラシを使用しました。

01

 

なぞった部分が透明になり、アナログのがさがさした塗り残しのような表現ができました。

05

透明パネルの左側の四角形(オブジェクトが表示されている方)をクリックすると
編集完了です。

04

 

イラストだけではなく記号や線などに使っても、アナログ感のあるちょっとしたあしらいにできるのでおすすめです。

10

簡単な一手間でできるものなので、ちょっと違った表現を取り入れたいときなどに
ぜひお試しください。

 


PHPからJavaScriptへの変数渡し

もはやアプリ化しているホームページですが、プログラム部分で使われる基本的な言語が『PHP』と『JavaScript』かと思います。
それぞれに得意とする部分がありますので、その得意とする部分で言語を分けて書いて行くと異言語間の変数の共有が必要になってくると思います。
今回、PHPとJavaScriptでの変数の受け渡しについてお教えします。
※[××××××.php]ファイルでの記述方法になります。

【PHPからJavaScriptへ 基本 変数編】
PHPで使っている変数の内容をJavaScriptへ渡しjQueryなんかで処理したい事が多いかもしれません。

JavaScript記述内で

とするだけで変数 $bbの内容が$aaへ代入する事ができます。

【PHPからJavaScriptへ 配列変数編】
まず、基本的にJavaScriptが多次元配列に対応していないため、通常の配列の受け渡しについて説明します。

[PHP側での準備] $ab = implode(“,”,$aa);
『implode』をつかって配列をカンマ区切りの文字列情報へ組み替えます。

JavaScript内で

こうすることで、PHPでデーベースなどの処理を行ない、表示部分ではJavaScriptでjQueryなどを使った柔軟な表示がおこなえます。


制作事例 神田エンジニアリング様

キャプチャ

 

新築からリフォームまで、Stylish Homeでは「すべては、お客様のために、社会のために」を企業理念として、「家づくり」に取組んでいます。

公開 2016年01月28日
URL http://www.stylish-home.jp/
●制作内容
・レスポンシブwebデザイン
・CMSの導入。
・ページ巡回を促すため「プラン」「プロポーザル」「施工実績」のリンクを各項目ごとに配置


レスポンシブWebデザインに対応!Slick.jsを使ってスライドの サムネイルの位置を切り替える

年末からの体調不良からいっこうに立ち直れないyasaiです。先日の大寒波からみなさんは立ち直ったでしょうか?

さて僕としては2016年1回目のブログとなります。気合い入れていきます!!なんていうと、あとが続かなくなるので、今回はサラッと軽めに参ります。

160127

みなさんはサイト制作するとき、メインに使うスライダーって決めてますか?僕の本命は bxSliderslickです。この2本の使い分けって感じですねー

先日やらせていただいた案件で、メインのスライドエリアの横にサムネイル表示されるパターンのものがあったので、今回はその時のお話です。スマホの時はサムネイルを下へ移動します。

【DEMO】

今回はslickを使いました。slickの素敵な所は、画面幅にによってオプションを切り替えられるところですね。それと今回の案件でslickを使うことにしたのは、サムネイルの表示が別のHTMLとして書くことができて、CSSでの制御がしやすかったからです。

まずはslick.jsとCSSを読み込みます。jQueryのプラグインですので、お約束jQueryと一緒に。

 

※追記

slick-theme.cssは読み込んでいません。slick-theme.cssを読み込むと縮めたときに「戻る」ボタンの表示がうまくいかないようです。
一応回避方法を考えてみましたのでコメントをご覧ください。

 

スライダー部分のHTMLはこんな感じに。

スライダーのメイン部分を.slide-for、サムネイル部分を.slider-nav、矢印を.slick-nav-arrowsでマークアップしています。ひとつポイントなのが、.slider-navと.slick-nav-arrowsを.slider-nav-wrapでひとくくりにしているところでしょうか。

 

動作のためのJavascriptをこんな感じです。

メイン.slider-forとサムネイル.slider-navの両方ともスライダーとして動作させます。
メインである.slider-forのオプションで「asNavFor : ‘.slider-nav’」として、.slider-navがサムネイルボタンとして機能するようにします。

サムネイルの方は、今回は4枚並ぶ形にしました。「slidesToShow: 4」
「the last carousel 」なんていうサブタイトルがついてるくらい、使いやすいカルーセルスライダーですなんですよね。

そしてslickのよいところ、オプション「responsive」でブレイクポイントを設定し、表示を切り替えます。今回は768pxをブレイクポイントとし、縦型のスライダーにするかどうかを切り替えています。その他詳しいオプションなどは、本家サイトをご覧ください。

 

見た目の方のCSSはこんなです。

ちょっと長いですけど、基本的にはたいしたことしてないですね。

メディアクエリで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 のサポート終了

 

ie

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ブラウザへ移行することで、問題は解決致します。

これを機会にぜひバージョンアップすることをお勧めいたします。