2026-01-01

GA4の設定

★解析

GA4の設定

GA4の学習

GA4を理解するためには、「コースを選択」して学習を進めてみましょう

developers.google.com

GA4に移動

学習のページから「移動」→「ログイン」

アカウントを作成

アカウントID名は「自由」に設定できます
作成したアカウントで複数のサイトを管理できます

プロパティを作成

日本語環境を指定します

ビジネスの説明

目的が明確ではない場合は、暫定で選択します

ビジネス目標を選択

利用規約の確認

データ収集を開始

「ウェブ」を選択

作成して続行

Googleタグの設定

この「script」タグを、WordPress内の「header.php」の「head」内にペースト

インストールをテスト

無料サーバーの場合、wordPress側の更新に時間がかかることが多いため「テスト」の結果がすぐ表示されない場合が多い

WordPress プラグイン

WordPress プラグイン「Site Kit」で、GA4のプロパティを認識する

「連携」ができていることが確認できます

設定を完了

「設定を完了」ボタンを押す

2025-11-08

区切りの修飾

★実践演習

区切りの修飾

  <div class="skewed"></div>

.skewed {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #2c3e50;
  z-index: 0;
  transform: skewY(6deg);
  transform-origin: top right;
}

2025-11-07

画像マスク - CSSでマスク

★実践演習

画像マスク - CSSでマスク

制作手順

１．Illustratorでマクス用の画像を作成
２．「アートボード」を「選択オブジェクトに合わせる」
３．SVG形式で保存（mask.svg）

記述例

ページのどの部分に配置しても成立するように「position」で設定しています
CSSは「モバイルファースト」で記述

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>画像のマスク</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
  <div class="mask"></div>
</body>
</html>

style.css

@charset "UTF-8";

/* -----------------------------------------
  reset
----------------------------------------- */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
ul {
  list-style: none;
}
a {
  color: inherit;
  text-decoration: none;
}
img {
  max-width: 100%;
  vertical-align: bottom;
}
html {
  font-size: 100%;
}


/* -----------------------------------------
  body
----------------------------------------- */
body {
  background-color: #fff;
  color: #333;
  font-size: 1.0rem;
  font-family: sans-serif;
  line-height: 1.0;
  position: relative;
}


/* -----------------------------------------
  layout
----------------------------------------- */
.mask {
  position: absolute;
  left: 50%;
  top: 30px;
  margin: auto;
  transform: translate(-50%, 0);
  z-index: -100;
  width: 90%;
  height: 40vh;
  background-image: url(../img/landscape.webp);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  mask-image: url(../img/mask.svg);
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
}

@media screen and (width >= 768px) {
  .mask {
    width: 80vw;
    mask-size: contain;
  }
}

マスク例

制作手順

１．Illustratorでマクス用の画像を作成（FREEP!KのブラシEPS画像を加工）
２．「アートボード」を「選択オブジェクトに合わせる」
３．SVG形式で保存（mask.svg）

４．マスクする背景画像を準備する

2025-11-04

斜めのパス

★クリップパス

斜めのパス

clippy

bennettfeely.com

完成例

画像

テキスト

Skill

Design

既存のバナーの模写をしながら、IllustratorとPhotoshopの基礎練習を実践しました。色彩と書体の理解をすすめいろいろな構図の練習を行いました。

Webサイトの構造やレイアウト、UIデザインなどを学びました。
Photoshop、Illustrator、Figmaなどのデザインツールの使い方を習得しました。
実際にWebサイトのデザインを制作する演習も行いました。

Coding

課題の模写コーディングをしながらHTMLとCSSの基礎を理解しました。FexboxとGridを使ったレイアウトを実践しながらいろいろな構図の理解を深めました。

HTML、CSS、JavaScriptなどのWebプログラミング言語を学びました。
レスポンシブデザインやアクセシビリティなど、Webサイトの実装に必要な知識を得ました。
実際にコーディングの演習にも取り組みました。

記述例

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>斜めのパス</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- header -->
<header class="header">
</header>
<!-- /header -->

<!-- main -->
<main class="main">
  <section class="skill">
    <div class="container">
    <h2>Skill</h2>
    <div class="wrapper">
      <h3>Design</h3>
      <div class="content">
        <div class="explain">
          <img src="img/design.png" alt="">
          <p>既存のバナーの模写をしながら、IllustratorとPhotoshopの基礎練習を実践しました。色彩と書体の理解をすすめいろいろな構図の練習を行いました。</p>
        </div><!-- /.explain -->
          <ul>
            <li>Webサイトの構造やレイアウト、UIデザインなどを学びました。</li>
            <li>Photoshop、Illustrator、Figmaなどのデザインツールの使い方を習得しました。</li>
            <li>実際にWebサイトのデザインを制作する演習も行いました。</li>
          </ul>
      </div><!-- /.content -->
    </div><!-- /.wrapper -->
    <div class="wrapper">
      <h3>Coding</h3>
      <div class="content">
        <div class="explain">
          <img src="img/coding.png" alt="">
          <p>課題の模写コーディングをしながらHTMLとCSSの基礎を理解しました。FexboxとGridを使ったレイアウトを実践しながらいろいろな構図の理解を深めました。</p>
        </div><!-- /.explain -->
          <ul>
            <li>HTML、CSS、JavaScriptなどのWebプログラミング言語を学びました。</li>
            <li>レスポンシブデザインやアクセシビリティなど、Webサイトの実装に必要な知識を得ました。</li>
            <li>実際にコーディングの演習にも取り組みました。</li>
          </ul>
      </div><!-- /.content -->
    </div><!-- /.wrapper -->
    </div><!-- /.container -->
  </section>
</main>
<!-- /main -->

<!-- footer -->
<footer class="footer">
</footer>
<!-- /footer -->
</body>
</html>

style.css

@charset "UTF-8";

/* ------------------------------------------
  reset
------------------------------------------- */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
ul {
  list-style: none;
}
a {
  color: inherit;
  text-decoration: none;
}
img {
  max-width: 100%;
  vertical-align: bottom;
}
html {
  font-size: 100%;
}


/* ------------------------------------------
  body
------------------------------------------- */
body {
  background-color: #fff;
  color: #333;
  font-size: 1.0rem;
  font-family: sans-serif;
  line-height: 1.0;
}


/* ------------------------------------------
  layout
------------------------------------------- */
.container {
  width: min(90%, 960px);
  margin:  0 auto;
}


/* ------------------------------------------
  main
------------------------------------------- */
.skill {
  padding: 30px 0;
  background-color: #e3e8ca;
  clip-path: polygon(0 10%, 100% 0, 100% 90%, 0% 100%);
}
  .skill > .container {
    padding: 200px 0;
  }
  h2 {
    padding-bottom: 10px;
    border-bottom: 2px dotted #4d8599;
    color: #4d8599;
    text-align: center;
  }
  .wrapper {
    padding: 40px 0;
  }

/* ---------- 横並びの指定 ---------- */
.content {
  display: flex;
  gap: 50px;
}
  .wrapper:nth-of-type(even) .content {
    flex-direction: row-reverse;
  }
  h3 {
    display: block;
    margin-bottom: 30px;
    text-align: center;
  }
    .explain {
      width: 70%;
      text-align: center;
    }
      .explain img {
        width: 70%;
        margin-bottom: 30px;
      }
      .explain p {
        text-align: justify;
        line-height: 1.6;
      }
      .content ul {
        /* width: 50%; */
        padding: 60px 30px 30px 3rem;
        background-color: #ffffff;
        border-radius: 20px;
        list-style: disc;
      }
      .content li {
        margin-bottom: 10px;
        line-height: 1.6;
      }

@media screen and (width < 768px) {
  .skill {
    padding: 30px 0;
    background-color: #e3e8ca;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  }
    .skill > .container {
      padding: 50px 0;
    }
  .content {
    display: block;
    font-size: 90%;
    margin-bottom: 0;
  }
    .explain {
      width: 90%;
      padding-left: 10%;
      text-align: center;
    }
    .explain p {
      margin-bottom: 20px;
    }
    .content ul {
      padding: 30px 30px 20px 3rem;
    }
}

2025-11-03

縦書き - レイアウト

★縦書き

縦書き - レイアウト

完成例

縦書き（日本語の表現）

縦書き（右から左：right to left）

writing-mode: vertical-rl;

テキスト

縦書きのテーマは、自分で作ってみる
「季節を楽しむ」
「お茶を楽しむ」
「和服を楽しむ」

和食を楽しむ
和食を感じる心を持つと

暮らしが豊かになる

ホーム
日本ならでは
繊細な味

もっと和食を楽しむために

記述例

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>夏を楽しむ【縦書き】</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- header -->
<header class="header">
  <div class="container">
    <h1>和食を楽しむ</h1>
    <div class="lead">
      <p>和食を感じる心を持つと</p>
      <p>暮らしが豊かになる</p>
    </div><!-- /.lead -->
    <nav class="gnav">
      <ul>
        <li><a href="#">ホーム</a></li>
        <li><a href="#">日本ならでは</a></li>
        <li><a href="#">繊細な味</a></li>
      </ul>
    </nav>
    <p class="logo"><img src="img/logo.svg" alt=""></p>
  </div><!-- /.container -->
  <div class="more_btn">
    <a href="#">もっと和食を楽しむために</a>
  </div><!-- /.more_btn -->
</header>
<!-- /header -->
</body>
</html>

style.css

CSSネストではなく、ノーマルな記述で完成させます
カスタムプロパティを設定し利用して記述します

@charset "UTF-8";

:root {
  --main-color: #535f17;
  --color: #b3461e;
  --bright-color: #fff;
}


/* ----------------------------------------------
  reset
---------------------------------------------- */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
ul {
  list-style: none;
}
a {
  color: inherit;
  text-decoration: none;
}
img {
  max-width: 100%;
  vertical-align: bottom;
}
html {
  font-size: 62.5%;  /* 16px X 0.625 ≒ 10px */
}


/* ----------------------------------------------
  body
---------------------------------------------- */
body {
  background-color: var(--bright-color);
  color: #0a0b00;
  font-size: 1.6rem;  /* 16px */
  font-family: serif;
  line-height: 1.0;
}


/* ----------------------------------------------
  layout
---------------------------------------------- */
.container {
  width: min(90%, 1240px);  /* min(最小値, 最大値) */
  margin: 0 auto;
}

文字のレイアウト指定

/* ----------------------------------------------
  header
---------------------------------------------- */
.header {
  background: url(../img/washoku.webp) no-repeat center center / cover;
  width: 100%;
  height: 100vh;
  position: relative;  /* ロゴの基準位置 */
}

/* ------------- text area ------------- */
  .header > .container {
    display: flex;
    flex-direction: row-reverse;  /* 横並びを右から始める */
  }
    h1 {
      margin-left: 50px;
      padding: 60px 20px;
      background-color: #535F17;
      color: #fff;
      font-size: 6.0rem;  /* 60px */
      writing-mode: vertical-rl;  /* 縦書き */
      letter-spacing: 2.0rem;  /* 10px X 2 ≒ 20px */
      font-weight: bold;
    }
    .lead {
      margin: 60px 0 0 20px;
      height: fit-content;
      writing-mode: vertical-rl;
    }
      .lead > p {
        margin-left: 24px;
        padding: 1.6rem 1.6rem 3.2rem;
        background-color: #fff;
        color: #535F17;
        font-size: 3.2rem;
        font-weight: bold;
        letter-spacing: 0.4rem;
      }

@media screen and (max-width: 767px) {
  h1 {
      padding: 40px 20px;
      font-size: 4.6rem;
  }
      .lead > p {
        margin-left: 24px;
        padding: 1.6rem 1.6rem 3.2rem;
        background-color: #fff;
        color: #535F17;
        font-size: 2.4rem;
      }
}

/* ------------- logo image ------------- */
  .logo > img {
    width: 100px;
    margin-top: 40px;
    position: absolute;
    top: -20px;
    left: 20px;
  }

@media screen and (max-width: 767px) {
  .logo > img {
    width: 60px;
  }
}

/* -------- CTA (Call to Action) -------- */
  .more_btn {
    position: absolute;
    left: 50%;
    bottom: 30px;
    transform: translateX(-50%);
    text-align: center;
  }
    .more_btn > a {
      display: inline-block;
      padding: 20px 40px;
      background-color: #b4461e;
      color: #fff;
      font-family: sans-serif;
      font-size: 2.0rem;
      letter-spacing: 0.4rem;
      white-space: nowrap;
      border-radius:10px;
    }


/* ----------------------------------------------
  nav
---------------------------------------------- */
.gnav {
  margin: 60px 0 0 auto;
  writing-mode: vertical-rl;
}
  li {
    font-size: 2.4rem;
    font-family: sans-serif;
    font-weight: bold;
    position: relative;
  }
    .gnav a {
      display: block;
      padding-top: 50px;
      line-height: 3.0;
      text-shadow:  0 0 6px #fff, 0 0 6px #fff, 0 0 6px #fff, 0 0 6px #fff;
    }
      .gnav a::before {
        content: "";
        padding: 16px;
        position: absolute;
        top: 5px;
        left: 30%;
        background: url(../img/onigiri.png) no-repeat center center / contain;
      }

@media screen and (max-width: 767px) {
  .gnav {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%);
  }
}

CSSネスト

ネストにする場合は、ノーマルな記述を終了してから行いましょう
上記が完成させた後であれば、AIを使っても「CSS Nesting」が可能です

nest.css

@charset "UTF-8";

:root {
  --main-color: #535f17;
  --color: #b3461e;
  --bright-color: #fff;
}

/* ----------------------------------------------
  reset
---------------------------------------------- */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

ul {
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  vertical-align: bottom;
}

html {
  font-size: 62.5%;  /* 16px X 0.625 ≒ 10px */
}

/* ----------------------------------------------
  body
---------------------------------------------- */
body {
  background-color: var(--bright-color);
  color: #0a0b00;
  font-size: 1.6rem;  /* 16px */
  font-family: serif;
  line-height: 1.0;
}

/* ----------------------------------------------
  layout
---------------------------------------------- */
.container {
  width: min(90%, 1240px);  /* min(最小値, 最大値) */
  margin: 0 auto;
}

/* ----------------------------------------------
  header
---------------------------------------------- */
.header {
  background: url(../img/washoku.webp) no-repeat center center / cover;
  width: 100%;
  height: 100vh;
  position: relative;  /* ロゴの基準位置 */

  /* ------------- text area ------------- */
  > .container {
    display: flex;
    flex-direction: row-reverse;  /* 横並びを右から始める */
  }
}

h1 {
  margin-left: 50px;
  padding: 60px 20px;
  background-color: #535F17;
  color: #fff;
  font-size: 6.0rem;  /* 60px */
  writing-mode: vertical-rl;  /* 縦書き */
  letter-spacing: 2.0rem;  /* 10px X 2 ≒ 20px */
  font-weight: bold;

  @media screen and (max-width: 767px) {
    padding: 40px 20px;
    font-size: 4.6rem;
  }
}

.lead {
  margin: 60px 0 0 20px;
  height: fit-content;
  writing-mode: vertical-rl;

  > p {
    margin-left: 24px;
    padding: 1.6rem 1.6rem 3.2rem;
    background-color: #fff;
    color: #535F17;
    font-size: 3.2rem;
    font-weight: bold;
    letter-spacing: 0.4rem;

    @media screen and (max-width: 767px) {
      margin-left: 24px;
      padding: 1.6rem 1.6rem 3.2rem;
      background-color: #fff;
      color: #535F17;
      font-size: 2.4rem;
    }
  }
}

/* ------------- logo image ------------- */
.logo {
  > img {
    width: 100px;
    margin-top: 40px;
    position: absolute;
    top: -20px;
    left: 20px;

    @media screen and (max-width: 767px) {
      width: 60px;
    }
  }
}

/* -------- CTA (Call to Action) -------- */
.more_btn {
  position: absolute;
  left: 50%;
  bottom: 30px;
  transform: translateX(-50%);
  text-align: center;

  > a {
    display: inline-block;
    padding: 20px 40px;
    background-color: #b4461e;
    color: #fff;
    font-family: sans-serif;
    font-size: 2.0rem;
    letter-spacing: 0.4rem;
    white-space: nowrap;
    border-radius: 10px;
  }
}

/* ----------------------------------------------
  nav
---------------------------------------------- */
.gnav {
  margin: 60px 0 0 auto;
  writing-mode: vertical-rl;

  li {
    font-size: 2.4rem;
    font-family: sans-serif;
    font-weight: bold;
    position: relative;
  }

  a {
    display: block;
    padding-top: 50px;
    line-height: 3.0;
    text-shadow: 0 0 6px #fff, 0 0 6px #fff, 0 0 6px #fff, 0 0 6px #fff;

    &::before {
      content: "";
      padding: 16px;
      position: absolute;
      top: 5px;
      left: 30%;
      background: url(../img/onigiri.png) no-repeat center center / contain;
    }
  }

  @media screen and (max-width: 767px) {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%);
  }
}

2025-11-02

縦書き - 小倉百人一首

★縦書き

縦書き - 小倉百人一首

「縦書き」と「ルビ」の設定

テキスト

小倉百人一首
あしびきの
山鳥（やまどり）の尾の
しだり尾の
ながながし夜を
ひとりかも寝む

柿本人麻呂（かきのもと の ひとまろ）

Google Fonts + 日本語

「はんなり明朝」を指定

googlefonts.github.io

記述例

index.html

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>縦書きとルビを振ってみる</title>
<link href="https://fonts.googleapis.com/earlyaccess/hannari.css" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="key_visual">
  <img src="img/main.webp" alt="">
</div><!-- /.key_visual -->

<div class="container">
  <div class="txt_box">
    <h1>小倉百人一首</h1>
    <p class="main_txt">あしびきの<br>
    <ruby>山鳥<rt>やまどり</rt></ruby>の尾の<br>
    しだり尾の<br>
    ながながし夜を<br>
    ひとりかも寝む</p>
    <p class="author"><ruby>柿本人麻呂<rt>かきのもと の ひとまろ</rt></ruby></p>
  </div><!-- /.txt_box -->
</div><!-- /.container -->
</body>
</html>

style.css

@charset "UTF-8";

/* ----------------------------------------------------
  reset
---------------------------------------------------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
img {
  max-width: 100%;
  vertical-align: bottom;
}


/* ----------------------------------------------------
  body
---------------------------------------------------- */
body {
  font-family: "Hannari", serif;
}


/* ----------------------------------------------------
  layout
---------------------------------------------------- */
.container {
  width: min(80%, 960px);
  margin: 0 auto;
}


/* ----------------------------------------------------
  key_visual
---------------------------------------------------- */
.key_visual img {
  width: 100%;
  height: 40vh;
  object-fit: cover;
}
@media screen and (max-width: 767px) {
  .key_visual img {
    object-position: right bottom;
  }
}


/* ----------------------------------------------------
  縦書き
---------------------------------------------------- */
.txt_box {
  writing-mode: vertical-rl;  /* 縦書きの指定 */
  width: fit-content;
  margin: 50px auto;
}
  h1 {
    margin-right: 40px;
    margin-left: 100px;
    font-size: 40px;
    letter-spacing: 0.4rem;
  }
  .main_txt {
    font-size: 22px;
    margin-left: 50px;
    line-height: 2.5;
    letter-spacing: 0.3rem;
  }
  rt {  /* ルビテキスト */
    letter-spacing: 0.2rem;
  }
  .author {
    text-align: right;
  }
@media screen and (max-width: 767px) {
  h1 {
    margin-left: 50px;
  }
  .main_txt {
    font-size: 22px;
    margin-left: 20px;
    line-height: 1.8;
  }
}

2025-11-01

フォルダー構成

★実践演習

フォルダー構成

ディレクトリー制作ルール

フォルダー構成は、目的・制作内容によって異なります
1. 上位表示が目的の場合
2. 複数人で引き継ぐ場合
3. 効率よく管理する場合
4. それまで作っていた構成を活かしたまま管理したい（今回はこのケースです）

上位表示が目的の場合

複数人で引き継ぐ場合
効率よく管理する場合

も同様に、フォルダー内のHTMLファイル名は、必ず「index.html」にします

それまで作っていた構成を活かしたまま管理したい

今回は、できるだけいままで作成したフォルダーを活かしていきたい
「robots.txt」は、割愛していますが「index.html（ルート階層）」と同一階層に置いておきます

GA4の設定

GA4の学習

GA4に移動

アカウントを作成

プロパティを作成

ビジネスの説明

ビジネス目標を選択

利用規約の確認

データ収集を開始

作成して続行

Googleタグの設定

インストールをテスト

設定を完了

区切りの修飾

clip-path

CSS clip-path maker

Custom Shape Dividers

Make some waves!

Haikei

CSS Section Separator Generator

画像マスク - CSSでマスク

制作手順

記述例

index.html

style.css

マスク例

制作手順

斜めのパス

clippy

完成例

画像

テキスト

記述例

index.html

style.css

縦書き - レイアウト

完成例

縦書き（日本語の表現）

テキスト

記述例

index.html

style.css

CSSネスト

nest.css

縦書き - 小倉百人一首

テキスト

Google Fonts + 日本語

記述例

index.html

style.css

フォルダー構成

上位表示が目的の場合

それまで作っていた構成を活かしたまま管理したい