SKIP TO CONTENT

プロンプトでランディングページを作る

beginner~10 0/4 ステップ

はじめてのヒーローセクションを作ろう

ヒーローセクションは、ポートフォリオ・ランディングページの中で最も重要な部分です。訪問者が最初に目にする場所だからです。このレッスンでは、注目を集め、あなたのことをもっと知りたいと思わせるプロフェッショナルなヒーローセクションを作ります。

まず基本のHTMLから始め、Tailwind CSSでスタイリングを加えて、グラデーション背景に印象的な見出し、サブタイトル、行動を促すCTAボタンを備えたモダンなヒーローを完成させます。これは、あらゆる優れたポートフォリオサイトの土台になります。

手順

1

min-h-screen、グラデーション背景(from-purple-900 から gray-900)、flex による中央揃えを持つヒーローコンテナの div を追加しましょう

ヒント: 使用例: `<div class="min-h-screen bg-gradient-to-br from-purple-900 via-gray-900 to-gray-900 flex items-center justify-center px-4">` — 画面いっぱいの高さで、グラデーション付きのセクションになります

2

ヒーローの中に、あなたの名前を入れた h1 の見出しと、肩書き・役職を入れた p のサブタイトルを追加しましょう

3

自分の仕事を紹介する説明の段落(p タグ)を追加しましょう(最大300文字)

4

グラデーションのスタイルとホバーエフェクト付きの CTA ボタンを追加しましょう

あなたのコード

html
13
1
2
3
4
5
6
7
8
9
10
11
12
13

ライブプレビュー

ライブプレビュー