- プロンプト実行例
こんにちは！
オシャレなデザイン
了解しました。ここでは、モダンでおしゃれなデザインのためのシンプルなウェブページを作成します。フラットデザインとミニマリズムの原則に従い、エレガントなタイポグラフィ、レスポンシブデザイン、そしてアクセシビリティを考慮したスタイリングを取り入れます。
以下は、基本的な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
他のプロンプトもチェック
画像生成
資料作成
推奨モデル - DALL•E 3何かと何かをかけ合わせた抽象的な3Dアートを生成するプロンプトです。 あなたの創造性を刺激し、一風変わった視覚体験を生み出すように設計しました。 抽象的な3Dイラストを通じて、あなたのプロジェクトに独自の感触を加えることができます。 例えば、次のような用途が考えられます。 ・表紙デザイン ・キービジュアル ・SNSの投稿ネタ ・ブログの挿絵 ・プロモーション素材 ・インテリアデザイン ・衣服やグッズなどにプリント など ---------- 😊少しでも気に入っていただけましたら、お気に入り（❤マーク）をクリックしていただけると、とても励みになりますので、ぜひお願いいたします。 😊また、「いつか使ってみよう」と思っている方も、お気に入りに登録しておくと、いつでもマイページからすぐにご利用いただけます。 😊感想など、お気軽にコメントください。003122GPTs
プロンプト生成
「○○のプロンプトつくって」と入力すると、自動的にプロンプトを作ってくれます。○○には目的やゴールを代入してください。 #chatGPT #プロンプト生成 #プロンプトエンジニアリング1209012.19Kロールプレイ
推奨モデル - GPT 4o世界最大級のアキネイターAIです！！あなたの思い浮かべている人物やキャラを当ててもらおう！10340画像生成
キャラクター作成
推奨モデル - DALL•E 3テーマを 入力して、オリジナルのゆるキャラを作ってみてください。 公開プロンプトは 自由に使用してください🤙 #SNS #Instagram #X #Twitter #TikTok #ChatGPT #画像生成 #マーケティング1025649
