左右のグループを入れ替える

<< 前のページ カテゴリー一覧をサイドバーに移動する

現状、サイドバーが右側、コンテンツが左側に配置されています。これを逆にします。実は非常に簡単です。
スタイルシートのコンテンツ(content)で指定しているfloat:leftをfloat:right、サイドバーで指定しているfloat:right;をfloat:leftに変更するだけでOKです。

変更後、ブラウザで確認します。

左右を入れ替え

上図の構成をHTMLだけでレイアウトするとなると、以下のように<table>タグを用いることになります。

<table>
<tr>
<td>
サイドバー部分
</td>
<td>
コンテンツ部分
</td>
</tr>
</table>


今回のように、サイドバーを左側に表示させたい場合は、HTMLだけの記述では、サイドバーの部分をコンテンツより先に記述する必要があります。

ですが、CSSでレイアウトの指定を行っている場合は、以下のようにコンテンツ部分を先に書いても、サイドバーを左側に表示することができます。

<div id="content">
コンテンツ部分
</div>
<div id="sidebar">
サイドバー部分
</div>

しかも、検索エンジンはサイドバーの情報よりも、そのページのメインであるコンテンツを重要視し、さらに、ソースの上部に書かれているほど重要であると判断しているようです。
(最も重要なことは、良質なページを作成し、たくさんのページからリンクされることですが。)

こういった理由から、CSSレイアウトかつ記事作成が簡単であるMovableTypeが注目されているわけです。

次のページ >> サイドバーに余白を設置する

▲ページトップへ