CSS - 快速指南

ウェブ開発者の卵们、こんにちは！今日は、CSSのカラフルな世界に飛び込みます。シートベルトを締めて、ウェブサイトの見方を永遠に変える旅に出発しましょう！

CSS - Quick Guide

CSSとは？

CSS、すなわちカスカディングスタイルシートは、ウェブの世界のファッションデザイナーです。HTMLがウェブサイトの骨組みならば、CSSはその皮膚、衣装、化粧です。ウェブサイトが美しく、ユニークに見えるのはこれが理由です。

家を建てることを想像してください。HTMLはそのレンガとモルタルであり、CSSはそのペンキ、壁紙、家具です。単純な構造を家に変える的就是これです。

簡単な例から始めましょう：

body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}

この小さなCSSコードは、ブラウザにページ全体をライトグレイ色(#f0f0f0)に塗りつぶし、Arialをデフォルトのフォントに使用するよう指示します。Arialが利用できない場合、サンセリフフォントのいずれかを使用します。

CSS - 文法

CSSの文法はレシピのようです。主に2つの部分から成り立っています：セレクタとデクリレーションブロック。

selector {
property: value;
}

セレクタはスタイルを適用したいHTML要素を指します。デクリレーションブロックには、セミコロンで区切られた1つ以上のデクリレーションが含まれます。各デクリレーションには、CSSプロパティ名とコロンで区切られた値が含まれます。

より複雑な例を見てみましょう：

h1 {
color: blue;
font-size: 24px;
text-align: center;
}

ここでは、すべての<h1>要素をターゲットにしています。テキストを青色にし、サイズを24ピクセルに設定し、ページ中央に配置します。

CSS - 統合方法

HTMLにCSSを統合するには3つの方法があります：

インラインCSS
内部CSS
外部CSS

インラインCSS

インラインCSSは、style属性を使用して直接HTML要素に適用されます。1人の人に时尚のアドバイスを与えるようなものです。

<p style="color: red; font-size: 16px;">これは赤い段落です。</p>

内部CSS

内部CSSは、HTMLページの<head>セクションに置かれ、<style>タグの中にあります。パーティーの全員に服装規則を設定するようなものです。

<head>
<style>
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
</style>
</head>

外部CSS

外部CSSは、.css拡張子を持つ別のファイルに保存され、<link>タグを使用してHTMLファイルにリンクされます。时尚雑誌を作成し、誰もが参照できるようにするようなものです。

<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>

CSS - 測定単位

CSSには長さを表現する複数の単位があります。最も一般的なものを見てみましょう：

単位	説明
px	ピクセル (1px = 1/96インチ)
%	百分比
em	要素のフォントサイズに関連 (2emは現在のフォントサイズの2倍を意味します)
rem	ルート要素のフォントサイズに関連
vw	ビューポートの幅の1%に関連
vh	ビューポートの高さの1%に関連

異なる単位を使用した例を見てみましょう：

div {
width: 300px;
height: 50%;
font-size: 1.5em;
padding: 2rem;
margin-top: 10vh;
}

CSS - 色彩

CSSでは色を複数の方法で指定できます：

名前で：red、blue、greenなど
RGB値で：rgb(255, 0, 0)は赤を意味します
16進数コードで：#FF0000は赤を意味します

これらを実際に見てみましょう：

h1 {
color: blue;
}

p {
color: rgb(255, 0, 0);
}

div {
background-color: #00FF00;
}

CSS - バックグラウンド

バックグラウンドはウェブサイトを引き立たせることができます。バックグラウンド色、画像、またはその両方を設定できます！

body {
background-color: #f0f0f0;
background-image: url('background.jpg');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}

このCSSは、ライトグレイのバックグラウンド色を設定し、ページ中央に画像を配置し、画像が繰り返されないようにし、ビューポート全体を覆うようにします。

CSS - フォント

フォントは読みやすさとスタイルのために非常に重要です。以下にフォントを設定する方法を見てみましょう：

body {
font-family: 'Helvetica', Arial, sans-serif;
font-size: 16px;
font-weight: normal;
font-style: italic;
}

これはHelveticaを優先フォントとして設定し、Arialと任意のサンセリフフォントをバックアップとして使用します。また、サイズを16ピクセル、太さを通常、スタイルをイタリックに設定します。

CSS - テキスト

テキストプロパティは、テキストの表示方法を制御します：

p {
color: #333;
text-align: justify;
text-decoration: underline;
text-transform: uppercase;
line-height: 1.5;
}

このCSSは、テキストをダークグレイに、両端揃えに、下線を引く、全て大文字に、行の高さを通常の1.5倍に設定します。

CSS - 画像のスタイル

画像も他の要素と同様にスタイルを適用できます：

img {
width: 100%;
max-width: 500px;
height: auto;
border-radius: 50%;
}

これは画像をレスポンシブ(最大500pxまで100%の幅)にし、アスペクト比を保持し、円形にします。

CSS - リンク

リンクはその状態に応じて異なるスタイルを適用できます：

a {
color: blue;
text-decoration: none;
}

a:hover {
color: red;
text-decoration: underline;
}

a:visited {
color: purple;
}

これはリンクの色を青にし、下線を取り除き、ホバー時には赤に変え下線を引き、訪問済みのリンクは紫にします。

覚えておいてください、CSSは創造性と実験がすべてです。さまざまなプロパティと値で遊んでみてください。練習すればするほど、美しく応答性のあるウェブデザインを作成するスキルが向上します。快適なコーディングを！

Credits: Image by storyset