ChatGPTを使用したアプリ開発記【広告表示機能を実装】

実装コード

App.js

　　　　　　　　{/* 広告を3件ごとに表示、配列は0からカウントされる為、1足されている。 */}
              {(index + 1) % 3 === 0 && (
                <div
                  style={{
                    padding: '1rem',
                    margin: '1rem 0',
                    backgroundColor: '#f9f9f9',
                    border: '1px solid #ccc',
                    textAlign: 'center',
                  }}
                >
                  <p style={{ fontWeight: 'bold' }}>スポンサーリンク</p>
                  <a href="https://qiita.com/Tomomitsu_Keruma" target="_blank" rel="noopener noreferrer">
                    <img
                      src="/Qiita_keruma_image.png"
                      alt="広告"
                      style={{ maxWidth: '100%', height: 'auto' }}
                    />
                  </a>
                </div>
              )}

広告バナー作成

ChatCPTにお願いしました。

UI