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

サイトマップのような「項目数が多くて長くなるリスト」に活用すると便利な、「項目をクリックすることで深い階層が現れるリスト」の作り方をご紹介。リストが長い場合は、どこに何があるのかが把握しにくくなります。初期状態ではリストを「折り畳まれた状態」にしておき、閲覧者が見たいと思う階層だけをその都度表示する方が、望みの項目が探しやすくなって便利です。

日本語フォントは文字数が多いためにファイルサイズが大きく、Webフォントとして使うには重いという問題があります。しかし、文字を画像化してしまうと調整も修正も面倒であり、検索もできないデメリットがあります。そこで、実際に使う文字だけを抜き出した「サブセットフォント」を作成することで、Webフォントとして現実的なサイズにまで軽くする方法をご紹介。

複数のCSS(スタイルシート)ファイルを用意しておき、閲覧者がプルダウンメニューを使って自由にスタイルを切り替えられる機能を作ってみましょう。読み込むCSSファイルそのものを変更できるので、装飾やレイアウトを大きく変えられます。好みのデザインを選択できるようにしたり、様々な配色で表示がどう変わるかを確認できるようにしたい場面などで便利です。

CSS3では、たった1つのプロパティを記述するだけで、簡単に「段組(マルチカラム)」レイアウトが作れます。「3段組」のように段の個数を指定したり、「1段は20文字分」のように各段の横幅を指定して入るだけ並べたり、柔軟な段組構造が作成できます。段と段の間に罫線を引いたり、段と段の余白量を調整するのも、専用のプロパティを追記するだけで楽々実現できます。

HTMLのinput要素で作る「チェックボックス」や「ラジオボタン」は、標準ではクリック可能な範囲が狭くて使いやすくはありません。label要素を使ってラベル文字部分もクリック可能にしたり、fieldset要素を使ってグループ単位で囲んだりすることで、PC環境でもモバイル環境でも分かりやすく・使いやすく表示する方法をご紹介。

Base64というエンコード方法を使って、画像そのものをCSSソース中に埋め込む方法を解説。ウェブ上に小さな画像を多数掲載する際、画像ファイル1つ1つを読み込むよう記述していると、サーバへのリクエスト回数も多くなるため余計な時間がかかります。小さな画像ファイルをCSSソース中に埋め込むことで余計な通信を減らし、読み込み待ち時間を軽減する方法をご紹介。

JavaScriptを便利に・容易にする「jQuery」(ジェイ・クエリー)は、様々なウェブサイトで活用されている有名ライブラリです。jQueryの設置(読み込み)方法、バージョンの選択方法、記述位置など、jQueryを活用する準備についてを簡単に解説。jQueryを使ったテクニック記事も紹介しています。

「ul要素とli要素とで作る箇条書きリスト」を、「横向きに並ぶリンク一覧」や「横一杯に広がるメニューバー」の形に装飾するCSS(スタイルシート)の書き方を解説。ウェブページ上で「横向きに複数のリンクを並べて、リンクリストやメニューバーを作りたい」という場合に活用してみて下さい。

ページの内容が少ない場合、ブラウザの描画領域よりもページの長さ(高さ)が足りず、「フッタ」部分が画面の半ばに表示されてしまうことがあります。そこで、内容が少ない場合にだけ、フッタ部分を画面の最下部に固定する方法をご紹介致します。「フッタを常に画面下部に固定」するわけではなく、「ページの長さが短い場合」にだけフッタを画面下部に表示します。CSSで簡単に実現できます。

ウェブページの読み込み待ち時間を短くする方法として、「次に読み込まれる可能性の高いファイルを先読みさせる」という手段があります。次のページの描画を事前に済ませておく「プリレンダリング」機能、共通のファイルを事前に読んでおく「プリフェッチ」機能の書き方・使い方をご紹介。HTMLのlink要素を1行記述するだけという簡単な方法で、先読みの指示ができます。