kobitoDevelopment

const result = confirm("OKかキャンセルのどちらかを押してください");
if (result) {
  console.log("OKが押されました");
} else if (!result) {
  console.log("キャンセルが押されました");
}

kobitoDevelopment

<h2>Mapと仲良くなる</h2>

<button id="addItem">配列の最後に追加</button>
<button id="removeByIndex">インデックス1を削除</button>
<button id="removeById">最初のIDを削除</button>
<button id="updateById">最初の要素を更新</button>
<button id="clearItems">すべての要素をクリア</button>

<ul id="itemList"></ul>

kobitoDevelopment

<form class="form">
  <dl>
    <div>
      <dt>
        <label for="name">氏名</label>
      </dt>
      <dd>
        <input id="name" type="text" name="name" />
      </dd>
    </div>

kobitoDevelopment

<!--
以下コード中「4f13.1」部分の「13.1」部分を調整する(小さいほどズームが大きくなる)
-->
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d207420.52219881324!2d139.687047!3d35.67834!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6018f333ea6d6f9b%3A0xaa9c0a61b837f709!2z5aSn5ZKM5ris6YeP77yI5qCq77yJ!5e0!3m2!1sja!2sjp!4v1742363563860!5m2!1sja!2sjp" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>

kobitoDevelopment

@property --from-color {
  syntax: "<color>";
  initial-value: #81ffef;
  inherits: false;
}
 
@property --to-color {
  syntax: "<color>";
  initial-value: #f017b4;
  inherits: false;

kobitoDevelopment

.select-list {
  display: none;
}
.select-trigger[aria-expanded="true"] + .select-list {
  display: block;
}

kobitoDevelopment

<template>
  <div
    :class="['my-auto-carousel', `-${props.orientation}`]"
    role="presentation"
    :style="{
      '--direction': direction,
      '--duration': `${props.duration}s`,
    }"
  >
    <ul class="list -before" aria-hidden="true">

kobitoDevelopment

<template>
  <!-- ダイアログを開くボタン -->
  <button class="open" aria-expanded="false" @click="openDialog">
    <slot name="open">
      <span class="text">ダイアログを開く</span>
    </slot>
  </button>
  <!-- ダイアログ -->
  <dialog ref="dialog" class="my-dialog">
    <button ref="close" class="close" aria-label="ダイアログを閉じる" @click="closeDialog">

kobitoDevelopment

<template>
  <div ref="myLoadingElement" :class="['my-loading', { '-mounted': props.loaded }]" :aria-busy="!props.loaded"></div>
</template>

<script lang="ts" setup>
const props = defineProps<{ loaded: boolean }>();

const myLoadingElement = ref<HTMLElement | null>(null);

const removeElement = (event: AnimationEvent) => {

kobitoDevelopment

.blob {
  height: 150px;
  width: 150px;
  border-radius: 58% 43% 33% 64% / 50% 38% 53% 50%;
  background: transparent;
  box-shadow: inset 6px 33px 20px 0 #c9c9c9, inset 20px 80px 15px 0 #e0e0e0, 10px 20px 20px 0px #c9c9c9;
}

.blob::before {
  content: "";