wanichanの日記

ちょっとした技術メモ。Microsoft中心。Webサイト管理等にまつわるネタ、サイトの更新情報等を発信中。最終版はwanichan.comに掲載していきます。

リニューアル作業の進捗

IEとChromeとでは解釈が異なったりするんで、いろいろとめんどくさい部分があるんですけど。

とりあえず、大画面の場合は2カラムで全体をセンタリングすることにしました。リキッドデザインでもよかったんですけど、間延びしちゃうと読みづらいという人もいるかもって感じなので。ポイントとしては、左右のpaddingは使わないようにする、ということです。でないと、その中の<table>タグとか<hr>タグ等で幅指定100%にすると横にはみ出てしまうんですよね。その代わり、marginを使って入れ子にする感じですね。古いバージョンのブラウザーは考慮しない方向で(IE6とか使ってる人はゴメンナサイ)。

Expression Web 4では、1カラムで編集できるように、デフォを段組みなしでスタイルを書きました。とりあえず、HTML 5タグにブロック呪文を。

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}

bodyタグで全体をセンタリングしているので、articleとかasideとかのタグ内の要素は左寄せに。コードの最適化の余地はありますが、以下までが基本スタイルで。コンテンツ内の段組みもデフォで、画像サイズスタイルは直接基本スタイルで書かず、media screen ブロックにのみ記述しないと、Expression Web 4で勝手にスタイルが書き換えられてしまいます。

article, aside, details {
    text-align: left;
}
h1, h2, h3, h4, h5, h6 {
    margin-top: 0px;
}
body {
    margin: 0;
    padding: 0;
    text-align: center;
    background-color: #FFC8E3;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 1em;
    background-image: url('../../miniwani.gif');
}
a {
    text-decoration: none;
}
a:hover {
    color: red;
}
a img {
    border-width: 0;
}
header {
    background-color: #FFF;
}
header h1 {
    margin-top: 0;
}
article, aside {
    margin: 10px 10px 1em 10px;
    font-size: 0.9em;
    padding-top: 10px;
}
section {
    border-radius: 5px;
    padding: 5px;
    margin: 10px;
    background-color: #fff;
}
footer {
    clear: both;
    padding: 5px;
    background-color: #fff;
    margin-bottom: 0px;
    font-size: 0.9em;
}
footer p {
    margin: 0;
    padding: 5px;
}
address {
    font-style: normal;
}
.center {
    text-align: center;
}
.right {
    text-align: right;
}
.container {
    text-align: left;
}
.ads {
    text-align: center;
    clear: both;
    margin: 1em auto;
}
.left_col {
    float: left;
    width: 49%;
    margin-bottom:10px;
}
.right_col {
    float: right;
    width: 49%;
    margin-bottom:10px;
}
#page_content, #sidebar {
    margin: 10px;
    border-radius: 10px;
    background-color: #fff;
    font-size: 0.9em;
}

で、スマホにも対応すべく、といったところなんですが、横幅320pxな解像度をどうするか、ということで、いろいろと試行錯誤の結果、多めに見積もって350ピクセルまでのスタイルを定義。角丸スタイルをなくし、左右マージンもゼロにしました。コンテンツ内の段組みは解除で。

@media screen and (min-width: 0px) and (max-width: 350px) {
img {
    max-width: 100%;
    height: auto;
}
.left_col, .right_col {
    float: left;
    width: 100%;
}
#page_content, #sidebar,section{
    margin: auto 0px;
    border-radius: 0px;
}
}

で、たいていのスマホの縦バージョンは以下の通り。コンテンツ内の段組み解除で。

@media screen and (min-width: 350px) and (max-width: 480px) {
img {
    max-width: 100%;
    height: auto;
}
.left_col, .right_col {
    float: left;
    width: 100%;
}
}

次に、タブレット、Surface 2とかの縦バージョン。しかし、1カラムのコンテンツ内の段組みをすると、その親要素の高さがIEでは取得できないため、IE対策にコンテンツ内の段組みを囲んだDIVのスタイルにdisplay: inline-blockを追加しました。Chromeだと問題ないんですけどね。。。

@media only screen and (min-width: 480px) and (max-width: 720px){
.search {
    position: absolute;
    right: 0px;
    top: 0px;
    width: 50%;
    max-width: 350px;
}
.left_col, .right_col {
    float: left;
    width: 100%;
}
}

@media only screen and (min-width: 720px) and (max-width: 960px){
img {
    max-width: 100%;
    height: auto;
}
article, aside {
    padding-top: -10px;
    margin-top: 0px;
}
.search {
    position: absolute;
    right: 0px;
    top: 0px;
    width: 50%;
    max-width: 350px;
}
.col_wrap {
    display: inline-block;
    width: 100%;
}
}

段組みバージョンはこんな感じ

@media only screen and (min-width: 960px) and (max-width: 1110px){
img {
    max-width: 100%;
    height: auto;
}
.wrapper {
    display: inline-block;
    width: 940px;
    margin-bottom: 10px;
}
#page_content {
    margin: auto 0px;
    width: 750px;
    float: left;
}
#sidebar {
    float: right;
    width: 180px;
    margin: auto 0px;
}
article, aside {
    padding-top: -10px;
    margin-top: 0px;
}
.search {
    position: absolute;
    right: 0px;
    top: 0px;
    width: 350px;
}
}
/* width: 1025px〜の端末のときに */
@media only screen and (min-width: 1110px) {
img {
    max-width: 100%;
    height: auto;
}
article, aside {
    padding-top: -10px;
    margin-top: 0px;
}
.wrapper {
    display: inline-block;
    width: 1085px;
    margin-bottom: 10px;
}
#page_content {
    margin: auto 0px;
    width: 750px;
    float: left;
}
#sidebar {
    float: right;
    width: 320px;
    margin: auto 0px;
}
.search {
    position: absolute;
    right: 0px;
    top: 0px;
    width: 350px;
}
}

ちなみに、印刷するときの段組みは全部解除して、広告とか検索ボックスは非表示にしときました。

@media print{
body {
    background: none;
}
.ads,.search {
    display: none;
}
.left_col, .right_col {
    float: left;
    width: 100%;
}
}