はじめに
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ページを作ることができます。
これらの知識を基に、自分だけのスタイルを作り出してみてください。
