読み込み中...

HTML内でのCSS書き方と使い方、応用例とサンプルコード集

CSSのhtmlへの記述方法を徹底公開 CSS
2023.11.27
この記事は約5分で読めます。

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

本記事のサンプルコードを活用して機能追加、目的を達成できるように作ってありますので、是非ご活用ください。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を満たす現役のプログラマチームによって監修されています。

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

Webページを作る上で、デザインの重要性は言うまでもありません。

HTMLでコンテンツを作成した後、CSSを使ってデザインを施すことで、より魅力的なWebページを作ることができます。

本記事では、HTML内でのCSSの書き方と使い方、応用例とサンプルコードを紹介します。

CSSをまったく知らない初心者でもわかりやすく解説しているので、ぜひ参考にしてください。

●CSSとは

CSSは、Cascading Style Sheetsの略で、Webページのデザインを記述する言語です。

HTMLでコンテンツを作成する際に、CSSを使って色、フォント、レイアウトなどのスタイルを定義することができます。

CSSの基本的な構造は、セレクタとプロパティのペアからなります。

セレクタは、スタイルを適用する要素を指定し、プロパティは、その要素に対して適用するスタイルの内容を指定します。

●HTML内でのCSSの書き方

HTML内でCSSを書く方法は、下記の3つがあります。

○styleタグを使う方法

HTMLのheadタグ内にstyleタグを追加して、CSSのスタイルを定義します。

この方法は、HTMLファイル内にCSSを直接記述することができるので、管理が簡単です。

例えば、次のように書くことができます。

<head>
  <style>
    h1 {
      color: red;
    }
  </style>
</head>

上記の例では、h1要素のテキスト色を赤色に変更しています。

○style属性を使う方法

HTMLの要素にstyle属性を追加して、その要素に対してスタイルを定義する方法です。

この方法は、個々の要素に対して独自のスタイルを適用することができます。

例えば、次のように書くことができます。

<h1 style="color: red;">Hello, world!</h1>

上記の例では、h1要素のテキスト色を赤色に変更しています。

○linkタグを使う方法

HTMLのheadタグ内にlinkタグを追加して、外部のCSSファイルを読み込む方法です。

この方法は、同じCSSを複数のHTMLファイルで共有することができるので、メンテナンスが簡単です。

例えば、次のように書くことができます。

<head>
  <link rel="stylesheet" href="style.css">
</head>

上記の例では、style.cssというファイルからCSSを読み込みます。

●CSSの基本的な書き方

CSSの基本的な書き方は、セレクタとプロパティのペアを{}で囲んで記述します。

セレクタは、スタイルを適用する要素を指定し、プロパティは、その要素に対して適用するスタイルの内容を指定します。

例えば、次のように書くことができます。

h1 {
  color: red;
  font-size: 24px;
}

上記の例では、h1要素のテキスト色を赤色に変更し、フォントサイズを24pxに変更しています。

また、CSSには、継承、カスケード、優先度といった機能があります。これらを理解することで、より高度なスタイルの指定が可能になります。

●CSSの応用例とサンプルコード集

下記に、CSSの応用例とサンプルコードをいくつか紹介します。

○背景色の変更

body要素に背景色を指定することで、Webページ全体の背景色を変更することができます。

body {
  background-color: #f5f5f5;
}

上記の例では、h1要素のフォントを”Helvetica Neue”またはsans-serifに変更しています。

○ボックスのスタイルの変更

ボックス（要素）のスタイルを変更することで、Webページの見た目を変えることができます。

.box {
  background-color: #ffffff;
  border: 1px solid #cccccc;
  border-radius: 5px;
  box-shadow: 0px 0px 5px #cccccc;
  padding: 10px;
}

上記の例では、.boxというクラスを持つ要素に対して、背景色、ボーダー、角丸、影、パディングを指定しています。

○レスポンシブデザインの実装

レスポンシブデザインは、Webページが異なるデバイスやウィンドウサイズに対応することを意味します。

CSSのメディアクエリを使うことで、レスポンシブデザインを実装することができます。

@media screen and (max-width: 768px) {
  .nav-menu {
    display: none;
  }
  .nav-toggle {
    display: block;
  }
}

上記の例では、スクリーン幅が768px以下の場合に、.nav-menuというクラスを持つ要素を非表示にし、.nav-toggleというクラスを持つ要素を表示するように指定しています。

これにより、スマートフォンやタブレットなどの小さい画面でも、適切なナビゲーションメニューを表示することができます。

○アニメーションの実装

CSSを使ってアニメーションを実装することもできます。

次は、ボタンをクリックすると、ボタンが回転するアニメーションの例です。

.button {
  transition: transform 0.3s ease;
}
.button:hover {
  transform: rotate(360deg);
}

上記の例では、.buttonというクラスを持つ要素に対して、回転アニメーションを指定しています。

また、:hover疑似クラスを使うことで、マウスオーバー時にアニメーションを実行するようにしています。

まとめ

CSSは、Webページの見た目を変えるための重要な技術です。

HTMLとともに学ぶことで、より魅力的で使いやすいWebページを作ることができます。

これらの知識を基に、自分だけのスタイルを作り出してみてください。