- はじめに これまでにJSXやReactの要素について学んできましたが、これからはコンポーネントにスタイルを追加する方法を学びます！このセクションでは、JSXでのスタイリングについて取り上げます。GeekとGalの2人組を手助けに、さっそく学んでいきましょう！
コンポーネントを見栄え良くしたい？
絶対そうしたい！JSXのコンポーネントはどうやってスタイルを設定するの？
簡単だよ！JSXでは、通常のHTMLと同様にインラインスタイルを適用するか、外部スタイルシートを使用することができるの！
- インラインスタイル
インラインスタイルを適用するには、スタイルを持つJavaScriptオブジェクトを作成し、JSX要素の
style
属性に渡すだけ。プロパティ名にはキャメルケースを使うことを忘れないでね！
const divStyle = {
backgroundColor: 'lightblue',
padding: '20px',
borderRadius: '10px'
};
const element = <div style={divStyle}>Hello, world!</div>;
わかった！スタイルオブジェクトを作成してキャメルケースでプロパティを指定する。そして、JSX要素の
style
属性にオブジェクトを渡すんだね！
そのとおり！さあ、外部スタイルシートに進もう！
- 外部スタイルシート
外部スタイルシートの使用は超簡単！CSSファイルをインポートして、通常どおりクラス名を使用するだけ。ただし、
class
の代わりに
className
属性を使用することを忘れないでね！
// Import the CSS file
import './App.css';
// Use the 'container' class from the CSS file
const element = <div className="container">Hello, world!</div>;
なるほど、
class
の代わりに
className
を使ってCSSファイルをモジュールのようにインポートするんだ！
そのとおり！インラインスタイルと外部スタイルを組み合わせて、コンポーネントを輝かせよう！✨
- ユーモラスなスタイリング例
JSXでのスタイリングを使った面白い例が見たいな！
いいね！インラインスタイルと外部スタイルシートを使って、回転する虹色のテキストを作ってみよう！
// App.css
.rainbow-text {
font-size: 24px;
animation: rainbow 5s linear infinite;
}
// App.js
import React from 'react';
import './App.css';
const spinStyle = {
display: 'inline-block',
transformOrigin: 'center',
animation: 'spin 3s linear infinite'
};
const App = () => {
return (
<h1 className="rainbow-text" style={spinStyle}>
Spinning Rainbow Text! 🌈
</h1>
);
};
export default App;
ハハ、それは面白い！JSXでのスタイリングはすごく便利で多機能だね！
楽しんでるみたいで嬉しいわ！コンポーネントをおしゃれにするために、どんどん試してみてね！😄
- おわりに
JSXでのスタイリングは柔軟で、インラインスタイルと外部スタイルシートの両方を使用できます。インラインスタイルではキャメルケースを使用し、クラス名には
className属性を使用することを忘れないでください。素晴らしいコンポーネントを作成して楽しんでください！🎨