もくじ

段組レイアウトのための元データ

注意

このページはbody内の内容を書き換えてはいけません

スタイルシートの記述を加えて、いろいろなレイアウトを作ります。

元データ

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>テーブル</title>
<style type="text/css">
/* ここにスタイルを書く */
</style>
</head>

<body>
<div class="header" id="top">
<p class="navbar"> <a href="index.html">総目次へ</a> </p>
<h1>スタイルシート</h1>
</div>

<div class="menu">
<h2>もくじ</h2>
<ul>
<li><a href="#top">スタイルシートの誕生</a></li>
<li><a href="#top">文の構造と見栄えの分離</a></li>
<li><a href="#top">どこに書くか</a></li>
<li><a href="#top">基本的な書き方</a></li>
<li><a href="#top">いろいろなセレクタ</a></li>
<li><a href="#top">よく使うテクニック</a></li>
<li><a href="#top">プロパティの一覧</a></li>
<li><a href="#top">スタイルシートで整形</a></li>
</ul>
</div>

<div class="main">
<h2>はじめに</h2>
<p>ここではウェブページのレイアウトにスタイルシートを使うことを考えます。かつてはテーブルを使用していました。これは比較的古いブラウザでもテーブルならば問題が生じなかったことと、古いブラウザがスタイルシートを間違って解釈するような状態にあったからです。スタイルシートを無視してくれればまだやりかたがあったのですが。</p>
<p>ウェブページは環境の異なるコンピュータからでも、見やすく内容が理解しやすいようにつくります。最近では携帯端末のように画面が小さいものもあります。どんなコンピュータから見ても同じレイアウトで見えるようにしたいという要求もありますが、画面が小さい時にはそれに合わせたレイアウトになってほしいという要求もあるわけです。画像がたくさんあって見た目に楽しいという要求ばかりではなく、状況によっては時間のかかる画像を出さずに、文字だけをみたいという要求もあります。</p>
<p>ワープロのように1行の文字数を決めてしまえば、レイアウトはしっかり決まります。でも小さな文字が読みにくいという人もいます。ウェブページはどちらよりの設定もできますが、どちらかというと1行の文字数を決めないやり方が普通です。</p>
<p>ワープロのようにレイアウトを崩さず、印刷時にもページごとにきちんとレイアウトされたものにしたいのならhtmlでなくpdfの形式にします。pdfをリンク先にすれば大抵のブラウザはプラグインを使ってpdfファイルを表示してくれます。</p>
<h2>更新情報</h2>
<p>「よく使うテクニック」に文字のリンクをボタンに見せるスタイルシート設定法を加えました。</p>
<p>「いろいろなセレクタ」にbefore疑似要素を加えました。</p>
</div>

<div class="footer">
<hr>
<address>
聖愛中学高等学校<br>
<a href="http://www.seiai.ed.jp/">http://www.seiai.ed.jp/</a>
</address>
</div>
</body>
</html>

ここに使った、 class="header", class="footer", class="navbar", class="main", class="menu" などの用途に使う新しい要素、header, footer, nav, article, aside, section, main などがHTML5には用意されています。これを使うことで、</div>が連続して、どの部分の終わりかがわからなくなることが防げます。

しかし、まだブラウザにより扱いができない可能性もあり、使用方法についてもまだ十分に定着しておらず、かえって煩わしい部分がありますので、ここでは今までどおりの一般的なマークアップにとどめておきます。