Web 制作に関する個人的な覚書やメモです。記事中の内容やコード等には、誤りなどもある可能性があることをご了承ください。また、内容を利用される場合は、あくまでもご自身の責任においてご利用ください。
New Web 制作リファレンス
もう少し整理された形式のWeb制作参考資料です。
2013年12月29日
パララックスをあまりよく理解できていないので練習を兼ねたメモ。 サンプル スクロールにより背景画像を動かす スクロールしてある位置まで来ると、背景画像を動かす単純な例。 「div1 」の位置までスクロールすると、「クラス picture」の背景画像を下方向に動かす例。 背景画像は 960×800 のサイズの画像を用意 画像を表示する領域「クラス p…
2013年12月28日
背景画像を使ったパララックスに関するメモ。 参考にさせていただいたサイト: 「HTML5 × CSS3 × jQueryを真面目に勉強 – #6 パララックスエフェクトの基本」 CSSを使ったパララックス jQuery を使用しないで CSS で単純なパララックス(背景画像を固定して表示)を実現する方法。 各 div 要素(#first, #second, …
2013年12月28日
jQuery と CSS を使っての基本的なパララックス効果に関するメモ。 参考にさせていただいたサイト:「パララックスサイトを作ろう」ドットインストール スクロールで要素を動かす 以下は、スクロールすると3つの要素がそれぞれ動くようにするサンプル。 サンプル用の構造 jQuery を読み込む jQuery を記述する pallarax.js を読み込む C…
2013年12月15日
目次 以前「audio.js」を使用したが、環境によっては IE8 以下ではエラーが発生してしまったので別のオーディオ再生用のプラグインを探したら見つかった「jPlayer」に関するメモ。「jPlayer」はビデオの再生も可能だがまだ試していない。 以下は「jPlayer 2.5.0 Quick Start Guide」から。 ダウンロードと配置 jPlay…
2013年12月13日
取得した文字列が英語か日本語か判定する必要があったので調べたメモ。 charCodeAt() string.charCodeAt(n) 特定の場所の文字エンコーディングを返す 引数 n:エンコーディングが返される文字のインデックス 戻り値:string 内の n 番目の文字の Unicode エンコーディング(0 から 65535 までの 16 ビットの整数…
2013年12月13日
リサイズのイベントは多数発生するので、リサイズが終了した時点である処理を実行する場合の方法のメモ。(「[jQuery] ウインドウのリサイズ操作が終わった時にだけ処理を実行する」を参考にさせていただきました。) setTimeout()メソッド このメソッドに関数と時間(ミリ秒)を指定すると、指定した時間が経過したときに、指定した関数が実行される。 また s…
2013年12月8日
ページ内リンクへプラグインを使わずにアニメーションで移動するスムーズスクロールに関するメモ。 animate メソッドと scrollTop プロパティ 参考:「jQueryで画面をスクロールさせる時の注意点」 画面をスクロールさせる場合 animate メソッドと scrollTop プロパティを利用するが、どのセレクタに対して実行すべきかはブラウザ(We…
2013年12月7日
以下の情報の方が新しいものになりますので、よろしかったらご覧ください。 「レスポンシブ Web デザイン/開閉式ナビゲーションメニュー」 基本的(単純)なレスポンシブメニュー(Menu 部分をクリックするとメニューが展開されて表示されるようなメニュー)の作成に関するメモ。 PC などでの表示(メニューは横並び) ヘッダ部分の「960×240」は特に…
2013年12月2日
acmailer3 を使ってみた際のメモ。「不着メール設定」で少しはまった。今回試した共用サーバー(inMotion)では、「.forward」の機能が使えないことが判明したので cPanel の E-mail の「Forwarders」を利用。 ダウンロード 以下のページからダウンロード(今回ダウンロードしたバージョン:acmailer3.8.14 正式版…
2013年12月2日
inMotion ホスティングで phpList を使ってみた際のメモ(使い方)。 インストール How to install phpList phpList 用の email アカウントの作成 送信者用アドレス、管理者用アドレス、送信したメールが何らかの理由で戻ってきた(bounce back)場合の処理のためのアドレス等を用意しておく。 この例では以下の…