最近の覚書やメモ

Web 制作に関する個人的な覚書やメモです。記事中の内容やコード等には、誤りなどもある可能性があることをご了承ください。また、内容を利用される場合は、あくまでもご自身の責任においてご利用ください。

New Web 制作リファレンス
もう少し整理された形式のWeb制作参考資料です。

Illustrator の基本的なこと

2014年1月2日

Illustrator の基本的なことに関する非常に個人的なメモ。 基本設定 環境設定 環境設定ダイアログ:Ctrl + K (Command + K) 単位 「一般」「線」「文字」「日本語オプション」を「ピクセル」に設定 一般 「キー入力」を「1px」に設定 スマートガイド メニューの「表示」→「スマートガイド」にチェックが入っていることを確認 新規作成 …

続きを読む

Photoshop の基本的なこと

2014年1月1日

Photoshop の基本的なことに関する個人的なメモ。 環境設定 環境設定ダイアログ:Ctrl + K (Command + K) 単位・定規 「定規」と「文字」を pixel に設定 ガイド・グリッド・スライス 「グリッド」の例 カラー:カスタム(#CCCCCC) スタイル:点線 グリッド線:「値(グリッドの間隔の値)」:100、「単位」:pixel、 …

続きを読む

jquery パララックス効果を使ってみる

2013年12月29日

パララックスをあまりよく理解できていないので練習を兼ねたメモ。 サンプル スクロールにより背景画像を動かす スクロールしてある位置まで来ると、背景画像を動かす単純な例。 「div1 」の位置までスクロールすると、「クラス picture」の背景画像を下方向に動かす例。 背景画像は 960×800 のサイズの画像を用意 画像を表示する領域「クラス p…

続きを読む

jquery 背景画像を使ったパララックス

2013年12月28日

背景画像を使ったパララックスに関するメモ。 参考にさせていただいたサイト: 「HTML5 × CSS3 × jQueryを真面目に勉強 – #6 パララックスエフェクトの基本」 CSSを使ったパララックス jQuery を使用しないで CSS で単純なパララックス(背景画像を固定して表示)を実現する方法。 各 div 要素(#first, #second, …

続きを読む

jquery パララックス(基本的なことに関するメモ)

2013年12月28日

jQuery と CSS を使っての基本的なパララックス効果に関するメモ。 参考にさせていただいたサイト:「パララックスサイトを作ろう」ドットインストール スクロールで要素を動かす 以下は、スクロールすると3つの要素がそれぞれ動くようにするサンプル。 サンプル用の構造 jQuery を読み込む jQuery を記述する pallarax.js を読み込む C…

続きを読む

jquery jPlayer (2.5.0) を使ってみる

2013年12月15日

目次 以前「audio.js」を使用したが、環境によっては IE8 以下ではエラーが発生してしまったので別のオーディオ再生用のプラグインを探したら見つかった「jPlayer」に関するメモ。「jPlayer」はビデオの再生も可能だがまだ試していない。 以下は「jPlayer 2.5.0 Quick Start Guide」から。 ダウンロードと配置 jPlay…

続きを読む

jquery JavaScript で文字列が英語かどうかを判定する

2013年12月13日

取得した文字列が英語か日本語か判定する必要があったので調べたメモ。 charCodeAt() string.charCodeAt(n) 特定の場所の文字エンコーディングを返す 引数 n:エンコーディングが返される文字のインデックス 戻り値:string 内の n 番目の文字の Unicode エンコーディング(0 から 65535 までの 16 ビットの整数…

続きを読む

jquery リサイズ $(window).resize が終了した時点で実行

2013年12月13日

リサイズのイベントは多数発生するので、リサイズが終了した時点である処理を実行する場合の方法のメモ。(「[jQuery] ウインドウのリサイズ操作が終わった時にだけ処理を実行する」を参考にさせていただきました。) setTimeout()メソッド このメソッドに関数と時間(ミリ秒)を指定すると、指定した時間が経過したときに、指定した関数が実行される。 また s…

続きを読む

jquery ページ内リンクへアニメーションで移動

2013年12月8日

ページ内リンクへプラグインを使わずにアニメーションで移動するスムーズスクロールに関するメモ。 animate メソッドと scrollTop プロパティ 参考:「jQueryで画面をスクロールさせる時の注意点」 画面をスクロールさせる場合 animate メソッドと scrollTop プロパティを利用するが、どのセレクタに対して実行すべきかはブラウザ(We…

続きを読む

htmlcss レスポンシブメニュー

2013年12月7日

以下の情報の方が新しいものになりますので、よろしかったらご覧ください。 「レスポンシブ Web デザイン/開閉式ナビゲーションメニュー」 基本的(単純)なレスポンシブメニュー(Menu 部分をクリックするとメニューが展開されて表示されるようなメニュー)の作成に関するメモ。 PC などでの表示(メニューは横並び) ヘッダ部分の「960×240」は特に…

続きを読む