CSS - データ型
はじめに
こんにちは、未来のCSS魔法使いさんたち！この素晴らしいCSSデータ型の世界案内をお楽しみにしていましたね。10年以上にわたりコンピュータサイエンスを教えてきた者として、データ型を理解することは小説を書く前に字母を学ぶことと同じだと言えます。基本的であり、敢えて言うなら楽しいものです！それでは、一緒にCSSデータ型の神秘を解き明かしましょう。
文法
データ型の詳細に入る前に、CSSがデータをどのように提供するかについて話しましょう。CSSには特定の方法で値を表現するがあり、この文法に慣れることが重要です。
セレクタ {
プロパティ: 値;
}例えば：
p {
color: red;
font-size: 16px;
}ここで、'red'と'16px'は異なるデータ型の値です。'Red'は色キーワードで、'16px'は長さの値です。簡単だったでしょう？もう慣れてきましたね！
文字データ型
それでは、テキストについて話しましょう。CSSはテキストを愛しく、いくつかの方法で取り扱います。
文字列
CSSにおける文字列は、言葉の包装紙のようです。单引用符または双引用符で囲むことができます。
.greeting::before {
content: "Hello, World!";
}この例では、"Hello, World!"は文字列です。CSSに「このように exactに処理して」と言っているようなものです。
イデンティファイヤ
イデンティファイヤはCSSにおける物の名前です。引用符は必要なく、プロパティ、クラス、IDなどに使用されます。
#main-header {
font-family: Arial, sans-serif;
}ここで、'Arial'と'sans-serif'はイデンティファイヤです。どのフォントを使用するかをCSSに指示しています。
URL
CSSにおけるURLは、リソースの住所のようなものです。通常、url()関数とともに使用されます。
body {
background-image: url('background.jpg');
}これはCSSに背景画像の場所を指示しています。
数値データ型
数値は多くのCSSプロパティの骨組みです。その方法を数えましょう！
整数
整数は分数のない整数です！
.container {
z-index: 5;
}ここで、5は整数で、要素のスタック順を決定します。
数値
CSSにおける数値は小数を含むことができます。
.opacity-example {
opacity: 0.5;
}これは透明度を50%に設定し、要素を半透明にします。
尺寸
尺寸は数値に単位がついたものです。
.box {
width: 100px;
height: 50%;
margin: 10em;
}ここではピクセル（px）、パーセンテージ（%）、emが動作しています。
量
CSSにおける量は、料理の計量のようなものです。何かの量を定義するのに役立ちます。
長さ
長さは絶対（ピクセルなど）または相対（emや%）です。
.container {
width: 80vw;
padding: 2rem;
}'vw'はビューポートの幅を意味し、'rem'はルート要素のフォントサイズに相対しています。
角度
角度は回転やグラデーションに使用されます。
.rotated {
transform: rotate(45deg);
}これは要素を45度回転させます。
時間
時間値はアニメーションやトランジションに使用されます。
.animated {
transition: all 0.5s ease;
}これはすべてのプロパティに対して半秒のトランジションを設定します。
タイプの組み合わせ
時々、CSSはデータ型を混ぜ合わせることが好きです。
関数値
関数は引数を取り、値を返します。
.gradient {
background: linear-gradient(to right, red, blue);
}これは赤から青へのグラデーションを作成します。
色彩
CSSにおける色彩は、画家のパレットのようです。いくつかの方法で定義できます。
.colorful {
color: #ff0000; /* 16進数 */
background-color: rgb(0, 255, 0); /* RGB */
border-color: hsl(240, 100%, 50%); /* HSL */
}これらは異なる記法で異なる色を定義しています。
画像
CSSにおける画像は、ファイルからの画像以上のものです。
.image-types {
background-image: url('cat.jpg');
list-style-image: linear-gradient(to right, red, blue);
}ここでは、外部画像とグラデーションを画像として使用しています。
2D配置
CSSにおける配置は、ウェブページ上でのチェスゲームのようです。
.positioned {
position: absolute;
top: 50px;
left: 100px;
}これは要素を親要素からの顶部50ピクセル、左部100ピクセルの位置に配置します。
計算データ型
時々、CSSに数学的な計算をさせる必要があります。
.calculated {
width: calc(100% - 20px);
}これは親要素の幅の100%から20ピクセルを引いた幅を設定します。
表示
表示は要素がどのようにレンダリングされるかを決定します。
.flex-container {
display: flex;
}これは要素をflexコンテナにし、柔軟なボックスレイアウトを可能にします。
その他のデータ型
CSSにはいくつかの其他の技を持っています。
グローバル値
グローバル値はすべてのプロパティに使用できます。
.inherited {
color: inherit;
}これは要素に親要素と同じ色を使用することを指示します。
以下に、私たちがカバーした主要なCSSデータ型の表を示します：
| データ型 | 例 | 説明 |
|---|---|---|
| 文字列 | "Hello, World!" | 引用符で囲まれたテキスト |
| イデンティファイヤ | Arial | フォント、プロパティなどに使用される未引用の名前 |
| URL | url('image.jpg') | リソースの住所 |
| 整数 | 5 | 分数のない整数 |
| 数値 | 0.5 | 小数を含む数値 |
| 長さ | 10px, 2em, 50% | 単位付きの測定 |
| 角度 | 45deg | 回転値 |
| 時間 | 0.5s | アニメーションのduration |
| 色彩 | #ff0000, rgb(255,0,0) | 色の値 |
| 関数 | calc(), linear-gradient() | 計算や効果を作成する |
覚えておいてください、CSSは工具箱であり、データ型はあなたの工具です。これらに慣れるほど、より創造的で正確なデザインが可能になります。続けて練習し、すぐにプロのようにウェブページをスタイルを付けることができるようになります！
Credits: Image by storyset