コーディング模擬演習 − 自己紹介サイトをつくろう

今回は、これまで学んできたHTMLとCSSを自由に使って、自分自身を紹介する「自己紹介サイト」を作ってみましょう。

これまでみなさんに取り組んでもらったコーディングの演習は「COUNTRY WORKS」や「OFFICE CREA」のように用意されたデザインをもとに実装する演習でした。実際のお仕事では既にできているデザインをもとにコーディングすることがほとんどですが、今回はちょっと違います。

デザインも内容も、すべて自分で決めて作ってみましょう！

この演習の目的

これまでの演習は「用意されたデザインを再現する」ことが目標でした。

今回は「どのタグを使うか」「どのCSSプロパティをどこに使うか」、すべて自分で考えながら作ることがこの演習の目的です。

また、できあがったWebサイトは自身の実績として、ダレカンの研修サイト上のコンテンツとして他の方も見れる形で公開させていただく予定です。これまで得たスキルや自分の得意なことや好きなことを知ってもらう名刺代わりの良いツールにもなります。

サイトの形に決まった正解はありませんので、自分で考えながら手を動かす経験を積んで、コーディングの理解力を底上げしていきましょう！

作るもの

あなた自身を紹介する1ページのWebサイトを作ります。

ページの中に、次のような内容を1つ以上含めてください。

• 自分の名前やあだ名
• 自己紹介（自分がどんな人か、どんなことが好きか）
• これまで学んで身につけたスキル
• 得意なことや趣味
• 好きなもの（食べ物・音楽・映画・スポーツなど）

それ以外の内容も、自由に追加してOKです。「推しを紹介するコーナー」でも「今ハマっていることリスト」でも、自分らしい内容にしてください✨

ファイル構成

新しく自己紹介サイト用のフォルダを作成して、その中に以下のファイルを用意してください。

自己紹介サイト/
├── index.html
├── image/
    └── 使う画像を入れる
└── css/
    └── style.css

デザインは自由

配色・レイアウト・フォントなどはすべて自分で決めてOKです！これまで学んだCSSのテクニックをぜひ取り入れてみましょう。

• Flexboxでナビゲーションや横並びレイアウトを組む
• Gridで写真や好きなものを並べる
• 背景色・背景画像でセクションを区切る
• hover でボタンや画像に動きをつける
• Google Fontsでフォントを読み込んで変える

「何から始めればいいかわからない」という人は、まず紙に大まかなレイアウトのイメージを書いてみましょう！Figmaが使えそうならば使っていただいてももちろんOKです。

ヘッダー・自己紹介・好きなものコーナー・フッターのように、セクションを分けて考えると組み立てやすくなります。

COUNTRY WORKSのコードを「参考にしながら自分の手で書く」のもOKです。コピーするのではなく書き直すことが、学びにつながります。

画像を使うときは

フリー素材と書かれた画像を探して使いましょう。AIに画像を作ってもらうのは今回はナシとしてください。

写真系

Unsplash – https://unsplash.com/ja

Pixels – https://www.pexels.com/ja-jp/

Photostock – https://photock.jp/

イラスト系

ソコスト – https://soco-st.com/

Loose Drawing – https://loosedrawing.com/

ICOOON MONO – https://icooon-mono.com/

ちょうどいいイラスト – https://tyoudoii-illust.com/

自分で撮った写真を使いたいときは

スマートフォンの写真をパソコンに送る方法として、Discordを活用してください。

1. スマートフォンでDiscord（https://discord.com/login）にログイン
2. 自分の個別ルームを開いて、使いたい写真を添付して送信する
3. パソコンのDiscordで個別ルームを開き、送った画像をクリック →出てきた画像を右クリック→「画像を保存」でダウンロードする

完成したら

完成したら、作業したフォルダごとzipファイルに圧縮してDiscordに提出してください。

コードの使い方・書き方さえ間違えていなければ、どんな形でも基本的にはOKとしています👍

出来上がった