今回は、スマホ時の表示とPC時の表示をCSSで可変できるメディアクエリによるレスポンシブスタイルの記述の仕方を紹介します。また最後には、コピペOKな汎用的に使えるスマホファーストなCSSとPCファーストなCSSも用意しています。
レスポンシブとは？
レスポンシブスタイル（デザイン）とは、PC、スマートフォン（以後SPと記載）、タブレットなどの画面幅に応じたデザインを分けて作成し、それぞれのデバイスに最適化した表示をするデザインの仕方です。
WEB制作では「@media」の規則を使用し、それぞれのレイアウトに対してstyleを付けていくことでレスポンシブ化しいきます。そのためPCとSPのレイアウトを作成することになるので単純に工数は2倍になります。
また端末毎にも画面幅は違うので完璧なレスポンシブを実現するには以下のページの端末毎の大きさを網羅する必要があるので単純に2倍とはいかない場合もあります。
以下wiki参照。
レスポンシブウェブデザイン (Responsive Web Design, RWD) は、閲覧者の画面サイズまたはウェブブラウザに応じてデスクトップウェブページが閲覧できることを目指したウェブデザインの手法。加えて、1つのウェブサイトで多様なデバイスを同様にサポートすることもレスポンシブウェブデザインのタスクに含まれている点を理解しておくことが重要である。また、最近の取り組みでは、閲覧のコンテキストの一部としての閲覧者の近さがRWDの延長部分と見なされている。ニールセンノルマングループは、「コンテンツ、デザイン、そしてパフォーマンスは、すべてのデバイスでユーザビリティと満足を確保するために必要である」と述べた。
https://ja.wikipedia.org/wiki/レスポンシブウェブデザイン
以下の画像は同じページのPC、SP、ipadの表示の見え方です。（keito portfolio写真）
SP表示の場合は横に広がるデザインは最適とは言えないので、WORKS部分のコンテンツを縦に並べています。
さらに完全なレスポンシブ化を行うにはmeta viewportの記述が必須です。なので以下も合わせて理解するように！！
メディアクエリの記述の仕方（@media）
メディアクエリの記述の仕方は、「@media screen and」の後に（ ）の中に画面サイズを記述します。
この部分を条件付きグループと言います。
条件付きグループを先頭に{ }で囲って、その中に具体的なstyleを記述していきます。
実際の記述は下記。
@media screen and (min-width:480px) {
.works {
/* ここに画面サイズが480px以上のstyleを記述 */
}
}画面サイズの指定は（min-width:○○px）か（max-width:○○px）で指定すると覚えておきましょう。
min-width:○○pxとする場合は、そのpx数以上の場合にstyleを読み込みます。（最低○○pxまではこの記述を適応っと言った意味です。）
max-width:○○pxとする場合は、そのpx数以下の場合にstyleを読み込みます。（ここまではこのスタイルを読み込むといった意味合い。）
（min-width:○○px）か（max-width:○○px）はどちらかに統一した方が良いです。
また、CSSのルールに則って後方に記述された物が優先的に読み込まれるので、min-widthの場合は数字が低い順に記述します。反対に、max-widthの場合は数字が高い順に記述していきます。
下記は、先述で紹介したkeito portfolio写真のHTMLとCSSの記述です。「works」と「works ul」に「@media」を指定しています。
HTML
<div class="works">
<h1>WORKS</h1>
<ul>
<li>
<h2>コーティング</h2>
<img src="img/coating.jpeg" width="280" height="150" alt="コーティング">
<P>HTML/CSSを使ってコーティングを行います。</P>
</li>
<li>
<h2>WEBデザイン</h2>
<img src="img/web-design.jpeg" width="280" height="150" alt="WEBデザイン">
<p>WEBサイトのデザイン~ワイヤーフレームまで制作します。</p>
</li>
<li>
<h2>SEO対策/WEB解析</h2>
<img src="img/marketing.jpeg" width="280" height="150" alt="SEO対策/WEB解析">
<p>データを元に事例に合った最適な改善案を提出。</p>
</li>
</ul>
<ul>
<li>
<h2>コーティング</h2>
<img src="img/coating.jpeg" width="280" height="150" alt="コーティング">
<P>HTML/CSSを使ってコーティングを行います。</P>
</li>
<li>
<h2>WEBデザイン</h2>
<img src="img/web-design.jpeg" width="280" height="150" alt="WEBデザイン">
<p>WEBサイトのデザイン~ワイヤーフレームまで制作します。</p>
</li>
<li>
<h2>SEO対策/WEB解析</h2>
<img src="img/marketing.jpeg" width="280" height="150" alt="SEO対策/WEB解析">
<p>データを元に事例に合った最適な改善案を提出。</p>
</li>
</ul>
</div>
</div>CSS
/* ワークス */
.works{
margin-left: auto;
margin-right: auto;
}
@media screen and (min-width:480px) {
/* 画面サイズが480pxからはここを読み込む */
.works {
}
}
@media screen and (min-width:768px) and ( max-width:1024px) {
/* 画面サイズが768pxから1024pxまではここを読み込む */
.works {
width: 700px;
margin-left: auto;
margin-right: auto;
}
}
@media screen and (min-width:1024px) {
/* 画面サイズが1024pxからはここを読み込む */
.works {
width: 700px;
margin-left: auto;
margin-right: auto;
}
}
.works h1{
position: relative;
color: #6eb0f9;
line-height: 1.4;
-webkit-box-reflect: below -10px -webkit-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0) 10%,rgba(0, 0, 0, 0.6));
}
.works ul {
list-style: none;
}
@media screen and (min-width:480px) {
/* 画面サイズが480pxからはここを読み込む */
.works ul {
margin: auto; padding: 0;
position:relative;right: 85px;
}
}
@media screen and (min-width:768px) and ( max-width:1024px) {
/* 画面サイズが768pxから1024pxまではここを読み込む */
.works ul {
margin: auto; padding: 0;
position:relative;right: 85px;
}
}
@media screen and (min-width:1024px) {
/* 画面サイズが1024pxからはここを読み込む */
.works ul {
display: flex;
list-style: none;
margin: auto; padding: 0;
position:relative;right: 85px;
}
}
.works ul li {
padding: 20px;
padding-left: 0;
}
.works h2{
font-weight: normal;
font-size: 24px;
text-align: center;
margin-top: 0px;
margin-bottom: 20px;
position: relative;
color: #158b2b;
font-size: 20px;
padding: 10px 0;
text-align: center;
margin: 1.5em 0;
}
.works h2:before {
content: "";
position: absolute;
top: -8px;
left: 50%;
width: 150px;
height: 58px;
border-radius: 50%;
border: 5px solid #a6ddb0;
border-left-color: transparent;
border-right-color: transparent;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.hobby h1{
font-family: 'Solway', serif;
background-color: #f6f6f6;
text-align: center;
}
.hobby h1:first-letter {
font-size: 2em;
color: #7172ac;
}コピペ用汎用CSS
汎用的に使えるメディアクエリ毎のCSSの記述を載せておきます。下記のCSSをコピペして自身で編集、改修して頂ければ使えます。
スマホファースト
スマホファーストの場合は「min-width:480px」から読み込みを始めるのがいいと言われています。（やり易い方で良いと思いますが。）
下記をコピペして「.CSSクラス名」の部分に要素名やクラス名を記述。
「/* ここに画面サイズが○○pxからはここを読み込むスタイルを記述 */」の部分に実際のstyleを記述していって下さい。
/* スマホファースト */
.CSSクラス名 {
/* ここに全ての画面サイズ共通で読み込むスタイルを記述 */
}
@media screen and (min-width:480px) {
.CSSクラス名 {
/* ここに画面サイズが480pxからはここを読み込むスタイルを記述 */
}
}
@media screen and (min-width:768px) and ( max-width:1024px) {
.CSSクラス名 {
/* ここに画面サイズが768pxから1024pxまではここを読み込むスタイルを記述 */
}
}
@media screen and (min-width:1024px) {
.CSSクラス名 {
/* ここに画面サイズが1024pxからはここを読み込むスタイルを記述 */
}
}PCファースト
PCファーストの場合は「max-width: 1024px」から読み込みを始めるのがいいと言われています。（やり易い方で良いと思いますが。）
下記をコピペして「.CSSクラス名」の部分に要素名やクラス名を記述。
「/* ここに○○pxまでの幅の場合に適応されるスタイルを記述 */」の部分に実際のstyleを記述していって下さい。
/* PCファースト */
.CSSクラス名 {
/* ここに1024px以上の幅の場合に適応されるスタイルを記述 */
}
@media screen and (max-width: 1024px) {
.CSSクラス名 {
/* ここに1024pxまでの幅の場合に適応されるスタイルを記述 */
}
}
@media screen and (max-width: 768px) {
.CSSクラス名 {
/* ここに768pxまでの幅の場合に適応されるスタイルを記述 */
}
}
@media screen and (max-width: 480px) {
.CSSクラス名 {
/* ここに480pxまでの幅の場合に適応されるスタイルを記述 */
}
}
@media screen and (max-width: 320px) {
.CSSクラス名 {
/* ここに320pxまでの幅の場合に適応されるスタイルを記述 */
}
}以上が「メディアクエリの記述の仕方（@media）レスポンシブデザイン」でした。
HTML、CSSを学ぶ際の最初の鬼門かと思います。それくらい地味に難しい部分なので、コピペでも良いので実際にテストサイトなどで書いていくと良いでしょう。
またレスポンシブデザインを習得すれば、仕事は貰えます。と言うよりWEB制作案件はレスポンシブデザインが出来るのが前提で仕事を発注しています。
そのくらい必須な技術なので頑張って習得しましょう。
