1. 教えてAI byGMO
  2. システム開発
  3. コード生成・修正
  4. CSSに特化？！CSSのスクリプトコードを生成する世界最大級のCSSAI
sora_gpt
アディラス
CSSに特化？！CSSのスクリプトコードを生成する世界最大級のCSSAI

CSSに特化？！CSSのスクリプトコードを生成する世界最大級のCSSAI

CSSに特化したAIです。

推奨モデル - GPT 4o
6
0
340
178
user_176213401951438848
user_166910699665272832
user_152583498353807360
…がお気に入り登録しました。

投稿日時：

  • プロンプト実行例
CSSに特化？！CSSのスクリプトコードを生成する世界最大級のCSSAI

こんにちは！

オシャレなデザイン

CSSに特化？！CSSのスクリプトコードを生成する世界最大級のCSSAI

了解しました。ここでは、モダンでおしゃれなデザインのためのシンプルなウェブページを作成します。フラットデザインとミニマリズムの原則に従い、エレガントなタイポグラフィ、レスポンシブデザイン、そしてアクセシビリティを考慮したスタイリングを取り入れます。

以下は、基本的なHTMLとCSSコードです。このコードは、基本的なリセットスタイル、レスポンシブグリッドレイアウト、カードコンポーネントなど、現代的なデザイン要素を含んでいます。

html
1<!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>&copy; 2023 MyBrand. All rights reserved.</p>
43    </footer>
44</body>
45</html>
css
1/* 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}

説明

このコードは、以下の要素を含んでいます：

  1. リセットCSS: ボックスモデルを適用し、すべてのマージンとパディングをリセット。
  2. 基本スタイリング: 全体のフォントやカラーを設定。
  3. レスポンシブナビゲーションバー: モバイルフレンドリーなナビゲーションバー。
  4. ヒーローセクション: 大きな見出しと説明文を含む目を引くセクション。
  5. グリッドレイアウトのコンテンツセクション: 各項目をカードコンポーネントとして表示。
  6. フッター: ページの下部に固定。

コメント 0

他のプロンプトもチェック

  • GPTs

    資料作成

    ショート動画台本自動作成ツール
    ショート動画台本自動作成ツール
    ▼最新作はこちら▼ https://oshiete.ai/item_lists/73557973863457792 【GPTsでより高精度に！】Xやインスタリール、YouTubeショート、TikTok全てに使えるショート動画作成ツールです。 ショート動画戦国時代をAIとともに乗り越えましょう！！ 興味をひける短い動画の自動作成が可能になります。
    57
    4
    1.47K
    4.87K
    GrokGPTs
    Tam-BizAI編集長

  • GPTs

    キャラクター作成

    花押クリエイター
    花押クリエイター
    花押クリエイターは、日本の伝統的な署名や印「花押」のデザインをサポートするためのツールです。国内外のさまざまな文化背景を考慮し、名前やシンボルを基にした個性的で芸術的な花押デザインを提案します。 このツールは、歴史的な作法や文化的背景を尊重しながら、現代的なアプローチにも対応します。作成した花押のコンセプトや意図を分かりやすく説明し、カスタマイズや調整も簡単に行うことが出来ます。 初めての方から花押愛好家まで、どなたでもご利用いただける「花押クリエイター」で、あなただけの特別なデザインを作りませんか？　GPTsストアで高評価していただけると嬉しいです。 #画像作成 #花押　#サイン
    7
    2
    1.54K
    3.47K
    shimasang
    shimasang

  • 文案作成

    2chスレ生成Bot
    2chスレ生成Bot
    2chのVIPPERのようなスレを生成することが出来ます。Claude（高精度）がおすすめです。 改善案等ございましたらコメントにてお願いいたします。
    2
    0
    51
    466
    sora_gpt
    アディラス

  • GPTs

    物語・脚本・プロット

    ABM Persona Simulation Lab (Rev)
    ABM Persona Simulation Lab (Rev)
    私は、あなたがくれた情報（インプット）をもとに、頭の中でキャラクターや出来事の動きを計算・整理し（プロセス）、それを会話や物語として形にして返します（アウトプット）。 コツは、最初にテーマや登場人物の特徴をできるだけ具体的に書くこと。そうすると物語が自然に広がります。 注意点は、設定があまりにもあいまいだとシミュレーションが薄くなってしまうこと。また、途中で条件を変えると結果も大きく変わります。 #シミュレーション #物語生成 #AI活用 #キャラクターモデリング #創作支援
    0
    0
    3
    33
    choice_of_equity2030
    Yuki_8