2006年10月31日

文書構造1

CSSデザインを実践するにあたって、大事なことは正しいHTML文章を作成しなくてはなりません。
HTMLにタグをその役割にしたがって正しく付けていきます。これをマークアップといいます。


たとえば、下記のブラウザでの表示をみてください。

以下はブラウザで確認した状態です

BEATLES 20世紀の奇跡

Discography

このブログの設定により<h2>タグが規定値より小さく表示されています。
正しいブラウザの表示はココをクリックしてください。

PLEASE PLEASE ME

  • アイ・ソー・ハー・スタンディング・ゼア
  • ミズリー
  • アンナ
  • チェインズ
  • ボーイズ
  • アスク・ミー・ホワイ
  • etc

WITH THE BEATLES

  • イット・ウォント・ビー・ロング
  • オール・アイヴ・ゴット・トゥ・ドゥ
  • オール・マイ・ラヴィング
  • ドント・バザー・ミー
  • リトル・チャイルド
  • ティル・ゼア・ウォズ・ユー
  • etc



「BEATLES 20世紀の奇跡」というタイトルが大きく表示されています。これは、下記のHTMLの記述を見てもらえればわかりますが<h1>と言うタグでマークアップしてあります。
けっしてデザインの見栄え上、文字サイズを大きくしたり太字にしたりしてはいけません。
あくまでも、このページの「見出し1」というタグを指定するのですよ。


当然「Discography」には「見出し2」という意味を持つ<h2>タグを設定してあります。


以下はHTMLへの記述です

<h1>BEATLES 20世紀の奇跡</h1>
<h2>Discography</h2>
<h3>PLEASE PLEASE ME</h3>
<ul>
<li>アイ・ソー・ハー・スタンディング・ゼア </li>
<li>ミズリー </li>
<li>アンナ
<li>チェインズ </li>
<li>ボーイズ </li>
<li>アスク・ミー・ホワイ</li>
<li>etc</li>
</ul>
<h3>WITH THE BEATLES</h3>
<ul>
<li>イット・ウォント・ビー・ロング </li>
<li>オール・アイヴ・ゴット・トゥ・ドゥ </li>
<li>オール・マイ・ラヴィング </li>
<li>ドント・バザー・ミー </li>
<li>リトル・チャイルド</li>
<li>ティル・ゼア・ウォズ・ユー</li>
<li>etc</li>
</ul>



「文書構造2」では、正しくマークアップされた文章に<div>タグを使って一固まりの情報としてまとめるお話をします。



posted by ひろりん at 02:55 | Comment(0) | 文章構造

2006年11月01日

文書構造2

文書構造1ではマークアップという作業を行いました。
見出しに相当する<h1>〜</h1>やここはリストですよという<ul>から</ul>タグなどです。

しかし、これらのタグは挟んでいる文章の要素を示しているだけで、詳細な説明には欠けています。

そこで、記述されている文章を<div>〜</div>タグで囲み1固まりの情報としてまとめてみます。しかし、これでは数種類の1固まりができてしまいます。そこで、この<div>タグの中に「id」を記述し他の<div>要素と区別することにします。

以下はHTMLへの記述です

<div id="midasi"> ← ここは見出しの部分ですと指示しています。
<h1>BEATLES 20世紀の奇跡</h1>
<h2>Discography</h2>
</div>← ここは見出しの部分の終わりですと指示しています。
<div id="honbun">← ここは本文の部分ですと指示しています。
<h3>PLEASE PLEASE ME</h3>
<ul>
<li>アイ・ソー・ハー・スタンディング・ゼア </li>
<li>ミズリー </li>
<li>アンナ
<li>チェインズ </li>
<li>ボーイズ </li>
<li>アスク・ミー・ホワイ</li>
<li>etc</li>
</ul>
<h3>WITH THE BEATLES</h3>
<ul>
<li>イット・ウォント・ビー・ロング </li>
<li>オール・アイヴ・ゴット・トゥ・ドゥ </li>
<li>オール・マイ・ラヴィング </li>
<li>ドント・バザー・ミー </li>
<li>リトル・チャイルド</li>
<li>ティル・ゼア・ウォズ・ユー</li>
<li>etc</li>
</ul>
</div>← ここは本文の終わり部分ですと指示しています。


上記のように<div>タグでhtmlファイルに記述してもブラウザでは何の変化もありません。この<div>タグにcssでデザイン的な命令をして行くんだということだけ、理解しておいてください。



posted by ひろりん at 18:51 | Comment(0) | 文章構造

広告


この広告は60日以上更新がないブログに表示がされております。

以下のいずれかの方法で非表示にすることが可能です。

・記事の投稿、編集をおこなう
・マイブログの【設定】 > 【広告設定】 より、「60日間更新が無い場合」 の 「広告を表示しない」にチェックを入れて保存する。


×

この広告は1年以上新しい記事の投稿がないブログに表示されております。