HTML

WEBサイト作成

ページ定義タグと構造化タグとdivタグの関係


HTMLの変遷に置いてかれた・・・

僕は2000年にジャカルタからバリ島に引越し、会社立ち上げや家具・雑貨の輸出業務に伴う仕入れ・梱包等肉体労働で多くの時間を取られるあまり、WEBの技術変遷を追うことができない時期がありました。

ちょうどその時期に世間ではHTMLのバージョンアップが急激にブーストし、1999年のHTML4.01でHTMLは構造の定義に特化し、装飾はCSSに任せるという大きな方向転換がなされ、HTMLタグ自身に属性を書くという時代からスタイルシートの時代に入りました。

/*HTMLタグに属性を書く。フォントサイズの規定値3*/
<font size=5 color="red">

/*スタイルシートのfont属性を使う*/
<font style="font-size:12px; color:red;">

2001年には次世代のXHTML1.1が出されるともうわけわかめ状態で、文書型定義(Document Type Definition)が複数乱立し、しかも記述方法が長いという弊害が発生してきましたが、2014年に正式にW3Wの標準規格となったHTML5ではこのDTDの出だし部分が短いので済みます。

/*HTML 4.01 Transitional DTD*/
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">

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

/*HTML5*/
<!DOCTYPE html>
<html lang="ja">

DOCTYPEは「Strict(厳密な)」「Transitional(移行期)」「Frameset(フレームセット用)」の3種類ありまして、書き方によってブラウザは「互換モード」「標準準拠モード」に切り替わり、表示状態に差が出てきます。

ページ定義タグと構造化タグ

僕は1994年頃にWindows3.1搭載のIBM PCを購入して趣味のインド音楽のサイトを立ち上げたのですが、htmlとheadとbodyの3つは当時から既に存在するページ定義タグであり、全体をメタデータ部(HTMLドキュメント自身の情報)とコンテンツ部に分ける目的があります。headタグ内の情報はブラウザ上表示されません。


<html>
    |-<head></head>
    |-<body></body>
</html>

ページ定義タグで定義されたコンテンツ部に対してHTML5では構造化タグ(header, nav, article, aside, footer)でWEBサイト全体を「ヘッダー領域」「ナビゲーション領域」「コンテンツ領域」「サイドバー領域」「フッター領域」の5つに区切ってレイアウトします。


<body>
    |-<header></header>
    |-<nav></nav>
    |-<article></article>
    |-<aside></aside>
    |-<footer></footer>
</body>

コンテンツの意味のカタマリはdivタグにID属性やclass属性で定義するのが基本ですが、ヘッダーとかナビゲーションとかメジャーなヤツはHTML5のタグで標準装備してあげましょう、という趣旨です。

divタグのid属性とclass属性に対してCSSでレイアウト

で、ページタグと構造化タグで骨格を定義した後にはじめて、divタグでid属性とclass属性を定義しCSSを使ってレイアウトを整えていきます。

CSSは1999年頃にCSS2.1の仕様が確定してからCSS3にいたるまで機能が追加されるのみで仕様変更はないため、HTMLのようにバージョンによって表示が変わるということはありません。

id属性とclass名にネーミングルールはありませんが、一般的な作法として

  1. containerをbody直下に置いてheaderからfooterまでのコンテンツ全体を囲む
  2. wrapperでheaderやnavやasideを囲む

のように使われます。

html

body

container

header-wrapper

left

ブロック要素をまたなんでわざわざwrapperで囲むか?

WEBサイトのデザインで気をつけるべきことは「読みやすさ」と「見た目の良さ」だと思いますが、ブラウザ幅一杯に文字が広がっていると読みにくいし、かといって全体が両サイドから締め付けられると窮屈な印象を与えます。

このブログテーマもそうですが、最近のレスポンシブなテーマはほとんどと言っていいほどヘッダーにブラウザ幅一杯に背景画像を配置したり、キービジュアルをウィンドウの中央部に配置して見た目のインパクトを重視しています。

  1. 読みやすさ > 両サイドにスペース
  2. 見た目の良さ > 背景画像をブラウザ幅一杯に広げて開放する

header領域やnav領域をわざわざwrapperで囲みなおすのは、背景画像をブラウザ一杯に広げて開放感を出すためであり、このブログのヘッダー部分もそうしています。

犬たちまたサイトのウィジェット部分に最新のエントリーをサムネイル付きで表示して文字を右に回り込ませています。
これを実現するには画像のimgタグに「float:left;」を設定した後、親要素としてwrapperで囲って「overflow:hidden」でフロートの解除をしています。ちょうどこんな感じです。
<div id="wrapper-dog" style="border: 1px, solid, black; overflow:hidden;">
<img src="test_float.jpg" style="float:left; margin-right:10px;"/>
<p>ここにコンテンツ</p>
</div>





おすすめ記事一覧

大統領選挙で考えたギャップにハマるということ 1

ギャップにキュンとするというのは人間の本能みたいなもので、ジョコウィの私利私欲のない素朴なおじさん像と、その実強力なリーダーシップを発揮する実務派という内面が、一見普通の人だが実はスゴイというギャップ好きのインドネシア人に大ウケして、大衆は一種の集団催眠状態にあるようです。

情報の質のレベル 2

見える化された結果を共有化することで問題点が共通認識されますが、共有化が進むことで情報の持つ希少価値が薄れて困る人間がいる場合、有益な情報を独占することでポジションを高めようという政治力が働きます。

インドネシアのスタバの店員にありがたい人生の教訓を教わった件 3

いつものスタバでいつものアイスコーヒーを注文していると、だいたいなじみの店員が「今日は珍しい時間に来たねー」とか「今日もいつものアイスでいいのかなー」とか馴れ馴れしくフレンドリーに話しかけてきます。

宗教によって異なる「死んだらどうなる」の考え方 4

キリスト教もイスラム教もともにユダヤ教から派生した宗教であり、それぞれイエス・キリスト(本人が神)またはアッラーという唯一無二の神を信じます。

株価操作なんてインドネシア株では当たり前 5

株価は売り注文と買い注文により変動し、大量の売り注文を買う注文がたくさん入れば、他の投資家達は「俺も俺も」と続くことで株価が上がります。

心臓に毛が生えたインドネシア人のずうずうしい転職活動を応援してみた 6

インドネシア人は秘密の話は誰かに暴露しないと精神の安定を保てない人が多いため、内緒の話に情報の希少性は少なく信憑性も低いことが多いので、「ここだけの話」という枕詞付きで聞かされる話は話半分に聞いておいたほうがいいかもしれません。

日系企業のインドネシアでの存在意義 7

今のまま日本の人口減が続けば、内需は縮小の一途をたどるわけで、そうなると日本国内市場だけで生き残るのは難しいと判断する国内企業が、海外市場に活路を見出そうとするのは必然です。

チャンスはあるが勝てる分野を見つけるのが難しい 8

実際にインドネシアに住んでみて、自分で動いて人と話しをして、現地の事情を少しずつ理解していくにつれて、インドネシアで起業することが意外と手強いことに気づき、その難しさの原因は、高い送料と関税であったりローカル企業との競争であったり、就労ビザ(IMTA)や外国人技能開発基金(DPKK)などのランニングコストの高さであったりします。

インドネシアのシステムインテグレーション業界 9

先日JETRO(日本貿易振興機構)さんと、インドネシアの中小企業のIT投資について意見交換させていただく機会をいただいたのですが、そこで「システム投資のコストメリットはどのように説明できるのか」という、システムインテグレーターの存在価値にも関わる重要な問題提起がありました。

肉体と精神と心と魂 10

「Body and Soul」といえば、昨日の内閣改造に伴う人事で内閣府政務官に内定した自民党の今井絵理子参議院員がメンバーだったSPEEDのデビュー曲であり、インドネシアの老舗女性ファッションブランド名でもあります。

ジャカルタのラーメン市場 11

僕がインドネシアに初めて来たのが1997年10月、インドネシア語は分からないし、仕事は辛いし、周囲の人間は理不尽だし、一時期日本に帰りたくて仕方がない時期がありましたが、当時自分をかろうじてインドネシアに繋ぎ止める心の支えとなっていたのが、協栄プリンスビル(今のWisma Keiai)の日本食レストラン「五右衛門」であり、ここでキムチラーメンを食べることが唯一の楽しみと言っても過言ではありませんでした。

ブランド力、技術力、資金力の3要素 12

1998年のジャカルタ暴動後、ルピアが暴落し海外からのドル建て債務を抱えた国内企業が利子の支払いに苦しんでいた頃、僕は外貨が獲得できるインドネシアでの新しいビジネスを探していました。

日本とインドネシアの間でのタイムマシン経営が通じなくなっている件 13

先進国と後進国との間にある流行のタイムラグを利用して、先進国での成功例を後進国で実践するビジネスモデルをタイムマシン経営といいますが、インターネットの普及に伴い情報がフラット化してしまい、モノと情報のタイムラグが限りなく小さくなった今、先駆者である中小零細同業他社が乱立し市場が出来上がったところに、後発の大手が参入し先発零細を駆逐していく、という典型的な負けパターンにはまります。

サリナデパートとマクドナルド 14

本日5月10日を最後にインドネシアのマクドナルド第1号店であるサリナデパート店(Sarinah)が閉店になりますが、ジャカルタのショッピングモールが新しいコンセプトでモダンにリニューアルされ続ける中で、僕がインドネシアに来たばかりの20数年前には、若者の待ち合わせ場所の定番でもあったサリナデパートやブロックMのパサラヤ(Pasaraya)などは完全に時代に取り残されてしまいました。

不景気の歴史 15

僕がインドネシアに来てからこれまで何度か経済不況を見てきましたが、今回の新型コロナウィルスの感染拡大により、間違いなく景気後退しますので、数年後にはこれがコロナショックとかコロナ不況とか呼ばれるようになるのかもしれません。

日本のバブル経済崩壊後とインドネシアの通貨危機後 16

自分が大学に入学したのがバブル経済末期の1991年、土地も株価もMAX爆上げして、三菱地所がアメリカの象徴であるロックフェラーセンタービルを買収し、ジュリアナ東京でワンレンボディコン(登美丘高校ダンス部のバブリーダンスみたいなやつ)のお姉さん達が扇子振って踊っている時期でした。

内需と外需の自国経済に及ぼす影響 17

公共事業投資を行っても、お金が企業内や個人の貯蓄に滞留してしまい国内消費が増えないのが日本の状況であり、国内消費は増えても消費材の輸入品比率が高く、国内資産が海外に流出しているのがインドネシアの状況です。

2019年の総選挙を前にインドネシア政治史のおさらい 18

来年の大統領選挙(Pemilu Pilpres Pileg Indonesia 2019)に向けての選挙運動(Kampanye)を解禁するにあたり、投票用紙に印字される順番はジョコウィ現職大統領・マフル副大統領候補組が1番、プラボウォ大統領候補・サンディアガウノ副大統領候補組が2番と決まりました。

コーヒーをもっと楽しくもっと美味しく 19

インドネシアは北回帰線と南回帰線をはさむコーヒーベルトに位置するコーヒー栽培に適した国で、1602年の東インド会社の進出を契機にオランダの植民地支配が300年以上続き、その間アラビカ種のコーヒーが持ち込まれ、気候のいい高原地帯で栽培が開始されました。

インドネシア人の悪魔祓い 20

人間誰しも自分の中に悪魔が潜んでおり、それが何らかのきっかけで表面に出て来るという考え方自体には、背景に宗教が有るか無いかの違いだけで、基本的に理解できる話であり、それを信じるか信じないかは別として、そういう考えがあることを認めることは大切なことだと思います。

-WEBサイト作成

© 2020 バテラハイシステム Powered by STINGER