Webふぉれすとうぇぶ実験室：CSSを使って文章を表現してみよう


	Web制作、Webデザインのスキルアップに役立つ情報をお届けします！みんなが癒され、元気になるWebを目指します。

Webふぉれすとトップ > うぇぶ実験室


	CSSを使って文章を表現してみよう

今回の実験ではこのような感じでCSSを使用してみました。→CSS説明用ページ

【実験1】元原稿をCSSでスタイルを整えていく。
		最初に、元となる文章を用意してみました。本実験では、ここから順番に設定していきたいと思います。用意した文章


		元となる文章をタグで囲みます。タグで囲んだ状態今回は段落の調節（行間の指定:150%）をしているので、<br>は使用しませんでした（<br>タグを使うと行間のCSS調整が難しくなるようです）。


		CSSで見出しや文章のスタイル、余白の調整をします。 CSSでスタイルを整えた状態　 CSSでスタイルを整えた状態をキャプチャーで比較してみる
▼Internet Explorer5.01(Windows,Macとも）で意図したとおりの表示になりました。 ▽Netscape6.2（Windows,Macとも）では、均等割付のCSS設定が効いていないので、Internet Explorerのように文末がそろって表示されていませんでした。

【実験2】CSSをあまり使わずにスタイルや余白の調整をする。
		余白を<table>タグを利用して調整し、文字色、サイズはCSSで調整してみました。 ※【実験2】では見出し部分に<h1>、<h2>タグを使用していません。 <table>タグも利用した状態　 <table>タグも利用した状態をキャプチャー比較してみる
▽【実験2】では見出し部分に<h1>、<h2>タグを使うと、テーブルの余白がブラウザによって異なってみえてしまいました。

｜ページのトップへ｜Webふぉれすとトップへ｜

Copyright(c)2002-2004 Step-First All rights reserved. [About WebForest]
E-Mail：webforest@step-first.com