jQuery パララックスの仕組み〜jQuery
主な仕組み
スクロールイベントを使用してスクロールした量だけオブジェクトを移動させます。
スクリプトで使用する主なメソッド
スクロールイベントはscroll( )メソッドを使用します。
スクロール量を取得する方法は$(w...
jQuery jQuery フローティングナビ〜付いてくるナビゲーション
縦長のページを作成するときに欲しい機能としてナビゲーションがどこまでも付いてくるものです。
簡単にできるfloater.jsのプラグインを活用した方法です。
floater.jsはこちら
floater.jsはMITライセンス...
jQuery スライドギャラリー解説補助資料〜jQueryドーナツ本
受講生対象の補助資料です。
以下jQuery教材のドーナツ本のスライドギャラリーの補助資料です。
スライダの構造
スクリプトの解説
HTML構造
ソースが読めてもスライド機能のからくりがわかりづらいで...
HTML&CSS アイコンフォントの使用方法〜疑似要素への導入方法も追加
アイコンフォントとは
アイコンフォントとはWebフォントと同じような仕組みでサーバー上のアイコンを表示する仕組みです。
アイコンフォントの使い方
疑似要素に導入する方法はこちら
Font Awesomeを例にしてCDN(Cont...
PhotoShop ドットグラデーションの作成〜Photoshop
ドットグラデーションを加えると通常のグラデーションより随分印象が変わります。
手軽にできますので作成方法を覚えておきましょう。
まず、通常のグラデーションを作成します。
ポイントは白と黒でグラデーションを作成することで...
php&MySQL \nのクオテーションはダブル〜PHP
文字列内で改行を表す特殊文字「\n」を改行として使用したい場合は、「"」を使用します。「"」は特殊文字を理解して改行します。ところが、「'」は「\n」を改行として表示せずにそのまま「\n」で表示します。
HT...
HTML&CSS イメージマップのリンク部分の青い線を消す
Chromeなどでイメージマップのリンク部分に青い線が表れます。
これを消すにはareaに対してCSSでclassなどを使用して以下の設定をします。
IEの古いバージョン対策ではHTMLタグの中に以下の属性を加えます。
HTML&CSS floatとdisplay:inlineを一緒に設定する理由〜CSS
時々CSSでfloatとdisplay:inlineを同時に指定するコードを見ることがあります。
なぜ、floatして横並びにしているものをわざわざdisplay:inlineにして幅とか高さとか設定できなくなるのでは？と考えてしまいます...
PhotoShop ベベルとエンボスの正体〜Photoshop
Photoshopで作成したオブジェクトを盛り上げたり、くぼませたりするのにベベルとエンボスを使用しますが、いまひとつ正体の分からないまま使用していませんか。今回はベベルとエンボスを掘り下げみたいと思います。
そもそもベベルとエンボスとは...
Illustrator jQuery.extendを使ってみる
jQuery.extendとは
jQuery.extendは複数のオブジェクトをマージして返します。
と言われてもよくわかりませんので使い方を見てみます。
もっとも簡単にJavaScriptでオブジェクトを作成するには連想配列を作...