> ## Documentation Index
> Fetch the complete documentation index at: https://www.mellowtel.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.
# Mellowtel 要素のスタイル
ここでは、組み込みのスタイリングオプションとCSSコンテナの配置を使用して、Mellowtel 要素の外観をカスタマイズする方法を紹介します。コンテナのスタイリングにより、レイアウトと配置を完全に制御でき、パッケージのスタイリングオプションにより要素の外観を制御できます。
## パッケージスタイリングオプション
Mellowtel 要素パッケージは、カスタムCSSを書くことなく要素の外観をカスタマイズできる組み込みのスタイリングオプションを提供します。設定オブジェクトを通じて、色、寸法、および視覚的なプロパティを直接制御できます。
```javascript theme={null}
const styles = {
textColor: '#FFFFFF', // テキストの色（16進数形式）
backgroundColor: '#4CAF50', // 背景色（16進数形式）
radius: 8, // ボーダー半径（ピクセル単位）
width: 200, // 幅（ピクセル単位、50-300の範囲）
height: 50 // 高さ（ピクセル単位、20-200の範囲）
};
```
### 例
```javascript theme={null}
// 緑色のオプトインボタンを作成
await mellowtel.createElement('opt-in-container', {
type: 'opt-in',
styles: {
textColor: '#FFFFFF',
backgroundColor: '#10B981',
radius: 12,
width: 180,
height: 45
}
});
```
## コンテナの配置
要素を配置するためにコンテナdivをスタイルします：
```css theme={null}
/* 基本的な配置 */
.mellowtel-container {
display: flex;
gap: 10px;
margin: 20px 0;
}
/* 固定配置 */
#opt-in-container {
position: fixed;
top: 20px;
right: 20px;
z-index: 1000;
}
/* レスポンシブレイアウト */
.mellowtel-elements {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 15px;
padding: 20px;
}
/* モバイルレスポンシブ */
@media (max-width: 768px) {
.mellowtel-container {
flex-direction: column;
align-items: center;
}
}
```
### 完全なスタイリング例
```html theme={null}
```