4. CSSの読み込み - Kite0301/react-my-app GitHub Wiki

「タスク一覧」の大まかなHTMLを表示することができたので、そのためのCSSも追加しましょう。

まずは my-app/public の中に stylesheet.css を追加し、以下のリンク先のコードを貼り付けてください。

stylesheet.css

このチュートリアルで必要なCSSはこれで全てです。

追加したCSSを読み込むようにしましょう。
2. Reactアプリの作成 で説明したように、実際に表示されているHTMLファイルは「index.html」です。
なので、「index.html」の<head>内にCSSを読み込むための<link>を追加すればOKです。

<head>
  <!-- 中略 -->
  <link rel="stylesheet" href="stylesheet.css">
  <!-- 中略 -->
</head>

ブラウザで表示結果が変わっていることを確かめてみましょう。

また、今回はアイコンの表示で Font Awesome を使用していますので、そのためのCSSも追加しましょう。

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.4/css/all.css">

なお、前の章で追加した far fa-circle は、Font Awesome で丸いアイコンを表示するためのクラス名です。
https://fontawesome.com/icons/circle?style=regular

⚠️ **GitHub.com Fallback** ⚠️