高度なテクニック

CSS上で特殊な設定をすることにより、HTML上の位置を動かすことができます。そのような特殊な方法について述べます。

両サイドバーの項目で使いましたが、.main より手前に #sidebar を移動することができます。

/* サイドバーのHTML位置を .main の手前に移動する */
#sidebar-move-to-before-main {
	min-width:		1px;
}

サイドバーの後半部分にあたる side-b をフッターに移動します。

#side-b-move-to-footer {
	min-width:		1px;
}

HTML構造は次のようになります。

<div id="footer">
	<div id="side-b"></div>
	<div>
		（本来のフッター）
	</div>
</div>

表示領域を横800px等に限定しつつも、領域（背景）はウィンドウ横幅全体を塗りつぶしたい時に、この設定を使用します。wpテーマで使用しています。

#dropdown-menu-move-to-after-header-div {
	min-width:		1px;
}

HTML構造は次のようになります。

<div id="header">
	<div>
		（本来のヘッダー）
	</div>
	<div class="dropdown-menu"></div>
</div>

#syntax-highlight-theme {
	min-width:	1px;			/* 設定を有効にするための印 */
	font-family:	"tomorrow-night-blue";	/* ロードさせたいCSS */
}

スマホ表示の際、標準では次のようなヘッダが出力されています。

<meta name="viewport" id="viewport" content="width=device-width">

この値をCSSから書き換えるには次のように設定します。

#viewport-setting {
	min-width:	1px;			/* 設定を有効にするための印 */
	font-family:	"width=360px";		/* 上書きしたい値 */
}

adiary開発マニュアル