CSSで共通の単位を使用する方法
著者は、 Diversity in Tech Fund を選択して、 Write forDOnationsプログラムの一環として寄付を受け取りました。
序章
CSSを使用してHTMLをスタイリングする場合、選択できるサイズの単位はたくさんあります。 これらの単位は、表示されるテキストの大きさ、コンテナーの幅、または列間のスペースの大きさを判別するのに役立ちます。 さまざまなユニットのそれぞれには、開発者やWebサイトのデザインにとって価値のある機能的な強みがあります。 どのユニットが状況に最も適しているかを知ることは、柔軟でアクセス可能なWebサイトを作成するのに役立ちます。
このチュートリアルでは、ピクセル（px）、パーセント（%）、em、およびrem単位について学習します。 これらのユニットは、font-size、padding、border、margin、width、max-width各ユニットの違いと強みを学びます。
前提条件
- ローカルマシンに
index.htmlとして保存されたHTMLファイルで、選択したテキストエディタとWebブラウザからアクセスできます。 開始するには、 HTMLプロジェクトの設定方法チュートリアルを確認し、HTML要素の使用方法と理解方法に従ってブラウザでHTMLを表示する方法を確認してください。 HTMLを初めて使用する場合は、HTMLでWebサイトを構築する方法シリーズを試してみてください。 - CSSチュートリアルでボックスモデルを操作する方法にあるCSSボックスモデルの知識。
- セレクターを使用して、CSSを使用してスタイルを検索してHTML要素に適用した経験。 詳細については、CSSチュートリアルでスタイルを設定するHTML要素を選択する方法を確認してください。
- CSS チュートリアルでフォント、サイズ、および色を使用してテキスト要素のスタイルを設定する方法を読むことで得られるCSSフォントプロパティの知識。
HTMLとCSSの設定
最初のセクションでは、チュートリアル全体のすべてのスタイル設定の基礎としてHTMLを設定します。 さらに、チュートリアルのスタイルを作成するために使用するCSSファイルを作成します。
まず、テキストエディタでindex.htmlを開き、次のHTMLをファイルに追加します。
<!doctype html>
<html>
<head>
</head>
<body>
</body>
</html>
次に、<head>タグに、metaタグを追加して、このHTMLで使用される文字セット、ページのタイトル、metaタグを宣言します。ページはモバイルデバイスで処理する必要があり、ロードするCSSファイルには Google Fonts のフォントと、次のセクションで作成するstyles.cssファイルが含まれます。
<head>タグへの追加は、次のコードブロックで強調表示されています。 コードが追加および変更されると、チュートリアル全体でこの指定が見つかります。
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>CSS Units</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link href="https://fonts.googleapis.com/css2?family=Averia+Serif+Libre:ital,[email protected],400;0,700;1,400;1,700&display=swap" rel="stylesheet" />
<link href="styles.css" rel="stylesheet" />
</head>
<body>
</body>
</html>
<head>情報が配置されたので、次のステップは、<body>タグでスタイル設定するコンテンツを追加することです。 このコンテンツは、ルイス・キャロルの不思議の国のアリスからの抜粋です。ここでは、アリスがキャタピラーとサイズについて話し合っています。 コンテンツは、見出しのある<figure>要素と、抜粋を含む<blockquote>内に含まれています。 <figcaption>要素はコンテンツを終了し、元の文学作品への引用を提供します。 さらに、いくつかの<span>タグがダイアログ内にあり、強調と効果のためにスタイルを設定します。
次のコードの強調表示されたセクションをindex.htmlファイルに追加します。
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>CSS Units</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link href="https://fonts.googleapis.com/css2?family=Averia+Serif+Libre:ital,[email protected],400;0,700;1,400;1,700&display=swap" rel="stylesheet" />
<link href="styles.css" rel="stylesheet" />
</head>
<body>
<figure>
<h3>Advice from a Caterpillar</h3>
<blockquote>
<p>The Caterpillar was the first to speak.</p>
<p>“What <span>size</span> do you want to be?” it asked.</p>
<p>“Oh, I’m not particular as to <span>size</span>,” Alice hastily replied; “only one doesn't like changing so often, <span>you know</span>.”</p>
</blockquote>
<figcaption>Excerpt from <cite>Alice’s Adventures in Wonderland</cite> by Lewis Carroll.</figcaption>
</figure>
</body>
</html>
スタイリング用にHTMLを準備する最後のステップは、class属性と値をページコンテンツのHTML要素に適用することです。 CSSでクラスセレクターを使用して、スタイルをターゲットにして適用します。 使用されるクラス名は、各要素のタスクと意図を説明するものです。
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>CSS Units</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link href="https://fonts.googleapis.com/css2?family=Averia+Serif+Libre:ital,[email protected],400;0,700;1,400;1,700&display=swap" rel="stylesheet" />
<link href="styles.css" rel="stylesheet" />
</head>
<body>
<figure class="excerpt">
<h3 class="title">Advice from a Caterpillar</h3>
<blockquote class="quote">
<p class="quote-text">The Caterpillar was the first to speak.</p>
<p class="quote-text">“What <span class="large">size</span> do you want to be?” it asked.</p>
<p class="quote-text">“Oh, I’m not particular as to <span class="large">size</span>,” Alice hastily replied; “only one doesn't like changing so often, <span class="small">you know</span>.”</p>
</blockquote>
<figcaption class="citation">Excerpt from <cite>Alice’s Adventures in Wonderland</cite> by Lewis Carroll.</figcaption>
</figure>
</body>
</html>
これらの変更を必ずindex.htmlファイルに保存してから、Webブラウザでファイルを開いてください。 次の画像に示すように、ブラウザがデフォルトで適用するスタイルはすでにいくつかあります。 また、<head>タグに含まれているにもかかわらず、CSSで定義されていないため、GoogleFontsのフォントはまだ表示されていません。
最後に、styles.cssファイルを作成し、エディターで開きます。 これは、チュートリアルの残りの部分で使用するファイルになります。 bodyセレクターのフォントをfont-family: 'Averia Serif Libre', serif;に設定します。 これにより、ページ上のすべての要素にフォントが適用されます。
body {
font-family: 'Averia Serif Libre', serif;
}
変更内容をstyles.cssに保存し、ブラウザにindex.htmlをリロードします。 次の画像に示すように、コンテンツは古い印刷された本のようなフォントを使用するようになります。
このセクションでは、CSSでユニットを操作するために必要なすべてのコンテンツとマークアップを使用してHTMLを設定します。 また、styles.cssファイルを作成し、すべてのコンテンツで使用される新しいフォントで追加しました。 次のセクションでは、pxユニットを使用して、コンテンツへのスタイルの適用を開始します。
ピクセルユニットの使用px
このセクションでは、ピクセル（px）単位を使用した初期スタイルのコーディングに焦点を当てます。 pxは、Web上でよく知られているユニットです。 このチュートリアルで説明する他のユニットとは異なり、pxユニットは物理ベースのユニットであり、そのサイズはデバイスのディスプレイの1ピクセルの物理サイズによって決定されます。
テキストエディタでstyles.cssを開き、.elementを使用して<figure>要素のclassのクラスセレクタを作成します。 このセレクターブロックでは、marginプロパティを20px autoに設定し、paddingを20pxに設定し、borderを使用して、レイアウトと美的スタイルを定義します。 ]を1px solid blackに設定し、max-widthを480pxに設定し、最後にbox-sizingプロパティをborder-boxに設定します。
body {
font-family: 'Averia Serif Libre', serif;
}
.excerpt {
margin: 20px auto;
padding: 20px;
border: 1px solid black;
max-width: 480px;
box-sizing: border-box;
}
marginは、20pxをコンテナーの上下に適用し、autoは、width値が宣言されると、コンテナーが水平方向に中央に配置されるように設定します。 次に、paddingプロパティは、コンテナの内部の両側に20pxのスペースを提供します。 次に、border: 1px solid black;は、コンテンツの定義された境界として、コンテナー全体の周りに1pxの太い黒い境界線を適用します。 max-widthを使用すると、画面が480pxよりも小さい場合、コンテナーの幅を柔軟にすることができますが、コンテナーの幅が480pxになると成長を停止します。 最後に、box-sizing: border-box;は、コンテナのボックスモデルを変更して、最大幅が480pxになるようにします。
これらの追加をstyles.cssファイルに保存してから、ブラウザにジャンプしてindex.htmlを更新してください。 コンテナの内側の上部に余分なスペースがあります。これは、.title要素のデフォルトに由来します。 次の画像を調べて、ブラウザでこれがどのように表示されるかを確認してください。
次に、エディターでstyles.cssに戻り、classの値がtitleの<h3>要素のクラスセレクターを作成します。 現在、コンテンツには、font-size、font-weight、およびmarginのブラウザーのデフォルト値があります。 まず、font-sizeを20pxに変更します。これは、ブラウザのデフォルトサイズより少し大きいサイズです。 次に、値が0 0 10pxのmarginプロパティを追加します。これにより、上部に0のマージンが適用され、次に右側に0のマージンが適用されます。そして左、そして最後にタイトルの下部に10pxマージン。 CSSで値が0の場合、単位は必要ありません。
...
.title {
font-size: 20px;
margin: 0 0 10px;
}
<blockquote>コンテンツは、ブラウザのデフォルトのmargin値で、左右にインデントされています。 この設計のニーズに応じて、marginを削除できます。 .quoteをターゲットとするクラスセレクターを作成し、marginプロパティに0の値を指定します。 これにより、コンテンツを<figure>コンテナのコンテンツ幅全体に拡張できます。
...
.quote {
margin: 0;
}
変更内容をstyles.cssファイルに保存してブラウザに戻り、index.htmlファイルを更新してください。 .titleは少し大きくなり、その上のギャップははるかに小さくなります。 引用内容もスペースを埋めるために拡張されました。 ブラウザで何が変わるかについて、次の画像を確認してください。
テキストエディタでstyles.cssに戻ります。 blockquoteのコンテンツは<figure>の主な焦点であるため、quote-textをターゲットにして、24pxのfont-sizeを適用して目立たせます。 ]。 次に、marginの短縮形10px 0を使用して、上下のmarginを10pxに設定し、各行の間に狭い区切りを作成します。 これにより、上下が10pxに設定され、左右が0の値に設定されます。
...
.quote-text {
font-size: 24px;
margin: 10px 0;
}
次に、抜粋に触発された視覚的強調を適用するには、[X96X]
