フッターの幅をコンテンツの幅に揃える

現在、このblogでは、Wordpress提供のテーマ「Twenty Fifteen」を基にした子テーマを使用しています。
もとのTwenty Fifteenよりもサイドバーをややせまくしています。
（ブログのデザインを変更した – nackpan Blog）

/**
 * 15.4 Desktop Small 955px
 */
@media screen and (min-width: 59.6875em) {
    body:before {
        width: 20.4118%;
    }
    .sidebar {
        float: left;
        margin-right: -100%;
        max-width: 413px;
        /*max-width: 263px;*/
        position: relative;
        width: 20.4118%;
    }
    .site-content {
        display: block;
        float: left;
        margin-left: 20.4118%;
        width: 70.5882%;
    }
}

/**
 * 15.6 Desktop Large 1240px
 */
@media screen and (min-width: 77.5em) {
    body:before {
        width: 22.4118%;
    }
    .sidebar {
        width: 22.4118%;
    }
    .site-content {
        margin-left: 22.4118%;
        width: 77.5882%;
    }
}

フッターの幅をコンテンツの幅に揃える

コメントにて、フッターの幅をコンテンツの幅と合わせる方法について質問をもらいましたので、これを機にやり方を調べました。

レスポンシブデザイン

Twenty Fifteenでは、メディアクエリを使うことで画面の幅によって、適用するスタイルを変えています。

@media screen and (min-width: 59.6875em) {
    ... 
} 

現在使用している子テーマでは、
* Desktop Small 955px
* Desktop Large 1240px
のときのサイドバーの幅を変更しています。
そのさい、フッターはコンテンツ部分とずれて表示されています。
(元のTwenty Fifteenではフッターとコンテンツ部分は揃っている)
* Desktop Small 955px
* Desktop Large 1240px
でも、フッターとコンテンツが揃うようにCSSを見直しましょう。

関係部分の構造。

footerはsite-contentと同じ階層にあります。
site-contentの下に、いくつか階層を挟んで記事、コメント、ナビゲーション部分があります。

marginとwidth

marginとwidthで位置と幅を指定しています。
今回のCSSでは、パーセントで指定しています。
このパーセントは親要素の幅を基準とします。

Desktop Small 955px(幅が955px以下の場合)での
site-contentの位置・幅。

ナビゲーション部分の位置・幅。

これを踏まえて、site-footerとコンテンツ部分との位置・幅がそろうようなmarginとwidthを求めます。
margin。

width。

計算した結果。
Desktop Small 955pxでは、footerの適切な位置・幅は
margin-left: 26.2939%;
width: 58.824%;
となりました。

おなじように、画面幅Desktop Large 1240pxでもfooterの適切な位置・幅を計算すると
margin-left: 28.8772%;
width: 64.6574%;
となりました。

これらを加味して、CSSは以下のようになりました。

/**
 Desktop Small 955px
 */
@media screen and (min-width: 59.6875em) {
    body:before {
        width: 20.4118%;
    }
    .sidebar {
        float: left;
        margin-right: -100%;
        max-width: 413px;
        /*max-width: 263px;*/
        position: relative;
        width: 20.4118%;
    }
    .site-content {
        display: block;
        float: left;
        margin-left: 20.4118%;
        width: 70.5882%;
    }
    
    .site-footer {
        margin-left: 26.2939%;
        width: 58.824%;
    }
}

/**
 Desktop Large 1240px
 */
@media screen and (min-width: 77.5em) {
    body:before {
        width: 22.4118%;
    }
    .sidebar {
        width: 22.4118%;
    }
    .site-content {
        margin-left: 22.4118%;
        width: 77.5882%;
    }
    
    .site-footer {
        margin-left: 28.8772%;
        width: 64.6574%;
    }
}

これでブラウザの幅を広げたり縮めたりしても、フッターがコンテンツ幅と同じに保たれます。