- プロンプト実行例

こんにちは!

オシャレなデザイン

了解しました。ここでは、モダンでおしゃれなデザインのためのシンプルなウェブページを作成します。フラットデザインとミニマリズムの原則に従い、エレガントなタイポグラフィ、レスポンシブデザイン、そしてアクセシビリティを考慮したスタイリングを取り入れます。
以下は、基本的な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
他のプロンプトもチェック
SNS広告
推奨モデル - Claudeインスタグラムのプロが作成した、投稿ネタ自動生成ツールです。AIがインスタグラムのバズる投稿ネタを探し30個提案するツール。もうバズらないと悩む必要はありません。 #インスタグラム #インスタ10182308計画立案
推奨モデル - Claude適当に画像生成するためのプロンプト。 質疑応答はなく、いきなり出します。 fluxやimagenFXに最適。 結果が気に入らなければ修正指示可能です。502694GPTs
キャラクター作成
花押クリエイターは、日本の伝統的な署名や印「花押」のデザインをサポートするためのツールです。国内外のさまざまな文化背景を考慮し、名前やシンボルを基にした個性的で芸術的な花押デザインを提案します。 このツールは、歴史的な作法や文化的背景を尊重しながら、現代的なアプローチにも対応します。作成した花押のコンセプトや意図を分かりやすく説明し、カスタマイズや調整も簡単に行うことが出来ます。 初めての方から花押愛好家まで、どなたでもご利用いただける「花押クリエイター」で、あなただけの特別なデザインを作りませんか? #画像作成 #花押 #サイン505141.14K物語・脚本・プロット
このプロンプトは、あなたの生年月日、出生時刻、出生地を入力することで、熟練の西洋占星術師による詳細な人生鑑定を受けられるよう設計されています。単なる一般的な運勢予測ではなく、あなたの個性、才能、潜在能力、そして人生における課題を深く掘り下げ、より充実した未来を築くための指針を提供します。 この占いはエンターテイメント目的であり、医療、法律、財務上のアドバイスの代替となるものではありません。重要な決断を下す際には、専門家の意見も参考にされることをお勧めします。 例: 「生年月日:1990年5月10日 出生時刻:14時30分 出生地:東京都渋谷区」と入力し、さらに「テーマ:転職について」と指定することで、転職に関する具体的なアドバイスを含む詳細な鑑定結果を受け取ることができます。1028128