一定期間更新がないため広告を表示しています


ちょっと生活に余裕が出てきたので更新したかったネタをひとつ。

一応Webがらみの仕事をしているわけですが、先日初めて知った事がありまして。

担当しているサイトってのが、メインデザインは外注で、
こまごました更新やら微調整、修正を自分らでやっております。

サイトの微調整で出てきがちなのがCSSの上書き。
や、きちんと大元を直してしまえばそれにこしたこと無いと思うんですが。

あっちのページ用のCSSをこっちのページでも使っていて、
大枠のCSSは共通なんだけど、その下層は違ってて・・・(これ伝わるかな)
で、こっちのページ用のCSSはべっこに上書き・・・ってな事をするとしましょう。
上書き用にべっこに用意したファイルに、私の書き方で記述したわけですよ。
すると、Firefoxではちゃんと上書きされて表示されたんですがIEだとダメ。

キャッシュかな?と思いキャッシュをクリアしてもダメ。
あーしてもダメ、こーしてもダメ。ってな事をやってとうとう降参。

外注さんに相談すると、IEは上書き用の記述と、元の記述の仕方が同じじゃないと認識してくれないとの事。

そう、外注さんのCSSの記述の仕方と私の記述の仕方が微妙に違っておりまして、

例えば外注さんの書き方は

.main{
margin-left: 18px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}


こんな書き方。

で、私の書き方が

.main{
margin:0 0 0 18px;
}


こう。

一応出力される結果は同じになるはず。

とーころが、いざ上書きさせようとすると、IEではダメなんだって!

具体的に実際やろうとした事は(ファイル名とかは適当)

.main{
background-image: url(../img/bg.gif);
background-repeat: repeat-x;
background-position: left top;
}


とかなっている物を、別ファイルに

.main{
background: url(../img/sub_bg.gif) repeat-x left top;
}


こう記述して上書きしようとしたわけです。
(私は短縮記述が好きだ)

・・・ダメなんだって・・・。IEだとダメなんだって・・・。
でも、これってIE Hackに使えるって事だよね??
文書構造を論理的に意味づけるのがHTMLなら、
装飾を施すのがスタイルシート(CSS)。

HTMLで最低限伝えたい事だけを記述し、スタイルシートで見栄えを整える。

スタイルシートを記述できる場所は3箇所ある。
1.スタイルシート用の外部ファイルを作成して、その中に記述
2.htmlファイルのheadの中に記述
3.HTMLタグに直接記述

この中でお勧めは、外部ファイルに記述する事。
「xxx.css」というファイルを作成し、その中に

body{margin:0;
background-color:#fff;}
p{color:red;}

等と記述していく。(HTMLファイル内のタグに直接記述する場合は違う書き方。)
htmlファイルの様に<html></html>等の宣言は不要。
(文字コード指定は一応必要)
あとは反映させたいhtmlファイルの<head></head>内に
<link rel="stylesheet" type="text/css" href="xxx.css">
と、言うように外部ファイルの読み込みをする。

サイトが複数ページで構成されている場合、同じ外部ファイルを読み込ませればサイトデザインの変更の手間が一度で済む。
(2.や3.の方法だと、それぞれのページを書き直さなくてはならない。)

HTMLとCSSに分ける利点は更新する作業の手間が軽減するという所にもあるという話。

とはいえ、サイト全体で一箇所だけしか出てこない微調整などはタグに直接書いたりするけどね・・・私。
タグの持つ役割のお話をしたのは良いが「どれが何なのさー」というご意見が来るかもしれないので、
今回は具体的にそれぞれのタグの役割の説明。

代表的なものだけをのっけます。
メタタグとかは各自でよろしく。

【html】
<html>から</html>でワンセット。最上位要素。
こっからHTML文書が始まるぞー!という宣言。
</html>は、ここでHTML文書が終わりだー!と言う意味。
この間に記述された文書がブラウザに反映されます。
反映されるだけで、見えるとは限らない。

【head】ヘッダータグ
<head>〜</head>
「ここからヘッダー情報だ!」〜「ここまででヘッダー情報終わり!」
まだブラウザで目視できない範囲。
ページのタイトルなどもこの中に記述します。

【title】タイトルタグ
<title>〜</title>
「これはこのページのタイトルよ」という意味。
ページのタイトル。ヘッダータグの間に記述します。

【body】ボディタグ
<body>〜</body>
ブラウザで目視できる範囲。
本文を記述するエリア。好きな事を書くがいいよ(犯罪にならない程度に)

【hx】見出しタグ
<hx>〜</hx>
h1,h2,h3,h4,h5,h6と6レベルある。
数字が小さいほど見た目は大きくみえる。
それだけ見出しの役割が大きいという事なので見た目に惑わされないよう。
h1の前にh2が来たりするとおかしい。
h1無いのにh2使ったりするのも変。1から始めましょう。
一幕二場の後に一幕宣言するような違和感。

【p】段落タグ
<p>〜</p>
paragraphの意味らしいですよ。
一つの段落をこのタグで囲う。

【br】改行タグ
<br> (XHTMLの場合は<br />と記述)
line breakの意味。
スペース空けるために<br><br>とか連続で記述するのは好ましくない。

【div】ディブタグと呼んでます。
<div>〜</div>
divisionの意味。
ボックスというか、ブロック属性というか、一つの塊を示すタグ・・・。

【span】スパンタグと呼んでます。
<span>〜</span>
汎用インライン属性。

【img】イメージタグ
<img src="" alt=""> (XHTMLの場合は<img />と記述)
画像を表示する時に使うタグ。
「src="xxx"」xxxに参照する画像ファイルのパスを記述。
「alt="xxx"」xxxに画像の代替テキストを記述。画像が見えなかった時に代わりに、ここに書かれた文字列が表示される。

【a href】アンカータグ
<a href=""></a>
別ページあるいは同ページ無いの指定された箇所に表示を飛ばす。
「リンクを張る」と言う。
「<a href="xxx"></a>」xxxにリンク先のURIを記述。

と、これだけあればページは作成できます。

今度はCSSの事でも記事にします。
以下の単語達はもっと広い意味で使われたりしますが、ここではHTMLに特化して記事を書くことを宣言します。

【マークアップとは】
いわゆる「タグ」で文字を囲い、文章の構造や修飾情報などを文章中に記述していく事。
HTMLなどが代表的な「マークアップ言語」。
(e-wordsより省略抜粋)

【タグ】
タグというのは、HTML文書を書く際につかう特殊な文字列で"<html></html>"や"
<body></body>"等と記述。
<xxxx>(開始タグ)から</xxxx>(終了タグ)の間に本文を書く(例外もある)。

【文章の構造や装飾情報】
文章の構造というのは、ここからここまでは見出しですよとか、ここからここは表ですよ、等等。
修飾情報というのは、ここからここは太い文字でね、等等。


私は"マークアップ"とは、文章中にある文字列に役割を割り振る事、ではないかなと解釈している。

数年前までは、われわれ人間がブラウザごしに目で見た状態のみを意識していたサイトが多かった。
例えば
例1)ここは文字を大きくしたいから、文字が大きくなる<h1></h1>で囲おう
例2)画像の隣に文字列を配置したいから、<table>タグを使おう。
等。私もやっていた。
所がこれは機械側からすると理解できない記述になる。

例1の"<h1></h1>"などの<hx>タグは"見出しタグ"と言って、"見出し"の役割になる。

例文「こないだ指輪を排水溝に流しそうになって<h2>すげーあせったよ!</h2>」
これは人間が見る限り「すげーあせったよ!」の部分が大きくなり、前後に改行が入るだけで問題はあまり感じない。
「あらまぁ、そんなに驚いたのね」くらいのもんである。
が、機械がこれを読むと「排水溝に流しそうになって」までで文章が終了し、その後「すげーあせったよ!」と言う見出しの本文が始まるんだろうと解釈する。

例2の場合、一つのセルにポツンと画像があり、隣のセルに文字列が入っているだけの謎の表になる。

でもって何故機械の事を気にするのかと言うと、ロボット検索の引っかかり具合などに影響するのと、読み上げソフト等を使った時の影響。
この二つが大きな理由かな。きっとな。

例1で例えると。
ロボット検索がこのページを訪れた時『このサイトのこのページは「すげーあせったよ!」という話題について取り上げているんだ〜』と解釈。
なので「すげーあせったよ!」と言う文字列で検索すると、このページが引っかかるかもしれない。まぁ稀だと思いますが。
とまぁ、こういった解釈をされてしまうので、望んだ通りのユーザが自分のページを見てくれる確率は減る。

あと、目の不自由な人が読み上げソフトを使ってサイトを訪れた時、先述した通り「排水溝に流しそうになって」で文章が途切れて伝わる事になる。
「流しそうになって何?!すっげー気になるんですけど!」という事態を招く。

役所で「受付」って書いてある所にいったら、受付じゃありませんでした。とかなってたら不愉快になると思う。

そんなわけで、タグの持つ役割を理解し適材適所に。
素敵な「マークアップ」を心がけましょう。
なんちゃってWebコーダーがこういった質問に答えるのは大変おこがましいとは
思うのですが、一応「心がけている」って事で。

正しくHTMLを書こうと心がけている人に5つの質問 : 雑記帳: der Gegenwartさんより。


HTML文書を制作する際に使用しているプログラムをお答えください。(Webプログラムも含む)

最近はリンクシェアのez-HTMLをメインにつかっています。Terapadと併用ぎみ。
たまにDreamweaverも。


採用しているDTDとその理由をお答えください。

HTML4.01 Transitionalが多いです。厳しすぎないのがいいですね(?)


何故正しくHTMLを書いているのですか?

正しく書けているかは怪しいもんですが、正しく書こうと心がけているのは後々の修正や見易さ、仕事で他の人が見るかもしれない事を考えて。
正しく書いておけば便利な事はあっても困ることはないから。


W3CとWHATWG、どちらに期待してますか?

WHATWGの事を詳しく理解していないので何とも言えませんが、(VHSとベータくらいの関係だと思っていた)
WHATWG の規格がW3CのHTML5のドラフトに採用される動きがあるらしいので、仲良しで良いのではないでしょうか(回答になってないな)


あなたにとってHTMLとは何ですか?

何だろう。・・・パズル?



以上。