最近の覚書やメモ

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

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

jquery $.extend を利用したパラメータ(引数)の整理

2013年5月1日

省略可能な引数を持つ関数を定義する場合は、省略された引数に適切なデフォルト値が設定されるようにする。この時パラメータの数が多い場合では、最後のパラメータのみを指定したい場合など、省略するパラメータ全てに「null」のプレースホルダーを使う必要が生じる。 このような場合、オプションのパラメータをオブジェクトで指定するとわかりやすく、またプレースホルダーも不要に…

続きを読む

jquery JavaScript の引数

2013年5月1日

JavaScriptは引数のデータ型をチェックしないので引数のデータ型を確認するには、typeof()演算子でチェックする。 JavaScriptは引数の個数もチェックしない。必要な個数より多かった場合、余分な値は無視され、少なかった場合はその部分の値は 未定義値とみなされ、関数の振る舞いがおかしくなる可能性がある。 関数は任意の個数の引数を使って呼び出せる…

続きを読む

jquery JavaScript 配列リテラルとオブジェクトリテラル

2013年5月1日

配列リテラル カンマ区切りの値をブラケットで括った形式で表現する。先頭の値は「0」というプロパティ名を持ち、2つ目の値は「1」、というように連続した数値のプロパティ名が付けられる。 オブジェクトリテラルを使って記述した場合は、以下のようになる。但し、配列リテラルはArray.prototypeを継承して、オブジェクトリテラルはObject.prototype…

続きを読む

jquery jQuery で文字列を順番に表示する

2013年5月1日

jQuery のアニメーション(fadeIn)を使って、指定した要素の文字列を順番に表示する方法。 デフォルトでは、指定された要素の文字を全て1文字ずつ順番に表示する セパレータが指定されたら、セパレータで区切られた文字列を順番に表示する text() メソッドで指定された要素のテキスト(text_strings)を取得する 取得したテキストの文字数(max…

続きを読む

jquery jQuery Cookie Pluginを利用してランダムに画像を表示

2013年4月30日

トップページなどで、画像を複数用意してユーザーがアクセスする度に異なる画像を表示する場合などに応用できる方法。 ユーザーが前回アクセスしたときにどの画像を表示したかの記録が必要なのでクッキー(Cookie)を利用する。 異なる順序で毎回表示するため乱数を利用する。 但し、単に乱数を発生させると同じ数が連続する可能性があるので、重複しないようにする。 画像名は…

続きを読む

jquery jQuery を使って複数の画像を順番に表示する

2013年4月26日

jQuery の「fadeIn メソッド」等のアニメーションのメソッドを使って複数の画像を順番に表示する方法。 この例では、1つの画像から複数の画像要素を生成して、それらを順番にCSS プロパティで位置を指定し、「fadeIn メソッド」を使って表示する。 fadeIn(speed,callback) 等のアニメーションのメソッドの callback パラメ…

続きを読む

jquery JavaScript で重複のない乱数を生成する

2013年4月26日

重複のない乱数を生成して配列に格納して返す方法。 パラメータに生成する乱数の数を受け取り、重複のない整数の乱数を発生させ、配列に入れて返す関数を作成。例えばパラメータに 10 を指定すると 0 から 9 の間の10個の重複のない整数をランダムに生成する。 パラメータ count の数だけ乱数を発生させる。 Math.random()で取得した値に「count…

続きを読む

htmlcss テキストのインデント幅の指定

2013年4月26日

テキストの最初の行のインデント幅を指定するには、「text-indent」プロパティを利用する。 指定する値は「長さ」または「パーセンテージ」で指定し、マイナスの値も指定可能。 マイナス値を指定してボックスの外にはみ出した部分の表示は、「overflow」プロパティで制御する。 以下の例の場合、クラス「indented」を指定した p 要素の最初の行は「1e…

続きを読む

jquery インデントする長さを、jQuery を使って動的に変更する

2013年4月26日

以下のように CSS でテキストのインデント幅の指定をして、2行目以降の位置をそろえる場合に、インデントの長さを動的に変更する方法。 記述方法はその要素に「indentx」というクラスを指定し、インデントする文字幅に指定する文字列の後に「|」を記述する。 例:(p 要素の後に改行を入れると、インデントする文字数が1文字増えるので注意) 実際の表示: (注意)…

続きを読む

htmlcss CSS3「rem」/ フォントのサイズ指定

2013年4月26日

ベースフォントとして html に「%」を使ってサイズを指定 html 要素にフォントのサイズ(ベースフォント)を一つ定義して、すべての子要素を「rem」で定義する。 フォントサイズを指定したい要素に対して、12px で指定したい場合は、「font-size: 1.2rem;」と記述する。 サポートしていないブラウザに対しては最初に「px」を指定し、その後に…

続きを読む