Webサイトを作成する上で、HTMLと並んで欠かせないのがCSSコードです。
HTMLはWebページの構造を定義する言語です。
CSSコードは、その構造にスタイルを適用することで、見やすく、ユーザーにとって使いやすいWebページを作成することができます。
目次
CSSコードとは？
CSS（Cascading Style Sheets）は、Webページの見た目を装飾するためのスタイルシート言語です。
HTMLで記述されたコンテンツにスタイルを適用することで、
- フォント
- 色
- サイズ
- 配置
などを設定することができます。
CSSコードの役割
- Webページの見た目を装飾する
- Webページのレイアウトを調整する
- ユーザーにとって使いやすいWebページを作成する
- Webページの表示速度を向上させる
CSSコードの書き方
CSSコードは、主に以下の2つの方法で記述することができます。
- スタイルシートファイル
.css拡張子のファイルにCSSコードを記述し、HTMLファイルにリンクする。
- スタイル属性
- HTML要素に直接スタイル情報を記述する。
スタイルシートファイルの書き方
CSS
/* style.css */
body {
font-family: Arial, sans-serif;
font-size: 16px;
color: #333;
}
h1 {
font-size: 24px;
font-weight: bold;
color: #000;
}
p {
margin-bottom: 10px;
}
スタイル属性の書き方
HTML
<p style="font-family: Arial, sans-serif; font-size: 16px; color: #333;">
これはサンプルの段落です。
</p>
基本的なCSSプロパティ
CSSには、様々なプロパティが用意されています。ここでは、よく使用される基本的なプロパティをいくつかご紹介します。
- font-family: フォントファミリー
- font-size: フォントサイズ
- font-weight: フォントの太さ
- color: 文字色
- background-color: 背景色
- text-align: 文字揃え
- margin: 余白
- padding: 詰め
- width: 幅
- height: 高さ
- display: 要素の表示方法
CSSコードは、Webページを作成する上で欠かせないものです。
CSSコードを理解することで、より見やすく、ユーザーにとって使いやすいWebページを作成することができます。
※CSSコードは、奥深い言語です。
この記事では、基本的な内容のみを解説しています。
※より高度なCSSテクニックを習得したい場合は、専門書籍やWebサイトなどで学習することをおすすめします。
