今までにやったことを用いて、コンテンツを装飾する

コンテンツの装飾、となっていますが、ここでやりたいことは、余白のコントロールです。

問題。
上の写真(今の状態)から、下の写真にしてみましょう。



※ポイントは、文章の左と下に余白が出来ているところです。
また、一番上の文章だけでなく、下の二つの文章にもインデント(余白)をつけましょう。


では、やってみてください。
次のページで答え合わせをします。

HTML:

<div class="content_box">
 <p> 文章(長いので省略)。</p>
</div>
~中略~
<div class="content_box">
 <p> 文章(長いので省略)。</p>
</div>
~中略~
<div class="content_box">
 <table>(省略)</table>
 <p> 文章(長いので省略)。</p>
</div>

※指定する場所が複数あるので、classです。
※最後だけ、

<table>

タグを含めて、ボックスにしてしまいましょう。

CSS:

.content_box {
	margin: 0 0 50px 40px;
}

できましたか?

では、次に行きましょう。


関連記事

  1. CSS導入の最後の準備

  2. 自分で集客対策ができる

  3. 2カラムデザインを実装する

  4. ブロックのサイズを指定する

  5. ページ全体を装飾する

  6. 代替テキストを表示する

お手本ナビの無料HPデザイン

ランダムピックアップ