自己紹介サイトを作成しよう

HTMLとCSSを使ったハンズオンのリポジトリです。 このリポジトリを自身のGitHubへフォークし、各々の環境にクローンしてハンズオンを進めてください。

index.htmlとcssディレクトリ内のstyles.cssにコードを書いてください。Answerディレクトリにコード例があるので、その中のindex.htmlをブラウザで表示して作業を進めてください。できるだけ、Answerディレクトリ内のコードを見ずに書いてみましょう。

やること

以下のような自己紹介サイトを作成してください。

フォークしたリポジトリのディレクトリ構成は次の通りです。

HTML-CSS-HandsOn
 ├─ Answer
 ├─ css
 │   └─ styles.css
 ├─ img
 │   ├─ article.jpg
 │   ├─ logo.png
 │   ├─ main_visual.jpg
 │   └─ profile.png
 └─ index.html

リポジトリ直下のindex.htmlとcssディレクトリにあるstyles.cssにコードを追加してください。

imgディレクトリにはサンプルサイトで使用している画像ファイルが入っています。この画像を使っても、自分で用意した画像に差し替えてもOKです。

Answerディレクトリにはコード例があるので、そこにあるindex.htmlをブラウザに表示して、参考にしながら進めてください。できる限りAnswerディレクトリにあるコードは見ずに進めてみましょう。

条件

• ヘッダーのメニュー部分（ProfileとArticle）は2つのメニューが24px間隔です。
• 2つのメニューは、ホバーした時に不透明度を0.7にします。
• メインビジュアル（鳥の画像）は、幅は親要素の100%、高さは640px、角の丸め半径は16pxです。
• ProfileセクションとArticleセクションは、「タイトル部分」と「内容部分」が40pxの間隔で縦並びになっています。
• Profileセクションは、「画像部分」と「文章部分」が40pxの間隔で横並びになっており、「文章部分」は「名前部分」と「説明部分」が16pxの間隔で縦並びになっています。
• Articleセクションは、記事が縦方向に40px、横方向に16pxの間隔で格子状に並んでおり、各記事は「画像部分」と「タイトル部分」と「内容部分」が8pxの間隔で縦並びになっています。
• フッターは、上下のpaddingが40px、font-sizeはsmallです。

GitHubへプッシュしよう

編集した内容をステージング＆コミットし、自身のGitHubにあるリモートリポジトリにプッシュしましょう。以下のコマンドを実行します。作業の途中、キリの良いところやファイル毎にコミットを作成してもOKです。

# すべてのファイルをステージング
git add .

# コミット（コミットメッセージは自由に記述してください）
git commit -m "コミットメッセージ"

# リモートリポジトリへプッシュ
git push origin main