今さら聞けないHTML　

横からスライドするモーダルの作り方

クリックすると、横からスライドして表示されるモーダルの作り方です。

# 作り方🍳
#### 1. ボタンとモーダルの`div`を置く
“`sample.html
Click!

“`
#### 2. `slide-modal`クラスにCSSを当てていく
1. `position:fixed;`を指定して、スライドモーダルをどの位置に表示するか指定する
2. 特定のクラスが付与されたときにスライドモーダルを表示するために、`slide-modal`クラスに`show`クラスがついた時のスタイルを用意する（クラス名はなんでも良い）
3. `show`クラスには`display: block;`と`overfl

【スーパーの女神】出勤したらやることを教えてくれるおねえさんを創り出す【claude】

## 出勤したらやること教えて、おねえさん！
　こんにちは、業務効率化おねえさんを作成することに命をかける女、ゆいです。

　突然ですが、人間は忘れる生き物です。
　毎日同じことをしているはずなのにどうしても抜け漏れが発生します。

　私は小売業で働く社員です。出勤した直後に何をすべきかを毎日洗い出してパートさんに指示を出していました。
　ですが、だんだんルーティンタスクを抜かしてしまい、いつもであればできていたことを「うっかり」やり忘れてしまうことがたまに起きてしまうことがありました。

（「うっかり」報告書の提出を忘れたり、「うっかり」POPの外し忘れがおきたり…）

　また、社員である私とパートさんでは取り組む業務に違いがあります。私と同じように動いてもらおうとしてもうまくいくわけがありません。

　なので今回は、Teachable Machineを使って社員かパートかを判別し、各々に割り当てられたタスクを表示するというアプリを作成することにしました！

　ただシンプルなアプリだと使いたいと思ってもらえないかもしれないので、かわいいおねえさんを表示して親しみをもって

Canvasでグリッチアニメーション

:::note info
viviONグループでは、DLsiteやcomipoなど、二次元コンテンツを世の中に届けるためのサービスを運営しています。
ともに働く仲間を募集していますので、興味のある方は[こちら](#一緒に二次元業界を盛り上げていきませんか)まで。
:::

# :loudspeaker: はじめに

Canvasでもグリッチアニメーションがしたい！ということで、この記事ではCanvas上でのグリッチアニメーションの実装を解説します。

グリッチアニメーションもといグリッチエフェクトとは、意図的にノイズや歪みを加え、エラーやバグのような視覚効果を再現したものです。元々はCG分野で使用されていましたが、現在ではWebデザインにも利用されています。

Web上でグリッチエフェクトを表示する方法にはCSSやSVGを使用した例がたくさんありますが、Canvasを使うことでさらに細かい制御や複雑なアニメーションを実装できます。Canvasはピクセル単位で操作が可能で、自由度が高く、シンプルなAPIにより実装に集中できます。これによりグラフィック操作や描画アルゴリズムについてよく学

【Figma Plugins】UI側とcode側でデータを受け渡す

## はじめに
FigmaのPluginを開発する際、Figma PluginsのUI側とcode側でデータを受け渡したいと思ったことはありますか？
この記事では、Figma PluginsのUI側とcode側でデータを受け渡す方法を解説します。

## UI側 → code側にデータを渡す
### ⚪︎ UI側でデータを送る
UI側からデータを送るには、`postMessage（）` という関数を使います。

“`ts
postMessage(pluginMessage: any, options?: UIPostMessageOptions): void
“`

`postMessage（）`　の引数には、any型の`pluginMessage` と UIPostMessageOptions型の`options` を渡すことができます。

– `UIPos

複数ページをまとめてHTML Validationチェックする

## なぜHTML Validationを気にするべきか


なぜHTML Validationを気にするべきなのでしょうか。
多くのプログラム言語と異なり、HTMLは曖昧な表記でもWebブラウザが計らってくれて上手に表示してくれる技術です。

主要ブラウザで正しく動作しているのであれば、文法上の細かな話は気にするべきではないと考えるかもしれません。

しかし、一方でHTMLの記述間違いがレイアウト崩れにつながったり、動作不良を起こすこともあります。

“HTMLの文法を守る”というルールを課している場合は、機械的に早期に問題を検出し、少ないコストで問題回避を実現できます。
“HTMLの文法を守る”というルールを課していない場合は、深刻な問題が大量のエラーに埋もれてしまい問題の検出を難しくします。
これがHTML Validationを気にする

入力が楽になる便利ツールキット Emmet【HTML CSS】

# はじめに

Emmet というツールキットを使用すると、HTML・CSSの入力効率が大幅に上がります。
生産性爆上がりというやつです。

# Emmetのメリット

https://emmet.io/

こちらの公式動画を見るのがわかりやすいです。

動画を見れない方用

| |
| :-: |
| |
| `!` → `Enter` / `tab` だけで・・・ |
|![スクリーンショット 2024-05-09 20.19.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457770/8cd877cf-f386-c739-0fc4-b7

イベントリスナーとは？(Webページ上でイベント操作を行う)

## はじめに
Webページ上で特定のイベント（例：ボタンクリック、マウスオーバー、フォーム送信など）が発生した際に、それに対する処理を実行するための仕組みについて、まとめたので、共有させて頂きます。

DOMイベントに待機する（イベントリスナーを設定する）ことで、ユーザーの操作やその他のイベントに応じて特定のアクションを実行することができる。`addEventListener`メソッドを使用してイベントリスナーを追加し、特定のイベントが発生したときに実行される関数を指定する事で、インタラクティブなWebアプリケーションを構築することができる。

### DOMイベントに待機する基本的な方法

**イベントリスナーの追加**
`element.addEventListener(event, function)`
指定したイベントが発生したときに実行される関数（イベントリスナー）を追加

### 具体例

#### 例1: ボタンのクリックイベントに待機する
メッセージ要素のテキスト内容を変更して、ユーザーにフィードバックを提供します。
“`html

【最新HTML仕様まとめ：2024年版】「HTML Living Standard」のプルリクからキャッチする

前回の投稿はたくさんの「いいね」をいただき、少しでもお役に立てたようで非常に嬉しく思っています。

https://qiita.com/tanimoto-hikari/items/ef1c3bdca2ab570c96b3

さて、今回は前回の投稿から1年が経ちました。
この一年で変更点があるはずなのに、なぜか最新の仕様に関して言及する記事を見つけられませんでした…（探すのが下手くそ？）

なのでプルリクから最新仕様をキャッチできるのでは？と考えて確認してみました！

:::note
正直に言うと内容を見てもよくわからない部分が多かったので変更点サマリーと捉えていただけると嬉しいです！
:::

## 2024年HTML最新仕様について

前回記事を投稿した7月5日以降にクローズされたプルリクエストを調べてみました！
期間を7月5日以降、ラベルを「追加/提案」に絞って確認したところ全部で19個ありました。
その中でもHTMLに関する変更をピックアップしました。

https://github.com/whatwg/html/pulls?q=is%3Apr+is%3Aclosed+labe

localStorageを使ってメモ帳的なものを書いてみた

# はじめに
今回はlocalStorage（javascript）を使ってメモ帳のようなものを書いていきたいと思います。
# ファイル構成
今回もhtmlファイル一つでできます
# コピペする
以下のコードをコピペしてください:
“`html:main.html