ウェブデザインをスタイルシートでおこなおう!

ホームページ作成スタイルシート編!スタイルシート倶楽部@ウェブマイスター
ホームページ作成総合支援ウェブマイスター
スタイルシート倶楽部トップ戻る
スタイルシートを使えばウェブデザインは思いのまま!
ページ管理も楽になり、大幅なデザイン変更も楽になっちゃうよ!
スタイルシートを使いこなして脱入門者になろう!

サイト作りの基礎を学びたい方は >> 本館 ウェブマイスター
さくらインターネット
たった125円という破格の値段で高機能なレンタルサーバー。業界最大手で安心して使えるよ。
3ヶ月無料キャンペーン実施中!! レンタルサーバーのSpeever
一番高いプランも今なら無料だよ

インデントとは、左に空白をいれて文章を右にずらすことである。
これを文章全体におこなうことで、読みやすさ、見た目が向上する。


たとえば、<h1>等で見出しを書いたあと、<p>で本文を囲むのが通常となる。
しかしこの場合、本文は見出しと同じ頭となり、見た目が普通となる。
それでもいいのだが、本文を見出しより右にずらすことで見易さが向上するので、使わない手は無い。


タグに詳しい人ならば、タグでこれが行えることを知っているだろう。
しかし、CSSを使えば思い通りに調節ができるので、CSSの使用をお勧めする。


CSSの例

 .indent {
   margin-left: 24px;
 }
 .indent2 {
   margin-left: 48px;
 }

このように2つの階層を用意しておくと、文章を綺麗に書くことが簡単となる。
文章をメインとするコンテンツではぜひ使ってもらいたい技である。

<使用例>------------------------------------------------------------

タイトル

内容1 ここは通常の内容がかかれ、多くがこれだけですむ部分である。
メインの段落となる。

内容2 さらに細かく種別が分かれる場合はこの深さを使う。
このように階層化することで、内容の区切りが一目でわかり、非常に読みやすくなる。

そして再び内容1と同じ深さにもどり、文章がつづく。
実際の使用例は、本館の各ページを見ると良い。

| ウェブマイスタートップ | ホームページの作り方 | スタイルシート入門 | PHP Tips | CGI/PHPソフト配布 | 掲示板 | ブログ | ショッピング | リンク集 |
(C) 2005 - 2007 ウェブマイスター