Sponsored Link

エディタのススメ

ブラウジング中に気になる HP を見つけ、ソースを表示させると、文字が化けることがある。これはメモ帳で開いたのが原因。フリーでもエディタがたくさんあるので、それを使えば解決できる。ちなみに職場ではサクラエディタを使用。

ブロックレベル要素とは?

段落、リスト、フォームなどのひとつのかたまり(ブロック)として扱われる要素。普通は前後に改行が挿入される。 h1 〜 h6 、 div 、 dl 、 p 、 table などがこれにあたる。

インライン要素とは?

リンク、強調などのその行の一部として含まれる要素。前後に改行が入ることはない。 span 、 b 、 a 、 strong 、 em などがこれにあたる。

画像の下に隙間ができたとき

Internet Explorer には発生しないと思われるが、 mozilla 系( netscape,firefox )などで画像の下に隙間ができる場合がある。これを回避するためには画像( img )に対して、 vertical-align:bottom と指定する。

中央に寄せる(左右)

html による指定をする場合は、〜 align="center" 。 css で指定する場合 - テキストの場合は、 text-align: center; 。ブロックの場合は margin: 0px auto; 、または margin-left: auto;margin-right: auto; と指定してやる。たしか、 IE においてはブロック要素を text-align: center で中央寄せができたような気がする。ただしバグです。

DOCTYPE - 作るものに合った適切な宣言が必要となる。

HTML4.01 Strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

HTML4.01 Transitional
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

HTML4.01 Frameset
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">

XHTML 1.0 Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML 1.0 Transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML 1.0 Frameset
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

XHTML 1.1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

XHTML Basic
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN"
"http://www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd">

尚、 xhtml に従った場合、これとは別に xml 宣言、名前空間の宣言を推奨されています。しかしながら、 xml 宣言を入れると IE で狂います。 IE は未だに対応できてません。

ブラウザ

現在主流であるブラウザはバグだらけの microsoft Internet Explorer です。何故かは知りませんが。やはり OS 自体にバンドルされているから手軽なのでしょうか?まぁそれはしょうがないとして、オススメのブラウザをご紹介しましょう。(ちなみに私は Opera ユーザー)

Netscape ( http://wp.netscape.com/ja/ )

FireFox ( http://www.mozilla-japan.org/ )

Mozilla ( http://www.mozilla.gr.jp/ )

Opera ( http://www.jp.opera.com/ )

IE ベースってところが何とも惜しいのですが、これもなかなか使える。現在利用者が増えつつあります。というか熱狂的なユーザーがそれぞれにくっついてます。ドーナッツに至っては使ったことがないので何とも言えないが・・・そもそもこれは IE ベースなのだろうか?

Sleipnir ( http://sleipnir.pos.to/ )

Lunascape ( http://www.lunascape.jp/ )

Donut (これについてはオープンソースのため、いろいろな亜種が存在している。)

最も有名なテキストブラウザ

Lynx ( http://www.mars.dti.ne.jp/~fuming/lynx/ )

css (カスケードシェーディングスタイル)について

近年、 table レイアウトから css レイアウトへ移行していく動きがある。しかし、各ブラウザ(とくに IE )の css への対応遅れているため、文法に沿った記述では正常に表示されないことが多々ある。現在では、世界中のクリエーター達が知識を出し合い、それを回避している。各ブラウザのバグを調べ、あるブラウザには別の css を、あるブラウザには css を適応させないなどの css ハックを駆使する必要がある。各ブラウザ開発会社の早急の対応を求む。

バナーサイズ

ホームページを見ていると、ほぼどこのホームページでもリンクというページがありますよね。ここに置いてある画像がバナーです。断じてバーナーではありません。昔勤めていた会社の上司はひたすらバーナーと言っていましたが。すいません。聞いてて恥ずかしかったです。で、バナーにも一応決まったサイズがあります。日本で主流なのが「 200 × 40 」、世界では「 88 × 31 」が一般的です。

css でレイアウトを行う場合

ブラウザはそれぞれ独自の css を持っています。例えば、 h1 と入力するとデフォルトのままでは使えない大きさですよね。余白も取りすぎだし。これはブラウザの css がそういう属性を持っているからです。だから、 css でレイアウトを行う場合、まずは各ブラウザが持っている css をリセットしてやる必要があります。

* { margin: 0px; padding: 0px; }

h1,h2,h3,h4,h5,h6,p,address { font-size: 100%; font-weight: normal; font-style: normal; }

初心者の方は、意味がわからなくても、とりあえずこいつらを css ファイルに貼っとくだけでいいかと思います。

中央配置(上下左右)

皆さんはホームページを作る時、サイズはどれくらいにして作りますか?

最近は低価格化によって、大型のディスプレイが増えてきました。プロフェッショナルでなくても、一般家庭にも大分普及してきたのではないでしょうか?私も自宅では結構大きいディスプレイを使用しています。しかし、依然として小さいディスプレイを使用している人がいます。ノートパソコンでブラウジングしている人もいます。そこを留意して製作しましょう。

ホームページにも様々な種類があり、横に長いもの(横スクロール)、縦に長いもの(縦スクロール)、小さいディスプレイでも縦横がしっかりウインドウに収まるもの(縦横スクロール無し)があります。この最後に述べたタイプのホームページを作る場合、人によって様々でしょうが、これが左寄せ&上寄せだったりすると、カッコ悪く見えます。このトピックス「中央配置(上下左右)」ではこれを解決します。

以下に例を記します。

まず始めに、作るオブジェクトが500×500だとします。【width: 500px;height: 500px】わかりやすいように適当な背景色を指定します【background-color: #666;】さて、ここからです。わかりやすく説明するために、多少意味がズレることをご了承くださいませ。先程作ったボックスは500×500ですね。こいつをどこに配置するのか。まずは上(top)から50%の位置においてやります。そして更にその位置から上のボックスの半分の大きさをマイナスの余白(margin-top:-250px)で指定してあげます。次に左右です。これも考え方は最初のと同じです。左から50%の位置に置いてやる(left: 50%)そしてボックスの横幅の半分の大きさをマイナスで指定します(margin-left: -250%)。これだけでボックスは中央に行きます。だけど忘れてはいけないのがどこを基準に配置するのか。深くを理解する必要はありません。実力がついてきたら自然と理解できます。というわけで【position: absolute;】を書きます。これでOKです。

#*******
{
width: 500px;
height: 500px;
background-color: #666;
top: 50%;
margin-top: -250px;
left: 50%;
margin-left: -250px;
position: absolute;
}


Copyright (C)2005 WEBっタメ All Rights Reserved.