ReactでCSS適用・レスポンシブ対応させてみた！ - あいりすのプログラミング日記

こんにちは！あいりすです。

生まれて初めてレスポンシブを実装できた（メディアクエリを設定した）ので、ぜひ見ていってください！

まさかHTML学習期ではなくReactで初めてやることになるとは。ｗ

見辛くて申し訳ないですがお付き合いください！

◎注意
・create-react-appで環境構築をして、その中身をいじってるだけです。
・Reduxとかその他難しいものはまだ知らないです。
・CSSmoduleの類は使用していません。

ーーーーー

srcフォルダ内のApp.jsに以下のようなものがあったとします。

<div className="example">abc</div>

このdivタグにCSSを適用させたいのですがどうすればいいのでしょうか。

①styleタグで直接記述

上記のタグの中に、以下のように記述します。

<div className="example" style={{background: "red" , marginLeft: "10px"}}>abc</div>

styleタグの中に書く感じです。

②CSSファイルから読み込む

別のファイルから読み込む場合は、Reactでは読み込み先（CSSを適用する先）のファイルの上部でimportをしなければいけません。

App.jsには最初から

import React, { Component } from 'react';

というコードが書かれています。
これの下に、

import './App.css'

（パスとCSSファイル名）
を書きます。

こうすることによって、App.jsとApp.cssが紐づく？連動する？感じになります。

続いて、App.cssにCSSを書きます。
App.cssはただのCSSファイルなので、通常通りの書き方でCSSをかいていきます。

.example {
   background: red;
   marginLeft: 10px;
}

セレクタ名＝App.jsの「className」となっていることが重要です。

これで①のやり方と同じようにCSSが適用されました。

ーーーーー

続いてメディアクエリを設定する方法です。

すみませんが、HTMLのheadタグ部分のviewportについてと、ブレイクポイントについての説明は割愛させていただきます。

Reactではrender()のところなどにHTML（JSX？）のタグをいくつも書くときは1つのdivタグの中にまとめないといけない決まりがあります。
（divタグじゃなくてもいいのかな、ちょっと自信ないです。。）

悪い例↓

　<h1>sample</h1>
　<h2>title</h2>
　<p>texttexttext</p>

このまま読み込もうとするとエラーになります。

良い例↓

<div>
　<h1>sample</h1>
　<h2>title</h2>
　<p>texttexttext</p>
</div>

このように、divタグを使って1つにまとめます。

全ての親要素となっているので総合的な配置はこのdivタグに対して設定することになります。
たとえばコンテンツ全体を中央寄せにするとか、親要素部分だけ背景は全部黒色とか。。

ということで、いまから登場するdivタグは上記のような役割をするタイプのdivタグという認識でお願いします。

classNameはmainContentsとします。

<div className ="mainContents">
<h1>sample</h1>
<h2>title</h2>
<p>texttexttext</p>
</div>

今回widthが100%だとデザイン的にあまりよろしくないものを作ってしまった体で、PCで閲覧する前提として、widthを30%に設定しているものとします。
左右のmarginは35%です。

こんなものをスマホサイズで見たら…残念なことになりますね。

Reactどうこう以前の問題で、わたしはそもそもレスポンシブデザインのものを作ったことがなかったので、結構時間がかかってしまったのですが、、

まず、これ↓をCSSファイルに書きます。

@media screen and (max-width: 960px) {

}

このmax-widthは、この場合だと「幅960px以下の場合に」みたいな意味合いです。

そういえば、記号の
{}
これって正式名称は何というのでしょう？
とある技術書にはブラケット、今少し調べたら「巻き毛ブラケット」とかいうのも出てきました。。
一応この記事内ではブラケットと呼ぶことにします…

ブラケットの中には幅960px以下だった場合のCSSのを書きます。

デバイスの幅が960px以下だった場合、div mainContentsのmarginとwidthの縛りをなくしたいので、以下のように指定します。

@media screen and (max-width: 960px) {
　.mainContents {
     width: 100%;
     margin: 0;
}

そうすると、幅960pxを基準にして、それより幅が大きいか小さいかでデザインが変わるようになります。

通常（PCで見た場合）のCSSをApp.js内のstyleタグの中で指定していたり、独立したCSSファイルに記述した場合でも

メディアクエリの指定を通常時の指定内容より先に書いてしまうと適用されませんので注意。

わたしはこんな単純なことに気が付かず時間を浪費しておりました。。

それでは今回はここまで。

読んでいただきありがとうございました！