レスポンシブウェブデザインのメモ書き

WordPressによるウェブサイトの制作で、TwentyThirteenをカスタマイズする場合。

課題

• ヘッダ下のメニューは非表示
• サイドバーにメニューを配置
• プルダウンメニューに切り替わるところでサイドメニューを非表示

ヘッダ下のメニューは非表示

Basic Structureにて、

.nav-menu {
	visibility: hidden;
}

とする。

サイドバーにメニューを配置

.site-main .sidebar-container {
	height: auto;
	margin: 0 auto;
	max-width: 240px;
	position: absolute;
	top: 0;
}

テンプレート上、
header -> contents -> sidebar -> footer
という順番になっているので、
例えば左上に絶対座標で位置を指定し、
コンテンツ領域はサイドバーの幅＋アルファの左マージンを設定する。

プルダウンメニューに切り替わるところ

幅が狭くなったところでサイドメニューを消して、メインメニューを表示させる。

@media (max-width: 643px) {
...
    #sidemenu {
        visibility: hidden;
    }
    .nav-menu {
        visibility: visible;
    }

まとめ

Basic Structureで基本的な設定をしておいて、
@mediaで幅の大きいものから順にCSSをカスタマイズしていく。
上の方（基本またはサイズの大きい方）で設定したものは、
下の方（サイズの小さい方）に引き継がれる。