【HTML/CSS】chatGPT君提供の上級者向けチャレンジ5選！

アーマードコアの日記が、だいぶプレイしてから期間があいてしまっているので消してしまおうか迷っている今日この頃。続きを書くにしても環境が変わっているだろう…ぐすん。
そんなこんな、年も明けましたね、あけましておめでとう！！2月中旬だ、って？？新年初記事だし仕方ない！

最近はずっとarkしてるけど、HTML/CSSの練習やjavascriptの練習をchatGPT君としているよ。今日はそれをすこし。

GPT君に「HTML,CSSの練習をしたいので、お題を出して貰えますか？？？上級者向けにお願い！！」て頼んだらこんな風に返ってきたんだ。

上級者向けのHTMLとCSSの練習お題をいくつか提案します。これらのお題は、既存のスキルを活かしつつ新しいテクニックやアイデアを試すのに最適です。

レスポンシブなマガジン風ウェブサイトの作成:
- マルチカラムレイアウトを使用して、記事、画像、広告が含まれるマガジン風のウェブサイトを作成します。
- メディアクエリを使用して、デバイスのサイズに応じてレイアウトが変更されるようにします。
- カスタムプロパティ（CSS変数）を使用して、テーマカラーやフォントサイズを簡単に変更できるようにします。
インタラクティブなポートフォリオサイトの作成:
- CSSとJavaScriptを使って、プロジェクトのスクリーンショットが表示されるインタラクティブなギャラリーを作成します。
- CSSグリッドとフレックスボックスを駆使して、レスポンシブなレイアウトを実現します。
- CSSのみを使用して、ホバーエフェクトやアニメーションを加え、ユーザーのインタラクションを向上させます。
CSSグリッドとフレックスボックスを使ったアートワーク:
- CSSグリッドとフレックスボックスを使用して、複雑なレイアウトやパターンを持つアートワークを作成します。
- clip-pathやbackground-blend-modeなどのCSSプロパティを使用して、独特の形状やテクスチャを実現します。
ダークモード対応ウェブサイトの作成:
- メディアクエリprefers-color-schemeを使用して、ユーザーのシステム設定に基づいてライトモードとダークモードを切り替えるウェブサイトを作成します。
- JavaScriptを使用して、ユーザーがサイト上で明るさのモードを手動で切り替えられる機能を実装します。
CSSでの3Dアニメーションの作成:
- transformプロパティを使用して、要素に3D回転や移動のアニメーションを加えます。
- パララックス効果やインタラクティブな3Dカードを作成し、ユーザーのマウス移動やスクロールに応じて動作します。

これらのプロジェクトを通じて、デザイン、レイアウト、インタラクションの各面でスキルを深め、最新のウェブ技術を駆使することができます。実装中に新しいテクニックに挑戦し、創造性を発揮してください。

それで、これらから「模範解答」として出してもらったのがこちら！

1. レスポンシブマガジン風ウェブサイト
マルチカラムレイアウトを採用し、記事、画像、広告を含むマガジン風のウェブサイトを作成。メディアクエリを駆使してデバイスサイズに応じたレイアウトの変更、カスタムプロパティを用いたテーマカラーとフォントサイズの調整に挑戦やー！

出来上がったサイトはコチラ

-HTML-

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>レスポンシブマガジンウェブサイト</title>
    <link rel="stylesheet" href="styles/styles.css">
</head>
<body>
    <header>
        <nav>
            <ul>
                <li><a href="#">ホーム</a></li>
                <li><a href="#">記事</a></li>
                <li><a href="#">特集</a></li>
                <li><a href="#">コンタクト</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <article>
            <header>わ
                <h1>記事のタイトル</h1>
                <p>記事の概要...</p>
            </header>
            <section>
                <h2>セクションタイトル</h2>
                <p>セクションの内容...</p>
                <!-- 画像などのメディア要素を追加 -->
                <img src="image.jpg" alt="記事の画像">
            </section>
            <footer>
                <p>公開日: 2024年2月3日</p>
                <p>著者: 著者名</p>
            </footer>
        </article>

        <aside>
            <!-- 広告や関連記事などのサイドバーのコンテンツ -->
            <section>
                <h2>広告</h2>
                <!-- 広告の内容 -->
            </section>
            <section>
                <h2>関連記事</h2>
                <!-- 関連記事のリスト -->
                <ul>
                    <li><a href="#">関連記事1</a></li>
                    <li><a href="#">関連記事2</a></li>
                </ul>
            </section>
        </aside>
    </main>

    <footer>
        <p>© 2024 マガジン名. All rights reserved.</p>
        <!-- SNSリンクなど -->
        <a href="#">Twitter</a> | <a href="#">Facebook</a>
    </footer>
</body>
</html>

CSS

:root {
    /* カスタムプロパティ（テーマカラー、フォントサイズ） */
    --primary-color: #333;
    --secondary-color: #555;
    --background-color: #f4f4f4;
    --font-size-normal: 16px;
    --font-size-large: 20px;
}

body {
    font-family: Arial, sans-serif;
    font-size: var(--font-size-normal);
    color: var(--primary-color);
    background-color: var(--background-color);
    margin: 0;
    padding: 0;
}

header, footer {
    background-color: var(--secondary-color);
    color: white;
    text-align: center;
    padding: 1rem 0;
}

nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

nav ul li {
    float: left;
}

nav ul li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

nav ul li a:hover {
    background-color: #111;
}

main {
    display: flex;
    flex-wrap: wrap;
    padding: 20px;
}

article {
    flex: 1;
    margin-right: 20px;
}

article header h1, article header p {
    margin: 0;
    padding: 0;
}

aside {
    width: 200px;
}

@media (max-width: 768px) {
    nav ul li {
        float: none;
    }

    main {
        flex-direction: column;
    }

    article {
        margin-right: 0;
    }

    aside {
        width: 100%;
    }
}

2.インタラクティブなポートフォリオサイト
CSSとJavaScriptを使って、プロジェクトのスクリーンショットが表示されるインタラクティブなギャラリーを作成。CSSグリッドとフレックスボックスでレスポンシブなレイアウトを実現し、ホバーエフェクトやアニメーションでユーザーのインタラクションを引き出しましょう。※プロジェクトのスクリーンショットクリックでモーダルウィンドウが表示されるよ！

出来上がったサイトはコチラ

-HTML-

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>インタラクティブポートフォリオ</title>
    <link rel="stylesheet" href="styles/style.css">
</head>
<body>
    <header>
        <nav>
            <ul>
                <li><a href="#">ホーム</a></li>
                <li><a href="#">ポートフォリオ</a></li>
                <li><a href="#">○○について</a></li>
                <li><a href="#">コンタクト</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <section class="portfolio">
            <div class="gallery">
                <!-- ポートフォリオアイテム -->
                <figure class="project" data-modal-target="#modal1">
                    <img src="project1.jpg" alt="プロジェクト1">
                    <figcaption>プロジェクト1の説明</figcaption>
                </figure>
                <!-- モーダルウィンドウ -->
                <div id="modal1" class="modal">
                    <div class="modal-content">
                    <span class="close-button">&times;</span>
                    <h2>プロジェクト1の詳細</h2>
                    <p>ここにプロジェクト1の詳細情報が入ります。</p>
                    </div>
                </div>
                <figure class="project" data-modal-target="#modal2">
                    <img src="project2.jpg" alt="プロジェクト2">
                    <figcaption>プロジェクト2の説明</figcaption>
                </figure>
                <!-- モーダルウィンドウ -->
                <div id="modal2" class="modal">
                    <div class="modal-content">
                    <span class="close-button">&times;</span>
                    <h2>プロジェクト2の詳細</h2>
                    <p>ここにプロジェクト2の詳細情報が入ります。</p>
                    </div>
                </div>
                <!-- 追加のプロジェクト要素 -->
            </div>
        </section>

        <section class="contact">
            <h2>コンタクト</h2>
            <p>お問い合わせはこちらから。</p>
            <!-- コンタクトフォーム -->
        </section>
    </main>

    <footer>
        <p>© 2024 ウェブサイト名. All rights reserved.</p>
    </footer>

    <script src="scripts/script.js"></script>
</body>
</html>

CSS

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

header, footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 1rem;
}

nav ul {
    list-style: none;
    padding: 0;
}

nav ul li {
    display: inline;
    margin-right: 20px;
}

nav ul li a {
    color: white;
    text-decoration: none;
}

.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
    padding: 20px;
}

.project img {
    width: 100%;
    height: auto;
    border-radius: 5px;
}

.project figcaption {
    text-align: center;
    padding: 10px;
}

.project:hover figcaption {
    background-color: rgba(0,0,0,0.7);
    color: white;
    transition: background-color 0.5s ease;
}

.modal {
    display: none; /* モーダルを非表示に */
    position: fixed; /* ビューポートに対して固定 */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* 半透明の背景 */
    z-index: 1; /* コンテンツの上に表示 */
}

.modal-content {
  background-color: #fefefe;
  margin: 15% auto; /* 上下のマージンを自動で中央揃え */
  padding: 20px;
  border: 1px solid #888;
  width: 80%; /* 幅はビューポートの80% */
}

.close-button {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close-button:hover,
.close-button:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

@media screen and (max-width: 600px) {
    .gallery {
        grid-template-columns: 1fr;
    }
}

javascript

document.addEventListener('DOMContentLoaded', function() {
  // モーダルを開く
  document.querySelectorAll('.project').forEach(item => {
    item.addEventListener('click', function() {
      const modalId = this.getAttribute('data-modal-target');
      document.querySelector(modalId).style.display = 'block';
    });
  });

  // モーダルを閉じる
  document.querySelectorAll('.close-button').forEach(button => {
    button.addEventListener('click', function() {
      this.closest('.modal').style.display = 'none';
    });
  });

  // モーダル外をクリックしても閉じる
  window.addEventListener('click', function(e) {
    if (e.target.classList.contains('modal')) {
      e.target.style.display = 'none';
    }
  });
});

3. CSSグリッドとフレックスボックスを使ったアートワーク
複雑なレイアウトやパターンを持つアートワークをCSSで作成します。clip-pathやbackground-blend-modeなどのプロパティを活用して、独特の形状やテクスチャを表現しましょう。

出来上がったサイトはコチラ

-HTML-

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Artwork</title>
    <link rel="stylesheet" href="styles/style.css">
</head>
<body>
    <div class="art-container">
        <div class="art-piece">1</div>
        <div class="art-piece">2</div>
        <div class="art-piece">3</div>
        <!-- さらにアートピースを追加 -->
    </div>
</body>
</html>

CSS

body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

.art-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    grid-gap: 10px;
    padding: 10px;
}

.art-piece {
    width: 100px;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #ffcc00;
    color: #fff;
    font-size: 20px;
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

/* 追加のスタイリングやアニメーション */
.art-piece:hover {
    background-color: #ff6600;
    transition: background-color 0.5s ease;
}

4. ダークモード対応ウェブサイト
ユーザーのシステム設定に基づいてライトモードとダークモードを自動切り替えるウェブサイトを作成します。prefers-color-schemeメディアクエリとカスタムプロパティを組み合わせて、テーマをスムーズに切り替えられるようにしましょう。※トグルボタンでの切り替えも追加してるよ！

出来上がったサイトはコチラ

-HTML-

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ダークモード対応ウェブサイト</title>
    <link rel="stylesheet" href="styles/style.css">
</head>
<body>
    <header>
        <h1>ダークモード対応ウェブサイト</h1>
        <nav>
            <ul>
                <li><a href="#">ホーム</a></li>
                <li><a href="#">記事</a></li>
                <li><a href="#">コンタクト</a></li>
                <li class="theme-switch-wrapper">light
                    <label class="theme-switch" for="theme-switch-checkbox">
                        <input type="checkbox" id="theme-switch-checkbox" />
                        <div class="slider round"></div>
                    </label>dark
                </li>
            </ul>
        </nav>
    </header>
    <main>
        <section>
            <h2>セクションのタイトル</h2>
            <p>ここにコンテンツが入ります。</p>
        </section>
    </main>
    <footer>
        <p>&copy; 2024 ウェブサイト名</p>
    </footer>
    <script src="scripts/script.js"></script>
</body>
</html>

CSS

:root {
    --bg-color: #ffffff;
    --text-color: #000000;
    --link-color: #0000ff;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg-color: #333333;
        --text-color: #ffffff;
        --link-color: #0096ff;
    }
}

body.dark-mode {
    --bg-color: #333333;
    --text-color: #ffffff;
    --link-color: #0096ff;
    transition: background-color 0.5s, color 0.5s;
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    transition: background-color 0.5s, color 0.5s;
}


a {
    color: var(--link-color);
}

header, footer {
    background-color: var(--bg-color);
    color: var(--text-color);
    padding: 20px;
    text-align: center;
    transition: background-color 0.5s, color 0.5s;
}

nav ul{
    list-style: none;
    padding: 0;
}

nav ul li {
    display: inline;
    margin-right: 20px;
    line-height: 34px;
}

main {
    padding: 20px;
}

.theme-switch-wrapper {
    align-items: center;
    margin-left: 50px;
    position: absolute;
}

.theme-switch {
    display: inline-block;
    height: 34px;
    position: relative;
    width: 60px;
}

.theme-switch input {
    display:none;
}

.slider {
    background-color: #ccc;
    bottom: 0;
    cursor: pointer;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transition: .4s;
}

.slider:before {
    background-color: white;
    bottom: 4px;
    content: "";
    height: 26px;
    left: 4px;
    position: absolute;
    transition: .4s;
    width: 26px;
}

input:checked + .slider {
    background-color: #66bb6a;
}

input:checked + .slider:before {
    transform: translateX(26px);
}

.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}

javascript

document.getElementById('theme-switch-checkbox').addEventListener('change', function(event) {
  if (event.target.checked) {
      document.body.classList.add('dark-mode');
  } else {
      document.body.classList.remove('dark-mode');
  }
});

5. CSSでの3Dアニメーション
transformプロパティを使って、要素に3D回転や移動のアニメーションを加えることで、ウェブサイトに動的なエレメントを追加します。例えば、カードがフリップするアニメーションや、スクロールに応じて変化するパララックス効果に挑戦してみましょう。

出来上がったサイトはコチラ ※カードフリップのみ

-HTML-

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3Danimation</title>
    <link rel="stylesheet" href="styles/style.css">
</head>
<body>
    <div class="card-container">
        <div class="card">
          <div class="card-front">
            フロント
          </div>
          <div class="card-back">
            バック
          </div>
        </div>
      </div>
      
</body>
</html>

CSS

.card-container {
    perspective: 1000px;
  }
  
  .card {
    width: 200px;
    height: 300px;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.8s;
  }
  
  .card:hover {
    transform: rotateY(180deg);
  }
  
  .card-front, .card-back {
    width: 100%;
    height: 100%;
    position: absolute;
    backface-visibility: hidden;
  }
  
  .card-front {
    background-color: #ffa500;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .card-back {
    background-color: #008000;
    color: white;
    transform: rotateY(180deg);
    display: flex;
    justify-content: center;
    align-items: center;
  }

と、こんな感じで出来上がったんだ！　chatGPT君の模範解答に少し手を加えてるけどほぼほぼGPT君の記述のまんまだから、実際の制作はラクチンになる予感がすごくするね。こんな感じな練習をもっと増やしていこう。javascripでtodoリストも作ってみたし（それはここ！）、よくあるスライドショーのいろんなバリエーションを載せてるwebサイトみたいにしてもいいかもなー。いまここWordpressで作ってるけど、HTML系は「WEB製作の学び場」として場所作っているから、そっちの拡充だな。うん！そうしよう！

アーマードコアの日記…あーーー、、、、需要があれば？(;´･ω･)

くりゆの湯

【HTML/CSS】chatGPT君提供の上級者向けチャレンジ5選！

関連

コメントを残すコメントをキャンセル

2024年6月
月	火	水	木	金	土	日
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30

【HTML/CSS】chatGPT君提供の上級者向けチャレンジ5選！

共有:

関連

コメントを残すコメントをキャンセル