ハンデプログラマー

障害者の方のためのプログラミング教室です。目指せ自立!!

トップ > HTML/CSS入門 > スマートフォン対応(レスポンシブデザイン)

スマートフォン対応(レスポンシブデザイン)

1、テラパッドを開きstyle14.cssファイルを開きます。

2、下記のようにプログラムを追加します。

@media screen and (max-width:767px) {
	.space {
		width:100%;
	}

	.space img{
		width:100%;
	}

	hdmenu .space ul{
		list-style-type:none;
	}

	hdmenu .space li{
		width:50%;
		float:left;
		overflow:hidden;
	}

	header {
		z-index:2;
		box-sizing:border-box;
		position:fixed;
		top:0;
		left:0;
		width:100%;
		padding:15px 10px;
	}

	#contents {
		box-sizing:border-box;
		width:100%;
		padding:0 10px;
	}

	.topimg img{
		width:100%;
	}

	footer {
		width:100%;
	}

	.guide {
		position:relative;
		top:auto;
		right:auto;
		margin-top:15px;
	}

	#main {
		float:none;
		width:100%;
	}

	#sub {
		float:none;
		width:100%;
	}
}

3、HTMLと同じフォルダに「style15.css」というファイル名で保存します。

4、HTMLファイルは変更しません。コピーしてtest15.htmlとして保存してください。

4、HTMLファイルをダブルクリックして開きます。
テスト15表示

ブラウザの横サイズを小さくするとスマートフォン対応の画面表示に切り替わります。

●レスポンシブ対応について

@media screen and (max-width:767px) {
	・・・
}
上記のような記述をすると画面サイズが767pxより小さくなるとカッコ内の設定に切り替わるようになります。

@media screen and (max-width:767px) {
	.space {
		width:100%;
	}

	.space img{
		width:100%;
	}

	hdmenu .space ul{
		list-style-type:none;
	}

	hdmenu .space li{
		width:50%;
		float:left;
		overflow:hidden;
	}

	header {
		z-index:2;
		box-sizing:border-box;
		position:fixed;
		top:0;
		left:0;
		width:100%;
		padding:15px 10px;
	}

	#contents {
		box-sizing:border-box;
		width:100%;
		padding:0 10px;
	}

	.topimg img{
		width:100%;
	}

	footer {
		width:100%;
	}

	.guide {
		position:relative;
		top:auto;
		right:auto;
		margin-top:15px;
	}

	#main {
		float:none;
		width:100%;
	}

	#sub {
		float:none;
		width:100%;
	}
}

今回は基本的な設定のみですが、画面を100%表示にするような形にしています。カッコ内を色々と変更して独自の画面を作成してください。

プログラミング言語

こちらのサイトで扱うプログラミング言語一覧です。

ページのトップへ戻る