読み込み中...

CSS初心者徹底ガイド！作り方・使い方、無限ループから応用例までサンプルコード付き解説

CSS初心者向けの徹底解説 CSS
2024.01.23
この記事は約5分で読めます。

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

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

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

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

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

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

●CSSとは？

CSS（Cascading Style Sheets）は、HTMLやXMLドキュメントのスタイル（デザイン）を設定するための言語です。

CSSを使用することで、Webページのレイアウトやデザインを一元管理し、効率的にコーディングできます。

●CSSの基本構造

CSSはセレクタと宣言ブロックで構成されています。

セレクタは、HTML要素を対象として選択し、宣言ブロックはその要素に適用するスタイルを記述します。

例:

セレクタ {
  プロパティ1: 値1;
  プロパティ2: 値2;
}

●CSSの作り方

CSSは、HTMLファイルに直接記述するインラインスタイル、HTMLファイル内の<style>タグに記述する内部スタイルシート、別ファイルとして保存する外部スタイルシートの3つの方法があります。

インラインスタイル

HTMLタグ内にstyle属性を記述し、スタイルを適用します。

例:

<p style="color: red;">これは赤い文字です。</p>

内部スタイルシート

HTMLファイル内の<head>タグ内に<style>タグを配置し、スタイルを記述します。

例:

<!DOCTYPE html>
<html>
<head>
  <style>
    p {
      color: red;
    }
  </style>
</head>
<body>
  <p>これは赤い文字です。</p>
</body>
</html>

外部スタイルシート

CSSを別ファイルとして保存し、HTMLファイルからリンクして読み込みます。CSSファイルは.css拡張子で保存します。

例 (style.css):

p {
  color: red;
}

例 (index.html):

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <p>これは赤い文字です。</p>
</body>
</html>

●CSSの使い方

CSSを使って、HTML要素に様々なスタイルを適用できます。基本的な使い方をいくつか紹介します。

テキストの色を変更する

colorプロパティを使用して、テキストの色を変更します。

例:

p {
  color: blue;
}

背景色を設定する

background-colorプロパティを使用して、要素の背景色を設定します。

例:

div {
  background-color: yellow;
}

フォントサイズを変更する

font-sizeプロパティを使用して、テキストのフォントサイズを変更します。

例:

h1 {
  font-size: 24px;
}

●無限ループとは？

CSSで無限ループと呼ばれるアニメーションは、@keyframesルールとanimationプロパティを組み合わせて作成します。

無限ループアニメーションは、要素に繰り返し動きを加えることができます。

例:

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  animation: rotate 2s linear infinite;
}

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

CSSの応用例をいくつか紹介します。

ホバーエフェクト

要素にマウスオーバーした際に、スタイルが変化するホバーエフェクトを作成します。

例:

.button {
  background-color: blue;
  color: white;
  padding: 10px;
  text-decoration: none;
  transition: background-color 0.3s;
}

.button:hover {
  background-color: red;
}

レスポンシブデザイン

画面サイズに応じて、要素のスタイルを変更するレスポンシブデザインを実現します。

例:

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

@media screen and (max-width: 768px) {
  .container {
    padding: 0 20px;
  }
}

Flexboxを利用したレイアウト

display: flex;を使用して、要素を柔軟に配置するFlexboxレイアウトを作成します。

例:

.flex-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.flex-item {
  width: 100px;
  height: 100px;
  background-color: green;
  margin: 10px;
}

HTML

<div class="flex-container">
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
</div>

この記事では、CSSの基本から応用までを初心者向けに徹底解説しました。

CSSを理解し、実践的な使い方を学ぶことで、Webページのデザインやレイアウトを自由にコントロールできるようになります。

サンプルコードを参考に、自分のプロジェクトで活用してみてください。

そして、CSSを使いこなすことで、より見栄えの良いWebページを作成しましょう！