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

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

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

<dialogopen><div>モーダルのコンテンツ</div><formmethod="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>

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

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

<search><formaction="/search"><labelfor="query">サイト内を検索</label><inputtype="search"name="q"id="query"><buttontype="submit">検索</button></form></search>

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

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

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

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

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

<divclass="icon"><svg><usexlink:href="img/arrow.svg#arrow"></use></svg></div><!-- img/arrow.svg --><symbolid="arrow"viewBox="0 0 24 24"><pathd="M0 0h24v24H0z"fill="none"/><pathd="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></symbol>

<divclass="icon"><svgviewBox="0 0 24 24"width="24"height="24"><pathd="M0 0h24v24H0z"fill="none"/><pathd="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:300px1fr;/* 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: span3;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: opacity0.3s;}

.fadein{transition:0.3s;}

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

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

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

.triangle{width:0;height:0;border-style: solid;border-width:100px0100px173.2px;border-color:transparenttransparenttransparentred;}

<aclass="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 screenand(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(0000);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><scriptsrc="script.js"defer>  ...</head>

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

<scriptsrc="script.js"defertype="module">

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

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

functiondebounce(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);};}

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

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

// 監視対象要素const animaElements=document.querySelectorAll("[data-scroll-anima]");// 交差時に実行される関数constdoWhenIntersect=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=newIntersectionObserver(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})`);// ブレイクポイントに応じて実行する処理constmediaQueryFunction=(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};}

constadjustViewport=()=>{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]

// データを取得（取得に時間がかかる）asyncfunctionfetchData(){const response=awaitfetch('https://api.example.com/data');const data=await response.json();return data;}asyncfunctionrun(){try{const data=awaitfetchData();// awaitを使うことでfetchData()が完了するまで次の行の処理を待つconsole.log('取得したデータ:', data);}catch(error){console.error('エラーが発生しました:', error.message);}}run();

functionfetchData(){// 同様の処理}asyncfunctionrun(){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=newXMLHttpRequest();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=newAbortController();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);}});

8年ほどデザインやフロントエンドの仕事をしています🍺