ウェブデザイナー的ホームページ制作最適化 » CSS

ページ全体をグレースケールにする

admin — Wed, 11 Jan 2012 13:15:15 +0000

色覚障害者の方がWEBページを閲覧した場合、色情報を認識できない場合があります。色情報に頼らないWEBページがアクシビリティの点から重要です。
そこでページ全体をグレースケールにして、色覚障害者が見やすいページかどうかチェックすることが１つの方法です。

ページ全体をグレーにするには、IE(IE4.0以降)ではfilter:Gray()プロパティが使えます。
bodyタグにfilter:Gray()を適応するだけで、ページ全体がグレースケールになります。

▼CSSソース

body{filter:Gray();}

CSSで画像を一部だけしか表示させない！！

admin — Sun, 08 Jan 2012 01:59:10 +0000

CSSで画像の一部だけを表示させるには、CSSのclipプロパティを使います。何も指定が無ければ画像全体が表示されますが、CSSのclipプロパティを使うと、指定した部分を切り抜いて表示させることができます。

「rect(auto 50px 50px auto)」は、「rect(画像上端からの距離画像右端からの距離画像下端からの距離画像左端からの距離)」って感じです。

▼切り抜き表示

▼指定なし表示

フォントサイズをワンクリックで変更

admin — Fri, 06 Jan 2012 15:28:01 +0000

フォントサイズをワンクリックで変更するには、
デフォルトの状態から大きなフォント『A』を押すと、
フォントが大きく表示されて、
小さいフォント『A』を押すと、
フォントが小さく表示されます。
javascriptでCSSのfont-sizeプロパティを変更することで実現します。

▼javascriptソース（headタグ内）

var Default = 2;
var tags = new Array('div','td','tr');
var sizing = nre Array('xx-small','x-small','small','medium','large','x-large','xx-large');
function FontChange(target,tarF){
if(!document.getElementByld) return
var dore = document,tarS = null,fontSize = Default,value,su,cTags;
fontSize += tarF;
if(fontSize < 0) fontSize = 0;
if(fontSize > 6) fontSize = 6;
Default = fontSize;
if(!(tarS = dore.getElementByld(target))) tarS =
dore.getElementsByTagName(target)[0];
tarS.style.fontSize = sizing[fontSize];
for(value = 0; value < tags.length; value++){
cTags = tarS.getElementsByTagName(tags[value]);
for(su = 0; su < cTags.length; su++) cTags[su].style.fontSize =sizing[fontSize];
}
}

▼HTMLソース

<p>
    フォントを大きく ⇒ <a href="javascript:FontChange('body',1)">『A』</a><br>
    フォントを小さく ⇒ <a href="javascript:FontChange('body',-1)">『A』</a><br>
</p>