Image: 140314 サイトテンプレートを改良

当サイトのサイトテンプレートを改良した。

改良点

  • divタグの代わりにasideタグ、sectionタグを使用
  • HTML5未対応ブラウザではメインカラムとサイドバーが重なっていたが、変更後はメインカラムが先に、サイドバーが後に来るようになり、本来の表示ではないものの一応読みやすくなった。

固定幅サイドバー+可変幅コラムを組む場合はこういう回りくどいことをしなくちゃならないのか。マイナスマージンを使うと裏技っぽい感じがするが、もうちょっと素直な記述で済ませられないのだろうか。

.container-contents {
  width: 100%;
  overflow: hidden;
  clear: both;
}
.sidebar {
  float: left;
  width: 222px;
}
.contents-wrap {
  float: right;
  width: 100%;
  margin-right: -222px;
}
.contents {
  margin-right: 222px;
  padding-left: 4px;
  border-left: 1px solid #ddd;
}

参考サイト


※コメント欄が表示されない場合はdisqusについてJavascriptが有効であることを確認して下さい。コメントはスパム防止フィルターによる承認制のため、投稿してもすぐに反映されない場合があります。

管理人 : Akamaki (akm)

は、PCとVTuberに夢中になっている電気技術者です。

私はレトロコンピューティングの愛好家ですが、そのようなリグはもう収集していません。

私の活動はトップページで見ることができます。読んでくれてありがとう!