冬休み#1　レスポンシブなにそれおいしいの？(ﾒﾃﾞｨｱｸｴﾘｨｨｨ)

こんにちは。Webサイト制作班班長です。
この章ではレスポンシブデザインを取り入れる方法について紹介したいと思います。

レスポンシブデザインとは

レスポンシブデザインとはスマートフォン(小さい画面)とパソコン(大きい画面)で表示するウェブサイトの構成を変えられるというものです。導入することによってスマホでサイトを閲覧する人にも目に優しいデザインになります。

早速使ってみたい

ではレスポンシブデザインを実際に導入してみましょう。
レスポンシブデザインを導入するにはCSSにメディアクエリというものを追加します。メディアクエリは表示するデバイスの横幅によって使用するCSSを変えるというもので、個人的には一番使いやすいと思います。
レスポンシブデザインを導入するページのCSSファイルに以下のコードを張り付けてください。

/* PC(横幅が959px~)用のCSSをここに書く*/

@media screen and (max-width: 959px) {
	/*タブレット(横幅が480px~959px)用のCSSをここに書く*/
}
@media screen and (max-width: 480px) {
	/*スマホ(横幅が~480px)用のCSSをここに書く*/
}

あとはコメント(/**/)にあるようにCSSを書いていってください。(すでに書いたCSSはパソコン用のところに移動されるのが良き？)

おわり！！！！！

この章はこんな感じで終わります。CSSって結構めんどくさいのでぜひ頑張ってください！質問がある場合はLINE・Discordの個チャで聞いてください。勝手に友達追加しちゃって大丈夫です。