@charset "utf-8"; /* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝　Myメモ　＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */ /*bodyなどでfont-sizeの指定をしていない場合、あるいはfont-size:100%なら「1em=16px」が基準になる*/ /*参考URL:http://memo.studiogaki.com/px-and-em/*/ /*とりあえずは、ｐｘで作成し、完成したらemに直す。そのほうが作成する際わかりやすいため*/ /*変動する必要がないもの、及びするとレイアウトが崩れるものはpxのままにする(固定するイメージ)*/ /* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝　ここからサイト全体の枠組み　＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */ /* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝　初期設定　＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */ /*CSSの初期化はレスポンシブwebデザインに直接関係する部分ではないので、使い慣れているリセットCSSを利用しても特に問題はない(p.73)*/ *{ /*ブラウザごとの差異を解消するために、全ての要素のmarginとpaddingに0pxを指定する(p.72)*/ margin: 0px; padding: 0px; /*box-sizingプロパティの値にborder-boxを指定すると、ボックスのサイズ(widthやheight)を枠線まで含めたサイズで指定できるようになる(p.72)*/ /*なので値にborder-boxを指定した場合は、枠線や内余白が「内側に太っていく」と考えること(p.74)*/ -webkit-box-sizing: border-box; /*ベンタープレフィックス*/ -moz-box-sizing: border-box; /*ベンタープレフィックス*/ box-sizing: border-box; /*メイリオが見やすいフォントと言われている*/ font-family:"メイリオ",sans-serif,"ヒラギノ角ゴ Pro W3",Arial,Verdana,"ＭＳ Ｐゴシック"; } /*インライン要素とテーブルセル要素の縦方向の位置を揃える*/ img{ vertical-align: middle;/*middleは半角英字[x]の中央の高さに要素が揃う*/ } body{ /*100%のようにページの幅をパーセントで指定するのが一般的(p.75)*/ width: 100%; /*iPhoneのSafariで文字サイズが自動調整されるのを防ぐためのもの この記述を忘れると、端末を回転させた時に文字サイズが拡大されてしまう場合がある -webkit-text-size-adjustは、文字サイズの自動調整の有無/無効を指定するプロパティ この値に100%を指定すると自動調整が無効になり、CSSで指定したサイズで文字が表示されるようになる(p.82、p.159)*/ -webkit-text-size-adjust: 100%; /*bodyやhtml要素の設定でfont-sizeを62.5%しておくと、ちょうど10px=1emになる*/ /*emでfont-sizeを指定する際に、16pxなら1.6em、24pxなら2.4emと書けば良い*/ font-size: 62.5%; } header{ /*大画面のレイアウトでは、width:1030pxを指定しているが、左右に15pxずつ内余白があるため、実際の表示幅は1000pxになる(p.83)*/ width: 100%; } main{ width: 100%; margin: 25px 0px;/*No.2*/ /*ヘッダーやフッターは画面の幅全体に表示しても問題ないが、本文は多少の余白を設けておかないと、 見た目の良くないレイアウトになってしまう。(p.84)*/ padding: 0px 15px; } aside{ /*サイドバーを固定幅にしている理由(p.86)*/ width: 300px; /*メインやフッターとの間隔を調整するもので、レスポンシブwebデザインとは直接関係ない(p.87)*/ margin: 15px auto 5px;/*shimo_ここでの15pxは効いていない*/ /*レスポンシブwebデザインでは、「小画面用」のレイアウトの文字サイズを小さめに指定するのが一般的(p.119)*/ font-size: 1.5em;/*No.8 15pxを意味する*/ } @media only screen and (min-width:560px) {/*iPhone5の横表示が568pxなので、実質iPhone5の横表示用*/ /*p.88(参照)*/ aside{ width: 540px; } } @media only screen and (min-width:640px) { /*p.88(参照)*/ aside{ width: 620px; font-size: 1.6em;/*No.8 16pxを意味する*/ } } @media only screen and (min-width:801px) { /*「大画面用」のレイアウトは、幅に1000pxを指定し、内余白0pxにしても同様の結果を得られるが、 大きめのタブレッドでwebページ全体を縮小表示した時に、本文などが画面の左端にくっついて表示されるという、若干の不具合が生じる。 これを回避するために、左右に15pxの内余白を設けている。(p.82)*/ body{ width: 1030px; padding: 0px 15px;/*No.1*/ margin: 0px auto; } main{ width: 700px; float: left; /*ネガティブマージン(p.85〜p.86を参照)*/ margin-left: -15px;/*No.1のpadding_15pxでPC表示の際、横幅に空白ができてしまうため、-15pxして横幅をヘッダー・フッターに合わせている*/ } /*p.88〜p.89(参照)*/ aside{ width: 300px; float: right; margin-top: 25px;/*No.2でmainのmargin_topを25pxにしているので、必ず同じ数字でセットする*/ } } /*clearfixによるfloat解除について(p.90(参照))*/ /*中画面用のfloat,left,rightの解除のために行っているもの 大画面はfooterでclear: both;をしているので、floatは解除されている。 なので@media only screen and (min-width:651px)の記載の中に記述しても同じ結果となる*/ aside::after{ display: table; content: ""; clear: both; } footer{ /*footerの親要素はbodyとなるため、「小画面」、「中画面用」のレイアウトでは画面の幅全体にフッターが表示される 「大画面用」のレイアウトではbody要素の幅が1000pxになるため、フッターも幅1000pxで表示される(p.91)*/ width: 100%; padding: 15px 20px; background: #1b1b1b; } /* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝　ここまでサイト全体の枠組み　＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */ /* bodyタグのdiv要素の一番はじめの後ろに空の要素を入れてcleafixしている。 なので実際は