はじめに
筆者は大学生限定プログラミングコミュニティ『GeekSalon』で活動しているものです！
興味があればぜひお話を聞きに来てくださいね！！！
レスポンシブWebデザインとは？
そもそもレスポンシブWebデザインがどんなものなのかご存知でしょうか？
これはWebサイトを閲覧しているユーザーが使用しているデバイス（パソコン、スマホ、ipadなど...）の画面サイズにそれぞれ表示を対応させるデザイン手法のことを指します！
パソコンで見たときにはちゃんと表示されてるのにスマホに変えた途端レイアウトがグチャグチャになっちゃった経験ありませんか？？？
そんな悩みを解決できるのがこのレスポンシブWebデザインです！！！
この記事では「メディアクエリ」というものを使って、スマホで見たときに画像が中央に寄って見やすくなるようにします！！！
実装方法
HTMLとCSSだけを使うのでとても簡単に実装することができます！
写真を用意
こちらの画像を使わせてもらいます！
（執筆者は生粋のガオラーです笑）
viewページを用意
htmlとcssのファイル二つを用意します！！！
まずはhtmlファイルから！
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=devise-width">
<title>Little Glee Monster</title>
<link rel="stylesheet" href="css/earstyle.css">
</head>
<body>
<div class="container">
<header>
<h1>Little Glee Monster</h1>
</header>
<section clsss="sekawara">
<div class="sekawara">
<h1>世界はあなたに笑いかけている</h1>
<img src="img/sekawara.jpg" alt="世界はあなたに笑いかけている">
<p>2018年8月に発売された12枚目のシングル<br>
第60回日本レコード大賞では、作曲賞を受賞した<br>
YouTubeでは2000万回以上再生されている超人気曲となっている
</p>
</div>
</section>
<div>
</body>
</html>
次にCSSファイルも用意しましょう！！！
@import url(sanitize.css);
body{
background-color: #f0f0f0;
font-size: 14px;
color: #666;
}
.container{
width: 1000px;
box-shadow: 0 0 10px rgba(0,0,0, .3);
margin: 0 auto;
}
header{
background-color: #422814;
padding: 10px;
color: #fff;
}
h1{
margin: 0;
font-size: 24px;
font-weight: normal;
text-align: center;
}
.sekawara img{
float: left;
margin: 0 10px 10px 0;
}
.sekawara{
height: 540px;
}
p{
font-size: 20px;
text-align: center;
}
@media only screen and (max-width: 1000px){
.sekawara img{
float: none;
display: block;
margin: 0 auto;
}
header{
padding: 5px;
}
header h1{
font-size: 12px;
}
}
cssのコードの解説を少しだけさせてもらいます！
@media only screen and (max-width: 1000px)
画面の最大の幅が1000pxになった際のcssを指定することができます！
@mediaのコードはスマホだけでなく大型のディスプレイにも適応させることができる非常に便利なコードです！
どんな内容を指定するかは{}の中に書いていくようにしましょう！
.sekawara img{
float: none;
display: block;
margin: 0 auto;
}
写真のまわりこみを解除して、中央に寄せる記述になっています！
これで実装することができました！実際に見てましょう！
PCver
スマホver（レスポンシブ対応前）
スマホver（レスポンシブ対応後）
上のようにスマホなどタブレットで頻繁にWebサイトを開く際はこのようにレスポンシブ対応させた方が画面いっぱいに見ることができます！
とてもスッキリしたかと思います！！！
メディアクエリを使ったレスポンシブWebデザインの実装でした！！！🙌