■ スタイルシートで画面構造を制御 |
3.カスタマイズ | コメント [0] | tb [0] |
スタイルシートで画面構造を制御する方法を説明します。
TOPページは3列で個別ページは2列とします。
画面構造の大きな枠組みだけを説明します。
使っているのは7個のタグだけです！
全体の枠を決める … container
左右の幅 … left,right
左右の余白 … sidebar
top 真ん中 … center
個別記事 … text
真ん中と個別記事の余白 … content
トップページ
<BODY>
<div id=container>
<div id=banner>
</div>
<div id="left">
<div class="sidebar">
</div>
</div>
<div id="center">
<div class="content">
</div>
</div>
<div id="right">
<div class="sidebar">
</div>
</div>
</div>
</BODY>
個別ページ
<BODY>
<div id=container>
<div id=banner>
</div>
<div id="text">
<div class="content">
</div>
</div>
<div id="right">
<div class="sidebar">
</div>
</div>
</div>
</BODY>
スタイルシート
#container {
BORDER: #e0e0e0 1px solid; /* 枠色 */
WIDTH: 720px; /* 全体の幅 */
BACKGROUND-COLOR: #ffffff; /* 枠の中の背景色 */
}
#banner {
PADDING-LEFT: 15px; /* 左の余白 */
BACKGROUND: url() ; /* 背景イメージ */
COLOR: #9f988d; /* 文字の色 */
}#left {
WIDTH: 160px;
BACKGROUND-COLOR: #ffffff
}
#right {
WIDTH: 160px;
BACKGROUND-COLOR: #ffffff
}
.sidebar {
PADDING-TOP: 15px
PADDING-LEFT: 15px;
}#center {
WIDTH: 400px;
}
.content {
PADDING-TOP: 15px;
PADDING-LEFT: 15px;
PADDING-RIGHT: 15px;
BACKGROUND-COLOR: #ffffff;
font-color: #9F988D}
}
#text {
WIDTH: 560px;
}
ランキングのご協力をお願いします。
■トップページに戻る
■カテゴリ：3.カスタマイズ
△前の記事：ライブドア無料版からの移行２
▽ 次の記事：検索結果からEditを消す
トラックバック
このエントリーのトラックバックURL:
トラックバックする際は,このブログまたはこの記事へのリンクをお願いします。
貴サイトにリンクがない場合は削除します。
■トップページに戻る
■カテゴリ：3.カスタマイズ
△前の記事：ライブドア無料版からの移行２
▽ 次の記事：検索結果からEditを消す