ホームページ作成 小技集!

Webの森.com ホームページ作成支援サイト
小技集

ページ全体の余白設定

<body>にマージンを設定することによってページ全体の余白を設定する事ができます。まずどのような物か見る為にサンプルページを見てみて下さい。
マージンが0の方は画像が端にピッタリくっついている事が分かります。つまり余白が0になっているのです。次に記述する方法を説明します。
<body style="margin: 0px;">
これで、ページ全体余白を0にする事ができました。このpxの値を変える事によって余白を変える事ができます。
ここでは、タグに直接記述する方法で行いました。これがサイト全体で行いたい場合などは外部スタイルシートで記述した方が便利です。詳しくはスタイルシートで解説していますのでそちらの方をご覧下さい。

テーブルで枠組みを作る

ページを構成するのに、テーブルで枠組みを作る方法が便利です。今見ているページも多くのテーブルを使って作成されています。このページのテーブル構成を簡単に見てみると
枠組みイメージ
上のメニュー
左メニュー右の内容部分
このようにテーブルで枠組みを作り、その中に内容を作成してくというわけです。テーブル内の余白などの設定はパディングやマージンなどの設定で行います。テーブルの枠を消すことでテーブルを使ってることを隠す事ができます。
テーブルは表などにも使えますが、こういったページ全体の枠組みとして使用する事もでき大掛りなサイトを作っていくには非常に便利なものですので覚えておきましょう。

このウィンドウを閉じるボタン

ここでは、『ウィンドウを閉じる』ボタンの作成方法を見てみましょう。どのようなものか分からない人の為に、まずどのような物か見てみましょう。
このようにウィンドウを閉じる事ができます。このボタンの作成するタグは、
<form><input type="button" value="閉じる" onClick="window.close()"></form>
上のタグをそのままコピーして貼り付けてもらって構いません。『閉じる』の文字を変えることによってボタンの中の文字を好きに変える事ができますので色々試してみて下さい。

○秒後に指定のページに飛びます

良く引越しなどした時に、○秒後に指定のアドレスに飛びます。という物です。これもサンプルページを用意しましたので試して見て下さい。
このように自動的にリンクに飛ぶページを作る事ができます。
<meta http-equiv="refresh" content="秒数; URL=リンク先のアドレス">
このタグを<head>タグの要素として記述して下さい。また、上手く飛ばなかった人の為や早くリンク先に行きたい人の為にリンク先のアドレスも記述するのが望ましいです。

お気に入り追加ボタン

自分のサイトをお気に入りに追加してもらう為のボタンです。
タグは以下の通りです。
<input type="button" value="お気に入りに追加" onclick="window.external.AddFavorite('登録させたいURL','お気に入りの名前')">
これを任意の場所に貼り付けれて、3箇所の設定を好きに変えてください。また、文字などの要素を使う事も可能です。
<a href="#" onclick="window.external.addFavorite('登録させたいURL','お気に入りの名前')">ここに要素を入れる</a>
これは<a>タグ、つまりリンクタグを使って、クリックした時に『お気に入りに』追加しているのです。href="#"は、このままにして置いてください。

右クリック禁止

そのページ内で右クリックを禁止します。只今このページは右クリック禁止にしてありますので試して見てください。この設定は<body>タグの属性として記述します。
<body oncontextmenu="alert('右クリック禁止'); return false;">
『右クリック禁止』の文字を変える事により、警告文字を変える事ができます。また、警告文を表示させない事も可能です。
<body oncontextmenu="return false;">

ステータスバーに文字を表示する

ブラウザの下にあるステータスバーに文字を表示させる小技です。
<body onLoad = "window.defaultStatus = 'ここに表示させたい文字を入れる。';">
<body>タグの属性として指定して下さい。

ステータスバーに文字を表示する2

特定の場合のみステータスバーに文字を表示する方法を紹介します。
このように、マウスのカーソルを乗せた時にステータスバーが変わるようになります。これは、リンク先の説明に重宝します。このイベントはリンクタグの属性として記述しています。ですので、普通のリンクタグのように使用してみてください。

ステータスバーに文字をスクロールさせる

<body>の属性追加と<head>〜</head>の中にテキストフォームのタグを追加してください。
<body onLoad = "mgs_scroll();">
また、speed = 300 という値を変えれば文字のスピードを変える事ができます。

検索してみよう

代表的なサイトの検索フォームを集めました。このように、自分のWebサイトに検索フォームを置く事も可能です。詳細は各サイトをご覧下さい。
Yahoo! JAPAN
Google
MSN サーチ
サイトの内容が多くなってくると自分のサイト内を検索できるようになれば便利だと思いませんか?CGIなどで自分でプログラムを設置するなどの方法もありますが、Googleで簡単にサイト内検索を設置することができます。
Google
WWW を検索 Webの森.com サイト内検索
このように有能なツールが、フリーで使用する事ができるのです。使用方法は、Googleのリンク、検索機能を追加の方をご覧下さい。

ショートカットキーを使いこなそう

良く使う処理はショートカットキーを覚えておくと作成などで効率がアップします。たとえば、カット、ペースト、コピー、元に戻す、などの処理は結構頻繁に使用しないでしょうか?これは、ご使用環境によって弱冠違うかもしれませんのでご注意下さい。
[Ctrl] + Z 元に戻す
[Ctrl] + X 切り取り
[Ctrl] + V 貼り付け
[Ctrl] + C コピー
[Ctrl] + S 保存
Web作成で良く使うショートカットといえば、これくらいでしょうか。その他ホームページ作成ソフトなどを使用している人は、そのソフトのショートカットを覚えるといいでしょう。
テキストフィールドを用意しましたので、ショートカットの確認をしてみて下さい。保存以外の処理は動作確認できると思います。
他には、[Shift]キーを押しながら、リンクをクリックすると、新しいウィンドウで開くなどの処理をさせることもできます。これらのショートカットを有効に使えるようになりましょう。
お願い
もしページの内容がお役に立てたら、ポチっと押して貰えると幸いです。

正当なCSSです!