2442520 ランダム
 ホーム | 日記 | プロフィール 【フォローする】 【ログイン】

こんぱすコーチの全方位日記

【毎日開催】
15記事にいいね!で1ポイント
10秒滞在
いいね! --/--
おめでとうございます!
ミッションを達成しました。
※「ポイントを獲得する」ボタンを押すと広告が表示されます。
x

PR

カレンダー

カテゴリ

キーワードサーチ

▼キーワード検索

2008年04月18日
XML
昨日の続編です。

プロのWeb制作者にとっては当たり前のことですが、
僕が作成するWebページはCSSに重きを置いています。

CSSとは「カスケーディング・スタイル・シート」の略。
用語説明はこちらをご覧ください。

文書というのは何からできているでしょうか。
分解していくと、「見出し」があって「本文」がある。
「本文」の中には「箇条書き」も出てくることがありますし、
「表」もあります。
ときには「画像」なんてのも入っていたりします。
そういえば「見出し」にも「大見出し」「中見出し」「小見出し」と
ランクの異なる種類がありますよね。

このように文書を構成する要素はさまざま。
で、本来HTMLというのはその構成要素を
定義していく言語なのです。

つまり、
1)「この行は『見出し』だよ」
2)「ここからここまでは『本文』だよ」
3)「これは『箇条書き』だよ」
といった感じ。

で、実際のHTMLはどうなっているかというと、
1)→<h1>●●●</h1>『見出し』
2)→<p>●●●………</p>『本文』
3)→<li>●●●●</li>『箇条書き』
というぐあいに、
『タグ』と呼ばれる<>で表現した記号を挟むことで定義します。

このように文書の構造を取り決めたのがHTMLであり、
もともとは書式情報を持っていません。

ところがこれをブラウザ(インターネット・エクスプローラ等)で
「カラフルに、好きなように表示させたい!」
という要求が出てくるのは当然。

そこで、
「『見出し』は画面上センタリングにして
文字サイズは12ポイントで、文字色は赤で……」
なんていう書式情報をHTMLに埋め込もう、
ということになります。

これをHTMLのタグ内に入れると、こんな感じになります。

<h1 align="center"><font size="12pt" color="red">●●●</font></h1>

実際に表示させると↓

●●●



でもこれ、意外に大変。
というのも同じ属性の見出しタグすべてに
これらの要素を入れないといけませんから。

これをCSS化するとどうなるか。

h1{
font-size:12pt;
font-color:red;
text-aline:center;
}

↑こういう記述をCSSファイルに仕込んでおき、
本文のHTMLに関連づけておきます。
すると本文上では単に「<h1>」を入れておくだけ。
あとはブラウザが両方を読み込んできちんと解釈し、
上とまったく同じ体裁で表示するのです。

たとえば車のボディを作るときに、
1台ずつハンマーで打ち出していくのが昔のやりかた。
今は精密な金型を作ってプレスしていく。
どっちが生産性が高いか、言わずもがなですね。
CSSを使ったWeb制作は、さも金型プレスと似たところがあります。

こうなるとHTML側は単に文書構造を記述するのみ。
書式情報はCSSにまとめる、という役割分担ができ、
データ管理がとてもやりやすい。

たとえば見出しの文字サイズを
12ポイントから15ポイントに変更したいとします。
HTMLにすべての書式を書き込んでいると、
すべての見出しに修正を入れないといけない。
人間が手で修正するので修正が漏れることもあります。
しかしCSS化しておけば、CSSの書式定義を1箇所直し、

h1{
font-size:15pt;(←「12pt」を「15pt」に変更)
font-color:red;
text-aline:center;
}

とするだけで、すべての見出しが
15ポイントで表示されるようになります。

それに、HTML側のデータが少なくて済むので、
Web画面を開くスピードも心持ち速くなります。

ちなみに「知る会HP」のこちらの画面の見出し。

実際のHTMLでは、
<h1>講演会・寄稿アーカイブ館</h1>
としています。なんの変哲もない見出しタグです。

で、CSSの方はどうなっているかというと、
h1 {
font-size:1.5em;【文字サイズは基本の1.5倍】
background-image:url(../img/h1.gif);【h1.gifを背景画像に】
background-repeat: no-repeat;【背景画像は繰り返し表示しない】
text-indent: 40px;【テキストは左端から40ピクセル目から開始】
line-height: 50px;【行間は50ピクセル】
margin-bottom: 10px;【下辺と次行の間を10ピクセル空ける】
margin-left: 5px;}【左端と行の左辺の間を5ピクセル空ける】


とまぁこんな感じでかなり細かい書式設定をしています。
今の商用Webは、このCSSを使うことが大前提。
こんなところも「プロ風に見せる」という小ワザを利かしています。


ちゃんとCSSするためのスタイルガイド入門





お気に入りの記事を「いいね!」で応援しよう

最終更新日  2008年04月18日 21時06分07秒
コメント(4) | コメントを書く
[パソコン・ネットワーク・家電・ケータイ] カテゴリの最新記事


■コメント

お名前
タイトル
メッセージ
画像認証
別の画像を表示
上の画像で表示されている数字を入力して下さい。


利用規約に同意してコメントを
※コメントに関するよくある質問は、こちらをご確認ください。


Re:Web作成の流儀2-CSSでスッキリHTML(04/18)   久住浩 さん
htmlまでは分かるのですが、CSSはお手上げです。
なるほど、と思って読みました。

htmlよりも読み込みは早くなるとは目鱗でした。 (2008年04月18日 23時21分50秒)

Re:Web作成の流儀2-CSSでスッキリHTML(04/18)   裏猫 あ~ さん
(T-T)ちっとも判りません。
自分のHPもお手軽ソフト任せで、
未だにブログにリンクを張ることも出来ず・・・・
どうやら私の頭は、この手の話題になるとエラーがでるようです。(^-^;)
(2008年04月19日 11時55分13秒)

久住浩さんへ   まさやん0386 さん
>htmlまでは分かるのですが、CSSはお手上げです。
>なるほど、と思って読みました。

WordからHTMLに変換しても、自動的にCSSができあがります。ただマイクロソフトが勝手に定義した内容も含まれるので、基本的には推奨されていませんが…。


>htmlよりも読み込みは早くなるとは目鱗でした。

そうなんです。相対的にHTMLのファイルサイズが小さくなるので、読み込みがその分早くなるんです。
(2008年04月19日 19時52分18秒)

裏猫 あ~さんへ   まさやん0386 さん
>(T-T)ちっとも判りません。

すみません、退屈な話につきあわせてしまいました。
実はもうほとんどオタクの世界ですね(^^;;;
(2008年04月19日 19時53分26秒)

フリーページ

お気に入りブログ

takaakパパのDIY… takaakさん
ねこまた徒然草 nekomata1963さん
コシヒカリコーチN… コシヒカリコーチさん
ゆめびより ゆめこう… ゆめこうぼう 桜餅さん
モンドの親子未来塾… モンド父さん
Twitterでは呟ききれ… アンビンバンコさん
鳥取・島根で田舎暮… 夢家工房さん
モールスキンとめぐ… 日曜日の羊さん
頑張れ!PTママ!… 四葉2014さん
のどかな農家の暮らし korokoro-goさん

コメント新着

タウンライフアフィリエイト運営事務局@ タウンライフアフィリエイト運営事務局でございます 平素は大変お世話になっております。 タウ…
丘Bar(おかば~る)@ Re:『マッサン』最終回(03/28) 晩酌。という語がずっと頭について離れな…
丘Bar(おかば~る)@ Re:『マッサン』最終回(03/28) 晩酌。という語がずっと頭について離れな…
たかたか@ Re:もし日本の線路が○○だったら…?(02/06) おのれイギリスめが!(笑) 在来線も標準軌…
lr4 @ Re:チョー怖い駅(12/06) 電車でDというゲームでもキャラがホームの…

ニューストピックス


© Rakuten Group, Inc.