ホームページ作成ガイド西村 文宏

ページの端にあるナビゲーションメニューは、閲覧者がスクロールすると上方に消えてしまいます。それを防ぐため、スクロールの途中でメニューだけを固定させてみましょう。「メニューを作るボックスの表示位置」と「ユーザのスクロール量」とを比較して、メニューの固定・非固定を切り替えるスクリプトを作ります。jQueryを使えば簡単です。

CSS3で追加された「border-image」プロパティを使えば、枠線の模様を画像で描画できます。しましま柄の画像を枠線として指定すると、とても目立つ「しましま(ストライプ)柄」のボックスを簡単に作ることができます。実線・破線といった平凡な枠線ではなく、もっと凝った枠線を引きたい際に便利です。border-imageプロパティの使い方を解説します。

「ページ内リンク」がクリックされた際の移動を、視覚的に分かりやすくしてみましょう。アニメーションするように滑らかにスクロールさせるスクリプト「smoothscroll.js」と、移動先要素を装飾する「:target疑似クラス」（CSS3）の使い方をご紹介。

ウェブページ上で段組レイアウトを簡単に作る方法の1つとして、「グリッドレイアウトを提供するフレームワーク」を活用する方法があります。とはいえ、大規模なフレームワークを段組作成のためだけに導入するのは不都合もあります。そこで、グリッドレイアウト機能だけを提供してくれるシンプルなCSS「Responsive Grid System」を使って段組レイアウトを作成する方法をご紹介。

左上と右上の角を丸くして「タブ」に見えるデザインをHTMLとCSS(スタイルシート)で作成する方法を解説。リンクに長方形の枠を加えて上側の角を丸くすると「タブ」らしく見え、視覚的に分かりやすいナビゲーション機能が作れます。文字はテキスト・配色はCSSで記述するため、ソースをコピーするだけでいくつでも並べられ、修正も簡単です。

スタイルの適用先を指定する「セレクタ」には、様々な条件で対象を絞り込める書き方が用意されています。うまく活用すれば、いちいちHTML側にclass属性やid属性で名前を割り振らなくても、CSS側だけで柔軟に適用先を限定できます。

CSSの「clipプロパティ」を使うと、画像をソフトウェアで加工したりすることなく、自由なサイズにトリミング(切り抜き)ができます。画像の周囲をカットしたり、画像の中の特定の箇所だけを見せたい場合に、画像を直接加工せずに済むので手軽です。切り抜き範囲を数値で指定するだけで、画像中の任意の部分を四角形に切り取って表示できます。

IE8・IE9・IE10・IE11といった古いバージョンのIEを複数同時に起動させる方法を解説。Microsoftが無償配布している仮想マシンイメージを使えば、仮想環境上で複数バージョンのIEやEdgeを起動して表示確認ができます。最新版のIEやEdgeがインストールされている環境でも古いIEを同時に併用できますし、LinuxやMac上でもIEやEdgeを起動して表示確認ができます。

HTMLで作った2つのプルダウンメニューを、JavaScriptで連動させる方法を解説。メイン(1階層目)のプルダウンメニューの選択項目に応じて、サブ(2階層目)のプルダウンメニューを動的に表示する方法です。2段階に連動させると2階層目の表示項目数を絞れるため、選択肢をシンプルに分かりやすく表示できる効果があります。

Enterキーによる誤送信を防ぐ方法や設定はあるのでしょうか。Enterキーを押してもフォームの内容が送信されないようにする方法と、送信する前に確認ダイアログを表示する方法の2通りをご紹介いたします。