CSS
カスケーディングスタイルシート（Cascading Style Sheets）はHTMLと同様にマークアップ言語の一種であり、HTMLページのタグに様々なスタイル（外観効果）を追加し、ウェブページの表示効果を定義します。これにより、ウェブコンテンツと表示外観を分離し、表示機能を向上させます。一言で言えば、CSSコードはブラウザにHTMLタグのコンテンツをどのように美化するかを指示します。
CSSリファレンス：https://css.doyoe.com/
基本的な使用方法
CSSコードはHTMLタグ内の属性値として記述することも、HTMLファイル内に追加コードとして記述することも、別のCSSドキュメントに記述してHTMLのlinkタグで参照することもできます。
インラインスタイル
CSSコードは各タグのstyle属性の値として使用できます。構文形式：
<タグ名 style="スタイルプロパティ: プロパティ値;スタイルプロパティ: プロパティ値;…">
コード例：
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>タイトル</title>
</head>
<body>
<h4 style="background-color: red; color: lightblue;">黄鶴楼送孟浩然之広陵</h4>
<p style="background-color: red; color: yellow;">
故人西辞黄鶴楼、<br>
煙花三月下揚州。
</p>
<p style="background-color: deeppink; color: yellow;">
孤帆遠影碧空尽、<br>
唯見長江天際流。
</p>
</body>
</html>
内部スタイル
CSSはHTMLファイル内のstyleタグ内に追加コードとして記述できます。構文形式：
<style>
セレクタ1 {
スタイルプロパティ: プロパティ値;
スタイルプロパティ: プロパティ値;
…
}
セレクタ2 {
スタイルプロパティ: プロパティ値;
スタイルプロパティ: プロパティ値;
…
}
…
</style>
コード例：
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>内部スタイル：構造と表現の初期分離効果</title>
<style>
h4, p {background-color: red;}
h4 {color: lightblue;}
p {color: yellow;}
.p2 {background-color: deeppink;}
</style>
</head>
<body>
<h4>黄鶴楼送孟浩然之広陵</h4>
<p>
故人西辞黄鶴楼、<br>
煙花三月下揚州。
</p>
<p class="p2">
孤帆遠影碧空尽、<br>
唯見長江天際流。
</p>
</body>
</html>
外部スタイル
CSSは個別のCSSファイルとして保存し、HTMLのlinkタグでウェブページに取り込むこともできます。common.cssのコード例：
h4, p {background-color: red;}
h4 {color: violet;}
p {color: yellow;}
.p2 {background-color: deeppink;}
説明：開発において、CSSが提供する3つの導入方法の中で、一般的には外部スタイルが最もよく使用され、次に内部スタイル、そしてインラインスタイルは基本的に禁止されています。後続のJavaScriptの継続的な開発では、インラインスタイルが最もよく使用されるため、CSSの3つの導入方法をすべて習得する必要があります。
基本構文
マークアップ言語として、CSSの構文は比較的簡単で、主に3つの部分で構成されます：セレクタ、スタイルプロパティ、およびプロパティ値。 CSSの構文は簡単ですが、内容が多いため、CSSを学ぶには多くの記憶が必要であり、使用法のパターンを把握し、ツールを活用することが重要です。
注意：ウェブフロントエンド分野では、CSSが外観スタイルを担当するため、重複コードが存在しやすいと考える人がいます。そのため、サーバーサイドプログラミング言語に基づいて、CSS構文を拡張したコンパイルツール（例：less、sassなど）を実現する人もいます。これにより、開発者はlessやsassをインストール後、CSSで関数、変数、ループ、条件判断などの操作を実現できます。しかし、lessやsassなどのコンパイルツールを使用しても、記述されるコードの大部分は元のCSSコードであり、最終的にブラウザが認識するのはCSSコードのみです。
注意：CSSでは、HTMLドキュメントのタグは要素と呼ばれます。
| 構造 | 説明 |
|---|---|
| セレクタ | 1つまたは複数のHTMLタグ（要素）を見つけるために使用されます |
| スタイルプロパティ | HTML要素の外観効果のタイプ（長さ、フォント、色、背景、境界線など）を設定します |
| スタイルプロパティ値 | HTML要素の外観効果の具体的なパラメータ（例：5px、赤など）を設定します |
構文形式：
セレクタ {
スタイルプロパティ: スタイルプロパティ値;
スタイルプロパティ: スタイルプロパティ値;
スタイルプロパティ: スタイルプロパティ値, スタイルプロパティ値, スタイルプロパティ値;
}
前節で学習したCSSの3つの導入方法の内部スタイルまたは外部スタイルでは、CSSの完全な構文を使用しています： input、#p2、h4はセレクタで、HTMLページ内のすべてのp、#p2、h4などの要素に指定されたスタイルを追加することをブラウザに指示します。 background-colorは、指定された要素の外観効果タイプを背景色に設定することをブラウザに指示します。#e0e0e0は背景色が薄灰色であることを意味します。 colorは、指定された要素の外観効果タイプをテキストのフォント色に設定することをブラウザに指示します。
セレクタ
セレクタ（selector）は、指定された検索規則に従って、どの要素に外観効果を追加するかをブラウザに指示するために使用されます。
要素セレクタ
要素セレクタ（またはタグセレクタ）は、セレクタを直接使用してHTML要素を見つけ、外観スタイルを追加します。
| セレクタ | 説明 |
|---|---|
**\*** |
ワイルドカードセレクタ。すべてのHTML要素を表します。 |
**tag** |
タイプセレクタ（または要素セレクタ、タグ名セレクタ）。指定された要素のタグ名をセレクタとして使用し、それらにスタイルを追加します。 |
**.class** |
クラスセレクタ。HTML要素にclass属性を追加し、値に基づいて要素を分類し、指定された分類の要素にスタイルを追加します。 |
**#id** |
IDセレクタ。HTML要素にid属性を追加し、指定された一意のid属性値を持つ単一の要素にスタイルを追加します。 |
コード例：
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>タイトル</title>
<style>
/* CSSのコメントは一種類のみ */
/* *、ワイルドカードセレクタ、任意のHTML要素を表します */
* {
background-color: aqua; /* 背景色：水色; */
}
/* タグ名を直接セレクタとして使用するタイプセレクタ。ウェブページ内の特定のタイプの要素を指定します */
a {
color: blue; /* フォント色：青; */
text-decoration: none; /* テキスト-装飾：なし; */
}
/* IDセレクタ。#の後に要素のid値を指定し、特定の要素にCSSスタイルを設定します */
#baidu{
font-size: 32px; /* フォント-サイズ：32ピクセル; */
font-family: sans-serif; /* フォント-ファミリー：サンセリフフォント */
}
/* クラスセレクタ。class属性を使用して特定のHTML要素を同じ分類にまとめ、クラスセレクタで直接指定されたクラスの要素にスタイルを追加します */
.first{
font-size: 32px; /* フォント-サイズ：32px */
text-decoration: underline; /* テキスト-装飾：下線; */
}
.second{
background-color: gray; /* 背景-色：灰色; */
color: white; /* フォント色：白色; */
}
.third{
border: 5px solid red; /* 境界線：境界線幅(5px) 境界線スタイル(実線) 境界線色(赤) */
}
</style>
</head>
<body>
<!-- 要素の属性は一意であるため、同じ要素内に同じ属性名が複数存在することはできません。複数の同名属性がある場合、ブラウザは最初の属性のみを認識します -->
<h1 class="first" class="second">見出し</h1>
<!-- 1つの要素は同時に1つまたは複数の異なる分類に属することができます。クラス名はスペースで区切ります -->
<p class="first third">段落</p>
<p class="second">段落</p>
<a class="second" href="https://www.rakuten.co.jp">楽天</a><br><br>
<a class="second third" href="https://www.yahoo.co.jp">Yahoo!</a><br><br>
<!-- 1つの要素に複数のid属性値を持つことはできません -->
<a id="baidu" class="third" href="https://www.google.co.jp">Google</a><br><br>
<!-- 異なるHTML要素で同じid属性値を宣言することはできますが、推奨されませんし、強く反対します！将来的なJavaScriptでの特殊効果作成時にエラーが発生する可能性があります -->
<a id="baidu" href="https://www.google.co.jp">Google</a><br>
</body>
</html>
関係セレクタ
HTMLでは、要素間に2つの関係が存在します：
関係セレクタは、要素間のネスト関係（親子関係、祖先と子孫の関係）と並列関係（兄弟関係、同世代関係）を使用して要素を見つけます。
| セレクタ | 説明 |
|---|---|
**セレクタ1, セレクタ2{}** |
グループセレクタ（または和集合セレクタ）。複数の異なるセレクタに対応する要素に同時に外観効果を追加します。 |
**セレクタA セレクタB{}** |
包含セレクタ（または子孫セレクタ）。指定された（祖先）セレクタAの下にある（子孫）セレクタBに対応する要素に外観効果を追加します。 |
**セレクタA>セレクタB{}** |
子セレクタ。指定された（親）セレクタAの次のレベルの（子）セレクタBに対応する要素に外観効果を追加します。 |
| セレクタA+セレクタB {} | 隣接セレクタ。セレクタAの直後の（同世代）セレクタBに対応する要素に外観効果を追加します。 |
| セレクタA~セレクタB {} | 兄弟セレクタ（または同世代セレクタ）。セレクタAと**同じ親を持つすべてのセレクタB**に対応する要素に外観効果を追加します。 |
コード例：
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>タイトル</title>
<style>
/* グループセレクタ。複数のセレクタに対応する要素に同時にスタイルを設定します */
h1, p, b, a{
color: red;
}
/* グループセレクタ内の各セレクタメンバーは、タイプセレクタに限定されません */
.p1, .p2, .a1{
background-color: yellow;
}
/* 包含セレクタ。特定のセレクタに含まれる要素にスタイルを指定します */
ul li a{
color: blue;
}
/* 包含セレクタの祖先または子孫セレクタは、上記のタイプセレクタだけでなく、その他の任意のセレクタも可能です */
.list2 li a{
text-decoration: line-through;/* テキスト-装飾線：取り消し線; */
}
/* 子セレクタ。指定されたセレクタの下の子セレクタに対応する要素にスタイルを追加します */
li>a{
border: 3px double blue; /* 境界線スタイル：境界線幅[3px] 境界線タイプ[二重実線] 境界線色[青]; */
}
/* 複数のセレクタを組み合わせて使用できます */
ul p>a{
background-color: orange;
}
/* 隣接セレクタ。指定されたセレクタの直後の要素で、+の後のセレクタルールに一致する場合に、現在の要素に外観効果を追加します */
.p1+p{
text-shadow: -5px -5px 2px black; /* テキスト影効果：水平影オフセット[正右負左] 垂直影オフセット[正下負上] ぼかし効果 影の色 */
}
/* 兄弟セレクタ。指定された要素の後のすべての兄弟セレクタを設定します。実際には弟を見つけることです */
.li-1~.li-2{
text-shadow: -2px -2px 2px red;
}
</style>
</head>
<body>
<h1>見出し</h1>
<p class="p1">第1段落</p>
<b>太字テキスト</b>
<p>第1段落p1の後の最初のpタグ</p>
<h1>見出し</h1>
<p class="p1">第2段落</p>
<p class="p2">第3段落</p>
<p>第4段落</p>
<p><a href="">第5段落 pの下のaタグ</a></p>
<p><a class="a1" href="">第6段落 pの下のaタグ</a></p>
- <a href="">第1li-----------------</a>
- <a class="a1" href="">第2li, ul li a</a>
- <a class="a1" href="">第3-1li</a>
- <a class="a1" href="">第3-2li</a>
- <a class="a1" href="">第3-3li</a>
- - 1
- <a href="">a2</a>
- 3
</li>
</ul>
- <a href="">.list2 a</a>
- <a href="">.list2 p a</a> <a href="">.list2 p a</a>
</body>
</html>
属性セレクタ
| セレクタ | 説明 |
|---|---|
**セレクタ\[attr="val"\]** |
属性名attrを持ち、属性値がvalである指定セレクタに外観効果を追加します |
| セレクタ\[attr\] | 属性名attrを持つ指定セレクタに外観効果を追加します |
| セレクタ\[attr^="val"\] | 属性名attrを持ち、属性値がvalで始まる指定セレクタに外観効果を追加します |
| セレクタ\[attr\*="val"\] | 属性名attrを持ち、属性値にvalを含む指定セレクタに外観効果を追加します |
コード例：
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>タイトル</title>
<style>
input[type="text"]{
border: 1px solid red;
outline-color: red; /* 入力フィールドのフォーカス外枠-色：赤 */
}
input[disabled]{
border: 0; /* 境界線を削除 */
}
input[value*='ログイン']{
cursor: pointer;
}
</style>
</head>
<body>
<form action="">
<input type="text" value="1.0" disabled><br>
ユーザー名: <input type="text"><br>
パスワード: <input="password"><br>
<input type="button" value="ログイン">
<input type="button" value="再ログイン">
</form>
</body>
</html>
擬似クラスセレクタ
擬似クラスセレクタは、要素の位置状態または使用状態（対話状態）に基づいて特定のクラスの要素を見つけます。
| セレクタ | 説明 | 使用範囲 |
|---|---|---|
| セレクタ:link | 未訪問のリンクのスタイルを設定します。 | リンク |
| セレクタ:visited | 訪問済みのリンクのスタイルを設定します。 | リンク |
| セレクタ:active | 要素がユーザーによってアクティブ化されたとき（マウスクリックとリリースの間に発生するイベント）のスタイルを設定します。 | リンク |
**セレクタ:hover** |
マウスが要素上にホバーしているときのスタイルを設定します。 | 任意の表示可能な要素 |
| セレクタ:focus | 要素が入力フォーカスを取得したときのスタイルを設定します（フォーム入力フィールドまたはcontenteditable属性を持つ要素に使用）。 | フォーム要素 |
**セレクタ:first-child** |
親要素の最初の子セレクタに一致します。 | 任意の要素 |
| セレクタ:last-child | 親要素の最後の子セレクタに一致します。 | 任意の要素 |
**セレクタ:nth-child(n)** |
親要素のn番目の子セレクタに一致します。 | 任意の要素 |
| セレクタ:checked | 選択状態のセレクタに一致します。（input typeがradioとcheckboxの場合に使用） | ラジオボタンまたはチェックボックス |
| セレクタ:disabled | ユーザーインターフェースで無効状態のセレクタに一致します。（通常はフォーム項目に使用） | フォーム要素 |
コード：
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>タイトル</title>
<style>
/* マウスが指定セレクタ上にホバーしたときに外観効果を設定 */
ul li:hover{
background-color: red;
list-style: circle; /* リスト項目タイプ：丸; 値がnoneの場合、記号を削除 */
}
/* マウスで指定セレクタの要素を押したまま離さないときに外観効果を設定 */
ul li:active{
color: white;
}
/* 指定セレクタに対応する要素が入力フォーカスを取得したときに外観効果を設定 */
h1:focus, input:focus{
color: red;
}
a{
text-decoration: none;
}
/* リンクの未訪問時の外観スタイルを設定。要素が未訪問状態である条件は、ブラウザに現在のリンクの訪問履歴が存在するかどうかです */
a:link{
color: red;
}
/* リンクの訪問済み時の外観スタイルを設定。要素が訪問済み状態である条件は、ブラウザに現在のリンクの訪問履歴が存在するかどうかです */
a:visited{
color: blue;
}
/* セレクタに対応する要素が親要素の最初の子要素であるときにスタイルを設定 */
.data1 li:first-child{
border: 1px solid red;
}
.data1 li:last-child{
border: 1px solid red;
}
/* セレクタに対応する要素が親要素のn番目の子要素であるときにスタイルを設定。CSSでの要素の番号付けは1から始まります */
.data1 li:nth-child(2){
background-color: red;
}
/* セレクタに対応する要素が親要素の偶数番目の子要素であるときにスタイルを設定。CSSでの要素の番号付けは1から始まります */
.data2 li:nth-child(2n){
background-color: red;
}
/* セレクタに対応する要素が親要素の奇数番目の子要素であるときにスタイルを設定。CSSでの要素の番号付けは1から始まります */
.data3 li:nth-child(2n-1){
background-color: red;
}
/* セレクタに対応する要素が親要素の指定倍数の子要素であるときにスタイルを設定。CSSでの要素の番号付けは1から始まります */
.data4 li:nth-child(3n){
background-color: red;
}
.data4 li:nth-child(3n-1){
background-color: yellow;
}
.data4 li:nth-child(3n-2){
background-color: green;
}
/* セレクタに対応する要素が選択状態であるときに外観効果を設定 */
input:checked ~ span:after {
content: "選択されました"
}
/* セレクタに対応する要素が無効状態であるときに外観効果を設定 */
input:disabled{
color: red;
}
</style>
</head>
<body>
<!-- HTML要素がブール属性を持つ場合、contenteditableは現在の要素が編集可能であることを示します -->
<h1 contenteditable>見出し</h1>
<input type="text" placeholder="テキストを入力してください。">
- 1
- 2
- 2
- 2
- 2
- 3
<p>
<a href="https://www.rakuten.co.jp">楽天</a><br>
<a href="https://www.yahoo.co.jp">Yahoo!</a><br>
</p>
<hr>
- 1
- 2
- 2
- 2
- 2
- 3
<hr>
- 1
- 2
- 2
- 2
- 2
- 3
<hr>
- 1
- 2
- 2
- 2
- 2
- 3
<p>
<label>
<input type="radio" name="gender"> 男性
<span></span>
</label>
<label>
<input type="radio" name="gender"> 女性
<span></span>
</label>
</p>
<p><input type="text" value="変更不可" disabled></p>
</body>
</html>
擬似要素セレクタ
擬似要素セレクタ（または擬似要素セレクタ）は、選択またはスタイル設定されるのは要素コンテンツの一部だけです。
| セレクタ | 説明 |
|---|---|
**セレクタ::after** |
指定セレクタの末尾にスタイルまたはコンテンツを追加します。 |
| セレクタ::before | 指定セレクタの前面にスタイルまたはコンテンツを挿入します。 |
| セレクタ::placeholder | 指定セレクタに対応するフォーム入力フィールドのヒントテキストの外観スタイルを設定します。 |
| セレクタ::selection | 指定セレクタに対応する要素のコンテンツがマウスで選択されているときの外観効果を設定します。 |
コード：
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>タイトル</title>
<style>
/* 指定セレクタがマウスで選択された部分のコンテンツに外観スタイルを設定 */
p::selection{
color: yellow;
background-color: black;
}
/* 指定入力フィールド要素のヒントテキストに外観スタイルを設定 */
input[type="text"]::placeholder{
font-size: 12px; /* フォント-サイズ：12px、注意：Google Chromeでは、デフォルトの最小フォントサイズは12pxのみです。 */
color: red;
text-align: center; /* テキスト-水平揃え: 中央[center]、左[left,デフォルト値]、右[right]、両端揃え[justify]*/
}
.news::before{
content: "[";
}
.news::after{
content: "]"
}
.money::before{
content: "¥";
}
.content::after{
content: ".....";
color: red;
}
</style>
</head>
<body>
<p class="news">麦の波が揺れ、穂の香りが顔に吹き付ける。金色の麦畑では、刈り取り機が麦の波の間を往復し、一粒粒の実りの麦が刈り取り機の扉から流れ出し、絶え間なく運搬車に積み込まれる。</p>
<input type="text" placeholder="ユーザー名を入力してください！"><br>
<span class="money">100</span>
<p class="content">基本的な記事コンテンツ</p>
</body>
</html>
スタイルプロパティ
色
色の表現方法
CSSでは、色の表現として3つの書き方をサポートしています：単語表現法、16進数表現法、およびRGB関数表現法。
単語表現法
英語の単語を使って色を表現します。しかし、コンピュータがサポートする色は一般的に約1677万色程度です。
red; /* 赤 */
yellow; /* 黄色 */
blue; /* 青 */
green; /* 緑 */
16進数表現法
16進数値を使って色を表現します。通常の形式：#RRGGBB。コンピュータ内のすべての色は画面の発光によって表現されます。したがって、すべての色は光の3原色（赤、緑、青）に基づいています。各色の発光度は、最も暗いから最も明るいまで256段階に分けられており、16進数で表現すると00〜FFの間、10進数で表現すると0〜255の間になります。
#ffffff /* 白色、赤緑青の3色が最も明るく発光 */
#000000 /* 黒色、赤緑青の3色が発光しない */
#ff0000 /* 赤色、赤色のみ発光、他は発光しない */
#00ff00 /* 緑色 */
#0000ff /* 青色 */
#ffff00 /* 黄色 */
#ff00ff /* 紫色 */
#00ffff /* シアン色 */
/* 3色の原色の発光度が同じ場合、白色と黒色でない場合は灰色になります。*/
#333333 /* 灰色 */
#666666 /* 灰色 */
#999999 /* 灰色 */
#fafafa /* 灰色 */
#aaaaaa /* 灰色 */
拡張：
フロントエンド開発では、コンピュータがサポートする1677万色のすべてを実現できますが、異なるコンピュータの画面の素材が異なるため、同じ色が異なるコンピュータ画面で表示効果が異なることがあります。これにより、Webセーフカラー（PhotoshopのWebカラー）という概念が派生しました。Webセーフカラーは、1677万色から抽出された、すべての画面、すべてのブラウザで表示が一致することが保証される一部の色です。
16進数表現法は省略が可能です。
#aaaaaa ---> #aaa
#aabbcc ---> #abc
#ffffff /* 白色*/ #fff;
#000000 /* 黒色*/ #000;
#ff0000 /* 赤色 */ #f00;
#00ff00 /* 緑色 */ #0f0;
#0000ff /* 青色 */ #00f;
#ffff00 /* 黄色 */ #ff0;
#ff00ff /* 紫色 */ #f0f;
#00ffff /* シアン色 */ #0ff;
/* 3色の原色の発光度が同じ場合、白色と黒色でない場合は灰色になります。*/
#333333 /* 灰色 */ #333;
#666666 /* 灰色 */ #666;
#999999 /* 灰色 */ #999;
#fafafa /* 灰色 */ /* 省略不可 */
#aaaaaa /* 灰色 */ #aaa;
コード：
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>タイトル</title>
<style>
p{
/*color: #ffffff;*/
/*color: #ff0000;*/
/*color: #00ff00;*/
/*color: #0000ff;*/
/*color: #ffff00; /*赤色+緑色=黄色*/
color: #00ffff; /*緑色+青色=シアン色*/
}
</style>
</head>
<body>
<p>麦の波が揺れ、穂の香りが顔に吹き付ける。金色の麦畑では、刈り取り機が麦の波の間を往復し、一粒粒の実りの麦が刈り取り機の扉から流れ出し、絶え間なく運搬車に積み込まれる。</p>
</body>
</html>
RGB関数表現法
RGBは光の3原色を表します。
/* 不透明色を設定 */
rgb(赤, 緑, 青);
/* 透明色を設定 */
rgba(赤, 緑, 青, 透明度);
コード：
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>タイトル</title>
<style>
p{
color: rgb(255,255,255); /* 白色 */
color: rgb(0,0,0); /* 黒色 */
color: rgb(255,0,0); /* 赤色 */
color: rgb(255,255,0); /* 黄色 */
color: rgb(0,255,0); /* 緑色 */
color: rgb(0,255,255); /* シアン色 */
color: rgb(0,0,255); /* 青色 */
color: rgb(255,0,255); /* 紫色 */
}
</style>
</head>
<body>
<p>麦の波が揺れ、穂の香りが顔に吹き付ける。金色の麦畑では、刈り取り機が麦の波の間を往復し、一粒粒の実りの麦が刈り取り機の扉から流れ出し、絶え間なく運搬車に積み込まれる。</p>
</body>
</html>
色のプロパティ
| プロパティ名 | 説明 |
|---|---|
**color** |
テキストコンテンツの色 |
**opacity** |
要素およびコンテンツと子要素の透明度。値の範囲：0〜1の間の数値。 |
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>タイトル</title>
<style>
p{
/*background-color: black;*/
/*opacity: 0.5;*/
background-color: rgba(0,0,0,0.5); /* 背景のみを透明に設定し、コンテンツの透明度には影響しません */
color: rgba(255,255,255,0.5);
}
</style>
</head>
<body>
<p>麦の波が揺れ、穂の香りが顔に吹き付ける。金色の麦畑では、刈り取り機が麦の波の間を往復し、一粒粒の実りの麦が刈り取り機の扉から流れ出し、絶え間なく運搬車に積み込まれる。</p>
</body>
</html>
フォント
| プロパティ名 | 説明 |
|---|---|
**font-style** |
フォントを斜体にするかどうかを設定 normal：デフォルト値、通常 italic：斜体。 |
**font-family** |
フォントのフォントファミリを設定【カスタムフォント@font-faceと併用されることが多い】 |
**font-size** |
フォントのサイズを設定。CSSの一般的なサイズ単位（rem、%、pxなど）をサポートします。 |
**font-weight** |
フォントの太さを設定 |
| font | 上記のすべてのフォントプロパティの集約的な省略記述法。一般的な形式： **font: フォントスタイル フォントの太さ フォントサイズ/行の高さ フォントファミリ;** **font: フォントの太さ フォントサイズ/行の高さ フォントファミリ;** **font: フォントサイズ/行の高さ フォントファミリ;** |
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>タイトル</title>
<style>
@font-face {
font-family: 'Migu 1P';
url('migu-1p-regular.ttf') format('truetype');
}
.p1{
font-style: normal; /* フォントを斜体にしない */
}
.p2{
font-family: 'Migu 1P'; /* システムに組み込まれたサンセリフフォント、英語にのみ適用 */
}
.p3{
font-size: 16px; /* Google Chromeのデフォルトフォントサイズ：16ピクセル; */
}
.p3{
font-weight: bold; /* フォントを太字にする */
}
h1,h2,h3,h4,h5,h6{
font-weight: normal; /* 太字効果を削除 */
}
.p4{
/*font: italic bold 22px/44px "Arial";*/
/*font: bold 22px/44px "Arial";*/
font: 22px/22px "Arial"; /* さらに省略することはできません */
}
</style>
</head>
<body>
<i class="p1">こんにちは、你好</i>
<div >こんにちは、你好</div>
<div class="p2">こんにちは、你好</div>
<div class="p3">こんにちは、你好</div>
<h1>見出しタグはデフォルトで太字です。太字効果を削除する必要があります</h1>
<div class="p4">こんにちは、你好</div>
</body>
</html>
テキスト
| プロパティ名 | 説明 |
|---|---|
| word-break | 単語の改行。以下の値を取ります： **word-break: break-all;**、行全体が終了してから改行することを保持します。 **word-break: break-word;**、単語全体で改行することを保持します。デフォルト値。 |
**text-align** |
インライン要素または要素内のテキストコンテンツの水平方向の配置方法。 |
| text-align-last | 要素の最終行のコンテンツの水平方向の配置方法。 |
| word-spacing | 要素のコンテンツ内の単語と単語の間の距離【単語間隔】。 |
| letter-spacing | 要素のコンテンツ内の文字と文字の間の距離【文字間隔】。 |
**text-indent** |
要素のコンテンツの最初の行のインデント。 |
**vertical-align** |
インライン要素またはインラインブロック要素の垂直方向の配置方法。 |
**line-height** |
要素のコンテンツの行の高さ。すべての一般的なサイズ単位とfont-sizeの倍数をサポートします。 |
**text-decoration** |
要素の下線装飾 |
**text-shadow** |
要素のテキストコンテンツの影またはぼかし効果。以下の値を取ります： none、影なし。 パラメータ1：最初の長さ値はオブジェクトの**影の水平オフセット値**を設定します。負の値も可能です。 パラメータ2：2番目の長さ値はオブジェクトの**影の垂直オフセット値**を設定します。負の値も可能です。 パラメータ3：3番目の長さ値が指定された場合、オブジェクトの**影のぼかし値**を設定します。負の値は許可されません。 パラメータ4：オブジェクトの**影の色**を設定します。 |
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>タイトル</title>
<style>
div.box1{
width: 400px;
height: 200px;
background-color: red;
word-break: break-all;
}
div.box2{
text-align: center;
}
div.box3{
text-align: center;
}
div.box4{
text-align-last: center;
}
div.box5{
word-spacing: 100px;
}
.box6{
letter-spacing: 5px;
}
.box7{
text-indent: 2rem;
}
.box8 img{
vertical-align: top;
}
input{
height: 42px;
vertical-align: top;
}
.box10{
line-height: 2rem;
}
.box11, a, del{
/*text-decoration: underline; /*下線 */
/*text-decoration: line-through; /*取り消し線 */
/*text-decoration: overline; /*上線 */
text-decoration: none; /*装飾線なし */
}
.box12{
font-size: 36px;
text-shadow: 2px 2px 5px red;
/*text-shadow: 2px 2px 5px red, 5px 5px 5px yellow, 7px 7px 5px blue;*/
}
</style>
</head>
<body>
<div class="box1">Flask-SocketIOは、Flaskアプリケーションにクライアントとサーバー間の低遅延双方向通信へのアクセスを提供します。クライアントサイドアプリケーションは、JavaScript、Python、C++、Java、SwiftのいずれかのSocketIOクライアントライブラリ、またはその他の互換性のあるクライアントを使用して、サーバーへの永続的な接続を確立できます。</div>
<div class="box2">Flask-SocketIO</div>
<div class="box3"><a href="">Google</a></div>
<div class="box3"></div>
<div class="box3"><p>この非常に長いコンテンツ！！！</p></div>
<div class="box4">Flask-SocketIOは、Flaskアプリケーションにクライアントとサーバー間の低遅延双方向通信へのアクセスを提供します。クライアントサイドアプリケーションは、JavaScript、Python、C++、Java、SwiftのいずれかのSocketIOクライアントライブラリ、またはその他の互換性のあるクライアントを使用して、サーバーへの永続的な接続を確立できます。</div>
<div class="box5">こんにちは 世界</div>
<div class="box6">こんにちは 世界</div>
<div class="box7">総務省15日発表のデータによると、5月に我が国の経済は徐々に感染症の不利な影響を克服し、生産需要は徐々に回復し、雇用物価は全体的に安定しており、主要指標は改善傾向にあります。</div>
<div class="box8">画像：</div>
<div class="box9">ユーザー名：<input type="text" name="" placeholder="ユーザー名"></div>
<div class="box10">総務省15日発表のデータによると、5月に我が国の経済は徐々に感染症の不利な影響を克服し、生産需要は徐々に回復し、雇用物価は全体的に安定しており、主要指標は改善傾向にあります。</div>
<div class="box11">総務省15日発表のデータによると、5月に我が国の経済は徐々に感染症の不利な影響を克服し、生産需要は徐々に回復し、雇用物価は全体的に安定しており、主要指標は改善傾向にあります。</div>
<div class="box11"><a href="">Google</a><div>
<del>削除コンテンツ</del>
<div class="box12">text-shadow</div>
</body>
</html>
サイズ
ブロックレベル要素のデフォルトの幅は100%です。
| プロパティ名 | 説明 |
|---|---|
**width** |
要素の幅【インライン要素には幅と高さがない】 |
**min-width** |
要素の最小幅 |
**max-width** |
要素の最大幅 |
**height** |
要素の高さ【インライン要素には幅と高さがない】 |
**min-height** |
要素の最小高さ |
| max-height | 要素の最大高さ |
一般的なサイズ単位
| 単位 | 説明 |
|---|---|
**px** |
絶対長さ単位。ピクセル（Pixels）。 |
| em | 相対長さ単位。現在の要素内のテキストのフォントサイズに対する相対値。 |
**rem** |
相対長さ単位。ルート要素（html要素）のfont-size計算値に対する倍数 |
**vw** |
相対長さ単位。ビューポートの幅に対する相対値。デフォルトでは、CSSのビューポートは100単位のvwに均等に分割されます。 |
**vh** |
相対長さ単位。ビューポートの高さに対する相対値。ビューポートは100単位のvhに均等に分割されます。 |
**%** |
相対長さ単位。親要素の幅または高さに対する相対値。一部の要素では高さに100%を使用しても効果がない場合があります。 |
余白（パディング）
要素の余白（margin、パディングとも呼ばれる）は、外側の余白（margin）と内側の余白（padding）に分けられます。外側の余白は要素と他の要素間の間隔であり、内側の余白は要素とコンテンツまたは要素と子要素間の間隔です。
内側の余白と外側の余白に関する説明：
ブラウザでは、F12デバッグツールのelementsオプションに、開発者が現在の要素の外側の余白、境界線、内側の余白、要素の幅と高さを確認できるボックスモデルが提供されています。このモデルは**ボックスモデル（box model）**です。ボックスモデルに基づいて、要素がウェブページ内で実際に占める空間を分析し、開発者がウェブページのレイアウトを簡単に行えるようにします。
| プロパティ名 | 説明 |
|---|---|
**margin-top** |
要素の上側の外側の余白を設定 |
**margin-right** |
要素の右側の外側の余白を設定 |
**margin-bottom** |
要素の下側の外側の余白を設定 |
**margin-left** |
要素の左側の外側の余白を設定 |
**margin** |
上記のすべての外側の余白プロパティの集約的な省略記述法。4つの省略記述法があります： 1つのプロパティ値。例：**margin: 20px;**は、要素の4方向の外側の余白を20pxに同時に設定することを意味します 2つのプロパティ値。例：**margin: 20px 40px;**は、要素の外側の余白を上下20px、左右40pxに設定することを意味します 3つのプロパティ値。例：**margin: 20px 40px 50px;**は、要素の外側の余白を上20px、左右40px、下50pxに設定することを意味します 4つのプロパティ値。例：**margin: 10px 20px 30px 40px;**は上10px、右20px、下30px、左40pxを意味します【時計回りに配置】 |
**padding-top** |
要素の上側の内側の余白（パディングまたは詰め物）を設定 |
**padding-right** |
要素の右側の内側の余白を設定 |
**padding-bottom** |
要素の下側の内側の余白を設定 |
**padding-left** |
要素の左側の内側の余白を設定 |
**padding** |
上記のすべての内側の余白プロパティの集約的な省略記述法。4つの省略記述法があります： 1つのプロパティ値。例：**padding: 20px;**は、要素の4方向の内側の余白を20pxに同時に設定することを意味します 2つのプロパティ値。例：**padding: 20px 40px;**は、要素の内側の余白を上下20px、左右40pxに設定することを意味します 3つのプロパティ値。例：**padding: 20px 40px 50px;**は、要素の内側の余白を上20px、左右40px、下50pxに設定することを意味します 4つのプロパティ値。例：**padding: 10px 20px 30px 40px;**は上10px、右20px、下30px、左40pxを意味します【時計回りに配置】 |
基本的な使用方法
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>タイトル</title>
<style>
.box1{
max-width: 1600px;
background-color: red;
margin: 0 auto;
}
.box2{
height: 250px;
background-color: red;
/*margin-top: 100px;*/
/*margin-right: 150px;*/
/*margin-bottom: 250px;*/
/*margin-left: 150px;*/
/*margin: 100px 150px 250px 150px; /* 上の省略記述 上 右 下 左 時計回り方向 */
/*margin: 100px 150px 250px; /* 上の省略記述 上 左右 下 */
/*margin: 150px 150px; /* 上の省略記述 上下 左右 */
margin: 150px; /* 上の省略記述 4方向 */
}
.box3{
width: 150px;
height: 50px;
background-color: yellow;
/*padding-top: 50px;*/
/*padding-right: 50px;*/
/*padding-bottom: 20px;*/
/*padding-left: 50px;*/
/*padding: 50px 50px 20px 50px; /* 上の省略記述：上 右 下 左 時計回り方向 */
/*padding: 50px 50px 20px; /* 上の省略記述 上 左右 下 */
/*padding: 50px 50px; /* 上の省略記述 上下 左右 */
padding: 50px; /* 上の省略記述 4方向 */
}
</style>
</head>
<body>
<div class="box1">
コンテンツを中央に配置
</div>
<div class="box2">
外側の余白の設定
<div class="box3">
内側の余白の設定
</div>
</div>
<p>通常のpタグ</p>
</body>
</html>
余白の役割：
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>タイトル</title>
<link rel="stylesheet" href="normalize.css">
<style>
.box1{
width: 400px;
height: 200px;
background-color: red;
text-align: center;
}
.box2{
width: 150px;
height: 50px;
background-color: yellow;
margin: 0 auto; /* 子ブロックレベル要素を親ブロックレベル要素内で水平方向に中央に配置 */
}
</style>
</head>
<body>
1. 初期化スタイル、リスト、h1、pなどのHTML要素は、デフォルトで不要な内外の余白があるため、一般的に処理します<br>
<p>p1</p>
<h1>h1</h1>
- li-1
- li-2
2. 子ブロックレベル要素を親ブロックレベル要素内で中央に配置する場合、子要素がブロックレベル要素である場合、子要素は親要素の100%の幅を占有するため、子要素に幅を設定する必要があります<br>
<div class="box1">
<div class="box2">こんにちは</div>
</div>
3. レイアウト効果 <br>
<hr>
<style>
.today-news{
width: 440px;
margin: 50px;
}
.today-news .block-title{
font-size: 30px;
color: #0066cc;
border-bottom: 1px solid #ccccff;
height: 61px;
}
.today-news .block-title span{
border-bottom: 5px solid #0066cc;
padding-bottom: 15px;
}
.today-news .block-title .first-news a{
color: #333;
text-decoration: none;
}
.today-news .news-list li{
line-height: 32px;
}
.today-news .first-news {
padding: 13px 0 5px;
font-weight: bold;
}
.today-news a:hover {
color: #0c82ff;
}
.today-news li .site{
color: #253e6d;
font-weight: bold;
}
.today-news li .line{
padding: 0 5px;
color: #e9e9e9;
}
</style>
<div class="today-news">
<h3 class="block-title"><span>今日の話題</span></h3>
- <a href="">総務省：5月に経済活動が回復の兆し</a>
- <a class="site" href="">NHK</a><span class="line">|</span><a class="title" href="">「二酸化炭素排出削減」の取り組み、美しい地球を守る</a>
- <a class="site" href="">読売新聞</a><span class="line">|</span><a class="title" href="">このお金も受け取れる可能性！全国労働組合連合会最新通知</a>
- <a class="site" href="">朝日新聞</a><span class="line">|</span><a class="title" href="">過剰な防疫措置が批判：感染症対策は緩めず強めず</a>
- <a class="site" href="">毎日新聞</a><span class="line">|</span><a class="title" href="">基層にいても基層から離れる、一部の幹部がなぜ国民から距離を置くのか</a>
- <a class="site" href="">産経新聞</a><span class="line">|</span><a class="title" href="">全国鉄道6月20日から新しいダイヤグラムを実施</a>
- <a class="site" href="">時事通信</a><span class="line">|</span><a class="title" href="">黒土の危機！14億人の食糧に関わる問題</a>
</div>
</body>
</html>
境界線
| プロパティ名 | 説明 |
|---|---|
| border-top-style | 要素の上側の境界線のタイプを設定。一般的な値： none： 境界線なし。 dotted： 点状の輪郭。 dashed： 破線の輪郭。 solid： 実線の輪郭 |
| border-right-style | 要素の右側の境界線のタイプを設定。一般的な値は上記と同じ。 |
| border-bottom-style | 要素の下側の境界線のタイプを設定。一般的な値は上記と同じ。 |
| border-left-style | 要素の左側の境界線のタイプを設定。一般的な値は上記と同じ。 |
| border-style | 上記のすべての境界線タイププロパティの集約的な省略記述法。4つの省略記述法があり、marginの省略記述法を参照。 |
| border-top-color | 要素の上側の境界線の色を設定。 |
| border-right-color | 要素の右側の境界線の色を設定。 |
| border-bottom-color | 要素の下側の境界線の色を設定。 |
| border-left-color | 要素の左側の境界線の色を設定。 |
| border-color | 上記のすべての境界線色プロパティの集約的な省略記述法。4つの省略記述法があり、marginの省略記述法を参照。 |
| border-top-width | 要素の上側の境界線の幅を設定。 |
| border-right-width | 要素の右側の境界線の幅を設定。 |
| border-bottom-width | 要素の下側の境界線の幅を設定。 |
| border-left-width | 要素の左側の境界線の幅を設定。 |
| border-width | 上記のすべての境界線幅プロパティの集約的な省略記述法。4つの省略記述法があり、marginの省略記述法を参照。 |
**border-top** |
上側の境界線の色、タイプ、幅の集約的な省略記述法。 |
**border-right** |
右側の境界線の色、タイプ、幅の集約的な省略記述法。 |
**border-bottom** |
下側の境界線の色、タイプ、幅の集約的な省略記述法。 |
**border-left** |
左側の境界線の色、タイプ、幅の集約的な省略記述法。 |
**border** |
4方向の境界線の色、タイプ、幅の集約的な省略記述法。 |
**border-top-left-radius** |
要素の左上隅の角丸効果を設定。値の形式は2種類： 正円形の角丸、例：**border-top-left-radius: 直径;** 楕円形の角丸、例：**border-top-left-radius: 水平方向の直径 垂直方向の直径;** |
**border-top-right-radius** |
要素の右上隅の角丸効果を設定。値の形式は上記と同じ。 |
**border-bottom-right-radius** |
要素の右下隅の角丸効果を設定。値の形式は上記と同じ。 |
**border-bottom-left-radius** |
要素の左下隅の角丸効果を設定。値の形式は上記と同じ。 |
**border-radius** |
上記のすべての要素の角丸プロパティの集約的な省略記述法。4つの省略記述法があり、marginの省略記述法を参照。値の形式は上記と同じ。 上記との違いは、楕円形の角丸のパラメータを：**水平方向の直径/垂直方向の直径**の形式で設定することです。 |
**box-shadow** |
要素の影効果を設定。設定方法は**text-shadow**に似ています。値は以下の通り： none： 影なし パラメータ1：要素の影の**水平オフセット値**を定義します。正の値は影が右側、負の値は影が左側 パラメータ2：要素の影の**垂直オフセット値**を定義します。正の値は影が下方、負の値は影が上方 パラメータ3：要素の影の**ぼかし半径**を定義します。この値が大きいほど影の境界がぼやけ、0の場合は影がぼやけません。負の値は許可されません パラメータ4：要素の影の**広がり値**を定義します。正の値は影が四方に広がり、負の値は影が内側に収縮します パラメータ5：要素の影の**色**を定義します。この値が定義されていない場合、影の色は現在の最も近いテキスト色がデフォルトになります パラメータ6：inset： 要素の影のタイプを**内側の影**に定義します。この値が空の場合、要素の影のタイプは外側の影になります |
境界線の基本的な使用方法
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ドキュメント</title>
<style>
h1, button{
width: 200px;
}
.box1{
/* 境界線プロパティ */
/*4方向の境界線タイプを個別に設定*/
/*border-top-style: dotted;*/
/*border-right-style: dashed;*/
/*border-bottom-style: double;*/
/*border-left-style: solid;*/
/*上 右 下 左の境界線タイプを設定[省略記述]*/
/*border-style: dotted dashed double solid;*/
/*上 左右 下の境界線タイプを設定*/
/*border-style: dotted solid double;*/
/*上下 左右の境界線タイプを設定*/
/*border-style: double solid;*/
/*4方向の境界線タイプを同時に設定*/
border-style: solid;
}
.box2{
/*border-top-style: none;*/
/*border-right-style: none;*/
/*border-bottom-style: none;*/
/*border-left-style: none;*/
border-style: none;
}
.box3{
border-style: solid;
/*4方向の境界線色を個別に設定*/
/*border-top-color: red;*/
/*border-right-color: blue;*/
/*border-bottom-color: pink;*/
/*border-left-color: cyan;*/
/*境界線色プロパティを省略記述*/
/*4方向の境界線色を一度に設定*/
/*border-color: red blue pink cyan;*/
/*上 左右 下の境界線色を設定*/
/*border-color: red blue pink;*/
/*上下 左右の境界線色を設定*/
/*border-color: red blue;*/
/*4方向の境界線色を一度に設定 */
border-color: red;
}
.box4{
border-style: solid;
border-color: red;
/*4方向の境界線幅を個別に設定*/
/*border-top-width: 2px;*/
/*border-right-width: 10px;*/
/*border-bottom-width: 10px;*/
/*border-left-width: 10px;*/
/*省略記述、4方向の境界線幅を一度に設定*/
/*border-width: 1px 10px 10px 10px;*/
/*上 左右 下の境界線幅を設定*/
/*border-width: 1px 15px 10px;*/
/*上下 左右の境界線幅を設定*/
/*border-width: 1px 10px;*/
/*4方向の境界線幅を一度に設定 */
border-width: 2px;
}
.box5{
/*border-style: solid;*/
/*border-color: red;*/
/*border-width: 2px;*/
/*方向ごとに境界線幅、境界線タイプ、境界線色を省略記述*/
/*border-top: 2px double red;*/
/*border-right: 2px double blue;*/
/*border-bottom: 5px solid blue;*/
/*border-left: 5px solid red;*/
border: 2px solid red;
}
</style>
</head>
<body>
<h1 class="box1">見出し</h1>
<button class="box2">ボタン</button>
<h1 class="box3">見出し</h1>
<h1 class="box4">見出し</h1>
<h1 class="box5">見出し</h1>
</body>
</html>
境界線の実際の使用方法
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>タイトル</title>
<style>
.search-btn{
width: 546px;
margin: 0 auto;
}
.search-btn:after{
content: "";
display: block;
clear: both;
overflow: hidden;
}
.search-btn input[type="text"]{
width: 423px;
height: 26px;
padding: 2px 44px 2px 17px; /* 上右下左 */
border: 2px solid #e2231a; /* 境界線幅 境界線タイプ 境界線色 */
outline: none;
float: left;
}
.search-btn input[type="text"]::placeholder{
font-size: 12px;
}
.search-btn .btn{
width: 58px;
height: 34px;
line-height: 34px;
background-color: #e1251b;
outline: none;
border: none;
float: left;
}
.search-btn .btn img{
width: 20px;
height: 20px;
vertical-align: sub;
}
</style>
</head>
<body>
<div class="search-btn">
<input type="text" name="" id="" placeholder="家電168の人気商品"><button class="btn"></button>
</div>
</body>
</html>
境界線に基づいた要素によるアイコン効果の実現
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ドキュメント</title>
<style>
.box1{
width: 0;
height: 0;
border: 26px solid transparent;
border-top: 26px solid red;
}
.box2{
width: 0;
height: 0;
border: 26px solid transparent;
border-right: 26px solid red;
}
.box3{
width: 0;
height: 0;
border: 26px solid transparent;
border-bottom: 26px solid red;
}
.box4{
width: 0;
height: 0;
border: 26px solid transparent;
border-left: 26px solid red;
}
.box5{
width: 0;
height: 0;
border: 26px solid transparent;
border-left: 26px solid red;
border-right: 26px solid red;
}
.box6{
width: 0;
height: 0;
border: 26px solid transparent;
border-color: red yellow;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
<div class="box6"></div>
</body>
</html>
角丸の使用方法
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ドキュメント</title>
<style>
.box1{
width: 50px;
height: 50px;
background-color: red;
/*4方向の角丸を個別に設定*/
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
/*省略記述、4方向の角丸を設定*/
/*border-radius: 10px 10px 10px 10px;*/
/*上 左右 下を設定*/
border-radius: 10px 20px 10px;
/*上下 左右を設定*/
border-radius: 20px 10px;
/*4方向の角丸を同時に設定*/
border-radius: 50px;
}
.box2{
width: 200px;
height: 40px;
background-color: gray;
border-radius: 20px;
}
.box3{
width: 200px;
height: 40px;
background-color: black;
border-top-left-radius: 50px;
border-top-right-radius: 10px;
border-bottom-right-radius: 50px;
border-bottom-left-radius: 10px;
}
.box4{
/* 楕円形の角丸 */
width: 200px;
height: 40px;
background-color: orangered;
border-top-left-radius: 20px 10px;
border-top-right-radius: 20px 10px;
border-bottom-right-radius: 20px 10px;
border-bottom-left-radius: 20px 10px;
}
.box5{
/* 楕円形の角丸 */
width: 200px;
height: 40px;
background-color: orangered;
border-radius: 50px/25px;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
<div class="box6"></div>
</body>
</html>
要素の影
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ドキュメント</title>
<style>
body{
background-color: #f5f5f5;
}
.box1{
height: 300px;
width: 234px;
background-color: white;
transition: all .2s linear; /* スタイル遷移の設定：通常状態から擬似クラス状態への遷移効果。パラメータ1：遷移させるスタイルを設定、allはすべてのスタイルを意味、パラメータ2：遷移完了にかかる時間、パラメータ3：アニメーションの全体的な動き軌跡 */
}
.box1:hover{
box-shadow: 0 15px 30px rgba(0,0,0,0.1);
transform: translate3d(0,-2px,0);
}
</style>
</head>
<body>
<div class="box1">
</div>
</body>
</html>
背景
| プロパティ名 | 説明 |
|---|---|
**background-color** |
要素の背景色を設定します。 |
**background-image** |
要素の背景画像を設定します。背景画像と背景色を同時に設定した場合、画像が色を覆います。書き方は以下の通り： **background-image: url("画像パス");** |
**background-repeat** |
要素の背景画像のタイル効果を設定します。画像が設定されていない場合、このプロパティは機能しません。値は以下の通り： repeat-x：水平方向にタイル repeat-y：垂直方向にタイル repeat：水平方向と垂直方向にタイル no-repeat：タイルしない round：スケールタイル space：緩やかなタイル |
**background-size** |
要素の背景画像のサイズを設定します。値の設定方法は2種類： 1つのプロパティ値、背景画像の幅と高さを同時に設定します。 2つのプロパティ値、背景画像の幅と高さを個別に設定します。 |
**background-position** |
要素の背景画像の位置を設定します。要素の左上角を座標原点(0,0)としてオフセット設定します。形式は以下の通り： **background-position: x軸オフセット y軸オフセット;** |
| background-attachment | 要素がスクロールするときに背景画像が誰に対して固定されるかを定義します。値は以下の通り： fixed：ビューポートに対して固定。 scroll：要素に対して固定。要素のコンテンツがスクロールしても背景画像はスクロールしませんが、要素の祖先要素のスクロールに従います。 local：要素のコンテンツに対して固定。要素のコンテンツがスクロールすると背景画像もスクロールします。 |
**background** |
上記のすべての要素の背景プロパティの集約的な省略記述法。書き込み形式は以下の通り： **background: 背景色 背景画像 タイル方式 x軸オフセット y軸オフセット;** 順序は自由に変更できます |
背景の位置（黄色の長方形が要素、白色が背景画像）
コード：
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>タイトル</title>
<style>
.page{
width: 100%;
max-width: 1600px;
margin: 0 auto;
height: 500px;
/*background-color: red; /* 背景画像が背景色を覆う */
/*background-image: url("assets/images/3f7f689039c6c5b5cbfb6a4c4cae5079.jpeg"); /* ネットワークパスでもローカルパスでも可 */
/*background-repeat: no-repeat; /* タイルしない */
/*background-repeat: repeat-y; /* 垂直方向にタイル、Y軸に沿ってタイル */
/*background-repeat: repeat-x; /* 水平方向にタイル、X軸に沿ってタイル */
/*background-repeat: repeat; /* 全方向にタイル、デフォルト値 */
/*background-size: 100% 100%; /* 背景画像のサイズを設定 幅 高さ */
/*background-size: 100%; /* パラメータが1つの場合、幅のみ設定、高さは比率に従ってスケール */
/*background-size: auto 100%; /* 高さのみ指定、幅は比率に従ってスケール */
/*背景画像の位置：要素の左上角を原点(0,0)として*/
/*background-position: 100px 100px;*/
/*background-attachment: fixed; /* 要素の背景画像、ビューポートに対して固定、要素がスクロールしても背景画像はスクロールしない */
/*background-attachment: scroll; /* 要素に対して固定、要素のコンテンツがスクロールしても背景画像はスクロールしない */
/*background-attachment: local; /* 要素のコンテンツに対して固定、要素のコンテンツがスクロールすると背景画像もスクロールする */
/*overflow: scroll; /* コンテンツのオーバーフロー処理方法：scrollはコンテンツが要素自体の高さと幅を超えた場合にスクロールバーが表示されることを意味する */
background: red url("assets/images/3f7f689039c6c5b5cbfb6a4c4cae5079.jpeg") no-repeat 200px 100px;
}
</style>
</head>
<body style="height: 3000px;">
<div class="page">
こんにちは 世界;<br>
こんにちは 世界;<br>
こんにちは 世界;<br>
こんにちは 世界;<br>
こんにちは 世界;<br>
こんにちは 世界;<br>
こんにちは 世界;<br>
こんにちは 世界;<br>
こんにちは 世界;<br>
こんにちは 世界;<br>
こんにちは 世界;<br>
こんにちは 世界;<br>
こんにちは 世界;<br>
こんにちは 世界;<br>
こんにちは 世界;<br>
こんにちは 世界;<br>
こんにちは 世界;<br>
こんにちは 世界;<br>
こんにちは 世界;<br>
こんにちは 世界;<br>
こんにちは 世界;<br>
こんにちは 世界;<br>
こんにちは 世界;<br>
こんにちは 世界;<br>
こんにちは 世界;<br>
こんにちは 世界;<br>
こんにちは 世界;<br>
こんにちは 世界;<br>
こんにちは 世界;<br>
こんにちは 世界;<br>
こんにちは 世界;<br>
こんにちは 世界;<br>
こんにちは 世界;<br>
こんにちは 世界;<br>
こんにちは 世界;<br>
こんにちは 世界;<br>
こんにちは 世界;<br>
こんにちは 世界;<br>
こんにちは 世界;<br>
こんにちは 世界;<br>
こんにちは 世界;<br>
こんにちは 世界;<br>
こんにちは 世界;<br>
こんにちは 世界;<br>
こんにちは 世界;<br>
</div>
</body>
</html>
インターフェース
| プロパティ | 説明 |
|---|---|
| outline | 外枠 |
| cursor | ウェブページ内でのマウスカーソルの外観形状。一般的な値：pointer |
| resize | ユーザーが要素のサイズを調整できるかどうか none： ユーザーが要素のサイズを調整できない。 both： ユーザーは要素の幅と高さを調整できる。 horizontal： ユーザーは要素の幅を調整できる vertical： ユーザーは要素の高さを調整できる |
コード：
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>タイトル</title>
<style>
.box{
width: 200px;
height: 200px;
background: red;
cursor: pointer; /* 指カーソル */
}
input[type="text"]{
/*outline: 1px solid red;*/
outline: none;
}
textarea[name="desc"]{
width: 200px;
height: 80px;
resize: none; /* 禁止 */
}
</style>
</head>
<body>
<div class="box"></div>
<input type="text"><br>
<textarea name="desc" id=""></textarea>
</body>
</html>