カテゴリー
SugiBlog Webエンジニアのためのお役立ちTips

フィボナッチ数列

黄金比と同じく、ウェブレイアウトに利用されるフィボナッチ数列を紹介します。

フィボナッチ数列とは、0と1から始まり、一つ前の数字を加算していく数列です。
数字が大きくなっていくと黄金比に近づいていきます。

0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144, 233, 377, 610, 987, 1597, 2584, 4181 ...

フォントサイズや段組みレイアウトへの応用ができるのではないでしょうか。

詳しい情報はWikipediaをご覧ください
http://ja.wikipedia.org/wiki/%E3%83%95%E3%82%A3%E3%83%9C%E3%83%8A%E3%83%83%E3%83%81%E6%95%B0

1,941 views

Microsoft Outlookの個人用フォルダ(Outlook.pst)が開けなくなったとき

Microsoft Outlookの個人用フォルダ(Outlook.pst)が2GBを超えてしまうとエラーが発生し、開けなくなってしまいます。
この場合、受信トレイ修復ツール(Scanpst.exe)を実行しても復活できません。
なぜかというと、32bitのMicrosft Officeでは2GBを超えるファイルを扱うことができないからです。

この問題を解決するには、以下のMicrosoftダウンロードセンターより「PST2GB」というツールをダウンロードします。
http://www.microsoft.com/en-us/download/details.aspx?id=12972

PST2GBはサイズを切り詰めた.pstファイルのコピーを作成します。
指定した量のデータをファイルから切り捨てるため、作成されるコピーにはデータの一部が含まれません。
つまり、容量を2GB以下に落とすため、データを削除します。
ここで切り捨てられるデータをユーザーが選択することはできません。
続きを読む…»

23,064 views

簡単にロールオーバーを実現する方法 [JavaScript]

汎用性のあるロールオーバーを作成します。

例として閉じるボタンを作成します。
画像は、「close.gif」と「close_mo.gif」を用意します。

img要素にname属性を指定しておきます。
これを利用して画像の置き換えを行います。

名前付けの注意点として、予約語は避けます。
例えばここでいう閉じるボタンにname="close"とすると正常に動作しません。

<a href="javascript: window.close();"><img name="close_button" src="close.gif" alt="閉じる" onmouseover="swap_image(this.name, this.src);" onmouseout="swap_image(this.name, this.src);"></a>

次に画像を入れ替えるJavaScript

function swap_image(name, src)
{
	var extension, toSrc, newImage;

	if(src.indexOf("_mo") != -1)
	{
		toSrc = src.replace("_mo.", ".");
	}
	else
	{
		extension = src.substr(src.length - 3);

		toSrc = src.replace("." + extension, "_mo." + extension);
	}

	newImage = new Image();
	newImage.src = toSrc;

	eval("document."+name+".src = '"+newImage.src+"';");
}

これだけでも一応完成ですが、ボタン画像を新しくした場合等 続きを読む…»

4,344 views

配列の共通項を計算する – array_intersect [PHP]

複数の配列から共通するキーや値を検索する関数をご紹介。

配列の共通項を計算する – array_intersect

書式

array array_intersect ( array $array1 , array $array2 [, array $ ... ] )

配列の共通する値のキーと値が配列で返されます。
キーと値の関係は、もとの配列の組み合わせが維持されます。

パラメータ

array1 //値を調べるもとの配列
array2 //値を比較する対象とする配列
array  //さらに比較するそれ以外の配列

返り値
array1 の値のうち、 すべての引数に存在する値のものを含む連想配列を返します。

例)

<?php
$array1 = array("a" => "green", "red", "blue");
$array2 = array("b" => "green", "yellow", "red");
$result = array_intersect($array1, $array2);
print_r($result);
?>

出力結果

Array
(
    [a] => green
    [0] => red
)

キーを基準にして配列の共通項を計算する – array_intersect_key
続きを読む…»

2,320 views

画像の余分な余白を削除 [CSS]

imgタグを使用して表示した画像の下には余分な余白ができてしまいます。
これは画像の下端がテキストのベースラインに合わせられることが原因です。

アルファベット小文字のgやy等で、ベースラインよりも下にはみ出す部分のことをディセンダー(descender)といいます。
このディセンダーは文字だけではなくimg要素にも適用されるので、画像の下に余白ができてしまいます。

ディセンダーはimg要素にvertical-align: text-bottom;
もしくはvertical-align: middle;を指定することで削除できます。

img
{
    vertical-align: text-bottom;
    vertical-align: middle;
}

ちなみに、img要素にmiddleを指定すると、画像の中心を小文字の「x」の中心に揃えることになる。

5,838 views