CSSでWebスタイリング【レスポンシブ 基本】
<link>で外部スタイルシートを参照させます。
ファイル名はbase.cssにします。
まずデフォルトを決めていきます。
全体のリセットに関してです。
１、padding、marginをイニシャライズするか。
２、float対策としてbox-sizingを設定しておくか。
３、字詰めを自動にするか。
４、検索用の<input>アピアランスをオフにするか。
です。
この４項目は必ず検討お願いします。
デザインする場合に絶対引っかかってきます。
ネット上のリセットCSSを利用される場合はダウンロード後リンクを張ってください。
ネット上のリセットCSSを使うまでもない方は下記の簡易リセットCSSをご利用ください。
リセットは全体にかけます。
*{
margin:0;
padding: 0;
box-sizing: border-box;
font-feature-settings: "palt";
-webkit-appearance: none;
}アスタリスク（✴︎）は全てのタグを参照させることができます。
尚且つ優先順位は最下位になります。
アスタリスク（✴︎）で指定したプロパティよりタグに直接指定したプロパティ が優先されます。
次に背景は色とか画像を内容に関係なく全面表示させたいので
body,html{
width: 100%;
height: 100%;
}と指定しておきます。
これが無いと要素で幅と高さを全面に設定しても全面になりません。
bodyとhtmlの間にカンマ（,）を置いてますがこれは同時に指定するという記号になります。
最後に全体の書体の設置をしておきます。
設定しておかないとブラウザ毎でデフォルト書体が決められていますのでブラウザが変わる度、基本書体が変わります。
ここまでレスポンシブの共通設定として最初に記述しておきます。
ここからレスポンシブに設定していきますが使用するテクニックはCSSを使用します。
メディアクエリーです。
メディアクエリーは様々な設定の仕方がありますが多過ぎて超めんどくさいです。
私が色々設定してみて最善のメディアクエリーをご紹介します。
一度お試しください。
まず前出のCSSを記述して頂いてすぐ下に下記メディアクエリーを記述します。
/*幅768px以上に適用されるCSS（タブレットサイズ以上）*/
@media screen and (min-width:768px){
}これは768ピクセル以上のデバイス・サイズ限定で反映されるCSSの範囲をここで指定します。
この768ピクセルのメディアクエリーの上に記述するCSSは全てのサイズのデバイスに反映されることになります。
想定としてはモバイルサイズにしています。