HTMLタグでひとつの画像に複数のリンクを設定することを、 クライアントサイドイメージマップといいます。 クライアントサイドイメージマップでは、 マップ全体を<MAP>タグで定義し、<MAP>～</MAP>間に <AREA>タグでリンク領域とそのリンク先を指定します。 また、<IMG>タグでマップを適用する画像とその画像が使用するマップ名を指定します。 ■使用例 HTMLソース <img border="0" src="sample/area.gif" usemap="#sample" alt="サンプル" width="384" height="128"> <map name="sample"> <area href="area.htm" shape="rect" alt="四角形" coords="15,19,126,104"> <area href="area.htm" shape=

以前ご紹介した Slider を利用して、ページのフォントサイズを変更するカスタマイズをご紹介します。 下のサンプルをクリックし、ページ左上にある Slider を操作すると、中央カラムおよびサイドバーにある文字のフォントサイズをダイナミックに変更することができます。 Slider は矢印キー・PageUp/PageDown・マウススクロール（これは IE のみ）でも操作可能です。IE より Firefox の方がよりスムーズに動きます。 フォントサイズ変更サンプル ここでは Movable Type 用公開テンプレートを用いて、フォントサイズ変更用 Slider の設定方法をご紹介します。Slider および本カスタマイズはブログツールやテンプレートに依存するものではありませんので、他のブログツールや異なるテンプレートでも利用可能です。 Slider のダウンロード・インストールについて

<script> let x = 100; function larger() { x *= 1.2; document.body.style.fontSize = x + '%'; } function smaller() { x /= 1.2; document.body.style.fontSize = x + '%'; } </script> <div> <button type="button" onclick="smaller()">小さく</button> <button type="button" onclick="larger()">大きく</button> </div> 部分的な変更 特定の部分だけ文字サイズを変更します。 ほげほげほげ <script> let y = 100; function larger() { y *= 1.2; document.getEle

IntroductionIn my previous feature on CSS layouts, I talked a bit about the different CSS layout approaches available to a designer when building a web site. In this feature, I’d like to focus on a dynamic resolution dependent layout implementation that I think provides a strong alternative for those trying to find a balance between fluid and fixed layouts. With dynamic layouts, the possibilities