CSSとは
CSS（Cascading Style Sheets、カスケーディングスタイルシート）は、HTMLやXMLのような構造化ドキュメントに見た目を追加するためのスタイル言語です。フォント、間隔、色などの視覚的表現を制御し、.cssという拡張子で保存されます。
CSSの基本構文
セレクタ
- IDセレクタ：ページ内で一意の識別子を指定。使用頻度は低い。
- クラスセレクタ：class属性で要素を分類。使用時に「.クラス名」と記述。
- 要素セレクタ：タグ名で指定。例：div, p, ul, li, aなど。
- 全称セレクタ：すべての要素を選択。「*」で表記。
- 子孫セレクタ：スペースで区切って階層を指定。
これらのセレクタは組み合わせて使用できます。
<html>
<head>
<style type="text/css">
/* 全称セレクタ */
* {
margin: 0;
padding: 0;
}
/* 要素セレクタ */
div {
background-color: #f0f0f0;
}
/* クラスセレクタ */
.container {
width: 80%;
margin: 0 auto;
}
/* IDセレクタ */
#mainHeader {
color: #333;
}
/* 組み合わせセレクタ */
div.container {
border: 1px solid #ddd;
}
/* 子孫セレクタ */
nav ul li {
display: inline-block;
}
</style>
</head>
</html>宣言
各宣言はプロパティと値のペアで構成され、コロンで区切られます。
<html>
<head>
<style type="text/css">
a {
color: #0066cc;
text-decoration: none;
transition: color 0.3s ease;
}
a:hover {
color: #004499;
}
</style>
</head>要素のスタイリング方法
要素の特定
スタイルを適用するには、まず対象要素を特定する必要があります。直接要素にstyle属性を追加する方法もあります。
主要なスタイルプロパティ
- リストのマーカー非表示:
list-style: none - テキスト色:
color: redまたはcolor: rgb(189, 278, 32) - リンクの下線非表示:
text-decoration: none - フォントサイズ:
font-size: 18px - フォントファミリー:
font-family: 'Yu Gothic', 'Meiryo', sans-serif - フォントの太さ:
font-weight: bold - 要素の寸法:
width: 500px; height: 200pxまたはwidth: 100%; height: 60% - マウスホバー効果:
:hover擬似クラス - 枠線:
border: 1px solid #ccc（個別方向の指定も可能） - 行の高さ:
line-height: 1.5 - 水平中央揃え:
text-align: center - 垂直中央揃え:
line-heightとheightを同じ値に設定
スタイルの適用方法
インラインスタイル
要素に直接style属性を追加する方法です。
<a href="#" style="color: rgba(0, 0, 255, 0.2);
text-decoration: none;
font-size: 18px;
font-family: 'Yu Gothic', sans-serif;
font-weight: bold;">
テクノロジーの最新トレンド
</a>内部スタイルシート
HTMLドキュメントの<head>セクションに<style>タグを追加する方法です。
<head>
<style type="text/css">
body {
color: #333;
font-size: 16px;
line-height: 1.6;
font-family: 'Yu Gothic', 'Meiryo', sans-serif;
}
</style>
</head>外部スタイルシート
別の.cssファイルを作成し、HTMLドキュメントにリンクする方法です。
<head>
<link rel="stylesheet" type="text/css" href="styles/main.css">
</head>要素の分類
ブロック要素
ページ内で1行を占有し、幅と高さを設定できます。例：h1-h6, div, ul, li, p, section, articleなど。
インライン要素
後続の要素と同じ行に表示され、幅と高さの設定は無視されます。例：a, span, img, strong, emなど。
インラインブロック要素
display: inline-block を指定すると、インライン要素のように横に並びながら、ブロック要素のように幅と高さを設定できます。
要素の表示形式は相互に変換可能です：
display: inline; /* インライン要素に変換 */
display: block; /* ブロック要素に変換 */
display: inline-block; /* インラインブロック要素に変換 */