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;
}

参考サイト


comments powered by Disqus

※コメント欄が表示されない場合はdisqusについてJavascriptが有効であることを確認して下さい.

(C) 2008-2018 akm. The blog theme is using sakmug. Hosted by Xdomain