CSS基本形

CSSファイルの読み込み方法

    
      <link rel="stylesheet" href="css/style-css-basic.css">

CSSソースコード基本形書き方

    

      p {

        color: red;

      }

複数のセレクタを指定する方法

複数のセレクタを指定(css,css)でつなぐ

h5複数セレクター

h6複数セレクター

    

      index.html

      <h5>h5複数セレクター</h5>
      <h4>h6複数セレクター</h4>

      style.css

      h5,h6 {

        color: red;

      }

クラス名:コード名:関係なく指定方法を知ってほしい

.application-div label {コード記載}

.application-div(クラス名)+label=>(クラスの中のlabel要素取得できる)

.application-div input[type="text"]

.application-div(クラス名)+input[type="text"]=>クラスの中の(input type="text")要素取得

何もしていない状態

氏名
年代

メールアドレス:

パスワード:

装飾を指定している状態

氏名
年代

メールアドレス:

パスワード:

        

  /* div(クラス名).application-div */

          .application-div {
            
            background-color: #ffffff;
            padding: 20px;
            border-radius: 10px;
            max-width: 400px;
            width: 100%;
            margin: 10px 0 10px 50px;

          }

  /* div(クラス名).application-div=>の中の(label)要素取得している */

          .application-div label {
            display: block;
            margin-bottom: 5px;

          }

  /* div(クラス名).application-div=>の中の(input[type="text"])要素取得している */
  /* 複数コードが書いてあるが(),()でつながってる */

          .application-div input[type="text"],
          .application-div input[type="email"],
          .application-div input[type="password"],
          .application-div select {
            width: 100%;
            padding: 10px;
            margin-bottom: 15px;
            border: 1px solid #ccc;
            border-radius: 5px;
            font-size: 14px;
            box-sizing: border-box;

          }

          .application-div button {
            width: 100%;
            padding: 10px;
            background-color: #007BFF;
            color: white;
            border: none;
            border-radius: 5px;
            font-size: 16px;
            cursor: pointer;
            transition: background-color 0.3s;

          }

          .application-div button:hover {
            background-color: #0056b3;

          }

親:子:お爺ちゃん:で指定した年代のみ変更(名前は関係ないよ!)

親要素parent

私が親だ

子要素child

私が子だ

孫要素grandchild

    

index.html


      <div class="parent">親要素parent

                    <p class="child-p">私が親だ</p>

          <div class="child"子要素child

                    <p class="grandchild-p">私が子だ</p>
      
                <div class="grandchild">孫要素grandchild</div>
          </div>
      </div>


style.css


      .parent {

        color: red;

      }

      .parent > p {

        color: blue;

      }

id-class(名前を付けて選択)

id-class(使い方)

id(任意のidは同じWEBページで1回しか利用できない)

class(任意のclassは同じWEBページで複数回使用可能)

要するに,,,class,,,使えばいいよね！

    

      index.html

      <h1 id="header-h1">CSSの基本の書き方></h1>
      <img class="header-img" src="img/css基本的な書き方.jpg" alt="css基本的な書き方画像">

      style.css

      #header-h1 {

        コード記載
      }
      
      .header-img {

        コード記載
      }

入会申し込みフォーム作成

いきなりコードが多いですが、深く考えないでこうなんだなと思ってください！

悩んだら飛ばして読み進めて、後からみれば意味がわかります

入会申し込み

入会するのは以下のフォームに入力してください

送信:リセット:しても変化なし:今回は形だけ紹介してるよ

           
        
        <div class="form-div">

          <form>

            <label>氏名</label>
            <input class="input-type-text" type="text" placeholder="名前を入力してください">

            <br>
            
            <label>年代</label>
            <select class="select-type">
              <option>10代</option>
              <option>20代</option>
              <option>30代</option>
              <option>40代</option>
            </select>

            <br>

            <p>好きな物はなんですか？<input class="input-type-love" type="text" placeholder="好きなものはなんですか？"></p>
            
            <br>

            <p><label class="label-pas" for="input-type-pass">パスワード<span class="required">必須</span></label><input id="input-type-pass" type="password" name="mypassword"></p>

            <br>

              <label>お問い合わせ内容</label>
              <textarea class="input-type-textarea" placeholder="内容を入力してください"></textarea>

            <br>

              <label class="label-radio">男性</label><input class="input-type-radio" type="radio
              <label class="label-radio">女性</label><input class="input-type-radio" type="radio
              <label class="label-radio">トランスジェンダー</label><input class="input-type-radio" type

            <br>  
            
              <p><button type="submit">登録</button></p>
              <p><button type="reset">リセット</button></p>
      
            </form>

              <p>送信:リセット:しても変化なし:今回は形だけ紹介してるよ</p>

          </div>

      

        CSS

            /* 全体の枠 */
            .form-div {

              background-color: #ffffff; /* 背景色 */
              border: 1px solid black;  /* 枠線 */
              width: 100%; /* 幅 */
              max-width: 500px; /* 白い背景の大きさの最大幅 */
              margin: 10px auto; /* 外側の余白 */
              padding: 20px; /* 内側の余白 */
              text-align: center; /* 文字の配置を中央にしている */

            }

            /* テキスト */
            .form-div h2 {

              font-size: 24px;
              margin: 0;

            }

            /* p label 選択 */
            .form-div p, .form-div label {

              font-weight: bold; /* 太字 */

            }

            /* 名前 */
            .input-type-text {

              box-sizing: border-box; /* 全体の幅に含める */
              width: 100%; /* 幅 */
              padding: 10px;  /* 入力した時の文字の内側の余白 */
              margin-bottom: 15px; /* 下の余白 */
              border: 1px solid #ccc;   /* 枠線 */
              border-radius: 5px;   /* 角丸 */
              font-size: 16px; /* 文字サイズ */

            }

            /* 年代 */
            .select-type {

              box-sizing: border-box; /* 全体の幅に含める */
              width: 100%; /* 幅 */
              padding: 10px;  /* 入力した時の文字の内側の余白 */
              margin-bottom: 15px; /* 下の余白 */
              border: 1px solid #ccc;   /* 枠線 */
              border-radius: 5px;   /* 角丸 */
              font-size: 16px; /* 文字サイズ */

            }

            /* 好きなものはなんですか？ */
            .input-type-love {

              box-sizing: border-box; /* 全体の幅に含める */
              width: 100%; /* 幅 */
              padding: 10px;  /* 入力した時の文字の内側の余白 */
              margin-bottom: 15px; /* 下の余白 */
              border: 1px solid #ccc;   /* 枠線 */
              border-radius: 5px;   /* 角丸 */
              font-size: 16px; /* 文字サイズ */

            }

            /* パスワード */
            #input-type-pass {
              box-sizing: border-box; /* 全体の幅に含める */
              border: none; /* 枠線を消す */
              border-bottom: 1px solid red; /* 下線を引く */
              width: 100%; /* 幅 */
              font-size: 16px; /* 文字サイズ */
              padding: 10px; /* 入力した時の文字の内側の余白 */
            
            }

            /* パスワードのインライン要素をブロックにして上下左右の調整を可能にしている */

            .label-pas {

              display: block; /* ブロック要素 */

            }

            /* パスワードの横の必須という項目 */
            .required {

            background-color: #ffeeee; /* 背景色 */
            border-radius: 10px; /* 角丸 */
            color: red; /* 文字色 */
            padding: 3px; /* 内側の余白 */
            font-size: 0.9em; /* 文字サイズ */
            font-weight: bold; /* 太字 */

            }

            /* お問い合わせ */
            .input-type-textarea {

              box-sizing: border-box; /* 全体の幅に含める */
              width: 100%; /* 幅 */
              padding: 10px;  /* 入力した時の文字の内側の余白 */
              margin-bottom: 15px; /* 下の余白 */
              border: 1px solid #ccc;   /* 枠線 */
              border-radius: 5px;   /* 角丸 */
              font-size: 16px; /* 文字サイズ */

            }

            /* ラジオボタン */
            .form-div input[type="radio"] {

              margin: 0 10px; /* ボタンの間隔 */
            }

            /* 登録 リセット BOX */
            .form-div button {

              width: 100%; /* 幅 */
              padding: 10px; /* 入力した時の文字の内側の余白 */
              background-color: #007BFF; /* 背景色 */
              color: white;   /* 文字色 */
              border: none; /* 枠線 */
              border-radius: 10px; /* 角丸 */
              font-size: 16px;
              cursor: pointer;  /* マウスを乗せた時のカーソル */
              transition: background-color 0.3s; /* マウスを乗せた時のアニメーション */

            }

            .form-div button:hover {

              background-color: red; /* マウスを乗せた時の背景色 */
              margin-bottom: 0.5em; /* 下の余白 */

            }

フォントの種類:使用方法

Windows=Mac(表記異なる場合ある)

フォントは複数指定する

優先したいフォント名を先に書く

フォントファミリー名は引用符で囲む

総称フォント名は引用符で囲まない

最後に総称フォント名を書く

フォントファミリーとは？

フォントの具体的な名前である

和文お勧めフォント

明朝体：[游明朝][ヒラギノ明朝]

ゴシック体：[游ゴシック][ヒラギノ角ゴ]

和文フォントお勧めまとめてみた

欧文お勧めフォント

セリフ体:[Garamond][Times New Roman]

サンセリフ体:[Arial][Helvetica]

とにかく数が多いので調べてお気に入り作っておこう

英語フォントを先に記載する

フォントには英語だけを表示できる英語フォント、英語と日本語の両方を表示できる日本語フォントがある

英語フォントと日本語フォントを使い分けたい場合は、英語フォントを先に書く

欧文フォントお勧めまとめてみた

総称フォントとは？

フォントのスタイルや特性を大まかに分類するための名前

特定のフォントが利用できない場合に代替フォントを指定する際に役に立つ

主な総称フォント名(これだけ知っとけば何とかなる)

Serif（セリフ体）

文字に「飾り（セリフ）」が付いたフォント
例: Times New Roman, Georgia
用途: 書籍や新聞などの印刷物でよく使用される

Sans-serif（サンセリフ体）

セリフ（飾り）がないシンプルなフォント
例: Arial, Helvetica
用途: モダンで視認性が高いため、ウェブサイトやモバイル画面で多用される

Monospace（等幅フォント）

文字に「飾り（セリフ）」が付いたフォント
例: Times New Roman, Georgia
用途: 書籍や新聞などの印刷物でよく使用される。

Cursive（筆記体）

書きのようなスクリプトフォント
例: Comic Sans MS（場合による）
用途: デザインや装飾に使用

Fantasy（ファンタジーフォント）

装飾的で創造的なデザインのフォント
用途: 見出しや特別なデザインに使用

      

        body {

            フォントファミリー("")('')      総称フォント
        font-family: "Arial" , 'Meiryo' , sans-serif;           
        
        }

和文お勧めフォントのコード

      

        font-family: "Yu Gothic" , "游ゴシック", "ヒラギノ角ゴ ProN", "Meiryo" , sans-serif;            /* ゴシック サンセリフ体 */

        font-family: "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Yu Mincho", "游明朝", "Noto Serif JP", serif;        /* 明朝体 セリフ体 */

[明朝体:セリフ体]:フォント対応表（Mac & Windows）

フォント	Mac	Windows
"Hiragino Mincho ProN"	✅ 使える(最新)	❌ 使えない
"Hiragino Mincho Pro"	✅ 使える(古)	❌ 使えない
"Yu Mincho"	❌ 使えない	✅ 使える（Windowsの英語表記版游明朝）
"游明朝"	❌ 使えない	✅ 使える（Windowsの游明朝）
"MS 明朝"	❌ 使えない	✅ 使える（古いWindowsの標準フォント）
serif	✅ 代替適用	✅ 代替適用

[ゴシック:サンセリフ体]:フォント対応表（Mac & Windows）

フォント	Mac	Windows
"Yu Gothic"	❌ 使えない	✅ 使える（Windowsの英語表記版游ゴシック）
"游ゴシック"	❌ 使えない	✅ 使える（Windowsの游ゴシック）
"Meiryo"	❌ 使えない	✅ 使える（Windowsのメイリオ）
"ヒラギノ角ゴ ProN"	✅ 使える（Macの標準ゴシック）	❌ 使えない
sans-serif	✅ 代替適用	✅ 代替適用

欧文お勧めフォントコード

      

          font-family: "Arial", "Helvetica", sans-serif; /* サンセリフ体 */
          
          font-family: "Georgia", "Times New Roman", serif; /* セリフ体 */

          font-family: "Courier New", "Courier", monospace; /* 等幅フォント */

          font-family: "Comic Sans MS", "Brush Script MT", cursive; /* 筆記体 */

          font-family: "Impact", "Charcoal", fantasy;  /* ファンタジーフォント */

実際によく使用されるファミリーコード

      

        body {

          font-family: "Arial", "Helvetica", sans-serif; /* サンセリフ体 */

      }
      
      h1, h2, h3, h4, h5, h6 {

          font-family: "Georgia", "Times New Roman", serif; /* セリフ体 */

      }
      
      code, pre {

          font-family: "Courier New", "Courier", monospace; /* 等幅フォント */

      }
      
      .cursive {

          font-family: "Comic Sans MS", "Brush Script MT", cursive; /* 筆記体 */

      }
      
      .fantasy {

          font-family: "Impact", "Charcoal", fantasy; /* ファンタジーフォント */
          
      }

Google Fontsの使い方

自分でフォント調べるのって名称がたくさんあり大変ですよね

Google Fonts(Googleに搭載されているフォントを使用)

Google FontsのWebサイトにアクセス

/GoogleFont使い方画像(2種類)

CSSに直接入れる=>@import=これのが使いやすい!

HTMLに記載して使用する

文字装飾

CSSにおける大きさの単位の考え方

px

基本的な大きさ：画面の解像度(1920px)とか言うよね

メリット:大きさを固定できて周りに左右されない
大きさが固定されるので、レスポンシブに不向き

em

親要素の大きさを基準にする
例(親=16px)=(1em=16px)(2em=32px)

メリット：サイズが相対的に変わるので、レスポンシブデザインに向いている
親・子・孫要素といった入れ子状態で各要素にemを使うと計算が複雑になる

rem

最上位の親要素を基準にする
例(親=16px)=(1rem=16px)(0.5rem=0.8px)

メリット:親要素の影響を受けないため、emよりも扱いやすい
デメリット：古いブラウザでは使えない

%

親要素を基準として割合指定する
例(親=16px)=(100%=16px)(200%=32px)

メリット：サイズが相対的に変わるので、レスポンシブデザインに向いている
デメリット：親・子・孫要素といった入れ子状態で各要素に%を使うと計算が複雑になる

vw

Viewport Widthの略で、ビューポート（Webサイトの表示領域）の横幅を基準とする
100vwで表示領域の横幅いっぱい（100%）に広がり、1vwで表示領域の1%の横幅になる
例(画面に表示されているWEB画面=300px)=(100vw=300px)(1vw=3px)

メリット：親要素の影響を受けないため、大きさの計算がしやすい
デメリット:ビューポートの横幅にはスクロールバーが含まれるため、100vwを指定すると想定よりも幅が大きくなることがある

vh

iewport Heightの略で、ビューポート（Webサイトの表示領域）の高さを基準とする
100vhで表示領域の高さいっぱい（100%）に広がり、1vhで表示領域の1%の高さになる

メリット：親要素の影響を受けないため、大きさの計算がしやすい
デメリット:スマートフォンにおけるアドレスバー（開いているページのURLなどが表示されている領域）の高さが考慮されないため、100vhを指定しても画面の高さいっぱいに表示されない（アドレスバーの高さ分下に押し出される）

文字の大きさ:太さの例

16pxの大きさの文字

32pxの大きさの文字

ノーマルの大きさの文字

太い大きさの文字

斜めの文字

    

      .p-16 {

        font-size: 16px;
      }

      .p-32 {

        font-size: 32px;
      }

      .p-Normal {

        font-weight: normal;
      }

      .p-bold {

        font-weight: bold;
      }

      .italic-p {

        font-style: italic;

      }

文字の色

RGB=光の3原色である(Red、Green、Blue)の数値で色を指定する方法=(rgb(255, 0, 0))

RGBA=Alpha(アルファ値=透明度)を加えたのが=(rgba(255, 0, 0, 0.5))

色コードで指定(#DB0E00)など

色コード:その他便利なサイトに移動

装飾なしです

赤い装飾です

赤い不透明装飾です

    

      .rgb-p {

        color: red;        /* color: rgb(red, green, blue); */

      }

      .rgba-p {

        color: rgba(255, 0, 0, 0.5);       /* color: rgba(red, green, blue, alpha); */

      }

行間:字間の調整

行間調整していません
行間調整していません

行間調整しています
行間調整しています

    

      .line-height-p {

        line-height: 3;

      }

字間の調整していません

字間の調整しています

    

      .letter-spacing {

        letter-spacing: 2em;   /* フォントサイズの２倍 */

      }

文字に線を引く

text-decoration=どの種類の線を引くかを指定=値: none | underline | overline | line-through

使用用途:特性:適したケース

テキストそのものに装飾を加えるプロパティ
テキストの下線、上線、取り消し線などが簡単に指定可能
線はテキスト幅に合わせて引かれる
キストのみに線を引きたい場合
リンクや見出しにスタイルを追加したい場合

下線表示

上線表示

上線と下線を同時に表示

テキストに打ち消し線を引く

表示されている線を消す

    

      .underline-p {

        text-decoration: underline;               /* 下線表示 */

      }

      .overline-p {

        text-decoration: overline;                /* 上線表示 */

      }

      .underlineoverline-p {

        text-decoration: underline overline;      /* 上線と下線を同時に表示 */

      }

      .line-through-p {

        text-decoration: line-through;            /* 打ち消し線 */

      }

      .none-p {

        text-decoration: none;                    /* 線を消す */

      }

text-decoration-color=装飾線の色

線の色変更したよ

    

      .decorationcolor-p {

        text-decoration: underline;
        text-decoration-color: red;     /* 色変更 */

      }

text-decoration-style=装飾の種類

装飾の線の種類（実線）

装飾の線の種類（二重線）

装飾の線の種類（破線）

装飾の線の種類（波線）

    

      .style-p {

        text-decoration: underline;
        text-decoration-style: solid;      /* 実線 */

      }

      .style1-p {

        text-decoration: underline;
        text-decoration-style: double;     /* 二重線 */

      }

      .style2-p {

        text-decoration: underline;
        text-decoration-style: dashed;     /* 破線 */

      }

      .style3-p {

        text-decoration: underline;
        text-decoration-style: wavy;       /* 破線 */

      }

text-decoration-thickness=装飾の太さを指定

装飾の線の太さ変更(1px)

装飾の線の太さ変更(2px)

    

      .thickness-p {

        text-decoration: underline;
        text-decoration-thickness: 1px;      /* 1px */

      }

      .thickness1-p {

        text-decoration: underline;
        text-decoration-thickness: 2px;      /* 2px */

      }

装飾を合わせて使用する

装飾を合わせて使用してみたよ

    

      .decoration-p {

        text-decoration: underline solid 5px red;

      }

border=全体を線で囲む場合

使用用途：特性：適したケース

線をテキスト以外にも、ボックスや要素全体に引くことができる
線の位置（上下左右）や太さ、スタイル、色を柔軟に指定可能
テキストの幅を超えた線を引ける（コンテナ全体に適用される）
テキスト以外の要素にも線を引きたい場合（例：ボタンやボックス）
テキスト幅以外の位置に線を引きたい場合
太さやスタイル（破線、点線など）を細かく調整したい場合

四角い枠で囲んだ文章：線の種類：大きさ：色：などコードは同じ

    

      .Rectangle-p {

        border: solid 5px red;

      }

border=文字の上下左右に線を引く

文字の上に線を引く

文字の下に線を引く

文字の右に線を引く

文字の左に線を引く

    

      .character-p {

        border-top: solid 5px red;        /* 上 */

      }

      .character1-p {

        border-bottom: solid 5px red;     /* 下 */

      }

      .character2-p {

        border-right: solid 5px red;      /* 右 */

      }

      .character3-p {

        border-left: solid 5px red;       /* 左 */

      }

background-color=背景色を変更

文字の背景色を変更

    

      .backgroundcolor-p {

        background-color: red;

      }

border-radius=枠の角を丸くする

背景色の枠の角を丸くする

    

      .backgroundcol1-p {

        background-color: red;
        border-radius: 15px;

      }

イエローマーカー付けてみよう

WEBデザイン!年商１億円突破した

WEBデザイン!年商1億円突破した

    

index.html     

      <p>WEBデザイン!年商１億円突破した
      <p>WEBデザイン!<strong class="hutu">年商1億円突破した</strong></p>
      <p>WEBデザイン!<strong class="hoso">年商1億円突破した</strong></p>
      <p>WEBデザイン!<strong class="futo">年商1億円突破した</strong></p>
      <p>WEBデザイン!<strong class="gokubuto">年商1億円突破した</strong></p>

style.css

        .hutu {

          background:linear-gradient(transparent 100% , yellow 100%);        /* 数字が100%ほど小さくなる */

        }

        .hoso {

          background:linear-gradient(transparent 90% , yellow 90%);

        }

        .futo {

          background:linear-gradient(transparent 50% , yellow 50%);

        }

        .gokubuto {

          background:linear-gradient(transparent 10% , yellow 10%);

        }

文字に影を付ける

    

      .shadow-p {
                                          (X=2px)右:(X=-2px)左
                                          (Y=2px)下:(Y=-2px)上
                      X   Y  ぼかし 色      (X=0)(Y=-0)全体の枠
        text-shadow: 2px 2px 2px grey;     (ぼかし=0)表示されない:(ぼかし=2p)少し表示
        font-weight: bold;                 (色=rgba(0, 0, 0, 0.5))透明度を指定
        font-size: 20px;                                   
        
      }

文字の一部部分を装飾

文字の天上天下唯我独尊という言葉が好き

    

      html

      <p>文字の<span class="main-span">天上天下唯我独尊</span>という言葉が好き</p>

      CSS

      .main-span {

        font-weight: bold;
        color: red;

      }

文字の位置を変更(text-alig:水平方向)

似たようなコード(align-items=垂直方向)displayプロパティで使用する

元の位置

真ん中の位置

左の位置

右の位置

    

    .center-p {

      text-align: center;     /* 真ん中 */

    }

    .left-p {

      text-align: left;       /* 左 */

    }

    .right-p {

      text-align: right;      /* 右 */

    }

文字や画像の表示位置変更

こういうやり方で配置を変更できるが、あまり使わないと思う。
これから(display)とかを使用するのでそっちのが楽,,,
こういうやり方もあるという認識です。
そんなこともできるんだーと思っていてください。

標準ロゴ画像位置

rightロゴ画像位置

このクラス表記=clearfixで回り込み解除=h2(こんな感じで表示が変わります)から元に戻る

こんな感じで表示が変わります

    
      
      html

            <figure><img src="img/logo.png" alt="ロゴ画像"><figcaption>標準ロゴ画像位置</figcaption></figure>

            <figure class="figure-right"><img src="img/logo.png" alt="ロゴ画像"><figcaption>rightロゴ画像位置</figcaption></figure>

            <p class="clearfix">このクラス表記=clearfixで回り込み解除=h2(こんな感じで表示が変わります)から元に戻る</p>
                
            <h2>こんな感じで表示が変わります</h2>

      CSS

          .figure-right {

            float: right;

          }

          .clearfix {

            content: "";
            display: block;
            clear: both;

          }

大きさの調整(幅)(高さ)

単位(px:em:rem:%:vw:vh)

width=幅の調整

px幅の調整

%幅の調整

auto幅の調整

    
      
      /* 500px */

      .width-px {

        background-color: aquamarine;
        width: 500px;

      }

      /* 基準は画面幅 */

      .width-percent {

        background-color: aquamarine;
        width: 100%;

      }

      /* 基準は画面幅 */

      .width-auto {
        background-color: aquamarine;
        width: auto;

      }

height=高さの調整

px高さの調整

%高さの調整

auto高さの調整

    

       /* 50px */

      .height-px {

        background-color: aquamarine;
        height: 50px;

      }

      /* 基準は文字の高さ */

      .height-percent {
        background-color: aquamarine;
        height: 100%;

      }

      /* 基準は文字の高さ */

      .height-auto {

        background-color: aquamarine;
        height: auto;

      }

幅と高さの最小値・最大値を指定

    
      
      .css {

        min-width: 100px;     /* 最小値 */
        max-width: 500px;     /* 最大値 */
        min-height: 100px;    /* 最小値 */
        max-height: 500px;    /* 最大値 */

      }

      例

      .css {

        width: 50%;
        max-width: 300px;    /* width=50%===max-width=300px=までしか大きくならない */
                             /* 組み合わせて色々設定可能 */
      }

画像の下に謎の余白ができてしまう時

画像の下に謎の余白ができてしまう時は、imgのCSSに追加する

margin、patting、でもない場合

    
      vertical-align: top;

CSSの疑似要素

プロパティ後に::(コロン2個)

::before:要素の直前にコンテンツを追加する
::after:要素の直後にコンテンツを追加する
::first-letter:要素の最初の文字を装飾する
::first-line:要素の最初の行を装飾する

[::before:要素の直前にコンテンツを追加する]

[::after:要素の直後にコンテンツを追加する]

[::first-letter:要素の最初の文字を装飾する]

[::first-line:要素の最初の行を装飾する]

    

      html

            <h3 class="before-h3">[::before:要素の直前にコンテンツを追加する]</h3>
            <h3 class="after-h3">[::after:要素の直後にコンテンツを追加する]</h3>
            <h3 class="first-letter-h3">[::first-letter:要素の最初の文字を装飾する]</h3>
            <h3 class="first-line-h3">[::first-line:要素の最初の行を装飾する]</h3>

      CSS

          .before-h3::before {

            content: "◆";
            color: red;

          }

          .after-h3::after {

            content: "■";
            color: chocolate;

          }

          .first-letter-h3::first-letter {

            font-size: 24px;
            color: red;

          }

          .first-line-h3::first-line {

            font-size: 24px;
            color: saddlebrown;

          }

プロパティ後に:(コロン1個)

:link:未訪問のリンク（a要素）
:visited:訪問済みのリンク（a要素）
:hover:マウスのカーソルが乗っているときにスタイルを適用
:active:マウスをクリックしてから離すまでのときにスタイルを適用する

リンクの色は、ご自身のパソコンの状況により変わります

ノーマルリンク
未訪問リンク
訪問済みのリンク
マウスが乗ったリンク
クリックしたリンク

    
      
      html

            <a href="index.html">ノーマルリンク</a>
            <a class="link-a" href="index.html">未訪問リンク</a>
            <a class="visited-a" href="index.html">訪問済みのリンク</a>
            <a class="hover-a" href="index.html">マウスが乗ったリンク</a>
            <a class="active-a" href="index.html">クリックしたリンク</a>

      CSS

            .link-a:link {

              color: black;

            }
            
            .visited-a:visited {

              color: red;

            }

            .hover-a:hover {

              color: gold;
              font-size: 20px;

            }

            .active-a:active {

              color: saddlebrown;
              font-size: 30px;

            }

リンクがプルンプルン動く

プルンプルンリンク

    
      
      html

            <a class="bouncy-link" href="index.html" >プルンプルンリンク</a>

      CSS

            /* リンクがプルンプルン動く */
            .bouncy-link {

              font-size: 24px;
              color: blue;
              text-decoration: none;
              display: inline-block;
              transition: transform 0.3s ease, color 0.3s ease;
              position: relative;

            }

            /* プルンプルンアニメーション */
            @keyframes bounce {

              0% {
                transform: translateY(0);
              }
              30% {
                transform: translateY(-10px);
              }

            }

            /* 常時プルンプルン */
            a.bouncy-link {

              animation: bounce 0.6s infinite;
              
            }

            /* ホバー時にプルンプルン */
            a.bouncy-link:hover {

              animation: bounce 0.6s infinite;
              color: red;

            }

親要素を基準にして何かを指定する

:nth-child(n):親要素内にあるすべての要素の中で、n番目の要素にスタイルを適用
:nth-of-type(n):親要素内にある同じ要素の中で、n番目の要素にスタイルを適用
:not(A):親要素内にあるAという要素以外にスタイルを適用

1番目の要素

2番目の要素

3番目の要素

4番目の要素

5番目の要素

6番目の要素

    

      html

            <div class="nth-child-div">

              <p>1番目の要素</p>
              <p>2番目の要素</p>
              <p>3番目の要素</p>
              <p>4番目の要素</p>
              <p>5番目の要素</p>

              <h4>6番目の要素</h4>

            </div>

      CSS

              /* divの中のPの2個目選択 */
              .nth-child-div p:nth-child(2) {

                color: red;

              }
              
              /* divの中のPの3個目選択 */
              .nth-child-div p:nth-of-type(3) {

                color: blue;
              }

              /* divの中のP以外を選択 */
              .nth-child-div :not(p) {

                color: saddlebrown;

              }

ボックスモデル=ここから大事理解しないと配置できんぞ

天才WEBデザイナー

    

      html

        <p class="box-p">天才WEBデザイナー</p>

      css

      /* ボックスモデル */

        .box-p {

          border: solid 5px red;
          padding: 10px;
          margin: 20px;

        }

    
  
      margin==padding==書き方は両方同じ参考にしてね！
      
  
      margin: 10px 20px 30px 40px;    /* 上右下左 */
      margin: 10px 20px;              /* 上下 左右 */
      margin: 10px;                   /* 上下左右 */
      margin: 10px auto;              /* 上下 左右を中央揃え */
  
      margin-top: 10px;               /* 上 */
      margin-right: 20px;             /* 右 */
      margin-bottom: 30px;            /* 下 */
      margin-left: 40px;              /* 左 */
  
      margin: 0 auto 0 auto;          /* 上下 左右を中央揃え */

padding=入力した文字と周りの内側の余白

margin=外側と中身の余白(サイトの全体の大きさ？)

border=周りの境界線のこと:あまり使わないかも

多分これ見ても意味不明だよね！画像見てほしい！

marginの相殺

例えば上に位置する要素margin-bottomプロパティに30pxが指定
下に位置する要素margin-topプロパティに10pxが指定
その場合、値が大きい30pxのほうが優先され、値が小さい10pxのほうは相殺されて打ち消される

要は、値の大きい値が引き継がれる

marginを利用して要素を中央揃えにする

    
  
      html

            <div class="margin-center-div"></div>

      css

            /* マージンを利用して中央にする */
            .margin-center-div {

              width: 200px;
              height: 200px;
              background-color: aquamarine;
              margin-left: auto;
              margin-right: auto;

            }

display

[要素を表示・非表示にする][要素を縦並び・横並び]

display-code	表示されるイメージ	初期値の意味を所有するhtml
block	要素が縦に並ぶ	h1～h6、p、div、ul、ol、form、main、header、footer、section、nav、article、aside、body、htmlなど
inline	要素が横に並ぶ	a、span、img、iframe、video、label、br、navi、など
inline-block	要素は横に並ぶが、blockと同じような性質を持つ	input、button、textarea、selectなど
none	要素が非表示	head、title、meta、linkなど

基本的なdisplayの考え方

応用は実際に使用して覚えていこう

display-block

width:height=100%

width:height=50%

width=100%:height=200px

padding=100px

padding=50px:margin=50px

    

      .display-block-p1 {

        background-color: yellow;
        width: 100%;
        height: 100%;

      }

      .display-block-p2 {

        background-color: red;
        width: 50%;
        height: 50%;

      }

      .display-block-p3 {

        background-color: blue;
        width: 100%;
        height: 200px;

      }

      .display-block-p4 {
        
        background-color: green;
        padding: 100px;

      }

      .display-block-p5 {

        background-color: plum;
        padding: 50px;
        margin: 50px;

      }

display-inline

要素が横に並んでいく
幅と高さを指定できない
左右の余白のみ調整できる

横に並んだ！！

p要素黄色inline-span

    

      .display-inline-p1 {

        background-color: yellow;

      }

      .inline-span {

        background-color: red;

      }

display-inline-block

要素が横に並んでいく
幅と高さを指定できる
上下左右に余白を指定できる

赤い箱は、何も適応していないので、ブロック要素

緑の箱は、inline-block要素

      

        .display-inline-block-div {

          background-color: red;
          width: 100px;
          height: 100px;

        }

        .display-inline-block-div1 {

          display: inline-block;
          background-color: green; 
          width: 100px;
          height: 100px;

        }

        .display-inline-block-div2 {

          display: inline-block;
          background-color: green; 
          width: 100px;
          height: 100px;

        }

        .display-inline-block-div3 {

          display: inline-block;
          background-color: green; 
          width: 100px;
          height: 100px;

        }

参考にしてほしい

h1テキスト(block)

labelテキストテキスト(inline-block)

position=配置

スクロールさせても同じ位置に表示させる
テキスト:画像など自由に配置できる

position-code	配置のイメージイメージ
static	配置方法を指定しない（初期値）/td>
relative	元の表示位置を基準にした相対位置
absolute	親要素を基準にした絶対位置
fixed	スクロールしても位置が固定

position-relative

普通の状態

relativeの状態(3個目)

      

        .position-relative-div1 {

          background-color: royalblue;
          width: 50px;
          height: 50px;

        }

        .position-relative-div2 {

          position: relative;  /* relativeの状態 */
          top: 50px;
          left: 200px;
          background-color: royalblue;
          width: 50px;
          height: 50px;
        
        }

position-absolute

1番目のハチマキ

2番目のハチマキ

3番目のハチマキ

      

        .position-absolute-parent-div {

          position: relative;              /* position-relative=親決めた */
          background-color: aquamarine;
          margin: auto;
          height: 200px;

        }
        
        .position-absolute-p3 {

          position: absolute;            /* position-absolute(親位置を基準に移動) */
          top: 150px;
          left: 500px;

        }

position-fixed

画面を基準にした絶対位置に配置、スクロールしても位置を固定

ずっと、左端から貴方を見ている女の子がそうですね！

      

          .position-fixed-img {

            position: fixed;  /* position-fixed=固定するものを決めた */
            bottom: 0;
            left: 5px;

          }

レスポンシブデザイン

パソコンの画面とスマホの画面の大きさは違う

大きさの違う画面でも。最適表示されるような設定を行う

パソコン:携帯:タブレット:など最初に作るメインの画面の大きさは自由

レスポン

ポイント解説

ビューポートを設定

      

      head=部分に書いとく(スケールサイズ設定) 

          <head>

            <meta name="viewport" content="width=device-width, initial-scale=1.0">

          </head>

メディアクエリ(画面幅大きさを認識)

      

          画面幅が1000px以下の時はこの条件になる(max-width: 1000px)

            @media screen and (max-width: 1000px) {

              .Smartphone-div {
                display: block;
                background-color: red;

              }
              }

code	指定できる値
max-width: (○○)px	画面幅が(○○)px以下のとき
min-width: (○○)px	画面幅が(○○)px以上のとき
height	device-height（デバイスの高さ）(数値)
height	device-height（デバイスの高さ）(数値)
initial-scale（ズームの初期倍率）	数値
minimum-scale（ズームの最小倍率）	数値
maximum-scale(ズームの最大倍率)	数値
user-scalable（ズームできるかどうか?）	数値

Flexbox

柔軟にレイアウトを組めるCSSのレイアウト手法

Flexboxを利用すれば簡単にレイアウトを組める

レスポンシブデザインを作るときに大変なのが,PCとスマートフォンそれぞれに最適なレイアウトを考えて調整しなければならない

Flexboxを利用すれば,レスポンシブデザインを簡単に実現できる

Flexboxの基本的なポイント

1.HTMLファイルでコンテナ（親要素）とアイテム（子要素）を作成する

2.CSSファイルでコンテナにdisplay: flex;を指定する

3.CSSファイルでコンテナとアイテムそれぞれに各種プロパティを指定して、レイアウトを調整する

flex-direction	アイテムの並び順を指定
row（初期値）	アイテムを左から右に配置する
row-reverse	アイテムを右から左に配置する
column	アイテムを上から下に配置する
column-reverse	アイテムを下から上に配置する

flex-wrap	アイテムの折り返しを指定
nowrap（初期値）	アイテムを折り返しせず、1行に並べる
wrap	アイテムを折り返し、上から下に並べる
wrap-reverse	アイテムを折り返し、下から上に並べる

flex-flow	アイテムの並び順と折り返しを一括で指定
flex-flow	アイテムの並び順と折り返しを一括で指定

justify-content	アイテムの横方向（垂直方向）の揃え方を指定
flex-start（初期値）	アイテムを左揃えで配置する
flex-end	アイテムを右揃えで配置する
center	アイテムを中央揃えで配置する
space-between	一番左と一番右のアイテムを両端に配置し、残りのアイテムを均等な間隔で配置する
space-around	一番左と一番右のアイテムも含め、均等な間隔で配置する

align-items	アイテムの縦方向（交差軸）の揃え方を指定
stretch（初期値）	アイテムの行をコンテナの高さに合わせて広げて配置
flex-start	アイテムの行を上揃えで配置する
flex-end	アイテムの行を下揃えで配置する
center	アイテムの行を中央揃えで配置する
space-between	一番上と一番下のアイテムを上下の端に配置し、残りのアイテムを均等な間隔で配置
space-around	一番上と一番下のアイテムも含め、均等な間隔で配置する

(例)Flexboxで実際に見てみよう

何も設定していない状態

アイテム01
（子要素）

アイテム02
（子要素）

アイテム03
（子要素）

アイテム04
（子要素）

アイテム05
（子要素）

アイテム06
（子要素）

アイテム07
（子要素）

アイテム08
（子要素）

 
        

          <div class="flexbox-container-flex">

              <div id="item01" class="flexbox-item"></p>
                <p>アイテム01 <br>（子要素）</p>
              </div>

              <div id="item02" class="flexbox-item">
                <p>アイテム02<br>（子要素）</p>
              </div>

              <div id="item03" class="flexbox-item">
                <p>アイテム03<br>（子要素）</p>
              </div>

              <div id="item04" class="flexbox-item">
                <p>アイテム04<br>（子要素）</p>
              </div>

              <div id="item05" class="flexbox-item">
                <p>アイテム05<br>（子要素）</p>
              </div>

              <div id="item06" class="flexbox-item">
                <p>アイテム06<br>（子要素）</p>
              </div>

              <div id="item07" class="flexbox-item">
                <p>アイテム07<br>（子要素）</p>
              </div>

              <div id="item08" class="flexbox-item">
              <p>アイテム08<br>（子要素）</p>
              </div>
              
          </div>

        

          .flexbox-container {

            padding: 20px;
            background-color: lightpink;

          }

          .flexbox-item {
            padding: 5px;
            margin: 5px;
            background-color: orange;
          }

display: flex

コンテナにdisplay: flex;を指定した時点でFlexboxが有効になる

Flexboxのflex-directionプロパティの初期値がrowなので、指定しなくてもアイテムが左から右に配置される

アイテム01
（子要素）

アイテム02
（子要素）

アイテム03
（子要素）

アイテム04
（子要素）

アイテム05
（子要素）

アイテム06
（子要素）

アイテム07
（子要素）

アイテム08
（子要素）

        

          .flexbox-container-flex {

            display: flex;
            padding: 20px;
            background-color: lightpink;

          }

          .flexbox-item {

            padding: 5px;
            margin: 5px;
            background-color: orange;

          }

flex-direction: row-reverse

右から左に配置された

アイテム01
（子要素）

アイテム02
（子要素）

アイテム03
（子要素）

アイテム04
（子要素）

アイテム05
（子要素）

アイテム06
（子要素）

アイテム07
（子要素）

アイテム08
（子要素）

        

          .flexbox-container-reverse {

            display: flex;
            flex-direction: row-reverse;
            padding: 20px;
            background-color: lightpink;

          }

flex-wrap

画面を小さくしたときに折り返しされる

アイテム01
（子要素）

アイテム02
（子要素）

アイテム03
（子要素）

アイテム04
（子要素）

アイテム05
（子要素）

アイテム06
（子要素）

アイテム07
（子要素）

アイテム08
（子要素）

        
          .flexbox-container-wrap {

            display: flex;
            flex-wrap: wrap;
            padding: 20px;
            background-color: lightpink;

          }

justify-content(横方向)

水平方向の位置調整

アイテム01
（子要素）

アイテム02
（子要素）

アイテム03
（子要素）

アイテム04
（子要素）

アイテム05
（子要素）

アイテム06
（子要素）

アイテム07
（子要素）

アイテム08
（子要素）

        

          .flexbox-container-justify {

            display: flex;
            justify-content: center;
            padding: 20px;
            background-color: lightpink;

          }

align-items(縦方向)

縦方向の調整

アイテム01
（子要素）

アイテム02
（子要素）

アイテム03
（子要素）

アイテム04
（子要素）

アイテム05
（子要素）

アイテム06
（子要素）

アイテム07
（子要素）

アイテム08
（子要素）

        

          .flexbox-container-align {

            display: flex;
            align-items: center;
            height: 500px;
            padding: 20px;
            background-color: lightpink;

          }

他にもあるが、適当に参考までに記載(余り使わないかも)

アイテム11
（子要素）

アイテム22
（子要素）

アイテム33
（子要素）

アイテム44
（子要素）

アイテム55
（子要素）

アイテム66
（子要素）

アイテム77
（子要素）

アイテム88
（子要素）

        

          .flexbox-container-original {

            display: flex;
            padding: 20px;
            height: 500px;
            background-color: lightpink;

          }


          /* flex-basis(幅の初期サイズ) */
          #item11 {

            flex-basis: 50px;
          }

          /* flex-grow(どれくらい伸びるか?初期値=1)アイテム02とアイテム03の幅が1:2の比率で伸びた */
          #item22 {

            flex-grow: 1;
          }

          #item33 {

            flex-grow: 2;
          }

          /* flex-shrink(どれくらい縮むか?初期値=1)画面が縮小っしないと変化が分かりにくい */
          #item44 {

            flex-shrink: 2;

          }

          /* flex-basis(幅の初期サイズ) */
          #item55 {

            flex-basis: 200px;

          }

          /* align-self(縦方向の揃え方) */
          #item66 {

            align-self: flex-end;

          }

          /* order(並び順の変更)88:変更 */
          /* align-self(縦方向の揃え方) */
          #item77 {

            order: 88;
            align-self: flex-start;

          }

          /* order(並び順の変更)77:変更 */
          /* align-self(縦方向の揃え方) */
          #item88 {

            order: 77;
            align-self: center;

          }

Menu

CSS基本形

複数のセレクタを指定

id-class

入会申し込みフォーム作成

フォントの種類

文字装飾

大きさの調整

疑似要素

ボックスモデル

display

position

レスポンシブデザイン

Flexbox

CSS基本形

CSSファイルの読み込み方法

CSSソースコード基本形書き方

複数のセレクタを指定する方法

複数のセレクタを指定(css,css)でつなぐ

h5複数セレクター

h6複数セレクター

クラス名:コード名:関係なく指定方法を知ってほしい

.application-div label {コード記載}

.application-div input[type="text"]

親:子:お爺ちゃん:で指定した年代のみ変更(名前は関係ないよ!)

id-class(名前を付けて選択)

id-class(使い方)

要するに,,,class,,,使えばいいよね！

入会申し込みフォーム作成

入会申し込み

フォントの種類:使用方法

フォントファミリーとは？

和文お勧めフォント

欧文お勧めフォント

とにかく数が多いので調べてお気に入り作っておこう

英語フォントを先に記載する

総称フォントとは？

主な総称フォント名(これだけ知っとけば何とかなる)

Serif（セリフ体）

Sans-serif（サンセリフ体）

Monospace（等幅フォント）

Cursive（筆記体）

Fantasy（ファンタジーフォント）

和文お勧めフォントのコード

[明朝体:セリフ体]:フォント対応表（Mac & Windows）

[ゴシック:サンセリフ体]:フォント対応表（Mac & Windows）

欧文お勧めフォントコード

実際によく使用されるファミリーコード

Google Fontsの使い方

文字装飾

CSSにおける大きさの単位の考え方

px

em

rem

%

vw

vh

文字の大きさ:太さの例

文字の色

行間:字間の調整

文字に線を引く

text-decoration=どの種類の線を引くかを指定=値: none | underline | overline | line-through

使用用途:特性:適したケース

text-decoration-color=装飾線の色

text-decoration-style=装飾の種類

text-decoration-thickness=装飾の太さを指定

装飾を合わせて使用する

border=全体を線で囲む場合

使用用途：特性：適したケース

border=文字の上下左右に線を引く

background-color=背景色を変更

border-radius=枠の角を丸くする

イエローマーカー付けてみよう

文字に影を付ける

文字の一部部分を装飾

文字の位置を変更(text-alig:水平方向)

似たようなコード(align-items=垂直方向)displayプロパティで使用する

文字や画像の表示位置変更

こんな感じで表示が変わります

大きさの調整(幅)(高さ)