|
|
このサイトを立ち上げた当初は全くのHTML初心者だったため試行錯誤の連続でした。
エディタを使わずに直接HTMLで作ったための苦労も多かったのですが､そのためか少しはHTMLが理解できるようになりました。
このページでは､これまでに覚えた事や､理解するのに手間取った事などをコラム形式で書き綴っていきます。
HP作成初心者には参考になるかも。
ただ管理人も専門家ではないので､このページはキッカケぐらいにしてもらって､詳細はとほほのWWW入門(超メジャーな老舗サイトです)などの専門サイトで調べてみて下さい。
|
フレーム構成 □2004.09.20
フレームとは､ページに『窓枠』を取り付ける機能です。
このサイトの様に､上段のメニュー領域と下段のコンテンツ領域を分けるために使います。
(注)2004/11､フレーム構成を止めました。
■初めての訪問者にも分かり易い(メニューの位置が変わらないので)
■作り易く管理し易い(全コンテンツページに移動ボタンが不要なため)
ただ､良い事ばかりではなく､欠点もあります。
■ブラウザによっては表示されないらしい
■google等のロボット検索に弱いらしい
■コンテンツページに直接訪問されるとメニューがないため分かりづらい
■お気に入りにTOPページでしか登録されない
■カウンターやアクセス解析で未サポートの場合あり
欠点もありますが､管理人は長所の恩恵の方が大きいと思っているため採用しています。
では､作り方のポイントです。
このページを基本に例題を書いてるのでイメージも湧くかと思います。
１．トップページ(通常index.html)で窓枠を定義
<frameset rows="113,*" frameborder="no">
<frame src="menu.html" name="menu" marginheight=0 marginwidth=0 scrolling="no">
<frame src="body.html" name="body" marginheight=0 marginwidth=0 scrolling="auto">
</frameset>
●rows…上下の分割量､この例では上段113pxと残りを下段となります。(左右の場合はcols)
●name…上段と下段の領域それぞれに名前を付けます。この名前が後で重要になります。
●src…上段と下段の領域それぞれに読み込むページを指定します。
●scrolling…スクロールバーの表示。上段のメニュー領域は固定させるため"no"としています。
※トップページにはこれだけ。枠の定義なので内容はsrc=で読み込まれるページに記載します。
２．窓内に表示するページを作成
上記の例でいくとメニュー領域の『menu.html』とコンテンツ領域の『body.html』を作成します。
frame src=で指定したファイル名と合っていれば､名前は何でも良いです。
内容も普通に作ればOKです。(メニュー領域の様に固定する場合は大きさに注意が必要)
３．その他のページを作成
どんどんコンテンツページを作っていきます。
メニュー領域を固定してコンテンツ領域を切り替えるのでリンクの際は以下の記述とします。
<a href="*****.html" target="body">
この『target=』で表示先の名称を指定する事でコンテンツ領域だけ置き換わる訳です。
名称は項番１の『name=』で指定したものと合わせて下さい。
| |
|---|
スタイルシート(１) □2004.09.20
その名の通り装飾を定義する機能です。
■通常のタグでは定義できない設定が可能
■サイト全体の仕様を統一できる
■サイト全体の仕様を簡単に変更できる
ただ､良い事ばかりではなく､これまた欠点もあります。
■ブラウザによって見栄えが違うらしい
■ソースだけでは動作が理解できない
見易いサイトを作る上では『画面の統一』が不可欠と思っており､使った方が良いと思います。
スタイルシートでは､3パターンの指定方法があります。
それぞれ､その指定内容の有効範囲が違うので組み合わせて使いましょう。
１．タグに指定
殆どのタグで指定できます。
そのタグの有効範囲内で有効になります。
以下の例では『div』内の文字を赤色にします。
<div style="color:red;">あか文字</div>
２．ページに指定
ページ全体の標準値を設定します。
<head>〜</head>内に記述します。
以下の例ではページ内の全文字を赤色にします。
注意点は､ブラウザが解釈を間違えないようコメント(<!-- -->)として記述する事です。
<html>
<head>
<style TYPE="text/css">
<!--
body {color:red;}
-->
</style>
</head>
３．外部ファイルで指定
スタイルシートの指定をまとめて1つのファイルにする事です。
style.cssのように識別子を『.css』にします。
また､その指定を有効にしたいページの<head>〜</head>内に以下の1文を挿入しておきます。
<link rel=stylesheet href="style.css" type="text/css">
４．その他
クラスと言う概念があります。
これは特定のタグのみに有効とするスタイルシートの指定方法です。
以下の例では『new』と言うクラスの文字を赤色にします。
body.new {color:red;}
文字を記述する側で
<div class="new">NEW!!</div>
このように記述しておけば､サイト全体のNEW!!をNEW!!に変えたい時も『body.new {color:blue;}』だけで済みます。
これで､全体仕様が統一できる､と言う意味も判ると思います。
| |
|---|
スタイルシート(２) □2004.09.26
↑の文章､何度読み返しても分かりずらい…。
簡単便利です､と言うのが伝えたいんですが…。
と言う訳で､このサイトでの指定を例に簡単なサンプルをひとつ。
■外部ファイルを作成
名称は何でも良いですが識別子を『.css』としたファイルを作成します。
■スタイルシートの記述
上記で作ったファイルに以下の2行を記述します。
body {color:dimgray;} ←<body>タグ内の文字色を濃灰に。
img {border:none;} ←<img>タグは縁取りなしに。
■スタイルシートの指定
全ページの<head>〜</head>内に以下の1行を挿入します。
<link rel=stylesheet href="ファイル名.css" type="text/css">
■完成
これで文字の基本色が『dimgray(濃灰､このサイトの文字がそうです)』になり､画像の縁取りが無くなります。
基本色を変えたい時は外部ファイルを変更するだけ､また<img>タグを記入する度に『border=0』を指定する必要が無くなるので少しはHP減量にもなります。
これを基本として､見易く､作り易いHPを目指して下さい。
| |
|---|
FC2WEB □2004.09.20
このサイトは無料HPスペースFC2WEBをお借りして運用しています。
無料ながらも､広告が最下段に1行だけ､とサイトイメージを損なわず､非常に住み心地の良い所です。
しかし､その最下段1行がメニューフレームを除く全てのページに挿入されるため少し注意が必要です。
たとえ1行であっても隠す行為は規約違反となるのでサイト閉鎖になるかもしれませんので。
１．広告下げの禁止
FC2WEBでは広告を挿入するために</html>タグの直前に広告表示用のソースを自動的に追加します。
ブラウザ上でソース表示すれば判ると思います。
サイトイメージを損なうからと</html>タグの直前に<br>タグを複数追加しておくと､当然のように広告表示位置が下に下がります。
これを『広告下げ』と呼んでおり､規約違反とされています。
２．広告隠しの禁止(１)
この世界では『横スクロールバー』が嫌われる傾向にあります。
管理人自身も面倒で嫌いです。
防止策としてスタイルシートで以下の指定をすれば縦スクロールバーしか表示されません。
body {overflow-x:hidden;overflow-y:scroll}
しかし､FC2WEBでは､このように横スクロールバーを表示しない指定にすると『広告隠し』として規約違反にあたります。
画面を小さくした時に広告が表示されないためです。
見栄えは悪くなりますが我慢するしかないですね。
３．広告隠しの禁止(２)
更新履歴などで『iframe』を利用している方が多いと思います。
これはインラインフレームと言い､ページ内の小窓に別のファイルを読み込ませる機能です。
フレームがページ全体であるのに対して､インラインフレームはページの一部分である事が相違点です。
<iframe src="rireki.html" width=500 height=80></iframe>
このように大きさを固定した小窓と表示するページを指定します。
FC2WEBでは､この読み込まれるページにも広告表示が義務付けられます。
小窓のため､どうしても広告の方が長くなってしまい､横スクロールバーが出現します。
この場合でも横スクロールバーを非表示にすると規約違反となります。
対処策としてテーブルを使っても同様の表示ができます。
<div style="height:80px; width:500px; overflow-y:scroll;">
<table width=500>
</table>
</div>
普通のテーブルでは行が増えるにつれ縦長になってしまうのですが､それを大きさ固定した<div>で囲む事により､縦スクロールする小窓になります。
ファイルを分割して管理し易くする目的は果たせませんが､表示上は問題ないと思います。
本サイトもFC2WEBに移転した時にトップページ更新履歴のiframeを書き換えました。
| |
|---|
背景画像の指定 □2004.09.20
背景画像もスタイルシートを使えば簡単です。
また､外部ファイルで指定すれば模様替えも簡単にできます。
季節や天気によって差し替える…なんて事も楽に実現できますよ。
以下､このサイトの例です。
body {background-image: url(画像ファイル名) ;
background-attachment: fixed ;
background-repeat:repeat ;}
■fixed…固定します。スクロールしても動きません。
■repeat…画像ファイルを画面に敷き詰めます。
| |
|---|
背景画像の自作 □2004.09.20
簡単な背景ならWindows標準添付のペイントブラシでも5分で出来ます。
何を隠そう､このサイトの壁紙も管理人自作です。
以下の手順を参考にして作ってみて下さい。(Windowsでない方やバージョンが違う方はスイマセン､同様な方法はあると思いますが環境がないもので…)
■スタート→プログラム→アクセサリ→ペイント
■変形→キャンパスの色とサイズ→幅5ピクセル･高さ5ピクセル
■表示→拡大→拡大率の指定→800%
■表示→拡大→グリッドを表示
■5x5マスの画用紙が表示されるので､最上段の1列を好きな色に塗る
■ファイル→名前を付けて保存→画像ファイル名.bmp
これで完成。
作成したファイルを背景画像の指定の通りに設定すればシンプルなボーダー柄の壁紙になる筈です。
これぐらいの大きさなら画像ファイルも1KB以下なのでページが重くなる事もありません。
これを基本に色々と試せば壁紙コレクションも増えますね。
| |
|---|
画像の圧縮 □2004.09.25
少し前に1週間程AitH"で過ごしました。
32k繋ぎ放題をレンタルしたので接続料金の心配はなかったのですが､その遅さには辟易しました。
自分のサイトであっても開く気にならないほど。
訪問者がADSLなどの高速回線ばかりではない筈なので少しダイエットに挑戦してみました。
手始めに画像の圧縮に取り掛かり､その中でもリードメール系はバナーが大きいので真っ先に圧縮する事にしました。
圧縮にはHP作成支援でも紹介しているD-ORDERS!フリー版。
■まずはこれが通常状態(468x60)のバナーで画像容量は20,246バイト､AirH"なら表示に約5秒！。
■これを1/4ぐらい(120x31)に圧縮すると4,469バイト､AirH"なら表示に約1秒。
■よくあるミニバナー(88x31)に圧縮すると3,630バイト､AirH"なら表示に1秒以下。
効果の程は分かると思います。
特にお小遣い系サイトの場合､バナーが多くなるので､これが十数個〜数十個あると思うと歴然です。
ただ､あまり圧縮しすぎると見えない場合もあるので自分の目で確かめながらサイズ調整しましょう。
最後に､ページレイアウトだけで考えると､以下の様に『width=』と『height=』で表示サイズを変えれますが､ネット上を流れる画像自身のサイズは変わりません。
■<img src="通常状態(468x60)バナー" width=88 height=31>
←表示する時に小さくなってるだけで画像サイズは20,246バイトのまま。
上の４つの画像を､右クリック→プロパティでサイズを見れば良く分かると思います。
皆さんも一度コチラでチェックしてみては？
| |
|---|
| A8.net □2004.09.26
|
『A8.net』のバナーについて馬鹿っぽい小ネタをひとつ。
テーブル等でセンタリングした時に少し左にズレます。
|
|
|
<table><td align=center>
<A8.netのソース>
</td></table>
|
A8.netのソースを見ると､意味は良く判らないのですが､右端に1pxの<img>が張り付いています。
そのため､上図のように左へ寄ってしまうのです。
まわりに何もなければ気にならないのですが､表などで他のイメージと縦に並べると気になります。
そこで､左端にもダミーのイメージ枠を追加すればキチンとセンタリングが出来ます。(本当に小ネタですいません…)
|
|
![]()
|
<table><td align=center>
<img width=1 height=1 border=0><A8.netのソース>
</td></table>
|
|
お気に入りアイコン □2004.11.23
ほとんどのサイトで『お気に入りに登録』ってなボタンを付けてます。
お気に入りの一覧を表示した時､左側にアイコンが張り付きますが､何もしないとIEの標準アイコンが表示されます。
せっかく数少ない『お気に入り登録者』ですがらアイコンぐらいは自作しよう､と思い立ったものです。
以下に注意すれば背景同様にペイントブラシでもできますよ。
■ファイル名を『favicon.ico』
■サイズは､幅32ピクセル･高さ32ピクセル
■トップページ(index.html)とおなじ階層に保存
これだけ。
このサイトのアイコンもペイントブラシを使って文字を枠線で囲っただけで作りました。
ただし､『.ico』は特殊なファイルのようで､bmpやgifファイルの識別子を変えるだけではダメです。
G･こんばーちゃ♪などの無料ツールで変換して下さいね。
| |
|---|
万能ボタン □2004.12.25
↑の項でも書きましたが愛好していたフレーム構成を止めました。
一番の理由はトップページ以外がgoogleで拾われにくい事。
レイアウトの全面改定もツラいので､見た目は変わらないよう全ページに最上段のメニューを埋め込みましたが､あまり結果は芳しくありません。
色々と調べて見ると､どうやらメニューボタンのリンク方法が良くないような気がしてきました。
当初のメニューボタンがこれ。
簡単に説明すると､
■『input style=』で背景を白､文字色が緑のボタンを指定
■『value=』でボタンに表示する文字を指定
■『onmouseover=』でカーソルが乗った時の背景色を薄緑に変更
■『onmouseout=』でカーソルが離れた時の背景色を白に戻す
■『onClick=』でクリックした時の飛び先を指定
ここで､どうやら『onClick=』で指定したリンクはgoogleが拾わないようです。
適当にボタン画像を作ってもいいのですが､背景色を変えるのは気に入っており､何か簡単な手はないかと調べました。
そして辿り着いたのがこの『万能ボタン』。
 
単に中心を透過にしただけのボタン枠ですが､これでinputボタンと同等の処理ができます。
|
|
|
<table><td background="通常ボタン画像"
onmousedown="style.backgroundImage='url(押込ボタン画像)'"
onmouseover="style.backgroundColor='lightcyan'"
onmouseout="style.backgroundColor='white'">
<a href="リンク先URL">トップページ</a></table>
|
これも簡単に説明すると､
■『td』の背景画像と背景色を操作している
■『background=』通常時の背景画像を指定
■『onmousedown=』でクリックした時にの背景画像を変更
■『onmouseover=』でカーソルが乗った時の背景色を薄緑に変更
■『onmouseout=』でカーソルが離れた時の背景色を白に戻す
■『a href=』で普通にリンク先を指定
長くなりましたが､たった画像2枚(容量も極少)でも様々なバリエーションのボタン作成が可能になります。
| |
|---|
|
トップページ
はじめに
HP作成方法
HP運営支援
アフィリエイト
ランキング
Htmlノウハウ
アクセスUP
☆
独り言
サイトマップ
メール送信
掲示板
ブログ