演習 - CSS の概念を使用する

7 分

resume Web ページのスタイル設定を開始したいと考えています。まず、ページで使用するさまざまな要素のフォントを選択し、サイズを設定します。

このモジュールでは、vscode.dev (Visual Studio Code と CodeSwing の Web ベースのバージョン) を使用します。これらのツールは、開発プロセスを合理化するのに役立ちます。以下の演習を完了するために、ローカルインストールは必要ありません。

プロジェクトを作成する

まず、フォルダーを作成し、ツールを設定し、vscode.dev で CodeSwing を使用して "スイング" を作成します。スイングには、vscode.dev のコードの結果が自動的に表示されます。 CodeSwing で Microsoft Visual Studio Code を使うと、リアルタイムで行われている更新プログラムのプレビューを使って、変更をすばやく行うことができます。

デスクトップに resume という名前のフォルダーを作成します。
vscode.dev を開きます。
[フォルダー開く] を選択します。
先ほど作成した再開フォルダーに移動し、[フォルダーの選択] を 選択します。
[ サイトビューファイルを許可する] というメッセージが表示されたら、[ ファイルの表示] を選択します。
[ 拡張機能 ] ボタンを選択します。
[ Marketplace の検索拡張機能 ] テキストボックスに「 CodeSwing」と入力します。
[ インストール] を選択して CodeSwing をインストールします。
Mac で Ctrl + Shift + P または Cmd - Shift + P を選択して、コマンドパレットを開きます。
コマンドパレットに 「CodeSwing 」と入力し、[ CodeSwing: New Swing in Directory] を選択します。
現在のディレクトリ (前の手順で作成したディレクトリ) を使用するには、[ フォルダーの選択] を選択します 。
[基本: HTML/CSS/JavaScript] を選択します。
変更を保存して 再開するように求められたら、[ 変更の保存] を選択します。
vscode.dev 内のscript.js の横にある x を選択して、演習中にこのファイルを使用しないため、JavaScript ファイルを閉じます。

Visual Studio Code では、2 つのセクションが並んで作成されます。左側はエディターになり、HTML と CSS を入力できます。右側はブラウザのように動作し、コードの結果を表示します。

HTML ファイルを作成する

既存のHTMLを使用して、CSSのみに集中できるようにします。 HTML には、CSS ファイルを参照する link 要素が含まれています。

index.htmlというタイトルのウィンドウに次の HTML をコピーします。

<html>
    <head>
        <title>Your Name resume</title>
        <link rel="stylesheet" href="style.css">
    </head>

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

        <div id="social-media">
            <h2>Social media</h2>
            <ul>
                <li><a href="https://github.com/">GitHub</a></li>
                <li><a href="https://linkedin.com/in/">LinkedIn</a></li>
                <li><a href="https://x.com/">X</a></li>
            </ul>
        </div>

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

        <h2>Experience</h2>
        <div class="experience">
            <h3>Company name</h3>
            <h4>Title</h4>
        </div>
        <div class="experience">
            <h3>Cool hackathon</h3>
            <h4>Project title</h4>
        </div>

    </body>
</html>

フォントの種類とサイズを設定する

デフォルトでは、ほとんどのブラウザはTimes New Romanなどのセリフフォントを使用します。ページの既定値をより一般的なフォントに設定したいと考えています。さらに、ページとさまざまなヘッダーのフォントのサイズを設定したいと考えています。

style.cssというタイトルのファイル内に、次の CSS を追加して、フォールバックオプションを使用してフォントファミリを Verdana に設定し、フォントサイズを html 要素の 12 ピクセルに設定します。
```
html {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 12px;
}
```
html 要素を使用して、ルートフォントとサイズ設定を更新します。 html要素を使用すると、remサイジングを使用できます。
ページがその変更内容で自動的に更新されることに注目してください。
style.cssの末尾に次の CSS コードを追加して、を通じてh1のサイズを設定します。
```
h1 {
    font-size: 1.6rem;
}

h2 {
    font-size: 1.4rem;
}

h3 {
    font-size: 1.2rem;
}

h4 {
    font-size: 1.1rem;
}
```
rem はルートサイズ (14 ピクセル) に基づいています。たとえば、この CSS では h1 のサイズを 22.4 ピクセルに設定します。
ページは vscode.dev で自動的に更新されます。
次の演習で使用するため、このウィンドウを開いたままにしておきます。

結果と次のステップ

次のスクリーンショットは、この演習で適用した CSS の結果です。さまざまなフォントとサイズを試したい場合は、必要に応じて CSS を変更できます。

ブラウザーでレンダリングされた最終ページのスクリーンショット。

フィードバック

このページはお役に立ちましたか?