おはようございます。この時間におはようございますの人も中にはいるのでは？
前回も発表したWEBサイト「Monoct」
以前まではPCで見やすいデザインだったのですが、今回スマホ対応(レスポンシブデザイン)にしたので、簡単にやったことをまとめておきたいと思います。
スマホ対応(レスポンシブデザイン)おすすめ記事3選
まず行ったのは知識をインプットすることです。スマホ対応(レスポンシブデザイン)のことを何も知らなかったので、スマホ対応(レスポンシブデザイン)についても説明してくれている記事を探しました。以下は実際に自分が参考にさせていただいた記事3選です。
１.レスポンシブWebデザインの作り方(簡単設定方法)
レスポンシブWebデザインの作り方（簡単設定方法）
「スマホ対応(レスポンシブデザイン)とは」を理解するのに一番わかりやすかった記事です。一番初めに読むことをお勧めします。
２.初心者も分かる！レスポンシブ・デザインの作り方
実際に作っていく上で一番参考になったのはこの記事です。具体的にやるべきことを記してくれているので、コピペして使えたりとかなり便利でした。この記事がなかったらスマホ対応(レスポンシブデザイン)は完成しませんでした。
３.レスポンシブデザインを制作するなら頭に入れておくべき基本事項7つ
こちらは全てを読み込んだわけでなく、一部分を参考にしました。画像のサイズなど非常に参考になりました。
これらを踏まえて、やったこと3つ
１.viewportとメディアクエリを理解&設定する
２.それぞれのclassを確認しながら、スマホ用サイズに変えていく
３. 困ったら「width:100%;」 or 「max-width:100%;」を使う
１.viewportとメディアクエリを理解&設定する
こちらは簡単です。先ほども掲載した「初心者も分かる！レスポンシブ・デザインの作り方」を読んで、言われた通りにしていればできます。
viewportはHTMLの<head>タグ内に下記コードをコピペしてください。
<head>
<!-- ビューポートの設定 -->
<meta name="viewport" content="width=device-width,initial-scale=1">
</head>
メディアクエリはCSSのクラス毎に下記コードでスマホ用CSSを記入してください。
/* ウィンドウ幅が0〜479pxの場合に適用するCSS */
@media screen and ( max-width:479px )
{
p
{
color: #f00 ; /* 赤色 */
}
}
２.それぞれのclassを確認しながら、スマホ用サイズに変えていく
ここは地道な作業です。コードを編集しながら、スマホ、もしくはPCのレスポンシブデザインモードで確認してください。
３. 困ったら「width:100%;」 or 「max-width:100%;」を使う
一番役立ったのはこの二つです。どういうことかというと、widthを100%にしてしまえば、スマホの幅になるためスマホ対応(レスポンシブデザイン)ぽく見えるのです。
width:100%;
or
width:1000px;
max-width:100%
加えてみると、新たな世界が見えてきます笑
おわりに
いかがでしたか？初心者目線で本当に役立った記事をご紹介したので、少しでもお役に立てればと思います。また、今回はclassごとにメディアクエリを設定しましたが、まとめることもできるみたいなので、次は挑戦したいと思います。