演習 - リストとリンク

完了

この演習では、残りの情報を履歴書に追加します。 メール アドレス、ソーシャル メディア のリンク、エクスペリエンスの一覧を含めます。 この演習では一般的なテキストを使用しますが、詳細に合わせて自由にコンテンツをカスタマイズする必要があります。

メール アドレスとソーシャル メディアを追加する

まず、電子メール アドレスとソーシャル メディアのリンクを履歴書に追加します。

1. vscode.dev でブラウザー ウィンドウに戻ります。

注

ブラウザーまたは CodeSwing を閉じた場合は、次の手順に従って CodeSwing プロジェクトを再度開きます。

1. vscode.dev を開きます。 既に HTML ファイルを開き、CodeSwing をもう一度開く必要がある場合は、手順 6 に進みます。
2. [フォルダー 開く] を選択します。
3. 先ほど作成した 再開 フォルダーに移動し、[フォルダーの選択] を 選択します。
4. [ サイト ビュー ファイルを許可する] というメッセージが表示されたら、[ ファイルの表示] を選択します。
5. 左側の [エクスプローラー] ウィンドウで、index.html ファイルを選択します。
6. Windows または Linux の場合は Ctrl + Shift + P キー、Mac では Cmd + Shift + P キーを押します。
7. 上部に表示されるボックスに「 codeswing: open swing 」と入力し、Enter キーを押すか、キーボードで戻ります。
8. メッセージが表示されたら、先ほど選択した 再開フォルダー を選択します。

2. index.html内と <!-- email address -->というコメントの下に、次の HTML を追加してメールへのリンクを追加し、your-email@example.com をメール アドレスに置き換えます。

   <a href="mailto:your-email@example.com">your-email@example.com</a>
   

3. ページは、メール アドレスで自動的に更新されます。

4. <!-- social media -->というコメントの下に、次の HTML を追加してリストを作成します。

   <ul>
       <li><a href="https://github.com/microsoft>">GitHub</a></li>
       <li><a href="https://www.linkedin.com/company/microsoft>">LinkedIn</a></li>
       <li><a href="https://x.com/microsoft>">X</a></li>
   </ul>
   

5. ページが更新され、追加したソーシャル メディア アカウントの一覧が表示されます。

教育とエクスペリエンスの追加

連絡先情報が追加されたので、教育やその他の経験を含めることで履歴書への追加が完了します。

1. index.html 内の <!-- education --> というコメントの下に、学歴情報を表す次の HTML を追加します。

   <h3>School name</h3>
   <h4>Major</h4>
   <ul>
       <li>GPA: 4.0</li>
       <li>Years attended</li>
   </ul>
   

2. <!-- experience -->というコメントの下に、エクスペリエンス用の次の HTML を追加します。

   <h3>Company name</h3>
   <h4>Title</h4>
   <h4>Dates</h4>
   <ul>
       <li>Cool accomplishment</li>
       <li>Cool accomplishment</li>
   </ul>
   
   <h3>Cool hackathon</h3>
   <h4>Project title</h4>
   <h4>Dates</h4>
   <ul>
       <li>Cool accomplishment</li>
       <li>Cool accomplishment</li>
   </ul>
   

3. ウィンドウが新しい情報で更新されます。