12 KiB
VSCode.devを使って履歴書ウェブサイトを作成する
採用担当者が履歴書を求めてきたときに、URLを送るだけで済むなんて素敵じゃないですか？ 😎
目標
この課題を終えると、以下のことができるようになります：
- 履歴書を紹介するウェブサイトを作成する
前提条件
- GitHubアカウント。まだ作成していない場合は、GitHubにアクセスしてアカウントを作成してください。
手順
ステップ1: 新しいGitHubリポジトリを作成し、名前をmy-resumeと付ける
ステップ2: リポジトリ内にindex.htmlファイルを作成する。github.com上で少なくとも1つのファイルを追加する必要があります。空のリポジトリはvscode.devで開くことができないためです。
新しいファイルを作成リンクをクリックし、名前をindex.htmlと入力して新しいファイルをコミットボタンを選択します。
ステップ3: VSCode.devを開き、リモートリポジトリを開くボタンを選択します。
履歴書サイト用に作成したリポジトリのURLをコピーし、入力ボックスに貼り付けます：
your-usernameをあなたのGitHubユーザー名に置き換えてください
https://github.com/your-username/my-resume
✅ 成功すると、ブラウザ上のテキストエディタにプロジェクトとindex.htmlファイルが表示されます。
ステップ4: index.htmlファイルを開き、以下のコードをコードエリアに貼り付けて保存します。
履歴書ウェブサイトの内容を担当するHTMLコード。
<html>
<head>
<link href="style.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<title>ここにあなたの名前を入力してください！</title>
</head>
<body>
<header id="header">
<!-- 履歴書のヘッダー：名前と役職 -->
<h1>ここにあなたの名前を入力してください！</h1>
<hr>
あなたの役職！
<hr>
</header>
<main>
<article id="mainLeft">
<section>
<h2>連絡先</h2>
<!-- 連絡先情報（ソーシャルメディア含む） -->
<p>
<i class="fa fa-envelope" aria-hidden="true"></i>
<a href="mailto:username@domain.top-level domain">ここにあなたのメールアドレスを入力してください</a>
</p>
<p>
<i class="fab fa-github" aria-hidden="true"></i>
<a href="github.com/yourGitHubUsername">ここにあなたのGitHubユーザー名を入力してください！</a>
</p>
<p>
<i class="fab fa-linkedin" aria-hidden="true"></i>
<a href="linkedin.com/yourLinkedInUsername">ここにあなたのLinkedInユーザー名を入力してください！</a>
</p>
</section>
<section>
<h2>スキル</h2>
<!-- あなたのスキル -->
<ul>
<li>スキル1！</li>
<li>スキル2！</li>
<li>スキル3！</li>
<li>スキル4！</li>
</ul>
</section>
<section>
<h2>学歴</h2>
<!-- あなたの学歴 -->
<h3>ここにコース名を入力してください！</h3>
<p>
ここに学校名を入力してください！
</p>
<p>
開始日 - 終了日
</p>
</section>
</article>
<article id="mainRight">
<section>
<h2>自己紹介</h2>
<!-- あなたについて -->
<p>ここに自己紹介文を入力してください！</p>
</section>
<section>
<h2>職務経験</h2>
<!-- あなたの職務経験 -->
<h3>職務名</h3>
<p>
ここに組織名を入力してください | 開始月 – 終了月
</p>
<ul>
<li>タスク1 - 何をしたかを書いてください！</li>
<li>タスク2 - 何をしたかを書いてください！</li>
<li>あなたの貢献の成果や影響を書いてください</li>
</ul>
<h3>職務名2</h3>
<p>
ここに組織名を入力してください | 開始月 – 終了月
</p>
<ul>
<li>タスク1 - 何をしたかを書いてください！</li>
<li>タスク2 - 何をしたかを書いてください！</li>
<li>あなたの貢献の成果や影響を書いてください</li>
</ul>
</section>
</article>
</main>
</body>
</html>
HTMLコードの_プレースホルダーのテキスト_をあなたの履歴書の詳細に置き換えてください。
ステップ5: My-Resumeフォルダーにカーソルを合わせ、新しいファイル...アイコンをクリックしてプロジェクトに2つの新しいファイルを作成します：style.cssとcodeswing.jsonファイル
ステップ6: style.cssファイルを開き、以下のコードを貼り付けて保存します。
サイトのレイアウトを整えるCSSコード。
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 16px;
max-width: 960px;
margin: auto;
}
h1 {
font-size: 3em;
letter-spacing: .6em;
padding-top: 1em;
padding-bottom: 1em;
}
h2 {
font-size: 1.5em;
padding-bottom: 1em;
}
h3 {
font-size: 1em;
padding-bottom: 1em;
}
main {
display: grid;
grid-template-columns: 40% 60%;
margin-top: 3em;
}
header {
text-align: center;
margin: auto 2em;
}
section {
margin: auto 1em 4em 2em;
}
i {
margin-right: .5em;
}
p {
margin: .2em auto
}
hr {
border: none;
background-color: lightgray;
height: 1px;
}
h1, h2, h3 {
font-weight: 100;
margin-bottom: 0;
}
#mainLeft {
border-right: 1px solid lightgray;
}
ステップ6: codeswing.jsonファイルを開き、以下のコードを貼り付けて保存します。
{
"scripts": [],
"styles": []
}
ステップ7: Codeswing拡張機能をインストールして、コードエリアで履歴書ウェブサイトを視覚化します。
アクティビティバーの_拡張機能_アイコンをクリックし、Codeswingと入力します。拡張機能を選択して追加情報を読み込むと、コードエリアに表示される_青いインストールボタン_をクリックするか、展開されたアクティビティバーのインストールボタンを使用してインストールします。拡張機能をインストールした直後に、プロジェクトに対する変更をコードエリアで確認できます 😃
拡張機能をインストールした後、画面に以下のような表示がされます。
変更に満足したら、変更フォルダーにカーソルを合わせて+ボタンをクリックし、変更をステージします。
コミットメッセージ (プロジェクトに加えた変更の説明) を入力し、チェックをクリックして変更をコミットします。プロジェクトの作業が完了したら、左上のハンバーガーメニューアイコンを選択してGitHubのリポジトリに戻ります。
おめでとうございます 🎉 数ステップでVSCode.devを使って履歴書ウェブサイトを作成しました。
🚀 チャレンジ
変更権限を持つリモートリポジトリを開き、いくつかのファイルを更新してみてください。次に、新しいブランチを作成して変更を加え、プルリクエストを作成してみましょう。
復習と自己学習
VSCode.devとそのその他の機能についてさらに学びましょう。
免責事項:
この文書はAI翻訳サービスCo-op Translatorを使用して翻訳されています。正確性を追求しておりますが、自動翻訳には誤りや不正確な部分が含まれる可能性があります。元の言語で記載された文書を正式な情報源としてご参照ください。重要な情報については、専門の人間による翻訳を推奨します。この翻訳の利用に起因する誤解や誤った解釈について、当方は一切の責任を負いません。