本文ページ:記述方法

本文ページ:作成」で本文ページの外観まで完成したため、題の見栄え等の細かい点をCSSで見直し、どのように文章を記述するのかを説明しています。

細かい点の見直し

 これまで作成した本文ページは以下です。

本文ページの記述方法1

 細かく見ていくと以下の点が気になります。

本文ページの記述方法2

 文字が枠に寄りすぎています。

本文ページの記述方法3

 題も枠に寄りすぎていますが、もう少し飾り気が欲しいと思います。

 まずはこれらを修正します。

段落へのmargin適用

 トップページの時と同様に、文字が枠に寄りすぎている部分は段落に外側の余白であるmarginを設定し、枠に寄らないようにします。

【段落へのpadding適用】
p {
margin: 6px 4px;
}

 上記は上下に6px、左右に4pxの余白を設けています。この設定により以下のように文字と枠の間に余裕が出ます。

本文ページの記述方法4

題へのmargin適用と装飾

 題も同様にmarginを設定しますが、枠で囲う、塗りつぶす、背景に画像を入れる等して装飾もします。

【題へのmargin適用と装飾のためのスタイルシート】
#center h1 {
margin: 0px 4px 10px 4px;
padding: 6px 4px;
color: rgb(0,112,192);
background-color: rgb(185,205,229);
border: 1px rgb(149,179,215) solid;
}

.maincontents h2 {
margin: 0px 4px 10px 4px;
padding: 6px 4px;
background-image: url(../image/image.png);
}

 #center h1は余白や色を調整しています。.maincontents h2は1ページ内に副題を設けるために新たに定義しています。

 background-image: url(../image/image.png);はimageディレクトリ配下のimage.png画像を背景にする事を定義しています。

 htmlはcenter内部を以下のように修正します。

【maincontents部分のhtml修正】
<div id="center">
<h1>テント</h1>
<p> テントの使い方、購入時に注意する点等を説明します。</p>

<div class="maincontents">
<h2>テントの使い方</h2>
<p> テントの使い方、購入時に注意する点等を説明します。</p>
※以下同様
</div>

<div class="maincontents">
<h2>購入時に注意する点</h2>
<p> テントの使い方、購入時に注意する点等を説明します。</p>
※以下同様
</div>

</div>

 配置イメージは以下の通りです。

本文ページの記述方法5

ここまでの作成結果

 上記を反映してリンクの設定を全ての項目に行い、文書等を記述して保存後、ブラウザで表示すると以下のようになります。

本文ページの記述方法6

 上記は実際のサイズを縦横半分にしています。

 尚、.maincontents h2で指定した背景が斜線で表示されていますが、この画像はExcelで四角を描き、線の色で「線なし」を選んだ後、塗りつぶしで「塗りつぶし(パターン)」をチェックして斜線を選んでいます。前景色、背景色を選択する事で色も変更可能です。

本文ページの記述方法7

 これをPictBearで取り込んで保存した画像です。図が小さくてもデフォルトではリピートして継ぎ足してくれますが、継ぎ目が出来るため大き目にする必要があります。

内容の記述

 内容の記述はページの題と説明は以下の赤字部分に記述します。

【ページの題と説明の記述】
<div id="center">
<h1>ページの題</h1>
<p>ページの説明</p>

 メインコンテンツの副題と内容は以下の赤字部分を編集します。

【メインコンテンツの副題と内容記述】
<div class="maincontents">
<h2>副題</h2>
<p>内容</p>
※以下同様
</div>

 内容が増えた場合は上記のセットを追加していく事で対応出来ます。又、<p>タグは段落を示すため、</p>で閉じた後、<p>タグを追加する事で段落分け出来ます。

前のページ本文ページ:作成

  • このエントリーをはてなブックマークに追加