●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ページを作成しましょう！
