前のパートに戻る 完了して次のパートへ  

  2-3 CSS を用意しよう

このパートのゴール


  • 筆者が用意した CSS ファイルを作成する。
  • semantic-uiというライブラリを用意する。

CSS を用意しよう


この教材では CSS の書き方やベストプラクティスなどの内容は取り扱いません。

そのため、以下の 2 点を用意していただきます。

  • 筆者が用意した CSS ファイル
  • semantic-uiというライブラリを用意する。

まずはじめに、search-golf-app/src 配下の不要なファイルを全て削除しましょう。

create-react-app で自動的に作成された以下のファイルを削除します。

App.css
App.js
App.test.js
index.css
index.js
logo.svg
serviceWorker.js
setUpTests.js

続いて、search-golf-app/src/components 配下に Common.css ファイルを作成します。

以下のコードを Common.css にコピー&ペーストしてください。

search-golf-app/src/components/Common.css

続いて、semantic-uiというライブラリをアプリにインポートします。

これは手軽に綺麗な CSS を提供してくれるライブラリです。

今回は CSS だけが必要なので、以下のようにライブラリをインストールします。

❯ npm install semantic-ui-css

CSS がうまく機能しているかは、次のパートで確認します。

今回は以上です。お疲れ様でした!

議論

0 質問

このコースの評価は?