<img src="..." alt="" width="600" height="400" loading="lazy">

<picture>
  <source media="(min-width:768px)" srcset="lerge.png" width="400" height="200">
  <img src="small.png" alt="" width="80" height="40">
</picture>

<details>
  <summary>タイトル</summary>
  アコーディオンの中身
</details>

<dialog open>
  <div>モーダルのコンテンツ</div>
  <form method="dialog">
    <button>閉じる</button>
  </form>
</dialog>

<hgroup>
  <h2>DX支援事業</h2>
  <p>経営課題をDXで解決</p>
</hgroup>

<dl>
  <div>
    <dt>クラウドコンピューティング</dt>
    <dd>インターネット経由でコンピューターの資源を提供する...</dd>
  </div>
  <div>
    <dt>API</dt>
    <dd>Application Programming Interfaceの略で、ソフトウェア間で...</dd>
  </div>
</dl>

<dl>
  <dt>クラウドコンピューティング</dt>
  <dd>インターネット経由でコンピューターの資源を提供する...</dd>
  <dt>API</dt>
  <dd>Application Programming Interfaceの略で、ソフトウェア間で...</dd>
</dl>

<button type="button" id="js-trigger-button">ボタン</button>

<p id="js-trigger-button">ボタン</p>

<search>
  <form action="/search">
    <label for="query">サイト内を検索</label>
    <input type="search" name="q" id="query">
    <button type="submit">検索</button>
  </form>
</search>

<div role="tablist">
  <a href="#tab-panel-1" id="tab1" role="tab" aria-controls="tab-panel-1" aria-selected="true" tabindex="0">タブ1</a>
  <a href="#tab-panel-2" id="tab2" role="tab" aria-controls="tab-panel-2" aria-selected="false" tabindex="-1">タブ2</a>
</div>
<div id="tab-panel-1" role="tabpanel" aria-labelledby="tab1" tabindex="0">
  コンテンツ1
</div>
<div id="tab-panel-2" role="tabpanel" aria-labelledby="tab1" tabindex="0">
  コンテンツ2
</div>

<div>
  <a href="#tab-panel-1" class="active">タブ1</a>
  <a href="#tab-panel-2">タブ2</a>
</div>
<div id="tab-panel-1">
  コンテンツ1
</div>
<div id="tab-panel-2">
  コンテンツ2
</div>

<link rel="preload" href="mv.webp" as="image" type="image/webp" />

<script src="/js/bundle.js"></script>

<script src="https://cdn.jsdelivr.net/..."></script>

<div class="icon">
  <svg>
    <use xlink:href="img/arrow.svg#arrow"></use>
  </svg>
</div>

<!-- img/arrow.svg -->
<symbol id="arrow" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></symbol>

<div class="icon">
  <svg viewBox="0 0 24 24" width="24" height="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" fill="red"/></svg>
</div>

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3列に並べる */
  gap: 40px; /* 子要素の上下左右の間隔 */
}

.grid {
  display: grid;
  grid-template-areas: "thumb title" "thumb description"; /* 付けた名前を並べる */
  grid-template-columns: 300px 1fr; /* 1列目は300px、2列目は余った幅全て */
}

/* gridの子要素 */
.grid_title {
  grid-area: title; /* 名前を付ける */
}
.grid_description {
  grid-area: description;
}
.grid_thumb {
  grid-area: thumb;
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}

.card {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
  gap: 20px;
}

.flex {
  display: flex;
  gap: 20px;
}

.flex {
  display: flex;
}
.child {
  margin-left: 20px;
}
.child:first-of-type {
  margin-left: 0;
}

/* .card の中に a が含まれているなら背景を赤に、含まれていないなら青にする */
.card {
  background-color: blue;
}
.card:has(a) {
  background-color: red;
}

.post:is(h2, h3, h4, h5, h6) {
  font-weight: bold;
}

.post h2, .post h3, .post h4, .post h5, .post h6 {
  font-weight: bold;
}

.radio {
  span {
    background-color: blue; // 未選択の時
    &:is(input:checked + span) {
      background-color: red; // 選択済みの時
    }
  }
}

.radio {
  span {
    background-color: blue; // 未選択の時
  }
  input:checked + span {
    background-color: red; // 選択済みの時
  }
}

.img {
  width: 100px;
  height: 100px;
  object-fit: cover;
}

.img {
  width: 100px;
  height: 100px;
  background-image: url(...);
  background-size: cover;
}

.img {
  width: 100px;
  height: 100px;
  aspect-ratio: 16/9; /* 縦横比を16:9に */
  object-fit: cover; /* coverを指定しないと画像の縦横比が崩れる */
  object-fit-position: center top; /* 必要に応じて画像の位置を調整 */
}

.parent {
  position: relative;
  padding-top: 56.25%; /* 56.25% = 16:9 （9/16*100%） */
}
.child {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.element {
  position: absolute;
  inset: 0;
  margin: auto;
}

.element {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

/* margin-inlineを使った書き方 */
.element {
  margin-inline: auto;
}

.element {
  margin-left: auto;
  margin-right: auto;
}

.element {
  margin: 0 auto;
}

.parent {
  display: grid;
  place-content: center;
}

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* ひとつの要素で中央配置が可能に！ */
.target {
  width: fit-content;
  marign-inline: auto;
}

.parent {
  text-align: center;
}
.target {
  display: inline-block;
}

body {
  overflow-wrap: anywhere;
  word-break: normal;
  line-break: strict;
}

body {
  word-break: break-word;
}

.element {
  translate: 10px;
  scale: 1.5;
  rotate: 45deg;
}

.icon {
  translate: 10px;
  rotate: 45deg;
}
a:hover .icon {
  rotate: 90deg;
}

.icon {
  transform: translate(10px) rotate(45deg);
}
a:hover .icon {
  transform: translate(10px) rotate(90deg);
}

.fadein {
  transition: opacity 0.3s;
}

.fadein {
  transition: 0.3s;
}

.photo {
  filter: blur(10px);
}

.photo {
  mix-blend-mode: overlay;
}

.triangle {
  clip-path: polygon(100% 50%, 0 0, 0 100%);
  width: 100px;
  height: 100px;
  background-color: red;
}

.triangle {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 100px 0 100px 173.2px;
  border-color: transparent transparent transparent red;
}

<a class="button" href="">
  <span>BUTTON</span>
  <svg ... /> // 矢印アイコン
</a>

.button {
  color: white;
  /* ...略 */
}
.button:hover {
  color: blue;
  /* ...略 */
}
.button svg {
  fill: currentColor; /* .buttonのcolorを参照しているので、通常時はwhite、hover時はblueになる */
}

.button {
  color: white;
  /* ...略 */
}
.button:hover {
  color: blue;
  /* ...略 */
}
.button svg {
  fill: white;
}
.button:hover svg {
  fill: blue;
}

.text {
  font-size: clamp(16px, 5vw, 20px); /* ベースサイズは5vw、最小16px、最大20px */
}

.text {
  font-size: 5vw;
}
@media (max-width: 767px) {
  .text {
    font-size: 8vw;
  }
}

.main-visual {
  height: 100svh;
}

.button {
  border-radius: 100vmax;
}

.button {
  border-radius: 9999px;
}

@media (min-width: 768px) {
  .element { ... }
}

@media screen and (min-width: 768px) {
  .element { ... }
}

@media (width <= 768px) {
  .element { ... }
}

@media (any-hover: hover) {
  .button:hover {
    background-color: red;
  }
}

@media (min-width: 768px) {
  .button:hover {
    background-color: red;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  ::before,
  ::after {
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
  }
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

[type="radio"] {
  /* visually-hiddenのスタイル */
}

[type="radio"] {
  display: none;
}

.wrapper {
  padding-left: 40px;
  padding-right: 40px;
}
.photo {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}

.wrapper {
  padding-left: 40px;
  padding-right: 40px;
}
.photo {
  width: calc(100vw + 80px); /* 80px = 左右のpaddingの合計値 */
  margin-left: -40px; /* ネガティブマージンで要素を左に移動させる */
}

.片方だけはみ出させる要素（左配置の場合） {
  width: 50vw;
  margin-left: calc((50vw - 50%) * -1);
}
.片方だけはみ出させる要素（右配置の場合） {
  width: 50vw;
  margin-right: -50vw;
}

/* 反対側の要素には`width: 50%`を、これらの親要素には`display: flex`を指定します */

body {
  min-height: 100dvh;
}
footer {
  position: sticky;
  top: 100%;
}

<head>
  <script src="script.js" defer>
  ...
</head>

  ...
  <script src="script.js">
</body>

<script src="script.js" defer type="module">

window.addEventListener('DOMContentLoaded', () => {
  // ここにページ読み込み時の処理を書く
});

window.addEventListener('load', () => {
  // ここにページ読み込み時の処理を書く
});

(() => {
  // ここにページ読み込み時の処理を書く
})();

function debounce(func, timeout) {
  let timer;
  timeout = timeout !== undefined ? timeout : 300; // funcが呼び出されるまでの遅延時間
  return () => {
    const context = this;
    const args = arguments;
    clearTimeout(timer);
    timer = setTimeout(() => {
      func.apply(context, args);
    }, timeout);
  };
}

const getHeader = () => document.querySelector('header');
const debouncedFunction = debounce(getHeader)
window.addEventListener('resize', debouncedFunction, false);

const getHeader = () => document.querySelector('header');
window.addEventListener('resize', getHeader, false);

// 監視対象要素
const animaElements = document.querySelectorAll("[data-scroll-anima]");

// 交差時に実行される関数
const doWhenIntersect = entries  => {
  const entriesArray = Array.prototype.slice.call(entries, 0);
  entriesArray.forEach((entry) => {
    if (entry.isIntersecting) {
      entry.target.dataset.scrollAnima = 'true';
    }
  });
}

// IntersectionObserverのオプション
const options = {
  root: null,
  rootMargin: '-20% 0px -20% 0px', // 要素が画面の上下20%を超えたら監視する
  threshold: 0
};

// 対象要素の数だけobserverで監視
const observer = new IntersectionObserver(doWhenIntersect, options);
animaElements.forEach((box) => {
  observer.observe(box);
});

[data-scroll-anima] {
  opacity: 0;
  transition: opacity .3s;
}
[data-scroll-anima="true"] {
  opacity: 1;
}

:root {
  --breackpoint-md: 768px;
}

// ブレイクポイントの値をCSS変数から取得して、matchMediaにセット
const rootStyles = getComputedStyle(document.documentElement);
const breackpointMd = rootStyles.getPropertyValue('--breackpoint-md');
const mediaQueryList = window.matchMedia(`(max-width: ${breackpointMd})`);

// ブレイクポイントに応じて実行する処理
const mediaQueryFunction = (event) => {
  if (event.matches) {
    console.log('768px以下です');
  } else {
    console.log('769px以上です');
  }
};

// ブレイクポイントが変わった時のイベントを登録
mediaQueryList.addEventListener('change', mediaQueryFunction);

// ページ読み込み時のイベントを登録
window.addEventListener('DOMContentLoaded', () => mediaQueryFunction(mediaQueryList));

$breackpoint-md: 768px;
:root {
  --breackpoint-md: #{$breackpoint-md};
}

const adjustViewport = () => {
  const triggerWidth = 375;
  const viewport = document.querySelector('meta[name="viewport"]');
  const value = window.outerWidth < triggerWidth
    ? `width=${triggerWidth}, target-densitydpi=device-dpi`
    : 'width=device-width, initial-scale=1';
  viewport.setAttribute('content', value);
}
const debouncedFunction = debounce(adjustViewport) // debounce関数は、Debounceの項で解説した関数です
window.addEventListener('resize', debouncedFunction, false);

const message = `私は${name}です。`;

const message = '私は' + name + 'です。';

// この中からidが2のデータを検索する
const users = [
  { id: 1, name: '山田' },
  { id: 2, name: '田中' },
  { id: 3, name: '中村' }
];

const targetUser = users.find(user => user.id === 2);

let targetUser;
for (let i = 0; i < users.length; i++) {
  if (users[i].id === 2) {
    targetUser = users[i];
    break;
  }
}

let arr1 = [1, 2, 3];
let arr2 = [4, 5];

// 配列の結合
let combined = [...arr1, ...arr2]; // [1, 2, 3, 4, 5]

// 配列のコピー
let arrCopy = [...arr1]; // [1, 2, 3]

// 配列の結合
let combined = arr1.concat(arr2); // [1, 2, 3, 4, 5]

// 配列のコピー
let arrCopy = arr1.slice(); // [1, 2, 3]

// データを取得（取得に時間がかかる）
async function fetchData() {
  const response = await fetch('https://api.example.com/data');
  const data = await response.json();
  return data;
}

async function run() {
  try {
    const data = await fetchData(); // awaitを使うことでfetchData()が完了するまで次の行の処理を待つ
    console.log('取得したデータ:', data);
  } catch (error) {
    console.error('エラーが発生しました:', error.message);
  }
}

run();

function fetchData() {
  // 同様の処理
}

async function run() {
  const data = fetchData(); // fetchData()の完了を待たずに次の行を実行してしまう
  // setTimeoutで処理を遅延させているが、fetchData()の完了が2000ミリ秒以内に終わる保証はないため、dataが空の状態でconsole.logが実行される可能性がある
  setTimeout(() => {
    console.log('取得したデータ:', data);
  }, 2000);
}

run();

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data');
xhr.onload = function() {
  if (xhr.status === 200) {
    console.log(xhr.responseText);
  } else {
    console.error('APIエラー');
  }
};
xhr.onerror = function() {
  console.error('ネットワークエラー');
};
xhr.send();

const controller = new AbortController();
const timeoutId = setTimeout(() => controller.abort(), 5000); // 5秒後にAbortSignalを送信

fetch('https://api.example.com/data', {
  signal: controller.signal
})
  .then(response => {
    clearTimeout(timeoutId); // タイムアウトをキャンセル
    return response.json();
  })
  .then(data => {
    console.log('Success:', data);
  })
  .catch(err => {
    if (err.name === 'AbortError') {
      console.log('Request timed out');
    } else {
      console.error('Error:', err);
    }
  });