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

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

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



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


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

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. 骨格を作る言語HTML

  2. 見出しをつける

  3. 段落を意識する

  4. メニューをデザインする

  5. “page2.html”へリンクする

  6. FFFTPをダウンロード

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

ランダムピックアップ