- プロンプト実行例

こんにちは!

オシャレなデザイン

了解しました。ここでは、モダンでおしゃれなデザインのためのシンプルなウェブページを作成します。フラットデザインとミニマリズムの原則に従い、エレガントなタイポグラフィ、レスポンシブデザイン、そしてアクセシビリティを考慮したスタイリングを取り入れます。
以下は、基本的なHTMLとCSSコードです。このコードは、基本的なリセットスタイル、レスポンシブグリッドレイアウト、カードコンポーネントなど、現代的なデザイン要素を含んでいます。
html1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>おしゃれなウェブページ</title> 7 <link rel="stylesheet" href="styles.css"> 8</head> 9<body> 10 <header class="site-header"> 11 <nav class="navbar"> 12 <div class="brand">MyBrand</div> 13 <ul class="nav-links"> 14 <li><a href="#">Home</a></li> 15 <li><a href="#">About</a></li> 16 <li><a href="#">Services</a></li> 17 <li><a href="#">Contact</a></li> 18 </ul> 19 </nav> 20 </header> 21 <main> 22 <section class="hero"> 23 <h1>おしゃれなウェブページへようこそ</h1> 24 <p>エレガントで機能的なデザインをお楽しみください。</p> 25 </section> 26 <section class="content"> 27 <div class="card"> 28 <h2>サービス1</h2> 29 <p>詳細情報1の詳細をここに記述します。</p> 30 </div> 31 <div class="card"> 32 <h2>サービス2</h2> 33 <p>詳細情報2の詳細をここに記述します。</p> 34 </div> 35 <div class="card"> 36 <h2>サービス3</h2> 37 <p>詳細情報3の詳細をここに記述します。</p> 38 </div> 39 </section> 40 </main> 41 <footer class="site-footer"> 42 <p>© 2023 MyBrand. All rights reserved.</p> 43 </footer> 44</body> 45</html>
css1/* styles.css */ 2 3/* Reset CSS */ 4* { 5 margin: 0; 6 padding: 0; 7 box-sizing: border-box; 8} 9 10/* Basic Typography */ 11body { 12 font-family: 'Arial', sans-serif; 13 line-height: 1.6; 14 color: #333; 15 background-color: #f4f4f4; 16 padding: 20px; 17} 18 19/* Header and Navigation */ 20.site-header { 21 background: #333; 22 color: #fff; 23 padding: 10px 20px; 24} 25 26.navbar { 27 display: flex; 28 justify-content: space-between; 29 align-items: center; 30} 31 32.navbar .brand { 33 font-size: 1.5em; 34} 35 36.navbar .nav-links { 37 list-style: none; 38} 39 40.navbar .nav-links li { 41 display: inline; 42 margin: 0 10px; 43} 44 45.navbar .nav-links a { 46 color: #fff; 47 text-decoration: none; 48} 49 50/* Hero Section */ 51.hero { 52 text-align: center; 53 background: #6699cc; 54 color: #fff; 55 padding: 80px 20px; 56 margin: 20px 0; 57 border-radius: 8px; 58} 59 60.hero h1 { 61 font-size: 2.5em; 62 margin-bottom: 10px; 63} 64 65.hero p { 66 font-size: 1.2em; 67} 68 69/* Content Section */ 70.content { 71 display: grid; 72 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 73 gap: 20px; 74} 75 76/* Card Component */ 77.card { 78 background: #fff; 79 padding: 20px; 80 border-radius: 8px; 81 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 82} 83 84.card h2 { 85 font-size: 1.5em; 86 margin-bottom: 10px; 87} 88 89.card p { 90 font-size: 1em; 91 color: #666; 92} 93 94/* Footer */ 95.site-footer { 96 text-align: center; 97 margin-top: 40px; 98 color: #999; 99} 100 101/* Responsive Design */ 102@media (max-width: 768px) { 103 .navbar .nav-links li { 104 display: block; 105 margin: 10px 0; 106 } 107 108 .hero { 109 padding: 40px 20px; 110 } 111 112 .hero h1 { 113 font-size: 2em; 114 } 115}
説明
このコードは、以下の要素を含んでいます:
- リセットCSS: ボックスモデルを適用し、すべてのマージンとパディングをリセット。
- 基本スタイリング: 全体のフォントやカラーを設定。
- レスポンシブナビゲーションバー: モバイルフレンドリーなナビゲーションバー。
- ヒーローセクション: 大きな見出しと説明文を含む目を引くセクション。
- グリッドレイアウトのコンテンツセクション: 各項目をカードコンポーネントとして表示。
- フッター: ページの下部に固定。
コメント 0
他のプロンプトもチェック
GPTs
情報収集
気になる求人を簡易的に労働環境と足て安全かを測定します。各種求人サイトの求人をPDFでアップロード、又は求人の文面をペーストすることで『ブラック企業度』を診断します。『労働基準法』、『36協定』ををKnowledge内に同梱しているので労働相談も可能になっています。2045122資料作成
推奨モデル - GPT-4o✨最強プレゼンAI爆誕!🎯資料&台本を秒速で生成🙌 🔥台本つきで超安心!🎙️伝わるプレゼンが秒速で完成🙋♂️💬 #パワポ #資料作成 #プレゼン #会議 #企画5305602.73Kプロンプト生成
推奨モデル - GPT-4oテスト中 動画生成用のプロンプト作成ツールです。 品質要求は固定化しています。 ・参考資料 [主体の説明], [動作の説明], [シーンの説明], [スタイルの説明], [品質要求] https://comfyui-wiki.com/ja/tutorial/advanced/hunyuan-text-to-video-workflow-guide-and-example0013201画像生成
物語・脚本・プロット
性別、背景色の選択ができますので、それ以外の職業や服装などの部分を自由に指定してください。2038587