portfolio

カテゴリー: css

  • CSSでレスポンシブデザインを構築してみた

    こちらは、cssを使ってレシポンシブデザインを構築してみたときの覚書です。

    /* 1230px以下の画面幅に適用 */
@media only screen and (max-width: 1230px) {
	body {
		background-size: auto; /* 画像を画面に収める */
		background-repeat: no-repeat; /* 画像を繰り返さない */
		background-position: top left; /* 画像を左上に配置 */
		background-color: black; /* 背景色を黒に設定 */
	}
	.welcome-bar {
		font-size: 18px;
	}
}

/* 800px以下の画面幅に適用 */
@media only screen and (max-width: 800px) {
	.post-template-default .entry-content {
		width: 90%;
	}
}

/* 450px以下の画面幅に適用 */
@media only screen and (max-width: 450px) {
	.welcome-bar {
		display: none;
	}
	
	.post-template-default .entry-content {
		width: 100%;
	}
}

    このコード例では、単純に画面幅で条件を切り分けて画像、背景色、フォントサイズなどをカスタマイズしています。
    カスタマイズしたい内容や条件は画面構成によっても変わってくると思いますので、必要に応じていじくっていけばよいかと思います。