アフィリエイト広告を利用しております。
参考サイトの記載がある場合はそちらの方がより詳しく記載説明がされているのでぜひそちらもご覧ください。
そのままコピペしても反映されないものもあります。サイトごとに変えないといけない箇所がありますので修正してください。

CSS HTML

初心者でもすぐできる！簡単CSS入門

次のステップは「CSS」！Webページをもっと魅力的に

HTMLでWebページの基本を作れるようになったら、次は「CSS」の出番です！ CSSは、Webページのデザインやスタイルを担当する魔法のような言語です。 これを使えば、文字の色やサイズを変えたり、背景に画像を追加したり、より美しくて個性的なページを作ることができます。

HTMLに直接スタイルを書く方法 vs CSSで管理する方法

HTMLだけでも文字やデザインを調整することはできますが、CSSを使う方がもっと効率的です。 ここでは、両者を比較してCSSのメリットを解説します。

方法1: HTMLに直接スタイルを書く（インラインスタイル）

HTMLでは、各要素に直接style属性を使ってスタイルを記述することができます。

<p style="font-size: 16px; color: blue;">この文字は青色でサイズは16pxです。</p>

メリット:

  • すぐにスタイルを適用できる
  • 単純な変更なら便利

デメリット:

  • 同じスタイルを複数の場所で使う場合、すべてにstyleを記述する必要がある
  • コードが煩雑になり、管理が難しい
  • HTMLとデザインが混ざるため、後から修正しにくい

方法2: CSSでスタイルを記述して適用する

CSSを使うと、HTMLとデザインを分離して効率よくスタイルを管理できます。

例:

<!-- HTML -->
<p class="text-blue">この文字は青色でサイズは16pxです。</p>

<!-- CSS -->
.text-blue {
    font-size: 16px;
    color: blue;
}

メリット:

  • 一括管理が可能: 1つのCSSファイルで、複数のHTMLページに同じスタイルを適用できる
  • コードがすっきりする: HTMLは構造だけを書き、デザインはCSSに分離
  • 変更が簡単: デザインを変えたくなったとき、CSSを1箇所修正すればOK
  • 柔軟性が高い: メディアクエリを使えば、デバイスごとにスタイルを変えられる

デメリット:

最初にCSSの書き方を覚える必要がある（でも簡単！）

HTMLスタイルとCSSの違いを比較

項目 HTMLのインラインスタイル CSS
コードの見やすさ ごちゃごちゃしがち スッキリ管理できる
スタイルの再利用 できない（重複する） 何度でも再利用可能
修正のしやすさ 全ての箇所を修正する必要あり 一箇所修正するだけでOK
柔軟性 制限が多い 高い柔軟性を持つ

基本的には[.html]ファイルと別のファイル[.css]に記載する

コードは、テキストエディタ（例: メモ帳やVS Code）記述し「(適当な名前).css」として保存します。
仮に[test.css]という名前にします。以下のようにファイルを読み込ませます。([.css]ファイルは[.html]と同じフォルダ内にしてるとします)

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>はじめてのHTML</title>
    <link rel="stylesheet" href="test.css" type="text/css"> <!-- CSSの読み込み部分 -->
</head>
<body>
    <p class="text-blue">この文字は青色でサイズは16pxです。</p>
</body>
</html>

.text-blue {
    font-size: 16px;
    color: blue;
}

CSSでさらに広がる可能性

CSSを使えば、Webページのデザインが圧倒的に楽になり、美しいページを簡単に作ることができます。
HTMLに直接スタイルを書くことはできることだけ覚えておけばOKだと思います。ほぼ使いません。
次のステップとして、「CSSのClassとidの違い・使い分け」を学びましょう。

初心者講座:目次
  1. 初心者大歓迎！HTMLを使ってWebページを作ってみよう
  2. 初心者でも簡単！HTML基本構文
  3. 初心者でもすぐできる！簡単CSS入門
  4. CSSのClassとIDを完全理解！違いと使い分けを解説
  5. 初心者必見！HTMLの<div>タグとは？基本と使い方を解説
  6. 初心者向け！HTML見出しタグでコンテンツを整理する方法
  7. 段落タグ<p>とは？基本の使い方から注意点まで
  8. Webデザインの第一歩！文字と背景を自由にカスタマイズしよう
  9. 初心者必見！marginとpaddingの違いを徹底解説
  10. marginとpaddingを完全理解！CSSで余白を自在に操る方法
  11. HTMLの<a>タグをマスターしよう！リンクの基本と応用テクニック
  12. HTMLで画像を表示しよう！<img> タグの基本と使い方
  13. HTMLのリストタグを学ぼう！箇条書き・番号付きリスト・定義リストの使い方
  14. HTMLで表を作ろう！基本の<table>タグをマスターしよう
  15. 「初心者大歓迎！HTMLを使ってWebページを作ってみよう」のまとめ
【Amazon】ちゃんと知っておきたい人のHTML/CSS完全入門: HTML習得の最短講座！1日３０分で楽しく学ぼう！ Kindle版

おすすめ記事

1
クラシックエディタ用のプラグインを作ってみた
制作理由 ワードプレスのクラシックエディタを直接使っているといつも思うことがありました [Tab]キー押して空白入れて見やすくインデントしたい！ この記事を書くまでは入れないか、スペースキーを押して誤 ...
2
クラシックエディタでコード入力をするボタンを追加するプラグインを作ってみた
制作理由 ワードプレスのクラシックエディタを直接使っているといつも思うことがありました コード追加ボタンを自由に追加出来たら便利じゃない？ この記事を書くまでは、クリップボード貼り付けアプリ[Clib ...
3
Amazon納品代行 FBA商品ラベルにJANコード下4桁を入れるアプリ(簡易版)を作ってみた
アプリ制作するに至った理由 納品代行の仕事をしていて思ったことがあります 納品代行をしていると本当に様々なお客様から様々な商品が届きます その中でも特に注意しているのが、「見た目ほぼ同じだけど違う商品 ...

-CSS, HTML
-