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

<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>


聖愛中学高等学校
http://www.seiai.ed.jp/
Last Modified