はじめに
CSS へようこそ！
この実験では、新しいペットサービスの魅力的でスタイリッシュなウェブサイトを作成する任務を負った、新進のウェブ開発者である Alex の立場に立ちます。目標は、提供されるサービスを紹介し、チームを紹介し、潜在的なクライアントが簡単に連絡できる方法を提供することです。舞台は、ペット飼育が増え、質の高いペットケアサービスの需要が急増している賑やかな都市です。Alex の使命は、基本的な CSS 技術とセレクタを使用して、視覚的に魅力的で使いやすいエクスペリエンスを提供することで、この競争の激しい市場で目立つウェブサイトを設計することです。
次に、「Pet's House」の CSS を完成させるために 5 つの実験を行います。
CSS セレクタ
ウェブページを開き、キーボードで F12 を押して開発者ツールを開くと、Elements と Styles の 2 つの部分が表示されます。
HTML を学んだことがあれば、要素（Elements）はページのレイアウトに使用されるさまざまな HTML タグであり、スタイル（Styles）はページの CSS であることを知っているはずです。
CSS を使って、HTML 要素の色、サイズ、形状などを変更したり、アニメーションを追加したりすることができます。
CSS の有用性を知ったら、次に考えなければならない問題があります。ページにはたくさんの要素がありますが、要素の特定の場所に特定のスタイルをどのように追加するのでしょうか？
CSS セレクタを使って、スタイルを適用したい要素を選択し、その後 CSS プロパティを使って適用したいスタイルを指定することができます。
最も基本的な CSS セレクタから始めましょう。
CSS セレクタは、CSS ルールの最初の部分です。これは、要素やその他の用語のパターンで、ブラウザにどの HTML 要素にルール内の CSS プロパティ値を適用するかを指示します。セレクタによって選択される要素は、セレクタの対象と呼ばれます。
CSS セレクタには多くの種類があり、最も基本的なものは以下の通りです。
- タイプセレクタ
- クラスセレクタ
- ID セレクタ
- 子孫セレクタ
- ユニバーサルセレクタ
タイプセレクタ
ページ上の 特定のタイプ のタグに統一したスタイルを設定する必要がある場合、タグセレクタを使用します。タグセレクタのキーワードは、タグ名に由来します。
たとえば、ページ上のすべての <p> タグの文字色を赤色に設定したい場合は、次の CSS ルールを使用します。
クラスセレクタ
クラスセレクタを定義するときは、必ずピリオドとクラス名で定義します。そのクラスセレクタを使用するときは、そのクラスセレクタを使用する要素のタグに属性 class="class-name"（ピリオドなし）を追加して、そのタグが指定されたクラスセレクタを使用することを示します。
たとえば、class="text-paragraph" の HTML 要素のフォントサイズを 50 ピクセルに設定したい場合は、次の CSS ルールを使用します。
ID セレクタ
ID セレクタは、特定の ID でマークされた HTML 要素に特定のスタイルを指定します。
ID セレクタを定義するときは、必ず "#" 記号と ID 名でセレクタを定義します。ID セレクタを使用するときは、HTML タグ要素に属性 id="id name"（"#" 記号なし）を追加して、その HTML 要素の ID を指定します。この ID は HTML 文書内で 一意 です。
たとえば、id="list-option" の HTML 要素の文字色を青色に設定したい場合は、次の CSS ルールを使用します。
子孫セレクタ
子孫セレクタは、タグ内のすべての要素を選択します。これには子要素やその他の子孫要素が含まれます。
子孫セレクタを使用するときは、親タグ名と子孫タグ名をスペースで区切って、タグ内の子孫要素を識別する必要があります。
たとえば、<div> 要素の子要素である <span> のテキスト色を水色に設定します。
ユニバーサルセレクタ
ユニバーサルセレクタは、HTML 文書内のすべての要素を選択します。ユニバーサルセレクタを使用するときは、必ず "*" 記号を使用します。
たとえば、すべての要素のテキストサイズを 50 ピクセルに設定しましょう。
セレクタの使い方がわかったので、次はさまざまなスタイル属性の使い方を学びましょう。
背景色とテキスト色
ご覧のとおり、ページのさまざまな部分には異なる背景色が設定されています。CSS では、background-color を使用して要素の背景色を設定することができます。
ペットウェブサイトでは、ヘッダー、「About」セクション、「Contact」セクション、フッターの背景色は rgb(233, 174, 87) と rgb(239, 206, 157) で、「About」セクション、「Contact」セクション、フッターの文字色は #fff です。したがって、以下のように背景色と文字色を設定する必要があります。
background-colorは背景色を設定するために使用されます。colorは文字色を設定するために使用されます。
header {
background-color: rgb(233, 174, 87);
}
.story-sect {
background-color: rgb(233, 174, 87);
color: #fff;
}
.contact-section {
background-color: rgb(233, 174, 87);
color: #fff;
}
footer {
color: #fff;
background-color: rgb(239, 206, 157);
}
高さと幅
現在、一部の要素が大きすぎることがわかります。例えば、ロゴがそうです。このような場合、height を使って要素の高さを設定し、width を使って要素の幅を設定します。
.logo-section {
width: 10%;
}
.logo {
max-width: 60%;
}
.box-feature {
width: 60%;
max-height: auto;
}
.box-feature img {
width: 100%;
}
.service {
width: 100%;
color: black;
}
.service img {
max-width: 100%;
max-height: auto;
}
CSS の max-width プロパティは、要素の最大幅を設定します。これにより、width プロパティの使用値が max-width で指定された値より大きくなることを防ぎます。
CSS の max-height プロパティは、要素の最大高さを設定します。これにより、height プロパティの使用値が max-height で指定された値より大きくなることを防ぎます。
リストスタイル
箇条書きリスト（unordered list）のデフォルトのスタイルでは、各リスト項目の前に黒丸が付きます。list-style プロパティを使用すると、リスト項目の前の黒丸を削除することができます。
ul {
list-style: none;
}
テキストプロパティ
テキストの装飾（Text Decoration）
a 要素はデフォルトで下線が付いています。text-decoration プロパティを使って下線を削除することができます。
a {
color: grey;
text-decoration: none;
}
テキストの大文字小文字変換（Text Transform）
ペットページのナビゲーション、フッター、各エリアのタイトルはすべて大文字で表示されています。text-transform プロパティを使ってテキストの大文字小文字を変更することができます。
CSS の text-transform プロパティは、要素のテキストの大文字小文字を指定します。テキストをすべて大文字、すべて小文字、または各単語の先頭を大文字にすることができます。
h2 {
text-transform: uppercase;
}
header {
background-color: rgb(233, 174, 87);
text-transform: uppercase;
}
footer {
color: #fff;
background-color: rgb(239, 206, 157);
text-transform: uppercase;
}
テキストのサイズ（Text Size）
font-size を使ってテキストのサイズを変更することができます。ペットページのテキストサイズが異なっていることがわかります。
body {
font-size: 1.2vw;
}
h1 {
font-size: 4em;
}
h2 {
font-size: 2.8vw;
text-transform: uppercase;
}
フォントサイズを設定するときには、異なる単位を使用します。通常、以下の 5 種類の単位があります。
| 単位 | 種類 | 説明 |
|---|---|---|
| px | 絶対単位 | 固定サイズの単位 |
| em | 相対単位 | 親要素のフォントサイズを基準に計算されます |
| rem | 相対単位 | ルート要素のフォントサイズを基準に計算されます |
| vw | 相対単位 | ビューポートの幅のパーセンテージ |
| vh | 相対単位 | ビューポートの高さのパーセンテージ |
テキストの配置（Text Align）
ペットページでは、タイトルテキストを中央に配置するために、text-align プロパティを使ってテキストの表示位置を設定することができます。
h1 {
text-align: center;
font-size: 4em;
}
section h2 {
text-align: center;
}
.title-text {
width: 40%;
text-align: center;
color: black;
}
.section-text h2 {
text-align: center;
}
.samples {
text-align: center;
}
form.btn {
text-align: center;
background-color: #e6e8e8;
color: #000;
}
footer span {
text-align: center;
}
テキストの太さ（Text Weight）
font-weight プロパティは、テキストの太さを設定するために使用されます。
body {
font-weight: 400;
font-size: 1.2vw;
}
form.btn {
text-align: center;
background-color: #e6e8e8;
color: #000;
font-weight: 700;
}
文字間隔（Letter Spacing）
ペットページでは、文字間に一定の間隔があることがわかります。letter-spacing プロパティを使って、テキストの文字間隔を設定することができます。
CSS の letter-spacing プロパティは、テキストの文字間の水平方向の間隔を設定します。この値は、テキストをレンダリングする際に文字間の自然な間隔に追加されます。
body {
letter-spacing: 2px;
font-weight: 400;
font-size: 1.2vw;
}
form.btn {
text-align: center;
background-color: #e6e8e8;
color: #000;
font-weight: 700;
letter-spacing: inherit;
}
まとめ
この実験では、Alex とともに「Pet's House」のウェブサイトを作成する旅に出ました。プロジェクトのワークスペースを設定し、基本的な CSS スタイルを適用し、さまざまな CSS セレクタを試してウェブサイトのナビゲーションを強化しました。これらのステップを通じて、CSS の基礎とセレクタに関する実践的な経験を積み、将来のウェブ開発者にとって不可欠なスキルを身につけました。この実験は、将来のプロジェクトで探求するであろう、より高度なウェブ開発の概念と技術の基礎を築きました。
