HTML CSS

1. HTMLでボタンのリストを作る。

2. CSS (Flexbox) を使って、横に並べるか、折り返させるかを決める。

3. ボーダーや背景色を工夫して、立体的なボタンらしく見せる。

このように、Flexboxを使いこなすことで、画面のサイズに合わせた柔軟なレイアウトが作れるようになります。

基本的には、ボタンとなる要素を親要素（コンテナ）で囲むシンプルな作りです。

ボタンのデザイン（共通）

緑色のボタン部分は、以下のようなプロパティで装飾されています。

• background-color: 深緑色に設定。

• border-bottom / border-right: 濃い色で線を引くことで、立体的なボタンに見せています。

• padding / width: 文字の周りに余白を持たせています。

レイアウト（並べ方）

画像にある2つのパターンは、CSSの Flexbox という機能を使って作り分けられています。

パターンA：横一列（上の段）

親要素に display: flex; を指定するだけで、中身が横に並びます。