[反応基础班]第2周-CSS

4716 ワード
React CSS はんのうきそ スパルタコードクラブ テキストリンク
CSS自体には多くの既知の内容があるため、混同または不慣れな概念として定義される.

例



App.js

import React from "react";
import BucketList from './BucketList';
import "./style.css";

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      list: ["Eternals", "First Cow", "Seberg", "French Dispatch"],
    }
  }

  render() {
    return (
      <div className="App">
        <div className="container">
          <h2>개봉예정작</h2>
    	  <hr className="line"/>
          <BucketList list={this.state.list} />
        </div>
      </div>
    );
  }
}

export default App;

sytle.css

.App {
    background-color: #eee;
    height: 100vh;
    width: 100vw;
    display: flex;
}

.container {
    background-color: #fff;
    width: 50vw;
    max-width: 350px;
    height: 80vh;
    margin: auto;
    padding: 16px;
    border: 1px solid #ddd;
    border-radius: 3px;
}

.container > h2 {
    color: rgb(146, 105, 184);
    text-align: center;
}

.container > .line {
    margin: 16px 0px;
} 

.list-item {
    padding: 16px;
    margin: 8px;
    background-color: rgb(250, 247, 216);
}

10004 classNameではなくクラス


✔️ display: flex

.Appからdisplay: flexを引くと、写真のように上端に背景-色は適用されません.<h1>のdisplayプロパティがblockに設定されているためです..Appの境界は親要素の境界のように見え、この現象を利益合併相殺現象と呼ぶ.また,display: flexはmargin: autoのようにサブ要素の縦中心をつかむ役割を果たしている.逆に、サブエレメントの幅を最小限に抑えるため、サブエレメントの幅を指定します.

✔️ .container > .line

.lineだけで正常に動作しますが、このような形で書けば.ラインの親が誰であるかを一度に認識できるので、直感的なコードを書くことができます.

✔畈畈:上下px左右px

margin: 16px 0px;のように、2つの余白のみを与え、前者は上下を決定し、後者は左右の余白を決定する.

✔️ list-item

<div className="list-item" key={index}>
.list-itemのうち<BucketList list={this.state.list} />は子供に道具としてプレゼントされるのでBucketListjsでclassNameを指定します.
📌 注意事項
JSXでのinline Sytleループ
Ubuntuシステムのバックアップとリカバリ
12日間:割り当て、Webステータスコード