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

スタイルの適用先を指定する「セレクタ」には、「疑似クラス」という特殊な書き方も用意されています。要素名やclass名を指定するだけでは実現できない特殊な状態に限定してスタイルを変化させるなど、様々な装飾ができます。

ウェブページ内の配色は、「親ボックスよりも20％ほど明るい色の子ボックス」のように、相対的に指定できると便利です。色の値を直接記述することなく、ベース色からの変化量で「相対的に色を指定する」方法をご紹介。

CSSメタ言語「LESS」を使えば、CSS内部で変数を使ったり、複数のスタイルを関数のように定義して何度も呼び出して使ったり、CSSの記述が効率的かつ楽になります。CSSのデメリットを補完してくれる、とても便利な「LESS」の使い方をご紹介。

Facebookページに追加する「独自ページ」用のHTMLを記述する上で役立つ3点のTIPSをご紹介。縦方向のサイズ制限をなくす方法、単独で閲覧された場合にFacebook側へ誘導する方法、複数の独自ページ間でリンクする際の注意点など。

「Facebookページ」の中に、「1からHTMLソースを記述して自由にデザインしたページ」を追加する方法をご紹介。必要なだけページを加えて、Facebookページの内容をもっと拡充させてみましょう。

自分のウェブサイトを、Internet Explorer 9以降に搭載されている「ピン留め」機能に対応させる方法をご紹介。ユーザに使いやすいジャンプリストを提供することで、アクセス頻度の向上を図ってみましょう。

ウェブサイトの構造把握やデザインの試行錯誤に便利なFirefoxアドオン「Firebug」をご紹介。「実際の描画」と「その部分を作っているソース」とを対にして表示したり、その場でソースを修正して表示結果を確認したり、ウェブ作成を強力に支援する機能が満載です。

様々な状況での表示確認や動作確認・構造の把握などが手軽にできる、便利なFirefoxアドオン「Web Developer」をご紹介。CSSや画像の有効・無効を簡単に切り替えたり、特定の要素を強調したり、ウェブ制作に便利な機能が豊富です。

複数のHTMLファイル内にある「リンク先URL」・「リンク文字」・「属性値」などを一度に更新したい場合は、複数ファイルを対象にして一括置換できる機能や、正規表現による置換処理ができるテキストエディタを使うと、とても楽に作業できます。

これまで、ウェブページ側からブラウザに対して何らかのデータを保存させるには、Cookie（クッキー）を使うしかありませんでした。しかし、クッキーの読み書きには少々面倒なスクリプトを書く必要がありました。しかし、「Web Storage（ウェブストレージ）」機能なら、もっと簡単な方法でデータの読み書きができます。