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

CSS3とは、ウェブページのデザインやレイアウトを作る従来のCSS(スタイルシート)に、便利な仕様がたくさん追加された新しい規格のことです。過去のCSSと互換性があるため、新旧の書き方を混ぜて簡単に使えます。CSS3では従来のCSSから何が増えて何ができるようになったのか、CSS3の特長や概要を表示例と共にご紹介。

タブのアイコンとして、ウェブサイト独自の画像を設定・表示する方法を解説。PC用ブラウザのタブやアドレスバー、スマホ用ブラウザのブックマークやホーム画面などに自作のアイコン画像を表示させてみましょう。favicon.icoやapple-touch-icon.pngなどのファイルを作成し、短いHTMLを書くだけの簡単な手順で独自アイコンを設定できます。

画像クリックで拡大画像を表示できるレスポンシブ対応の代表的スクリプトLightbox2の使い方とカスタマイズ方法を1ページで解説。表示サンプルと共にオプションの書き方も紹介。Lightbox2はjQueryと共にCDN経由で読み込めば、自サイトに何も設置することなく簡単に使用可能。PCでもスマホでも動きます。

ファイル拡張子とはファイルの種類を示す英数字のことです。Web製作PCでは拡張子が見えないと不便なので、拡張子を表示する設定にしましょう。HTMLファイルの拡張子には.htmや.htmlや.shtmlなど複数あります。それらの違いもご紹介。

ウェブページを柔軟にレイアウトできるCSS flexの書き方と活用方法を解説。displayプロパティに値flexを指定した上でflex-directionプロパティを併用すれば、横並び・縦並び・正順・逆順などCSSだけで表示順序を自在に指定できます。さらにorderプロパティを併用すれば特定要素の掲載順序を番号で指定できるため、「本来なら中央に表示されるボックス」を右寄せして表示するなど、とても柔軟な配置調整ができます。

わずか9行のjQueryソースで、ウェブサイトのメニューバーにドロップダウンメニュー機能を加える方法を解説。ul＋li要素で作るリスト形式のHTMLを、メニューらしく見えるようCSSで装飾し、JavaScript(jQuery)を使ってサブメニューの開閉を制御するだけで、簡単に「マウスに合わせて自動でサブメニューが展開、メニュー外のどこかをクリックすると消える」という使いやすいドロップダウンメニューが作れます。

CSSのborder-radiusプロパティを使って、スタイルシートだけでボックスなどの角を丸くする方法を解説。枠線が引かれていれば四角い枠線の角が丸くなりますし、背景色が塗られていれば四角い塗りつぶし領域の角が丸くなります。画像の四隅を丸くカットすることも可能。角丸の半径は1ピクセル単位で設定でき、四隅の一部だけ(上だけ・下だけ・左だけなど)を角丸にすることもできるため、連結ボタンに見せる装飾も簡単に作れます。

PC用サイトにアクセスしてきたスマートフォン利用者を自動的にスマホ用サイトへ誘導できるように、アクセス者の端末(PC/SP)に応じて閲覧先を自動で切り替える機能の作り方をご紹介。閲覧者のユーザエージェント名(ブラウザや機種名)を判別し、「.htaccess」のmod_rewriteを使ってアクセス先を自動振り分けすることで、スマートフォンユーザだけをリダイレクトする方法を解説。

ウェブ上に表示した画像の上に文字を重ねる方法を解説。HTMLとCSSを使えば、表示位置(座標)を指定することで画像の上に任意の文字を重ねられます。画像そのものを加工する必要は一切ありません。HTMLで画像と文字を掲載し、スタイルシートで文字の配置を調整するだけの簡単な方法です。表示例に加えて、コピー＆ペーストで使えるサンプルソースと共に解説。

ウェブ上に掲載された表形式のデータでも、Excelなどの表計算ソフトと同様に並び替え(ソート)機能が使えると便利です。jQuery(JavaScript)で作られたTablesorterスクリプトを使えば、table要素で記述されたHTMLの表に対してもソート機能を加えられます。Tablesorterの使い方と、オプションの書き方を解説。閲覧者が自由に並べ替えできるテーブルを作ってみましょう。