HTML CSS

【レスポンシブデザイン】レスポンシブデザインサイトを作る為の初期設定

【レスポンシブデザイン】レスポンシブデザインサイトを作る為の初期設定

レスポンシブデザインでサイトを構築する時の初期設定を記録します。
久々に構築したので結構忘れてたので。




HTMLから

まずはmetaタグで下記のコードをhtmlに入れましょう。

簡単に言うと
見ているウィンドウサイズに応じて適応してくる。

cssから

画面サイズに応じてCSSを適応させる

ここから
↓


/*===============================================
●style.css 画面の横幅が769px以上
===============================================*/
@media screen and (min-width: 769px){
img{
max-width: 100%;
height: auto;
width /***/:auto;　
}
#container{
width:100%;
}
～以下、画面の横幅が768pxまでの場合のスタイル記入～
}
/*===============================================
●tablet.css 画面の横幅が768pxまで
===============================================*/
@media screen and (max-width: 768px){
img{
max-width: 100%;
height: auto;
width /***/:auto;　
}
#container{
width:100%;
}
～以下、画面の横幅が768pxまでの場合のスタイル記入～
}
/*===============================================
●smart.css  画面の横幅が640pxまで
===============================================*/
@media screen and (max-width:640px){
img{
max-width: 100%;
height: auto;
width /***/:auto;　
}
#container{
width:100%;
}
～以下、画面の横幅が640pxまでの場合のスタイル記入～
}

↑
ここまでをコピー

見ての通り、サイズに応じてcssを適応していきます。

レスポンシブでよくする事

私がレスポンシブデザインでサイトを構築する際に設定するのがこれ


.pc-no{
	display: none;
}

.smho-no{
	display: none;

}

ちなみにCSSです。

これは、表示させたくない時に使うコードです。
レスポンシブには必ずサイズによって表示させたくないコードが出てきます!!
その時に使用するものです。

上記のCSSを各サイズの所に設定する。

あとは、表示したくないタグにクラスをつけるだけ。
以上簡単です。




TOP