情報サイト「All About」内の「ホームページ作成」ガイドサイトで公開している記事に対応するサンプルページ集

サンプル集 - All About ホームページ作成

情報サイト「All About」内の「ホームページ作成」ガイドサイトで、西村文宏が公開している記事中で使用しているサンプル集です。都合によりAll Aboutサイトのサーバ上に掲載できないサンプルを、ここで公開しています。（※All About側のサイトデザインが付加されると実現できないレイアウトとか、All About側の共通CSSが影響してうまく表示できないデザインとか。）

CU20091222A
「画像1つで様々な星レベル(ランク)を表示」サンプルページ
複数の画像を使わなくても、たった1つの画像を用意するだけで「3:★★★☆☆」・「4:★★★★☆」のような星レベル（星ランク）を表示させる方法があります。スタイルシートを工夫して簡単に実現する方法をご紹介。
CU20090822A
「ダウンロードと同時に案内ページを表示する」サンプルページ
ZIPファイルなどへのリンクを作ると、リンクをクリックすることでファイルをダウンロードさせられます。しかし、表示ページは変化しません。ファイルのダウンロードと同時に、案内用ページを表示させる方法をご紹介!
CU20090523A
「テーブルの見出しだけ立体的にする」サンプルページ
テーブル(表)を装飾する際、枠線や背景色を加えるだけではシンプルなので、見出し部分の装飾に少し凝ってみてはいかがでしょうか。見出しのセルだけ、グラデーションを使って立体的に見えるよう装飾してみましょう。
CU20090510A
「別ウインドウで開くリンクにアイコンを付加」サンプルページ
リンク先を新規ウインドウで開くよう記述されているリンクに限定して、アイコンが付加されるようスタイルシートを書いてみましょう。target属性に値「_blank」が指定されているリンクに自動的に画像を表示させます。
CU20090423A
「画像を加工せずに、画像に影を付ける方法」サンプルページ
たくさんの画像に「影」を付けたい場合、画像1つ1つを加工していくのは面倒ですね。「影画像」を1つ用意するだけで、すべての画像に影を合成する方法を使うと楽です。スタイルシートで簡単に合成する方法をご紹介。
CU20090415A
「IEで入力欄のサイズが変化しない問題を解決」サンプルページ
input要素などで作る入力欄(フォーム)は、IEで表示させた場合だけ、本文の文字サイズに影響されずに、常に同じ大きさで表示されてしまいます。閲覧者のフォントサイズ設定に合ったサイズで表示させる方法をご紹介。
CU20081122A
「ボックスをウインドウの中央に配置する方法」サンプルページ
1つのボックスをウインドウの中央に表示させる方法をご紹介。左右方向だけでなく上下方向にも中央に寄せて、ウインドウ（表示領域）の中心にボックスを配置させる方法です。スタイルシートで簡単に実現できます。
CU20081022A
「HTMLファイルそのものの中に画像を埋め込む」サンプルファイル群
HTMLファイルはテキストファイルですから、HTMLファイルそのものに（バイナリデータである）画像を埋め込むことはできない……と思いがちですが、ある方法を使うとHTML内に画像を埋め込むことができます。
CU20081002A
「別窓を開かずに、その場で拡大画像を表示！」（LightBox Plusの使い方）サンプルページ
サムネイル画像のクリックで拡大画像を表示するページを作る際、ポップアップウインドウを使ったり拡大ページへ移動させたりするのでは操作が面倒です。その場で上から重ねるように拡大画像を表示させてみましょう！
CU20080922A
「夜の間だけハロウィン仕様に変化させる」サンプルページ
毎日20時～翌4時の夜間だけ、ウェブサイトをハロウィン仕様のデザインに自動的に変化させる仕組みを作ってみましょう。ハロウィンデザインのスタイルシートを作っておき、夜間にだけ適用されるようにします。
CU20080623A
「ボックス横幅の最大値・最小値を指定する」サンプルページ
可変幅のボックスを作る際、範囲を制限したいことがあります。「80％の横幅で表示するが、200pxより小さくはしたくなく、800pxより大きくはしたくない」というような場合です。スタイルシートで簡単に指定できます。
CU20070711A
「スタイルシートを切り替えられる機能を作る」サンプルファイル群
複数のスタイルシートを用意しておき、閲覧者がプルダウンメニューを使って自由に切り替えられる機能を作ってみましょう。読み込むCSSファイルそのものを変更できるので、装飾やレイアウトを大きく変更できます。
CU20070622A
「ウェブ上で使える矢印記号いろいろ」サンプルページ
上下左右を表す矢印記号は「↑↓←→」だけではありません。二重線の矢印や斜め方向の矢印も表示できます。また、三角記号「▲▽」が矢印の代わりに使われることもありますが、実は横向きの三角形も表示できます。
CU20070502A
「キャプション付き画像を横に並べて配置する」サンプルページ
アルバムのように、キャプション(タイトル名)を加えた画像を横方向にたくさん並べてみましょう。横に並ぶ数を指定せず、ウインドウサイズに応じて自動的に配置される「リキッドレイアウト」で実現する方法をご紹介。
CU20061218A
「ドロップダウンメニューを作ろう！(3) 簡単なドロップダウンメニューを作る」サンプルページ
最低限の機能を備えた簡単な「ドロップダウンメニュー」を作成してみましょう。スタイルシートでメニューバーをデザインし、HTMLに短いJavaScriptを書くだけで実現できます。
CU20030919A
「ドロップダウンメニューを作ろう！(2) 指定の場所（座標）に表示させる」サンプルページ
マウスを乗せるだけでサブメニューが展開されるドロップダウンメニューを作ってみましょう。今回は、座標（端からの距離）を指定することで、望みの場所にぴったり表示させる方法をご紹介致します。
CU20061202A
「画像と枠線の間に余白を設けたい」サンプルページ
スタイルシートを使えば、画像の周囲に枠線を引くことは簡単です。では、画像と枠線との間に少し余白を設けたい場合はどうでしょうか？あなたが今思いついたソースでは、うまくいかない場合があるかも知れません。
CU20060917A
『「Web拍手」を設置して応援されたい！』記事ページ
閲覧者から応援の気持ち(＝拍手)を受け取ることができる「Web拍手」というツールがあります。ほんのちょっとでも「気に入った」というサインが得られると嬉しいですよね。Web拍手を設置して応援されてみましょう。
CU20060619A
「サブウインドウにアドレスバーを表示させよう」サンプルページ
JavaScriptを使うと簡単にサブウインドウを作れます。このサブウインドウを「最近のブラウザ」で閲覧すると、ページタイトルが見えなくなってしまっている場合があります。なぜでしょうか？原因と対処法をご紹介！
CU20040701A
「見出しの頭に画像を加える(後編)」サンプルページ
見出しのデザインとして、見出しの先頭に画像を加えてみたいと思ったことはありませんか？スタイルシートなら、すべての見出しの先頭に、手軽に同じ画像を加えられます！
CU20040530A
「リモコンサブウインドウを作ろう！　親窓へリンクを渡す小窓を作る」記事ページ
小窓から親窓の表示ページを切り替えるテクニックを使って、ナビゲーション用の「リモコンウインドウ」を作成してみましょう！小窓から親窓へリンクを渡す方法は、様々な場面で活用できます。実現は非常に簡単！
CU20030529A
「ページ周囲の余白を微調整するには？」サンプルページ群
通常、ページの周囲には数ピクセルの余白ができますね。デザイン上、この余白をなくしたい場合もあるでしょう。そこで今回は、この余白を消したり、サイズを調節する方法をご紹介致しましょう。
CU20021228A
「閲覧者に色を自由に変更させる」サンプルページ
白地に黒では、輝度差が大きくて目が疲れてしまいます。読み物ページなどでは、閲覧者の目が疲れないようにしたいですね。背景色・文字色を、閲覧者が自由に変更できるようにしてみましょう。
CU20020910A
「基本認証でアクセス制限をかける方法」記事ページ
特定のページにアクセス制限を施す、基本認証(BASIC認証・ベーシック認証)の作り方を、初心者にもわかりやすく解説します。IDとパスワードを入力しなければ入れない会員制ホームページを作る際に使えます。

※一部のリンクは、All Aboutサイト内の記事ページに直接リンクしています。（このサーバに置いているのが、HTML以外のファイルだけである場合など。）

ホームページ作成ガイドTOPへ戻る