日本語

CSSチュートリアル

CSS3チュートリアル

CSS 的高度化

CSS リファレンス

CSS レスポンシブ

CSS3チュートリアル：ウェブスタイルの基本を学ぶための入門ガイド

CSSとは？

CSS（Cascading Style Sheets）は、HTMLやXMLで書かれたドキュメントの表示を記述する強力なスタイル言語です。ウェブのファッションデザイナーのような存在で、画面、紙、他のメディア上での要素の表示方法を決定します。

CSS3 - Tutorial

家を建てることを考えてみてください。HTMLはその構造、つまり壁、屋根、基盤です。CSSは、その家を美しく見せるすべてのもの、つまり塗料、壁紙、カーテン、家具です。CSSは、単なるウェブページを視覚的に魅力的な作品に変えるものです。

CSSを学ぶべき人々

美しく、リスポンシブなウェブサイトを作成したいすべての人々がCSSを学ぶべきです。これには以下の人が含まれます：

  1. ウェブ開発者
  2. ウェブデザイナー
  3. UI/UXデザイナー
  4. デジタルマーケティング担当者
  5. ブロガー
  6. ウェブ技術に興味があるすべての人々

プログラミングの経験が全くない完全な初心者であっても、心配しないでください！CSSは直感的で学びやすいように設計されています。少しの練習で、プロのようにウェブサイトをスタイル化できるようになります。

CSSの種類

主に3つの種類のCSSがあります：

  1. インラインCSS
  2. 内部CSS
  3. 外部CSS

これらをいくつかの例で説明します：

1. インラインCSS

インラインCSSは、HTML要素に直接style属性を使用して適用されます。

<p style="color: blue; font-size: 16px;">これは青色で16pxのフォントサイズの段落です。</p>

この方法は迅速ですが、大規模なプロジェクトには推奨されません。なぜなら、コンテンツと表示を混在させているからです。

2. 内部CSS

内部CSSは、HTMLの<head>セクション内の<style>タグに配置されます。

<head>
<style>
p {
color: green;
font-size: 18px;
}
</style>
</head>
<body>
<p>この段落は緑色で18pxのフォントサイズです。</p>
</body>

この方法は単一のページをスタイル化するのに便利ですが、複数のページを持つウェブサイトでは効率的ではありません。

3. 外部CSS

外部CSSは、別の.cssファイルに保存され、HTMLドキュメントにリンクされます。

<!-- HTMLファイル内 -->
<head>
<link rel="stylesheet" href="styles.css">
</head>
/* styles.cssファイル内 */
p {
color: red;
font-size: 20px;
}

これは、コンテンツと表示を分離し、簡単なメンテナンスを可能にするため、大規模なプロジェクトにおける最も効率的な方法です。

CSSコードの例

CSSの実際の動作を見るために、より包括的な例を見てみましょう：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>私の素晴らしいウェブサイト</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
.container {
width: 80%;
margin: 0 auto;
padding: 20px;
background-color: white;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
h1 {
color: #333;
text-align: center;
}
.highlight {
background-color: yellow;
padding: 5px;
}
</style>
</head>
<body>
<div class="container">
<h1>私の素晴らしいウェブサイトへようこそ</h1>
<p>これは一些の<span class="highlight">ハイライトされた</span>テキストを含む段落です。</p>
</div>
</body>
</html>

この例では、内部CSSを使用してウェブページをスタイル化しています。各部分の役割を以下に説明します：

  • bodyはArialフォントで設定され、淡灰色の背景色があります。
  • .containerクラスは、中央寄せの白いボックスを生成し、パディングと微妙な影を追加します。
  • h1は中央寄せで、暗灰色の文字色です。
  • .highlightクラスは、黄色のハイライトテキストを生成します。

CSSを使用する理由

  1. コンテンツと表示の分離
  2. 複数のページにおける一貫性
  3. ページの読み込み時間の短縮
  4. 容易なメンテナンスと更新
  5. リスポンシブデザインの能力
  6. ユーザーエクスペリエンスの向上

CSSを学ぶための前提条件

CSSを始めるために必要なものは以下の通りです：

  1. HTMLの基本理解
  2. テキストエディタ（Visual Studio Code、Sublime Text、またはNotepadなど）
  3. ウェブブラウザ（Chrome、Firefox、またはSafari）
  4. 実験するための情熱と意志！

CSSチュートリアルの開始

基本をカバーしたので、スタイル化を始めましょう！簡単なウェブページを作成し、段階的にスタイルを追加します。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>私の最初のスタイルされたページ</title>
<style>
/* ここにCSSを追加します */
</style>
</head>
<body>
<header>
<h1>私のウェブサイトへようこそ</h1>
</header>
<nav>
<ul>
<li><a href="#">ホーム</a></li>
<li><a href="#">关于</a></li>
<li><a href="#">連絡先</a></li>
</ul>
</nav>
<main>
<h2>私について</h2>
<p>こんにちは！CSSを学んでいて、すごく楽しいです！</p>
</main>
<footer>
<p>&copy; 2023 私のウェブサイト</p>
</footer>
</body>
</html>

さあ、CSSを追加して見た目を良くしましょう！

body {
font-family: Arial, sans-serif;
line-height: 1.6;
margin: 0;
padding: 0;
}

header {
background-color: #35424a;
color: white;
text-align: center;
padding: 1rem;
}

nav ul {
background-color: #2c3e50;
list-style-type: none;
padding: 0;
}

nav ul li {
display: inline-block;
margin-right: 10px;
}

nav ul li a {
color: white;
text-decoration: none;
padding: 5px 10px;
}

nav ul li a:hover {
background-color: #34495e;
}

main {
padding: 20px;
}

footer {
background-color: #35424a;
color: white;
text-align: center;
padding: 10px;
position: fixed;
bottom: 0;
width: 100%;
}

このCSSは以下のことを行います：

  • 全ページに共通のフォントと行間を設定します。
  • 暗いヘッダーを中央寄せで白いテキストで設定します。
  • ナビゲーションメニューを暗い背景でインライン表示にし、リストのスタイルを削除します。
  • ナビゲーションリンクにホバー効果を追加します。
  • メインコンテンツエリアにパディングを追加します。
  • 固定されたフッターをページの下部に配置します。

CSSプロパティ

CSSは、要素をスタイル化するために多くのプロパティを使用します。以下はいくつかの一般的なプロパティの表です：

プロパティ 説明 例
color テキストの色を設定 color: blue;
background-color 背景色を設定 background-color: #f0f0f0;
font-size フォントサイズを設定 font-size: 16px;
font-family フォントの種類を設定 font-family: Arial, sans-serif;
margin 外側の余白を設定 margin: 10px;
padding 内側の余白を設定 padding: 5px;
border 枠線のスタイルを設定 border: 1px solid black;
text-align テキストの配置を設定 text-align: center;
display 表示タイプを設定 display: flex;

CSSの高度な概念

CSSに慣れてきたら、以下の高度なコンセプトを探求することができます：

  1. FlexboxとGridレイアウト
  2. メディアクエリを使用したリスポンシブデザイン
  3. CSSアニメーションとトランジション
  4. SassやLessなどのCSSプリプロセッサ
  5. BootstrapやTailwindなどのCSSフレームワーク

CSSをマスターする鍵は練習です。実験し、間違えを恐れずに - それが学びの過程です！スタイル化を楽しんでください！

Credits: Image by storyset

前のチュートリアル:
CSS - データ型
次のチュートリアル:
CSS - 角を丸める