トップページ:記述方法

トップページ:ボックス配置」まででトップページの外観が殆ど完成したため最後に微調整を行い、どのように文章を記述したりリンクを設定するのかを説明します。

細かい点の見直し

 これまで作成したトップページは以下です。

トップページの記述方法1

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

トップページの記述方法2

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

トップページの記述方法3

 項目が縦に並んでいるため、右に無駄なスペースが出来ています。

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

段落へのmargin適用

 文字が枠に寄りすぎている部分は段落に外側の余白であるmarginを設定し、枠に寄らないようにします。

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

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

トップページの記述方法4

中央でリスト項目と回り込みの適用

 中央の項目が縦に並んでいる部分はリスト項目と回り込みを使って横2列に表示します。

トップページの記述方法5
【中央でリスト項目と回り込み適用のためのスタイルシート】
.maincontents ul {
margin: 16px 0px;
padding: 0px 4px;
}

.maincontents li {
width: 229px;
margin: 0px 0px 4px 0px;
padding: 0;
list-style-type: none;
float: left;
}

 .maincontents ulはクラスのmaincontentsの中で最初から定義されている<ul>タグを使った場合の定義という意味です。このため、subcontents等他のボックスの中でulを使ってもこの定義は反映されません。

 <ul>タグはリスト項目を囲うようにして使われ、デフォルトではリスト項目の頭に・を付けて表示します。marginでは上下の余白を指定しています。又、paddingによって枠に寄り過ぎないように左右4px余白を設けています。paddingやmarginは○px △pxと記述すると上下、左右の定義になります。

 .maincontents liもクラスのmaincontentsの中で最初から定義されている<li>タグを使った場合の定義という意味です。<li>タグは<ul>タグに囲まれた場合、リスト項目を羅列する事で・を付けたリストとして表示出来ます。

トップページの記述方法6

 list-style-type: none;はこの・を付けずにリスト表示する定義です。

 float: left;により左に回り込む事で次のリスト項目を右に表示しています。

 widthはcenterの幅が468px、左右に1pxの枠と4pxの余白を設けており、その中にリストを2つ横に並べるため229pxになります。

トップページの記述方法7

 htmlはmaincontents部分を以下のようにulで囲った中にliを羅列するように書き換えます。

【maincontents部分のhtml修正】
<div class="maincontents">
<h2>キャンプ用品の紹介</h2>
<ul>
<li>テント</li>
<li>寝袋</li>
※以下同様
<div class="clear"></div>
</ul>
</div>
※もう1つのメインコンテンツも同様

 <div class="clear"></div>で回り込みを解除するのを忘れないようにして下さい。

左右サイドバーのリスト項目の適用

 中央と同様に左右サイドバーの項目もリスト項目を適用しますが横に並べる必要がないためfloatは不要です。又、既に作成しているサイドバーのボックスと幅を合わせるためwidthの指定も不要であり以下になります。

【左右サイドバーのリスト項目適用のためのスタイルシート】
.subcontents ul {
margin: 8px 0px;
padding: 0px 4px;
}

.subcontents li {
padding: 2px 0px;
list-style-type: none;
}

.news ul {
margin: 8px 0px;
padding: 0px 4px;
}

.news li {
padding: 2px 0px;
list-style-type: none;
}

 リスト項目に・が付かないようにして余白を設けているだけです。

 htmlはsubcontentsとnews部分を以下のようにやはりulで囲った中にliを羅列するように修正します。

【左右サイドバーのリスト項目適用のためのhtml修正】
※leftの中
<div class="subcontents">
<h2>商品の感想</h2>
<ul>
<li>A社製テント</li>
<li>B社製タープ</li>
<li>C社製シート</li>
<li>・・・</li>
</ul>
</div>

※rightの中
<div class="news">
<h2>新着情報</h2>
<ul>
<li>2013年2月1日 タープを追加</li>
<li>2013年1月1日 テントを追加</li>
<li>・・・</li>
</ul>
</div>

リンクの設定

 上記の各項目にリンクを設定していきます。リンクはhtmlの中で<a href="ファイル名">項目</a>で定義します。例えば中央のテントにリンクをする場合でリンク先のファイル名がtent.htmlだった場合、<a href="tent.html">テント</a>になります。liで囲まれている場合でもその中にa hrefを入れ込む事が出来、以下のように記述します。

【リンクの設定】
<li><a href="tent.html">テント</a></li>

ここまでの作成結果

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

トップページの記述方法8

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

内容の記述

 内容の記述はサイトの説明部分では以下の赤字部分に記述します。

【サイトの説明の内容記述】
<div class="sitedescription">
<h2></h2>
<p>サイトの説明</p>
</div>

 中央のメインコンテンツ部分では以下の赤字部分を編集します。

【メインコンテンツの内容記述】
<div class="maincontents">
<h2></h2>
<ul>
<li><a href="リンク先ファイル名">項目</a></li>
※以下同様
<div class="clear"></div>
</ul>
</div>

 左サイドバーと右サイドバーの新着情報部分についても同様です。

 ページが増えてリンクを増やす場合でもliを追加するだけで対応出来ます。

 右サイドバーのピックアップ情報部分は以下の赤字部分に記述します。

【ピックアップ情報の内容記述】
<div class="pickup">
<h2></h2>
<p>内容記述</p>
</div>

前のページトップページ:ボックス配置」    次のページ本文ページ:作成

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