dororo

jQuery

Ajaxでモーダルウインドウ内にテキストを読み込む〜jQuery

今回のサンプルは、モーダルウインドウ内に別のHTML文を表示し、読み込んだHTML文から更に別HTMLを読み込む仕組みです。(中級者向け) モーダルウインドウは半透明のレイヤーをブラウザの表示領域いっぱいに広げて現在のページを隠します...
php&MySQL

ダブルクォートで囲まれた文字列の変数展開〜PHP

PHPのダブルクォートの使い方の説明です。 ダブルクォートで囲まれた文字列の変数展開は便利な機能ですが、使い方によっては誤解を生じたり思ったとおり動作しなかったりします。 変数展開のいくつかの例を確認してみてください。 基本...
jQuery

hover()とanimate()を使ったボタン〜jQuery

animateを使用すれば幅や高さ、あるいはマージンなどを簡単にアニメーションさせることができます。 次のスクリプトはマウスを重ねると幅が100pxから200pxへと変化します。また、マウスが外れると幅はもとの大きさになります。 また、...
PhotoShop

イメージ画像のテキスト作成のポイント〜Photoshop

イメージ画像にテキストを置く場合、可読性が問題になります。 せっかく良い画像を用意したけれども、テキストの可読性が悪いためしっくりとこない場合も多いです。 簡単なパターンを試してみました。サンプルにした写真は東南アジアのある町の風景...
PhotoShop

gifアニメの作成〜Photoshop

gifアニメーションの作成方法です。 今回の題材はMac版のFirefoxの初期画面に現れるキツネ君に勝手に協力してもらいました。 オリジナルのものは実はping形式になっておりgifアニメではありません。 もともとの画像はこんな...
jQuery

パララックスの仕組み〜jQuery

主な仕組み スクロールイベントを使用してスクロールした量だけオブジェクトを移動させます。 スクリプトで使用する主なメソッド スクロールイベントはscroll( )メソッドを使用します。 スクロール量を取得する方法は$(w...
jQuery

フローティングナビ〜付いてくるナビゲーション

縦長のページを作成するときに欲しい機能としてナビゲーションがどこまでも付いてくるものです。 簡単にできるfloater.jsのプラグインを活用した方法です。 floater.jsはこちら floater.jsはMITライセンス...
jQuery

スライドギャラリー解説補助資料〜jQueryドーナツ本

受講生対象の補助資料です。 以下jQuery教材のドーナツ本のスライドギャラリーの補助資料です。 スライダの構造 スクリプトの解説 HTML構造 ソースが読めてもスライド機能のからくりがわかりづらいで...
HTML&CSS

アイコンフォントの使用方法〜疑似要素への導入方法も追加

アイコンフォントとは アイコンフォントとはWebフォントと同じような仕組みでサーバー上のアイコンを表示する仕組みです。 アイコンフォントの使い方 疑似要素に導入する方法はこちら Font Awesomeを例にしてCDN(Cont...
PhotoShop

ドットグラデーションの作成〜Photoshop

ドットグラデーションを加えると通常のグラデーションより随分印象が変わります。 手軽にできますので作成方法を覚えておきましょう。 まず、通常のグラデーションを作成します。 ポイントは白と黒でグラデーションを作成することで...
スポンサーリンク
タイトルとURLをコピーしました