メインページのテンプレートの修正と画面確認

<< 前のページ 2カラムレイアウトの概要とスタイルシート

メインページのテンプレートのコンテンツ(content)部分の下に、サイドバー(sidebar)の部分を追記します。以下のソースを見ると、非常に簡単な追記であることがわかります。

HTMLのテーブルタグを使用せずに、スタイルシートでレイアウトを決めているため、つまり、HTMLのソースでレイアウトを設定する必要が無いため、見やすくなりますし、検索エンジン対策にもなります。(現状の検索エンジンはレイアウトではなく、記述された文書を好みます。)

<div id="sidebar">
サイドバー。サイドバー。サイドバー。サイドバー。サイドバー。サイドバー。サイドバー。サイドバー。サイドバー。サイドバー。サイドバー。サイドバー。サイドバー。サイドバー。サイドバー。サイドバー。サイドバー。サイドバー。
</div>

追記後、再構築して実際にブラウザで見てみます。

2カラム未完


サイドバーが右側に追加されたことがわかります。
ですが、本来ページ下部にあったはずのフッタの部分がサイドバーの下に移動してしまいました。

次回はこの問題の解決方法を紹介します。

次のページ >> clear:both;を忘れずに

▲ページトップへ