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

企業の製品紹介サイトなどでは、画面全体に文字や画像を大きく配置し、1画面ずつスクロールして見せるデザインのウェブページをよく見かけます。そのような「1画面単位で滑らかにスクロールして画面が切り替わる」デザインのページを、jQueryを使って簡単に作成してみましょう。

HTML5やCSS3などの新機能を使いつつ、古いブラウザへの対策もしたい場合、「ブラウザの種類やバージョン」を元にして条件分岐するのは大変面倒です。そんなときは、「ある機能が使えるかどうか」を基準にして条件分岐ができるスクリプト「Modernizr」を使うと便利です。ブラウザのバージョンによる判別が不要になり、クロスブラウザ対応が楽になります。

HTMLで作成した表(テーブル)に1行ずつ連番を振りたいと思ったことはありませんか？CSS(スタイルシート)のcounter-incrementプロパティ等を使えば、表の特定のセルに自動で連番を振ることも簡単です。1・2・3のような数値だけでなく、第1位・第2位・第3位のように任意の文字を組み合わせた連番も簡単に表示できます。

4,600種類を超えるアイコンの中から、自分が使いたいアイコンだけに限定して、専用のウェブフォントファイルを生成してくれるサービス「IcoMoon」を使ってみましょう。たった数個のアイコンを使うためだけに、数百種類ものアイコンを含んだフォントを読み込ませる必要はありません。無駄を排した最小限のアイコン用ウェブフォントが作れます。

ダイナミックな効果で画像を次々に切り替えていく、とても目を引くスライドショーを作ってみましょう。jQueryで作られた「Skitter」スクリプトを使えば、カッコいい迫力ある効果を伴ったスライドショーが簡単に作れます。

1行または数行単位で、「指定した数秒間は静止」→「縦方向にスクロールするアニメーションで次の1行を表示」……を繰り返す「ティッカー」を掲載する方法をご紹介。jQueryを活用したスクリプト「vTicker」を使うことで、ブロックレベル要素をまるごと垂直方向に流せます。

画像の読み込みが完了するまでの間、画像が表示される予定の領域に「ローディング画像」を表示させて、読込中であることを示してみてはいかがでしょうか。スクリプトは不要で、数行のCSSを記述するだけで、簡単にローディング画像を掲載できます。

ウェブサイトのナビゲーションメニューを、「広い画面」では「メニューバー」の形に、「狭い画面」では「プルダウンメニュー」の形に自動で切り替える仕組みの作り方をご紹介。ul要素とli要素で作る「リスト」から「プルダウンメニュー」を自動生成してくれるスクリプト「tinynav.js」を活用すると、とても簡単です。

掲載画像の多いページでは、「ページの下の方にある画像」を読み込む処理のために、「今見えている部分」の読み込みが遅れてしまうことがあります。それを防ぐために、1画面目以降の(すぐには見えない位置にある)画像に関しては、閲覧者がスクロールするまで画像を読み込まないようにする方法をご紹介。

PC上の仮想環境で、Androidスマートフォンやタブレットの表示確認ができる「Androidエミュレータ」を使ってみましょう。エミュレータ上でブラウザを起動すれば、様々なスマートフォンで自身のウェブサイトがどう見えるのかを簡単に確認できます。Androidエミュレータの設定方法や簡単な使い方をご紹介。