SHIRO DXはビジネスの効率化や
売上UPに繋がるチップスをご紹介しています

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サイトなどで学習することをおすすめします。