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 の例

以下の値を設定できる

  1. 文字列値 ("..." や '...'): テキストや文字列

  2. URL(url()): 画像のパスや外部リソースへのリンク

  3. 空文字 (''): 空のコンテンツ。

  4. 無効値 (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 の例

  1. none: グリッドレイアウトを使用しないことを示す。

  2. grid-template-rows: グリッドの行のサイズと位置を定義す。

  3. grid-template-columns: グリッドの列のサイズと位置を定義す。

  4. grid-template-areas: グリッドの各セルの配置を定義す。

  5. grid-template: grid-template-rows、grid-template-columns、およびgrid-template-areasのショートハンド

  6. grid-auto-rows: 明示的に指定されていない追加の行のサイズを定義。

  7. grid-auto-columns: 明示的に指定されていない追加の列のサイズを定義。

  8. grid-auto-flow: 追加のグリッドアイテムの配置方法を定義。

  9. grid-row-gap: 行間のスペースを定義。

  10. grid-column-gap: 列間のスペースを定義。

  11. justify-items: グリッドアイテムを水平方向に揃える。

  12. align-items: グリッドアイテムを垂直方向に揃える。

  13. place-items: justify-itemsとalign-itemsのショートハンド。

  14. justify-content: グリッドコンテンツを水平方向に配置。

  15. align-content: グリッドコンテンツを垂直方向に配置。

  16. 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プロパティでは以下の３つを設定できる
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>

この記事が気に入ったらサポートをしてみませんか？