HTML5 css
特に重要
外部スタイルシートの読み込み
<link rel="stylesheet" type="text/css" href="test.css">
内部スタイルシートの読み込み
<style type="text/css">
</style>
インラインスタイルシートの読み込み
<p style=""></p>
@import での読み込み
CSSファイル内で別のCSSファイルを読み込む
@import url("text.css");
<p style="@import url('test.css');"></p>
スタイルシートの優先順位:
1) インラインスタイルシート
2) 内部スタイルシート、外部スタイルシート
3) ユーザスタイルシート
4) ユーザエージェントスタイルシート
ユーザスタイルシートは、ユーザがブラウザで使用するスタイル設定を定義するためのCSSファイル
ユーザエージェントスタイルシートは、ブラウザ自体が持つデフォルトのスタイル設定を定義するCSSファイル
ユーザスタイルシートとユーザエージェントスタイルシートは、
ブラウザの設定やプラグインの形式で提供される。
ブラウザの設定やユーザの好みによって適用される。
ユーザーが操作したりHTMLファイルに直接読み込まない。
セレクタによるCSSプロパティの優先順位:
1) インラインスタイルシート
2) IDセレクタ
3) クラスセレクタ、属性セレクタ、疑似クラス
4) タイプセレクタ、疑似要素
@規則
@規則によりCSSの機能性を向上できる
@import
CSSファイル中で別のCSSファイルを読み込める
@media
レスポンシブデザインを実現する
異なるデバイスで異なるスタイルを適用する
@font-face
webフォントをブラウザにダウンロードする
@keyframes
アニメーションのキーフレームを定義する
@supports
ブラウザが特定のCSS機能をサポートしてるなら、そのスタイルを適用する
@page
印刷時のページスタイルを定義する
@counter-style
CSSカウンターのスタイルを適用する
カスケード
CSSには内部スタイルシートなど色々種類がある。
どのスタイルを適用するかを決定するプロセスのこと。
id属性、class属性を使用しているか(重要度)、セレクタが特定的か、
同じくらいの特定性なら後で定義されたものが使用される
セレクタ
タイプセレクタ
p {
}
クラスセレクタ
.testP {
}
IDセレクタ
#testP {
}
属性セレクタ
input[type="text"] {
}
属性名の書き方)
属性名 = "属性値"
属性名 ~= "属性値"
属性名 |= "属性値"
属性名 ^= "属性値"
属性名 $= "属性値"
属性名 *= "属性値"
疑似要素
要素:first-line 1行目
要素:first-letter 1文字目
要素:before cssのcontent属性の値を要素の前に配置
要素:after cssのcontent属性の値を要素の後に配置
疑似クラス
要素のフォーカス状態、チェック状態、無効状態、有効状態、空要素、ターゲット要素、言語属性に基づいて要素を選択する
:focus
:checked
:disabled
:enabled
:root
:empty
:target
:lang
:not
-childと-of-type
nth-childはセクション内の全ての要素を数えるので注意
:nth-child(n)
:nth-of-type(n)
:nth-last-child(n)
:nth-last-of-type(n)
:first-child
:first-of-type
:last-child
:last-of-type
:only-child
:only-of-type
ユニバーサルセレクタ
すべてのHTML要素に一致するセレクタ
* {
}
セレクタの結合子
CSSのエラー発生時の挙動
HTML同様に、そのCSSの指定は無視されパースが継続される
-> なのでHTMLもCSSもエラーに気づきにくい。
スタイルシートの読み込み
1) 外部スタイルシートの読み込み
rel属性: stylesheet
type属性: text/css
href属性: CSSファイル名
<link rel="stylesheet" type="text/css" href="test.css">
2) 内部スタイルシートの読み込み
<style type="text/css">
</style>
3) インラインスタイルシートの読み込み
<p style=""></p>
4) @import での読み込み
CSSファイル内で別のCSSファイルを読み込む
@import url("text.css");
<p style="@import url('test.css');"></p>
スタイルシートの優先度
スタイルシートの優先順位:
1) インラインスタイルシート
2) 外部スタイルシート、内部スタイルシート
3) ユーザスタイルシート
4) ユーザエージェントスタイルシート(ブラウザの規定の設定)
<p style="color: green;">aaaa</p>
こちらのスタイルを内部スタイルシートで変えるなら
!importantをつける
p {
color: red !important;
}
セレクタによるCSSプロパティの優先順位:
1) インラインスタイルシート
2) IDセレクタ
3) クラスセレクタ、属性セレクタ、疑似クラス
4) タイプセレクタ、疑似要素
メモ: 優先順位が同じセレクタが使われている場合は、
その数の合計を計算し、優先順位を決める。
例) IDセレクタ > タイプセレクタ なのでpは赤色になる
#foo {
color: red;
}
p {
color: blue;
}
<p id="foo">saaaa</p>
例) 両方ともクラスセレクタを使っている
しかし、もう片方にはタイプセレクタも使っている
なのでpは赤色になる
.foo p {
color: red;
}
.foo {
color: blue;
}
<div class="foo">
<p>saaaa</p>
</div>
例) セレクタによる優先順位が同じなら、後から記載したものが適用される
.foo {
color: red;
}
.foo {
color: blue;
}
<div class="foo">
<p>saaaa</p>
</div>
例) 優先順位の数はいくつか?
li:hover h2 .title
がもっとも優先順位が高い
.new > a:hover
クラスセレクタ: 1
.new
疑似クラス: 1
:hover
タイプセレクタ: 1
a
li:hover h2 .title
クラスセレクタ: 1
.title
疑似クラス: 1
:hover
タイプセレクタ: 2
li, h2
.sp > a
クラスセレクタ: 1
.sp
疑似クラス:
タイプセレクタ: 1
a
.sp .capture h1
クラスセレクタ: 2
.sp, .capture
疑似クラス:
タイプセレクタ: 1
h1
.basic li > span
クラスセレクタ: 1
.basic
疑似クラス:
タイプセレクタ: 2
li, span
例) 優先順位の数はいくつか?
IDセレクタとクラスセレクタを持つ #cat .tail img
が優先順位が高い。
li:hover h2 .title
IDセレクタ:
クラスセレクタ: 1
.title
疑似クラス: 1
:hover
タイプセレクタ: 2
li, h2
.sp .capture h1
IDセレクタ:
クラスセレクタ: 2
.sp, .capture
疑似クラス:
タイプセレクタ: 1
h1
.main h2 > span
IDセレクタ:
クラスセレクタ: 1
疑似クラス:
タイプセレクタ: 2
h2, span
#cat .tail img
IDセレクタ: 1
#cat
クラスセレクタ: 1
.tail
疑似クラス:
タイプセレクタ: 1
img
#doc div > img
IDセレクタ: 1
#doc
クラスセレクタ:
疑似クラス:
タイプセレクタ: 2
div, img
@規則
@import
CSSファイル中で別のCSSファイルを読み込む
@import url('CSSファイル名');
@media
特定のブラウザの条件のスタイルを指定
レスポンシブデザインによく利用される
例) 600px以下の場合のスタイル
@media screen and (max-width: 600px) {
}
@font-face
カスタムのwebフォントを定義する
@font-face {
}
@keyframes
アニメーションキーフレームを定義する
@keyframes fadeIn {
}
@supports
ブラウザが特定の機能のサポートをしている確認し、状況に応じてスタイルを指定する
例) グリッドレイアウトがサポートされている場合下記のスタイルを指定
@supports (display: grid) {
}
@page
印刷時のページのスタイルを指定
@page {
margin: 1cm;
}
@counter-style
カウンタのスタイルを定義
@copunter-style custom {
system: cyclic:
symbols: "A" "B" "C";
}
カスケード(異なるのスタイルの競合から最終的にスタイルが決まる)
異なるソースからのスタイルが組み合わさり、最終的なスタイルが決定されるプロセスのこと。
同じ要素に対して複数のスタイルが適用された場合、
-> 最終的なスタイルを決定して表示される。
そのスタイルを決定するのが以下の優先順位になる。
1) 重要度:
スタイルシート内のセレクタの特定性や重要度
2) 特定性:
セレクタがより特定的である
3) 後の定義:
同じ特定性を持つスタイルなら、後で定義されたスタイルが優先
ただし、paddingやmarginなどのボックスモデル関連のプロパティは一般的にはカスケードされない。
(その要素が影響を受ける範囲を定義するものであるため)
paddingとmarginを使用してカスケードの影響を受ける例と受けない例
受ける例:
2つのdiv要素がある。
両方の要素には同じクラス名が付けられていて、2番目の要素にはさらにoverrideクラスが追加されている。
overrideクラスにより、2番目の要素のmarginが50pxから10pxに変更された
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cascade Example - Affected</title>
<style>
.box {
width: 200px;
height: 200px;
background-color: lightblue;
padding: 20px;
margin: 50px;
}
/* 外部スタイルシートでmarginを上書き */
.override {
margin: 10px;
}
</style>
</head>
<body>
<div class="box">Content</div>
<div class="box override">Content</div> <!-- カスケードの影響を受ける -->
</body>
</html>
受けない例:
「上記の受ける例」に似てるけど.overrideにpaddingの設定を追加している
2つのdiv要素がある。
2番目の要素にはoverrideクラスが追加されている。
overrideクラスにより、2番目の要素のpaddingが20pxから10pxに変更されれているが、marginは変更されない。
これは、paddingとmarginが異なる範囲で影響を与えるため。
paddingは要素の内側の余白を調整し、marginは要素の外側の余白を調整する。
したがって、外部スタイルシートでpaddingを上書きしても、marginには影響を与えない。
これは特定性が原因。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cascade Example - Unaffected</title>
<style>
.box {
width: 200px;
height: 200px;
background-color: lightblue;
padding: 20px;
margin: 20px;
}
/* 外部スタイルシートでpaddingを上書き */
.override {
padding: 10px;
}
</style>
</head>
<body>
<div class="box">Content</div>
<div class="box override">Content</div> <!-- カスケードの影響を受けない -->
</body>
</html>
特定性が同じ場合、後で定義されたスタイルが優先される。
しかし、paddingとmarginはそれぞれ異なる特定性を持っている。
paddingの場合:
一般的に、paddingは要素に直接適用されるため、その要素の特定性が優先される
クラスセレクタや要素セレクタなどで定義されたpaddingは、同じ要素に適用された他のスタイルよりも優先される
marginの場合:
marginも要素に直接適用されるが、その要素の特定性がmarginの優先度に影響しない
marginは、他の要素との間の空白を調整するために使用されるため、異なる要素間での適用がより複雑になる。
したがって、特定性の観点から見ると、paddingとmarginは異なる影響を受ける。paddingは要素自体の特定性に基づいて適用され、marginは要素の関係や階層構造に基づいて適用される。
paddingはカスケードの影響を受ける、marginは受けない。
セレクタ
タイプセレクタ
要素名 {
プロパティ: 値;
}
クラスセレクタ
.クラス名 {
プロパティ: 値;
}
IDセレクタ
#ID名 {
プロパティ: 値;
}
属性セレクタ
input[type="type名"] {
}
input[type="text"] {
}
属性名
属性名 = "属性値"
属性名 ~= "属性値"
属性名 |= "属性値"
属性名 ^= "属性値"
属性名 $= "属性値"
属性名 *= "属性値"
疑似要素、疑似クラス
セレクタ: 疑似クラス {
プロパティ: 値;
}
ユニバーサルセレクタ
すべてのHTML要素に一致するセレクタ
* {
プロパティ: 値;
}
セレクタの結合子
属性セレクタ
input[type="text"] {
}
属性名の書き方)
属性名 = "属性値" 完全一致
属性名 ~= "属性値" 単語リストの一部の一致を見つける
属性名 |= "属性値" 指定された属性値と完全一致、
または属性値で始まる
属性名 ^= "属性値" 文頭が属性値
属性名 $= "属性値" 文末が属性値
属性名 *= "属性値" 属性値を含む
<style>
/* [属性名] */
[data-attribute] {
color: blue;
}
/* [属性名 = "属性値"] */
[data-attribute="exactValue"] {
background-color: yellow;
}
/* [属性名 ~= "属性値"] */
[data-tags~="tag5"] {
font-weight: bold;
}
/* [属性名 |= "属性値"] */
[data-lang|="en"] {
font-style: italic;
}
/* [属性名 ^= "属性値"] */
[data-prefix^="start"] {
text-decoration: underline;
}
/* [属性名 $= "属性値"] */
[data-suffix$="end"] {
text-transform: uppercase;
}
/* [属性名 *= "属性値"] */
[data-substring*="part"] {
color: red;
}
</style>
<h2> [属性名] </h2>
<p data-attribute>この要素は [data-attribute] を持っています。</p>
<h2> [属性名 = "属性値"] </h2>
<p data-attribute="exactValue">この要素は [data-attribute="exactValue"] を持っています。</p>
<h2> [属性名 ~= "属性値"] </h2>
<ul>
<p>tag5が含まれているliを太字にする</p>
<li data-tags="tag1 tag4">Tag 1</li>
<li data-tags="tag2 tag5">Tag 2</li>
<li data-tags="tag3 tag6">Tag 3</li>
</ul>
<h2> [属性名 |= "属性値"] </h2>
<p data-lang="en-US">この要素は [data-lang|="en"] を持っています。</p>
<p data-lang="en-UK">この要素は [data-lang|="en"] を持っています。</p>
<h2> [属性名 ^= "属性値"] </h2>
<p data-prefix="start123">この要素は [data-prefix^="start"] を持っています。</p>
<h2> [属性名 $= "属性値"] </h2>
<p data-suffix="123end">この要素は [data-suffix$="end"] を持っています。</p>
<h2> [属性名 *= "属性値"] </h2>
<p data-substring="99999999999part123">この要素は [data-substring*="part"] を持っています。</p>
疑似要素
first-line, first-letter, before, after
:first-line
1行目のスタイルを指定
:first-letter
1文字目のスタイルを指定
:before
cssのcontent属性を指定すれば文の前にテキストを追加できる
:after
cssのcontent属性を指定すれば文の後ろにテキストを追加できる
要素:first-line {
}
要素:first-letter {
}
要素:before {
content: "aaaaa";
}
要素:after {
content: "gggggg";
}
#divFormat p:first-letter {
color: blue;
}
#divFormat p:first-line {
color: red;
}
#divFormat li:before {
content: "※ ";
color: blue;
}
#divFormat li:after {
content: "追加したテキスト";
color: green;
}
<div id="divFormat">
<p>This is a paragpraph</p>
<p>aaaaaaaa</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
疑似クラス
:focus
:checked
:disabled
:enabled
:root
:empty
:target
:lang
:not
下記は子要素のスタイルの指定を行う
xx-childは範囲内の全ての要素を数える
xx-of-typeは範囲内の指定した要素を数える
:nth-child(n)
:nth-of-type(n)
:nth-last-child(n)
:nth-last-of-type(n)
:first-child
:first-of-type
:last-child
:last-of-type
:only-child
:only-of-type
:nth-child(n)
pタグから数えて2番目なので「リストアイテム1」が赤色になる
.listItems1 li:nth-child(2) {
color: red;
}
<div class="listItems1">
<ul>
<p>aaaaaaaaaaaaa</p>
<li>リストアイテム 1</li>
<li>リストアイテム 2</li>
<li>リストアイテム 3</li>
<p>aaaaaaaaaaaaa</p>
</ul>
</div>
:nth-of-type(n)
liの1番目の要素なので「リストアイテム1」が赤色になる
.listItems1 li:nth-of-type(1) {
color: red;
}
<div class="listItems1">
<ul>
<p>aaaaaaaaaaaaa</p>
<li>リストアイテム 1</li>
<li>リストアイテム 2</li>
<li>リストアイテム 3</li>
<p>aaaaaaaaaaaaa</p>
</ul>
</div>
:nth-last-child(n)
「リストアイテム 3」が赤色になる
.listItems1 li:nth-last-child(2) {
color: red;
}
<div class="listItems1">
<ul>
<p>aaaaaaaaaaaaa</p>
<li>リストアイテム 1</li>
<li>リストアイテム 2</li>
<li>リストアイテム 3</li>
<p>aaaaaaaaaaaaa</p>
</ul>
</div>
:nth-last-of-type(n)
「リストアイテム 3」が赤色になる
.listItems1 li:nth-last-of-type(1) {
color: red;
}
<div class="listItems1">
<ul>
<p>aaaaaaaaaaaaa</p>
<li>リストアイテム 1</li>
<li>リストアイテム 2</li>
<li>リストアイテム 3</li>
<p>aaaaaaaaaaaaa</p>
</ul>
</div>
:first-child
li:first-child {
color: red;
}
<ul>
<li>First Child</li>
<li>Second Child</li>
<li>Third Child</li>
</ul>
:first-of-type
li:first-of-type {
color: red;
}
<ul>
<p>aaaaaaaaaaaaa</p>
<li>First Child</li>
<li>Second Child</li>
<li>Third Child</li>
</ul>
:last-child
li:last-child {
color: red;
}
<ul>
<p>aaaaaaaaaaaaa</p>
<li>First Child</li>
<li>Second Child</li>
<li>Third Child</li>
</ul>
:last-of-type
li:last-of-type {
color: red;
}
<ul>
<p>aaaaaaaaaaaaa</p>
<li>First Child</li>
<li>Second Child</li>
<li>Third Child</li>
</ul>
:only-child
この例なら、div内にh2が1つしかないなら適用される。
#divStyle h2:only-child {
color: red;
}
<div id="divStyle">
<h2>aaaaaaa</h2>
</div>
:only-of-type
この例なら、div内にh2が1つしかないなら適用される。
#divStyle h2:only-of-type {
color: red;
}
<div id="divStyle">
<h2>aaaaaaa</h2>
</div>
CSSカウンタ
CSSカウンタは<style>内で定義する
・style内で、counter-reset: 変数;
・要素のスタイルに、counter-increment: 変数を設定
・要素のcontentに、counter(変数)を設定
<style type="text/css">
body {
counter-reset: number;
}
p:before {
counter-increment: number;
content: "番号"counter(number)": ";
}
</style>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
<p>My first paragraph.</p>
<p>My first paragraph.</p>
<p>My first paragraph.</p>
</body>
opacity の例
0から1の間の数値を設定する
0に近いほど透明
1に近いほど不透明
.element1 {
opacity: 0; /* 完全に透明 */
}
.element2 {
opacity: 0.5; /* 50%の透明度 */
}
.element3 {
opacity: 1; /* 完全に不透明 */
}
.hidden-element1{
width: 300px;
height: 100px;
border: solid red;
margin-bottom: 20px;
opacity: 0;
}
.hidden-element2{
width: 300px;
height: 100px;
border: solid red;
margin-bottom: 20px;
opacity: 0.5;
}
.hidden-element3{
width: 300px;
height: 100px;
border: solid red;
margin-bottom: 20px;
opacity: 1;
}
<div class="hidden-element1">
</div>
<div class="hidden-element2">
</div>
<div class="hidden-element3">
</div>
display の例
block
要素をブロックレベル要素として表示
親要素の幅いっぱいに要素が広がり、縦に積まれる。
他の要素を押し下げる。
段落やセクションなど大きなブロックを作るのに使われる
/* ブロックレベル要素 */
.block {
display: block;
width: 100px;
height: 100px;
background-color: red;
margin-bottom: 10px;
}
<div class="block">ブロックレベル要素</div>
この要素は幅が300px。中の要素は縦に積まれる
block-item は親要素の幅いっぱいに広がる。中の要素は縦に並ぶ
ブロックアイテムは縦に積まれる
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ブロックコンテナの使用例</title>
<style>
/* ブロックコンテナ */
.block-container {
display: block;
width: 300px;
border: 2px solid #333;
padding: 20px;
}
/* ブロックアイテム */
.block-item {
background-color: #f0f0f0;
border: 1px solid #ccc;
padding: 10px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="block-container">
<div class="block-item">ブロックアイテム 1</div>
<div class="block-item">ブロックアイテム 2</div>
<div class="block-item">ブロックアイテム 3</div>
</div>
</body>
</html>
inline
要素をインライン要素として表示する
要素は行内に表示され、幅と高さの指定できない。
幅と高さはコンテンツに応じて自動的に調整される
テキストやリンクなど小さい要素のグループ化に使う
/* インライン要素 */
.inline {
display: inline;
width: 100px;
height: 100px;
background-color: blue;
margin-right: 10px;
}
<span class="inline">インライン要素</span>
<span>要素をインライン要素として表示するために、display: inline;スタイルが適用される。
テキストの一部として他の要素と同じ行に表示されるようになる。
また、margin-right で余白もある
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Inline Elements with CSS Display</title>
<style>
/* CSS */
.inline {
display: inline; /* インライン要素として表示 */
margin-right: 10px; /* 右側に10pxのマージン */
}
</style>
</head>
<body>
<p>
This is an <span class="inline">inline</span> element.
This is another <span class="inline">inline</span> element.
This is a third <span class="inline">inline</span> element.
</p>
</body>
</html>
inline-block
要素をインラインブロック要素として表示する
インライン要素のように行内に表示されるが、幅と高さを指定できる
ボタンや画像を水平に並べることが出来る
/* インラインブロック要素 */
.inline-block {
display: inline-block;
width: 100px;
height: 100px;
background-color: green;
margin-right: 10px;
}
<div class="inline-block">インラインブロック要素</div>
インラインブロックの幅に収まるならボタンは水平に並ぶ
/* インラインブロック要素 */
.inline-block {
display: inline-block;
width: 250px;
height: 100px;
background-color: green;
margin-right: 10px;
}
<div class="inline-block">
<button>ボタン1</button>
<button>ボタン2</button>
<button>ボタン3</button>
</div>
、inline-block-elementクラスが適用された各div要素は、横に並ぶ
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style type="text/css">
.container {
width: 300px;
border: 1px solid #ccc;
}
.inline-block-element {
display: inline-block;
width: 90px;
height: 90px;
background-color: #f0f0f0;
border: 1px solid #999;
margin: 5px;
}
</style>
</head>
<body>
<div class="container">
<div class="inline-block-element">Inline Block Element 1</div>
<div class="inline-block-element">Inline Block Element 2</div>
<div class="inline-block-element">Inline Block Element 3</div>
</div>
</body>
</html>
none
要素を非表示にする
flex
要素をフレックスコンテナとして表示する
要素の配置や整列を柔軟に管理できる
/* フレックスコンテナ */
.flex-container {
display: flex;
}
<div class="flex-container">
<div class="block">フレックスアイテム 1</div>
<div class="block">フレックスアイテム 2</div>
<div class="block">フレックスアイテム 3</div>
</div>
justify-contentプロパティとalign-itemsプロパティは、フレックスアイテムの配置を制御する
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style type="text/css">
.flex-container {
display: flex;
justify-content: space-between;
align-items: center;
width: 300px;
border: 1px solid #ccc;
padding: 10px;
}
.flex-item {
width: 80px;
height: 80px;
background-color: #f0f0f0;
border: 1px solid #999;
text-align: center;
line-height: 80px;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">Flex Item 1</div>
<div class="flex-item">Flex Item 2</div>
<div class="flex-item">Flex Item 3</div>
</div>
</body>
</html>
grid
要素をグリッドコンテナとして表示する
要素を行と列に揃えて配置できる
/* グリッドコンテナ */
.grid-container {
display: grid;
grid-template-columns: 100px 100px;
gap: 10px;
}
<div class="grid-container">
<div class="block">グリッドアイテム 1</div>
<div class="block">グリッドアイテム 2</div>
<div class="block">グリッドアイテム 3</div>
</div>
grid-template-columnsプロパティは、グリッドの列の幅を設定し、repeat(3, 100px)は3つの列を持ち、それぞれの幅が100pxであることを示す。
grid-gapプロパティは、グリッドアイテム間の間隔を設定する
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style type="text/css">
.grid-container {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-gap: 10px;
width: 340px;
border: 1px solid #ccc;
padding: 10px;
}
.grid-item {
background-color: #f0f0f0;
border: 1px solid #999;
text-align: center;
line-height: 50px;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item">Grid Item 1</div>
<div class="grid-item">Grid Item 2</div>
<div class="grid-item">Grid Item 3</div>
<div class="grid-item">Grid Item 4</div>
<div class="grid-item">Grid Item 5</div>
<div class="grid-item">Grid Item 6</div>
</div>
</body>
</html>
visibility の例
visible
要素を表示する
hidden
要素を非表示にするが、スペースは確保される
collapse
表の行や列のような特定の要素にのみ適用される。
それ以外の要素ではhiddenと同じ動作をする
visible-exampleクラスの要素は常に表示される
hidden-exampleクラスの要素は非表示になるが、スペースは確保される。
collapse-exampleクラスの要素は表の行や列の場合に使用される
非表示になるが、他の要素と異なり、
非表示になるだけでスペースを確保する
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style type="text/css">
.visible-example {
visibility: visible;
}
.hidden-example {
visibility: hidden;
}
.collapse-example {
visibility: collapse;
}
</style>
</head>
<body>
<div class="visible-example">Visible Example</div>
<div class="hidden-example">Hidden Example</div>
<div class="collapse-example">Collapse Example</div>
</body>
</html>
content の例
以下の値を設定できる
文字列値 ("..." や '...'): テキストや文字列
URL(url()): 画像のパスや外部リソースへのリンク
空文字 (''): 空のコンテンツ。
無効値 (none): コンテンツを表示ない
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Content Property Example</title>
<style>
.example::before {
content: "Before Content";
color: red;
}
.example::after {
content: url('example.png');
display: block;
width: 100px;
height: 100px;
}
.empty-content::before {
content: '';
border: 1px solid black;
padding: 5px;
}
.no-content::before {
content: none;
}
</style>
</head>
<body>
<div class="example">Example Content</div>
<div class="empty-content">Empty Content</div>
<div class="no-content">No Content</div>
</body>
</html>
counter の例
counter-resetプロパティを使用してlist-counterというカウンターを定義
counter-incrementプロパティを使用して各リストアイテムにそのカウンターを適する
::before疑似要素を使用して、各リストアイテムのテキストの前にカウンターの値を表示する
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Counter Example</title>
<style>
/* リストのナンバリングのためのカウンターを定義 */
.custom-counter {
counter-reset: list-counter;
}
/* リストアイテムにカウンターを適用 */
.custom-counter li {
list-style-type: none; /* デフォルトのリストスタイルを無効化 */
counter-increment: list-counter; /* カウンターをインクリメント */
margin-bottom: 5px;
}
/* リストアイテムのテキストにカウンターの値を表示 */
.custom-counter li::before {
content: counter(list-counter) ". "; /* カウンターの値を表示 */
font-weight: bold;
}
</style>
</head>
<body>
<ul class="custom-counter">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
</body>
</html>
grid の例
none: グリッドレイアウトを使用しないことを示す。
grid-template-rows: グリッドの行のサイズと位置を定義す。
grid-template-columns: グリッドの列のサイズと位置を定義す。
grid-template-areas: グリッドの各セルの配置を定義す。
grid-template: grid-template-rows、grid-template-columns、およびgrid-template-areasのショートハンド
grid-auto-rows: 明示的に指定されていない追加の行のサイズを定義。
grid-auto-columns: 明示的に指定されていない追加の列のサイズを定義。
grid-auto-flow: 追加のグリッドアイテムの配置方法を定義。
grid-row-gap: 行間のスペースを定義。
grid-column-gap: 列間のスペースを定義。
justify-items: グリッドアイテムを水平方向に揃える。
align-items: グリッドアイテムを垂直方向に揃える。
place-items: justify-itemsとalign-itemsのショートハンド。
justify-content: グリッドコンテンツを水平方向に配置。
align-content: グリッドコンテンツを垂直方向に配置。
place-content: justify-contentとalign-contentのショートハンド。
grid-template-columnsとgrid-template-rowsを使用してグリッドの列と行のサイズを定義
grid-gapを使用してグリッドアイテム間の間隔を設定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Grid Example</title>
<style>
.grid-container {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px;
grid-gap: 10px;
}
.grid-item {
background-color: #f0f0f0;
border: 1px solid #999;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item">Item 1</div>
<div class="grid-item">Item 2</div>
<div class="grid-item">Item 3</div>
<div class="grid-item">Item 4</div>
<div class="grid-item">Item 5</div>
</div>
</body>
</html>
HTML要素を非表示にするCSSプロパティの例)
1)
opacity: 0
2)
visibility: hidden;
3)
display: none;
上記の方法で非表示にしたとき、
それまでHTML要素が占めていたスペースは、
-> opacity, visibility を使用の場合は「確保されたまま」
-> display を使用の場合はスペースは「詰められる」
opacity: 0
.hidden-element {
width: 300px;
height: 100px;
border: solid red;
opacity: 0;
}
<div class="hidden-element">
</div>
visibility: hidden
.hidden-element {
width: 300px;
height: 100px;
border: solid red;
visibility: hidden;
}
<div class="hidden-element">
</div>
display: none
.hidden-element {
width: 300px;
height: 100px;
border: solid red;
display: none;
}
<div class="hidden-element">
</div>
色指定(6つの方法)
<p class="color-example-1">カラー名<p>
<p class="color-example-2"> #rrggbb <p>
<p class="color-example-3">rgb(r, g, b)<p>
<p class="color-example-4">rgba(r, g, b, a)<p>
<p class="color-example-5">hsl(色相、彩度、輝度)<p>
<p class="color-example-6">hsla(色相、彩度、輝度、a)<p>
p[class ^= "color-example"] {
font-weight: bold;
}
p[class = "color-example-1"] {
color: red;
}
p[class = "color-example-2"] {
color: #025a02 ;
}
p[class = "color-example-3"] {
color: rgb(0, 0, 255);
}
p[class = "color-example-4"] {
color: rgba(9, 10, 10, 0.911);
}
p[class = "color-example-5"] {
color: hsl(120, 84%, 22%);
}
p[class = "color-example-6"] {
color: hsla(320, 71%, 49%, 0.7);
}
<p class="color-example-1">カラー名<p>
<p class="color-example-2">#rrggbb<p>
<p class="color-example-3">rgb(r, g, b)<p>
<p class="color-example-4">rgba(r, g, b, a)<p>
<p class="color-example-5">hsl(色相、彩度、輝度)<p>
<p class="color-example-6">hsla(色相、彩度、輝度、a)<p>
ボックスの構造
border
ボックスの境界線
margin
ボーダーの「外側」の余白
padding
ボーダーの「内側」の余白
長さの単位
em フォントサイズを1とする
rem ルート要素のフォントサイズを1とする
px ピクセル
pt ポイント
pc パイカ
cm センチ
mm ミリ
in インチ
背景 background
backgournd-clip
背景をボックスのどの領域に表示させるのか指定
border-box
padding-box
content-box
背景のクリッピングをcontent-boxに設定することで、
背景がコンテンツボックス内にのみ表示される
/* 背景画像のクリッピング */
.background-clip-example {
background-image: url('background-image.jpg');
background-color: #f0f0f0;
background-clip: content-box;
height: 200px;
padding: 20px;
border: 2px solid #999;
margin-bottom: 20px;
}
<!-- 背景画像のクリッピング -->
<div class="background-clip-example">Background Clip Example</div>
background-repeat
背景画像を縦/横に繰り返して表示させる
repeat-x
repeat-y
repeat
space
round
no-repeat
repeat-xで横方向にのみ背景画像が繰り返される
/* 背景画像のリピート */
.background-repeat-example {
background-image: url('background-image.jpg');
background-color: #f0f0f0;
background-repeat: repeat-x;
height: 100px;
width: 400px;
border: 2px solid #999;
margin-bottom: 20px;
}
<!-- 背景画像のリピート -->
<div class="background-repeat-example">Background Repeat Example</div>
background-origin
背景画像を配置する際の基準
padding-boxに設定することで、背景画像が要素のパディングボックス内に配置される。
パディング内で画像がクリップされるため、境界線との間に背景が描画される
/* 背景画像の描画をpadding-boxに設定 */
.background-origin-example {
background-image: url('background-image.jpg');
background-color: #f0f0f0;
background-origin: padding-box;
height: 200px;
width: 300px;
padding: 20px;
border: 2px solid #999;
}
<!-- 背景画像の描画をpadding-boxに設定 -->
<div class="background-origin-example">Background Origin Example</div>
background-position
背景画像の配置位置の指定
center bottomに設定し、背景画像が中央横方向、下部に配置される
/* 背景画像の表示位置 */
.background-position-example {
background-image: url('background-image.jpg');
background-color: #f0f0f0;
background-position: center bottom;
height: 200px;
width: 300px;
border: 2px solid #999;
margin-bottom: 20px;
}
<!-- 背景画像の表示位置 -->
<div class="background-position-example">Background Position Example</div>
background-attachment
背景画像を表示領域に固定し、スクロールしても動かないようにする
fixedに設定することで、スクロールしても背景画像が固定される
/* 背景画像の表示位置 */
.background-attachment-example {
background-image: url('background-image.jpg');
background-color: #f0f0f0;
background-attachment: fixed;
height: 200px;
width: 300px;
border: 2px solid #999;
margin-bottom: 20px;
}
<!-- 背景画像の固定 -->
<div class="background-attachment-example">Background Attachment Example</div>
アニメーション
要素のボックスを、回転、拡大、縮小、移動できる
transform-origin
ボックスを回転させるときの原点を指定
transition-property
どのプロパティの値が変更されたときにトランジションを実行するか指定
transition-duration
トランジション実行時に、どれだけの時間をかけるか指定
transition-timing-function
表示を変化させるときに、どういうパターンで速度に変化をつけるか指定
transition-delay
トランジションの開始を遅らせる
transition
CSSプロパティの変化速度を制御するトランジション関連のプロパティの値をまとめて指定
@keyframes
キーフレームの名前を指定
animetion-name
キーフレームを名前で指定して実行させる
animetion-duration
アニメーションの再生時間を設定
animetion-timing-function
アニメーションの再生速度の変化パターンを指定
animetion-delay
アニメーション再生の開始を遅らせる
animetion-iteration-count
アニメーションを何回繰り返して再生させるか設定
animetion-direction
再生の際に、逆再生させるか等を指定
animetion-play-state
アニメーションを一時停止させる
animetion-fill-mode
再生の開始が遅延されている間の表示、再生終了後の表示を指定
animetion
アニメーション関連のプロパティの値をまとめて指定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animation Example</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: blue;
transform-origin: top left; /* アニメーションの基準点を左上に設定 */
transition-property: background-color, transform; /* トランジションを適用するプロパティを指定 */
transition-duration: 1s; /* トランジションの時間を設定 */
transition-timing-function: ease; /* トランジションのタイミング関数を指定 */
transition-delay: 0.5s; /* トランジションの遅延時間を設定 */
}
.box:hover {
background-color: red; /* ホバー時の背景色を赤に変更 */
transform: scale(1.5); /* ホバー時に拡大アニメーション */
}
@keyframes slide {
0% {
transform: translateX(0); /* 初期位置 */
}
100% {
transform: translateX(200px); /* 最終位置 */
}
}
.box2 {
width: 100px;
height: 100px;
background-color: green;
animation-name: slide; /* アニメーション名を指定 */
animation-duration: 2s; /* アニメーションの時間を指定 */
animation-timing-function: linear; /* アニメーションのタイミング関数を指定 */
animation-delay: 1s; /* アニメーションの遅延時間を指定 */
animation-iteration-count: infinite; /* アニメーションの繰り返し回数を指定 */
animation-direction: alternate; /* アニメーションの進行方向を指定 */
animation-fill-mode: forwards; /* アニメーション終了後のスタイルを保持 */
animation-play-state: running; /* アニメーションの再生状態を指定 */
}
</style>
</head>
<body>
<!-- transformとtransitionを使ったアニメーション -->
<div class="box"></div>
<!-- @keyframesとanimationを使ったアニメーション -->
<div class="box2"></div>
</body>
</html>
画像の表示の例
例) 2つ目の画像(cat2.png)は右横に90度回転して表示される
1つ目の画像 (cat1.png) は通常の状態で表示される。
widthとheight属性により、画像のサイズが400x400ピクセルに指定される
2つ目の画像 (cat2.png) は回転して表示される。
transform-origin: right bottom;
回転の基準点を画像の右下に設定する
transform: rotate(90deg);
画像を90度回転させる
#cat2 {
margin: 0px;
padding: 0px;
transform-origin: right bottom;
transform: rotate(90deg);
}
<img id="cat1" src="cat1.png" alt="cat image1" width="400px" height="400px">
<img id="cat2" src="cat2.png" alt="cat image2" width="400px" height="400px">
アニメーションの例
1)
・1秒経過してからアニメーションを開始する
・3秒かけてアニメーションを実行する
・img要素は右側に異動し、透過になる
・アニメーションは2回繰り返す
@keyframes fadeout {
from {
margin-left: 0%;
opacity: 1;
}
to {
margin-left: 100%;
opacity: 0;
}
}
img {
animation-name: fadeout; // キーフレームの名前指定
animation-duration: 3s; // アニメーションの実行にかかる時間
animation-fill-mode: forwards; // アニメーション終了後の状態の保持
animation-iteration-count: 2; // アニメーションの繰り返し回数(2回)
animation-delay: 1s; // アニメーションの遅延時間(1秒後に開始する)
}
<img id="cat" src="cat.png" alt="cat image">
2) アニメーションの進行を逆にする
animation-direction: reverseはアニメーションの進行を逆にする
from(0%) -> to(100%)
から
to(100%) -> from(0%)
になる
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(0deg);
}
}
img {
animation-name: rotation;
animation-duration: 3s;
animation-direction: reverse; /* アニメーションの進行方向を反転 */
}
<img id="cat" src="cat.png" alt="cat image">
フォント
webフォント @font-face の利用
CSSでフォントの種類が指定されていてもブラウザが対応してないならフォントを表示できない。
-> しかし、pfont-faceでweb状になるフォントを指定すれば、ユーザーの環境にフォントがインストールされてなくても表示できる。
対応しているファイルのフォーマット:
woff
truetype
opentype
embedded-opentype
svg
@font-face {
font-family: webフォント名
src: url("web上のwebフォント名");
}
font-variant
スモールキャピタルのフォントを指定できる
初期値はnormal
font
font関連を同時に指定できる
@font-face {
font-family: 'testWebFont';
src: url('custom-font.woff2') format('woff2'),
url('custom-font.woff') format('woff');
}
body {
font-family: 'testWebFont', serif;
}
例) フォントをイタリックかつ太字にする
font-weight: bold
font-style: italic
p {
font: bold italic 13px/1.5 "メイリオ", "Meiryo", sans-serif;
}
テキスト
text-decoration
下線、上線、取り消し線を指定できる
text-decoration-line
underline
overline
line-through
blink 点滅
none 装飾なし
text-decoration-color
text-decoration-style
solid 実線
double 二重線
dotted 点線
dashed 破線
wavy 波線
text-decoration
text-decoration関連の設定を一括で指定できる
text-decoration-lineプロパティ
underline、overline、line-throughのいずれかを設定
それぞれのテキスト装飾text-decoration-colorプロパティ
テキストの装飾の色を指定text-decoration-styleプロパティ
テキストの装飾のスタイルを指定。
solid、double、dotted、dashed、wavyのいずれかを設定animationプロパティ
blinkクラスに対して点滅アニメーションを追加
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Decoration Example</title>
<style>
.text-decoration-example {
font-size: 24px;
margin-bottom: 20px;
}
.underline {
text-decoration-line: underline;
text-decoration-color: blue;
text-decoration-style: solid;
}
.overline {
text-decoration-line: overline;
text-decoration-color: green;
text-decoration-style: double;
}
.line-through {
text-decoration-line: line-through;
text-decoration-color: red;
text-decoration-style: dotted;
}
.blink {
text-decoration-line: underline;
text-decoration-style: dashed;
animation: blinker 1s linear infinite;
}
@keyframes blinker {
50% { opacity: 0; }
}
</style>
</head>
<body>
<p class="text-decoration-example underline">Underline Example</p>
<p class="text-decoration-example overline">Overline Example</p>
<p class="text-decoration-example line-through">Line-through Example</p>
<p class="text-decoration-example blink">Blink Example</p>
</body>
</html>
word-break
行の折り返しを設定
hyphens
ハイフネーションの設定を行う
ハイフネーションとは英単語の音節の区切りの位置にハイフンを付けて、
単語の残りを次の行に表示させること
white-space
空白文字を半角スペースに変換する、
自動的な行の折り返しを行うか、
を設定する
vertical-align
インライン要素の縦方向の位置を設定する
line-height
行の高さを設定する
text-indent
ブロックレベルの1行目のインデントを設定する
letter-spacing
文字間隔を設定する
word-spacing
単語と単語の間隔を設定する
text-transform
アルファベットの大文字・小文字を変換して表示させる
direction
文字表記の方向を設定する
unicode-bidi
文字表記の方向に関する指示を組み込んだり上書きする
word-break: テキストの改行方法を指定
hyphens: ハイフン化される単語の自動挿入を制御
white-space: テキストの空白の扱いを指定
vertical-align: テキストの垂直方向の配置を指定
line-height: 行の高さを指定
text-indent: テキストの字下げを指定
letter-spacing: 文字間の間隔を指定。
word-spacing: 単語間の間隔を指定。
text-transform: テキストの大文字/小文字変換を指定
direction: テキストの方向を指定
unicode-bidi: テキストの双方向性を指定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Properties Example</title>
<style>
.text-example {
word-break: break-all;
hyphens: auto;
white-space: nowrap;
vertical-align: middle;
line-height: 2;
text-indent: 20px;
letter-spacing: 2px;
word-spacing: 5px;
text-transform: uppercase;
direction: rtl;
unicode-bidi: bidi-override;
}
.text-container {
border: 1px solid #ccc;
padding: 10px;
width: 300px;
margin: 20px auto;
}
</style>
</head>
<body>
<div class="text-container">
<p class="text-example">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
</body>
</html>
ブロックレベル要素 / インラインレベル要素
ブロックレベル要素
div
canvas
form
h1
ol
ul
li
p
table
video
など
インラインレベル要素
span
button
input
select
textarea
label
a
img
など
displayプロパティの主な値
block
要素をブロックレベルにする
inline
要素をインラインレベルにする
flex
要素を可変ボックスにする
ボックスの書き方
幅と高さの領域
box-sizingで指定
clearプロパティ
ブロックレベルの要素に指定する
displayプロパティ
テーブル関連・ルビ関連の表示に指定できる
margin
margin: 10px; // 上下左右
margin: 10px 20px; // 上下 左右
margin: 10px 20px 30px; // 上 左右 下
margin: 10px 20px 30px 40px; // 上 右 下 左(時計回り)
autoを設定すると、マージンを自動的に設定する
例) divを中央寄せにするmarginの値(要素の左右のマージンを0にする)
margin: 0 auto;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>margin 使用例</title>
<style>
/* ブロックコンテナ */
#testBlock1 {
display: block;
width: 300px;
border: 2px solid #333;
margin: 10px 20px 30px 40px;
}
</style>
</head>
<body>
<div id="testBlock1">
Hello World
</div>
</body>
</html>
padding
padding: 10px; // 上下左右
padding: 10px 20px; // 上下 左右
padding: 10px 20px 30px; // 上 左右 下
padding: 10px 20px 30px 40px; // 上 右 下 左(時計回り)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>padding 使用例</title>
<style>
/* ブロックコンテナ */
#testBlock1 {
display: block;
width: 300px;
border: 2px solid #333;
padding: 10px 20px 30px 40px;
}
</style>
</head>
<body>
<div id="testBlock1">
Hello World
</div>
</body>
</html>
border
ボーダーの設定
borderプロパティでは以下の3つを設定できる
border-style 線の種類
border-width 線の太さ
border-color 線の色
border-radius 丸みを加える
例) divを円形にする
border-radius: 50%
ボックスの幅と高さ
box-sizing
width
height
min-width
min-height
max-width
max-height
ボックスの配置 float
floatはボックスを右や左に配置し、後続の要素が反対側に回り込むようにする
ボックスの配置を解除 clear
clearはブロックレベル要素にしか使えない
floatプロパティでボックスが寄せて表示され、要素が回り込んでいる状態を解除する
display
要素の表示形式を指定する
指定次第では、インライン要素をブロックレベル要素のように表示したり、
その逆も出来る。
初期値はinline
inline インライン要素と同様に表示する
block ブロックレベル要素と同様に表示する
inline-block ボックスはインライン要素に、
その中身はブロックレベル要素のように表示する
list-item liと同様に表示する
table テーブル関連の要素と同様に表示する
inline-table
table-row-group
table-header-group
table-footer-group
table-row
table-column-group
table-column
table-cell
table-caption
ruby ルビ関連の要素と同様に表示する
ruby-base
ruby-text
ruby-base-group
ruby-text-group
none ボックスを消す
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Display Property Example</title>
<style>
/* インライン要素と同様に表示 */
.inline-example {
display: inline;
border: 1px solid black;
padding: 10px;
margin: 10px;
}
/* ブロックレベル要素と同様に表示 */
.block-example {
display: block;
border: 1px solid black;
padding: 10px;
margin: 10px;
}
/* インライン要素とブロックレベル要素の特性を併せ持つ */
.inline-block-example {
display: inline-block;
border: 1px solid black;
padding: 10px;
margin: 10px;
}
/* list-itemと同様に表示 */
.list-item-example {
display: list-item;
border: 1px solid black;
padding: 10px;
margin: 10px;
}
/* table関連の要素と同様に表示 */
.table-example {
display: table;
border: 1px solid black;
padding: 10px;
margin: 10px;
}
/* ルビ関連の要素と同様に表示 */
.ruby-example {
display: ruby;
border: 1px solid black;
padding: 10px;
margin: 10px;
}
/* ボックスを消す */
.none-example {
display: none;
}
</style>
</head>
<body>
<div class="inline-example">Inline Example</div>
<div class="block-example">Block Example</div>
<div class="inline-block-example">Inline Block Example</div>
<li class="list-item-example">List Item Example</li>
<div class="table-example">Table Example</div>
<div class="ruby-example">Ruby Example</div>
<div class="none-example">None Example</div>
</body>
</html>
ボックスが占める幅の計算
例1
.box {
width: 500px;
padding: 5px;
border: solid black 5px;
margin: 5px;
}
解説
まず、widthが500px
左右のパディングが合計10px
左右のマージンが合計10px
左右のボーダーが合計10px
ボックスの幅 = 合計530px
例2)
ただし、下記のように
border-box
を指定すると、widthで設定した値はpaddingとborderの値も含んだうえでの数となる。
なのでwidthに追加する値はmarginのみでいい
250px + 左右のmargin合計10px
= 260px
がボックスの幅となる。
.box {
width: 250px;
padding: 2px;
border: solid black 1px;
margin: 5px;
box-sizing: border-box;
}
visibility
ボックスが透明になったかのように見えなくする
visible ボックスを見える状態にする
hidden ボックスを見えない状態にする
透明になっただけでボックスは存在するので
他の要素のレイアウトに影響を与える
collapse 指定されたテーブルの横列、楯列、グループは
テーブルから取り除かれた状態になる
overflow
要素内容がボックス内に収まらない時にどう表示するかを決める
visible ボックスからはみ出た部分も表示する
hidden はみ出た部分は表示しない
scroll スクロールで表示する
auto 必要に応じてスクロール可能にする
clip
ボックスをクリッピングして表示する
(四角形の見える範囲を指定して、そこだけ表示されるようにする)
auto クリッピングされずに表示される
rect(上、右、下、左) 左上からの距離をそれぞれ指定して
見える範囲を設定する
リスト関連のプロパティ
プロパティ:
list-style-type
行頭記号の種類を指定
list-style-image
行頭記号として表示する画像を設定
list-style-position
行頭番号の表示位置を、項目の1文字目の位置に変更
list-style
上記3つの値を空白文字で区切ってまとめて指定する
テーブル関連のプロパティ
プロパティ名:
caption-side
キャプションを表の下に表示する
border-collapse
隣接するセルの枠線をつなげるか、切り離すかを設定する
border-spacing
隣接するセルのボーダー同士の間隔を設定
empty-cells
空のセルの背景とボーダーを表示させるかを設定
table-layout
テーブルの列幅(自動か固定か)を設定する
caption-side: キャプションの位置を指定
この例では、bottomを指定してキャプションを表の下に表示border-collapse: 隣接するセルの枠線をつなげるか、切り離すか
この例では、collapseを指定してセルの境界を結合border-spacing: 隣接するセルのボーダー同士の間隔を設定。
この例では、10pxを指定してセルの間隔を設定empty-cells: 空のセルの背景とボーダーを表示させるかを設定。
この例では、showを指定して空のセルの背景とボーダーを表示table-layout: テーブルの列幅(自動か固定か)を設定。
この例では、fixedを指定して列幅を固定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Table Properties Example</title>
<style>
table {
border-collapse: collapse;
border-spacing: 10px;
empty-cells: show;
table-layout: fixed;
width: 400px;
margin: 20px auto;
}
caption {
caption-side: bottom;
text-align: center;
font-weight: bold;
padding: 5px;
background-color: #f0f0f0;
}
th, td {
border: 1px solid #000;
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<table>
<caption>Caption at the bottom</caption>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 4</td>
<td>Data 5</td>
<td>Data 6</td>
</tr>
</table>
</body>
</html>
テーブルとGridの表示の違い
テーブルでは、thead、tbody、th、tdを使用してデータが表示
グリッドでは、div要素とgrid-itemクラスを使用してデータが表示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Table vs Grid Example</title>
<style>
/* テーブルのスタイル */
.table-container {
margin-bottom: 20px;
}
.table-example {
border-collapse: collapse;
width: 100%;
}
.table-example th, .table-example td {
border: 1px solid #000;
padding: 8px;
text-align: center;
}
/* グリッドのスタイル */
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
}
.grid-item {
border: 1px solid #000;
padding: 8px;
text-align: center;
}
</style>
</head>
<body>
<!-- テーブルの表示 -->
<div class="table-container">
<table class="table-example">
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 4</td>
<td>Data 5</td>
<td>Data 6</td>
</tr>
</tbody>
</table>
</div>
<!-- グリッドの表示 -->
<div class="grid-container">
<div class="grid-item">Data 1</div>
<div class="grid-item">Data 2</div>
<div class="grid-item">Data 3</div>
<div class="grid-item">Data 4</div>
<div class="grid-item">Data 5</div>
<div class="grid-item">Data 6</div>
</div>
</body>
</html>
z-index
要素の重なり順を設定するプロパティ
#image1 {
z-index: 1;
}
#image1 {
z-index: 2;
}
<div class="container">
<img id="image1" src="image1.png" alt="説明文1">
<img id="image2" src="image2.png" alt="説明文2">
</div>