CSS基本形

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

  
  p {
  color: red;
  }
  

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

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

  style.css
  h5,h6 {
  color: red;
  }
  

フォーム項目

  /* div(クラス名).application-div */
  .application-div {
  background-color: #ffffff;
  padding: 20px;
  border-radius: 10px;
  width: 100%;
  width: 100%;
  margin: 10px auto;
  text-align: center;
  }

  /* 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 black;
  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;
  color: tomato;
  }
  

指定した部分の装飾

親要素を基準にした装飾

  
  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;
    }
  

id-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 {
    コード記載
    }
  

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

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）

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

  
    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に記載して使用する

文字装飾

    
    .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;
    }
    
  

    
    .reb-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;   /* フォントサイズの２縮小 */
      }
    
  

    
    .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;                    /* 線を消す */
    }
    
  

  
    .decorationcolor-p {
    text-decoration: underline;
    text-decoration-color: tomato;              /* 線の色を赤に */
    }
  

    
      .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;       /* 破線 */
      }
    
  

    
    .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;
    }
    
  

    
      .Rectangle-p {
        border: solid 5px red;
      }
    
  

    
      .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;       /* 左 */
      }
    
  

    
      .backgroundcolor-p {
      background-color: red;
      }
    
  

    
      .backgroundcol1-p {
      background-color: red;
      border-radius: 15px;
      }
    
  

    
    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;
      }
    
  

    
      .center-p {
      text-align: center;     /* 真ん中 */
      }
      .left-p {
      text-align: left;       /* 左 */
      }
      .right-p {
      text-align: right;      /* 右 */
      }
    
  

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

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

このクラス表記=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;
      }
    
  

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

  
  .width-px {
  background-color: aquamarine;
  width: 500px;    /* 500px */
  }
  .width-percent {
  background-color: aquamarine;
  width: 100%;    /* 基準は画面幅 */
  }
  .width-auto {
  background-color: aquamarine;
  width: auto;    /* 基準は画面幅 */
  }
  .width-100vw {
  background-color: blueviolet;
  width: 100vw; /* ビューポートの幅の100% */
  }
  

  
  .height-px {
  background-color: aquamarine;
  height: 50px;      /* 50px */
  }
  .height-percent {
  background-color: aquamarine;
  height: 100%;     /* 基準は文字の高さ */
  }
  .height-auto {
  background-color: aquamarine;
  height: auto;    /* 基準は文字の高さ */
  }
  .height-100vh {
  background-color: blueviolet;
  height: 100vh;   /* ビューポートの高さの100% */
  }
  

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

CSSの疑似要素

  
  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;
  }
  

    
    html

    <a href="#">ノーマルリンク</a>

    <a class="link-a" href="#">未訪問リンク</a>

    <a class="visited-a" href="#">訪問済みのリンク</a>

    <a class="hover-a" href="#">マウスが乗ったリンク</a>

    <a class="active-a" href="#">クリックしたリンク</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;
    }
    
  

CSSアニメーション(プリン)

  
  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;
  }
  

Box(Margin:Padding)

  
  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;          /* 上下 左右を中央揃え */
  

  
  html

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

  css

  /* マージンを利用して中央にする */
  .margin-center-div {
  width: 200px;
  height: 200px;
  background-color: aquamarine;
  margin-left: auto;
  margin-right: auto;
  /* margin: 0 auto;   上下のマージンは0、左右のマージンは自動で中央に配置 */
  }
  

Display要素

  
  display: block;           /* ブロック要素 */
  display: inline;         /* インライン要素 */
  display: inline-block;  /* インラインブロック要素 */
  display: none;         /* 非表示 */
  

position=配置

  
  .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-parent-div {
  position: relative;              /* position-relative=親決めた */
  background-color: aquamarine;
  margin: auto;
  height: 200px;
  }

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

  
  /* 右下固定 */
  display: inline-block;
  cursor: pointer;
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 100;

 /* 画像サイズ */
  width: 100px;
  height: auto;

  

Flexbox

 
  
  <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;
  }
  

  
  .flexbox-container-flex {
  display: flex;
  padding: 20px;
  background-color: lightpink;
  }

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

    
    .flexbox-container-reverse {
    display: flex;
    flex-direction: row-reverse;
    padding: 20px;
    background-color: lightpink;
    }
  

  
  .flexbox-container-wrap {
  display: flex;
  flex-wrap: wrap;
  padding: 20px;
  background-color: lightpink;
  }
  

  
  .flexbox-container-justify {
  display: flex;
  justify-content: center;
  padding: 20px;
  background-color: lightpink;
  }
  

  
  .flexbox-container-align {
  display: flex;
  align-items: center;
  height: 500px;
  padding: 20px;
  background-color: lightpink;
  }
  

  
  .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;
  }