HTML CSSを使用してポートフォリオを作成しよう！
完成図
ポートフォリオサイト
（ここにデプロイ後のリンク）
環境を設定しよう
このリポジトリは、課題用プロジェクト epsilon_asignment1 のソースコードです。
以下の手順でローカルにクローンし、自分専用のブランチを作成して作業してください。
1. リポジトリをクローン
git clone https://github.com/EpshironPgSchl/epsilon_asignment1.git
2. ディレクトリへの移動
cd epsilon_asignment1
3. 現在のブランチを確認
git branch
4. 自分のブランチを作成してbranchを移動する
git checkout -b your-branch-name
作成したbranchに切り替わっているか確認
5. 作業場所の設定
assignment1の階層に「自分の名前.html」, 「自分の名前.css」のファイルを作成し
動画を見ながらハンズオン形式で進めてください
🌐 HTMLとは？
HTML（HyperText Markup Language）は、Webページの構造を作るための言語です。タグと呼ばれる記号で囲んで、文章や画像、リンクなどを記述します。
🔁 HTMLの雛形テンプレート
HTMLの雛形は、Webページを作るときに毎回使う「基本の形（テンプレート）」です。
この雛形を使うことで、正しく表示されるWebページの土台を作ることができます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>サンプルページ</title>
</head>
<body>
<h1>Hello, world!</h1>
<p>これはHTMLの基本構造の例です。</p>
</body>
</html>
🧱 HTMLの雛形を構成する主なタグとその役割
HTMLを書くときに必ず登場する雛形の各タグについて、ひとつずつ説明します。
| タグ | 説明 |
|---|---|
<!DOCTYPE html> |
この文書が HTML5 で書かれていることをブラウザに伝えます。最初に必ず書きます。 |
<html lang="ja"> |
HTML文書の開始を示します。lang="ja" はこのページが 日本語 で書かれていることを表します。 |
<head> |
画面には表示されない 設定やメタ情報 を記述する部分です（例：タイトル、文字コード、CSSの読み込みなど）。 |
<meta charset="UTF-8"> |
文書の文字エンコーディングを UTF-8 に指定します。日本語の文字化けを防ぐために重要です。 |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
モバイル端末での表示最適化のための設定です。レスポンシブデザイン対応に必須です。 |
<title> |
ページのタイトルを指定します。ブラウザのタブや検索結果の見出しとして表示されます。 |
<body> |
画面に実際に表示される 本文部分 を記述します。ユーザーに見えるコンテンツはすべてここに書きます。 |
✅ よく使うHTMLタグ一覧
| タグ | 説明 |
|---|---|
<html> |
HTML文書の開始と終了を示すタグ。全体をこのタグで囲みます。 |
<head> |
メタ情報（文字コード、タイトル、CSSファイルの読み込みなど）を記述する部分です。 |
<body> |
実際にブラウザに表示される内容を記述します。本文のメイン部分です。 |
<h1>〜<h6> |
見出しタグ。<h1>が最も重要で大きく、数字が増えるほど重要度が下がります。 |
<p> |
段落（paragraph）を表します。文章や説明文などに使われます。 |
<a href="URL"> |
リンクを作成するタグ。href属性にURLを指定します。例：<a href="https://zenn.dev">Zenn</a>
|
<img src="画像URL"> |
画像を表示するタグ。src属性に画像のURLを指定します。 |
<div> |
ブロック要素。Webページ内の区切りやレイアウト調整に使われます。 |
<span> |
インライン要素。文字の一部を装飾するときなどに使用されます。 |
💡補足ポイント
-
<div>と<span>の違いに注意！-
<div>はブロック要素（段落のように改行される） -
<span>はインライン要素（文章の中で使える）
-
-
HTMLは「なにを表示するか」を決める。
-
CSSは「どう見せるか」を決める。（スタイルやレイアウト）
✅ CSSとは？
CSS（Cascading Style Sheets） は、 HTMLで作ったWebページの見た目をデザインするための言語です。
文字の色や大きさ、背景の色、余白、配置など、
**「どう見せるか」**を決めるのがCSSの役割です。
✅ CSSの書き方 3パターン
| 方法 | 特徴 |
|---|---|
| インラインCSS | HTMLタグの中に直接書く（小規模向け） |
<style>タグ |
HTMLの<head>内に書く（練習に便利） |
| 外部CSSファイル |
.cssファイルに書いて読み込む（実務ではこれが基本！） |
＊動画では外部cssファイルを作成する方法です。
✅ よく使う基本プロパティ
| プロパティ | 説明 | 例 |
|---|---|---|
color |
文字の色を変える | color: red; |
background-color |
背景色をつける | background-color: yellow; |
font-size |
文字の大きさ | font-size: 16px; |
text-align |
文字の位置（左寄せ・中央など） | text-align: center; |
margin |
外側の余白 | margin: 20px; |
padding |
内側の余白 | padding: 10px; |
border |
枠線をつける | border: 1px solid black; |
width / height
|
幅や高さを指定 | width: 100px; height: 50px; |
display |
表示形式（ブロック/インラインなど） | display: block; |
flex |
要素を並べる・中央揃えなどに便利 | display: flex; |
🤔 初心者が迷いやすいポイント
📍 position: relative; と position: absolute; の違い
| プロパティ | 意味 |
|---|---|
relative |
元の位置を基準に移動。その場からズラすだけ。親要素には影響なし。 |
absolute |
親要素の位置を基準にして固定。ただし、親が position: relative; などを持っていないと、body全体が基準になる。 |
イメージしにくい方が
以下の動画を参考にしてください！
課題について
課題はassignment1の中のquestion1〜question4を解いてもらいます。
Question1 要素の折り返しをしよう！
問題：question1のフォルダに入って、serviceクラス内のcardクラスを折り返しできるようにしてみましょう
以下のようになっていればOK！！
Question2 320px以下でハンバーガーメニューを実装しよう！
問題：question2のフォルダに入って、320px以下になったときにハンバーガーメニューを実装してみましょう
以下のようになっていればOK！！
Question3 自分だけのポートフォリオを作成しよう！
question3に入って、動画で作成したポートフォリオを元に自分だけのポートフォリオを作成しよう
条件：
-
768px, 320pxのレスポンシブに対応していること
※だた拡大・縮小ではなく要素が大きい場合は要素を折り返すようにしよう -
768pxまたは320px以下でハンバーガーメニューは実装
課題完了後
- 自分のブランチのままpush
- Google FormまたはSlackから課題完了の旨と日程調整をして送信。（日程調整は最短で課題完了日から１週間後以降）
- 調整した日程にQuestionの解き方や理解についての質問テストを実施
- 合格後、課題2へ進む
Discussion