1028.us

管理ページへ

ログアウト

style属性の指定

<!DOCTYPE html><html><head>
  <meta charset="utf-8">
  <script src="https://unpkg.com/react@15/dist/react.min.js"></script>
  <script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.38/browser.min.js"></script>
</head><body>
  <div id="root"></div>
  <script type="text/babel">
    // ReactでDOMを書き換える
    ReactDOM.render(
      getDOM(),
      document.getElementById('root')
    )
    // 要素を返す関数
    function getDOM() {
      // オブジェクトでスタイルを指定
      const css1 = { // cssのスタイルで 
        "color": 'red',
        "background-color": '#f0f0ff',
        "font-size": '2em'
      }
      const css2 = { // JavaScriptのスタイルで
        color: 'blue',
        backgroundColor: '#fff0f0',
        fontSize: '2em'
      }
      // JSXでDOMを指定
      return (
        <div>
          <p style={css1}>探すのに時があり</p>
          <p style={css2}>捨てるのに時がある</p>
        </div>
      )
    }
  </script>
</body></html>

List of Category