ChatGPT (3.5)をコーディング参考に使う練習ページです。
HTML/CSSコーディング
プロンプト：「画像を上下左右に並べるCSSをコーディング」
↓ここから
画像を上下左右に並べるには、CSSのFlexboxやGridを使用すると便利です。以下に、Flexboxを使用した基本的なコーディング例を示します。この例では、4つの画像を上下左右に並べています。
HTML:
htmlCopy code
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="styles.css"> <title>画像の配置</title> </head> <body> <div class="image-container"> <img src="image1.jpg" alt="Image 1"> <img src="image2.jpg" alt="Image 2"> <img src="image3.jpg" alt="Image 3"> <img src="image4.jpg" alt="Image 4"> </div> </body> </html>
CSS (styles.css):
cssCopy code
body { margin: 0; display: flex; justify-content: center; align-items: center; height: 100vh; } .image-container { display: flex; flex-wrap: wrap; } .image-container img { width: 100%; height: auto; }
この例では、image-containerクラスがFlexboxを使用して画像を上下左右に配置します。各画像は100%の幅を持ち、flex-wrap: wrap;によって折り返されます。
必要に応じて、画像のサイズや余白を調整するためにCSSを調整できます。これは基本的な例であり、プロジェクトの要件によって変更することができます。
↑ここまで
結果
動く！（には動く）
サイズの大きい画像はそのままでは使えない。
あくまでコーディング参考の元にする。