今さら聞けないHTML　

【HTML】「本当に○○して良いですか？」確認メッセージ

## 問題
削除ボタン等を押した時に
「本当に○○して良いですか？」
確認メッセージを表示したい。

確認メッセージを承諾したら〇〇を実行。
拒否したら元に戻るようにしたい。

## ゴールの確認

## 参考サイト
https://sorauta1.blog.fc2.com/blog-entry-492.html

## 解決方法
### 結論
confirm()メソッドを使う

### コード
“`index.blade.php

ChatGPTくんにMatrixコードを出力してもらった。

ChatGPT4に、Matrixコードを出力してもらった。
プロンプトはすごく簡単にしてみた。

“`プロンプト内容.
映画のマトリックスに出てきた、緑色の文字がランダムに表示される文字列のアニメーションをJavaScriptで再現してほしいです。
“`

出力されたコード
“`matrix.html

ギターのコードチェンジ練習ツールを作成しました

## 作成したきっかけ

youtubeを見ながらギターのコードを勉強をしてたのですが、
動画に出てくる順でコードを覚えているところがあり
それを改善しようと思い作ってみました。

## 機能

先に書いておきますが、指板図の表示機能やメトロノーム機能はないです。
ツールの見た目は下図のような感じです。



開始すると指定した秒数ごとにコードを画面に表示し、読み上げます。
(ギター見ながら練習できる!)

下記ショートカットを付けています。
スペースキー押下: 開始・停止
mキー押下: ミュートオン・オフ

元記事を表示

プチ話 ブログが書きやすくなった話

こんにちはAtsu1209です。
今回はちょっとした話を書いていきたいと思います

# ホームページ
実は私ホームページがありまして、そこの中でブログも一緒に書いています。
ホームページ↓

https://atsu1209.github.io/home

ブログ↓

https://atsu1209.github.io/home/blog

デザイン(CSS)は苦手なのでﾕﾙｼﾃ…

# ブログ
実はブログを書くときに、なんと`

`を自分で増やして書いていました。
つまりHTML側を書き換えてブログを作ってたんです。
やばいですよね…

しかもGithubPagesです。

# 大発明
もうHTMLを書くのは嫌なので流石にブログ作成ツールを作りました。

HTMLで``に入力されたタイトルや本文をJavaScriptでまとめて
もろもろ出力するようになってます。

:::note info
めっちゃ楽!
:::

まあRubyやPHPを使えば一瞬だと思いますが、僕はまだ勉強中なので
このまましばらくブログを書いていきます。

# 最後に
今日の反省: 早く

GitHub の discussions で使える HTML の便利記法

バックエンドエンジニアの大和道子です。
GitHub で開発をしていると、discussions を活用して情報を共有することがありますが、HTML の記法を使用することで、読みやすく柔軟な書き方が可能になります。
ぜひ使ってみてください！

# ページ内リンク

ページ内リンクが紐づけられないなーというのではまったので備忘録
discussions が長くなる時は文書を分けるか、目次を作ってあげると優しいです。

## 書き方
[ここに飛びたい！](#ここに飛びたい)

– リンク
– 書き方
`[表示させたい文字列](#段落リンク)`

– 例
`[ここに飛びたい！](#ここに飛びたい)`

– 飛びたい先の段落
– 書き方
`## 段落名[半角スペース]`

– 例
`## ここに飛びたい！ `

## 段落リンクの注意点
– 段落の深さに関係なく、`#` は1個
– 全角記号は抜く
– 半角スペースは`-`

### 参考
[Qiita Mar

HTML,CSS,JavaScript で自由配置を行う。やつてみたシリーズ半完動品

初期フォーマット形式を試行錯誤中で、見本を動かせないというか、配置はでは出来ましたが連続という段階で躓いています。
スクリプトの見本としてどうぞよろしくお願いいたします。

studio.html
“`html








<

color-gamutとcolor()関数で色の精度を上げるSCSS

## 導入
CSSのカラースペースは近年進化を遂げており、sRGBからP3やRec.2020など、より広い色域をサポートするようになっています。本記事ではSassを使用して色指定を簡単にする方法を紹介します。

## Mixinの概要
以下に示すmixinは、CSSのcolor()関数に対してRGB値を簡単に設定できるように設計されています。このmixinはRGB値をパーセンテージ形式に変換し、メディアクエリを利用して表示デバイスに合わせた適切な色が表示されるようにしています。

~~~scss:mixin.scss
@mixin set-color($property, $r, $g, $b) {
$r-percentage: math.div($r, 255);
$g-percentage: math.div($g, 255);
$b-percentage: math.div($b, 255);

#{$property}: rgb($r,$g,$b,);
#{$property}: color(srgb $r-percentage $g-p

決定版： HTML textarea 要素の高さを Shift+Enter で自動調整する

チャットアプリでよくある Shift+Enter で改行、Enter で送信する方法を調べてみると色々な方法が見つかったので、それらの中から私が決定版だと思ったものを記しておきます。

# Shift+Enter で自動調整

“`html

最低限の知識でChrome拡張機能をつくってみる（HTML/CSS/JS）

## はじめに
Chromeの拡張機能をつくるのは難しそう、という勝手なイメージがあったのですが、ごくシンプルなものであればタイトルに記したスキル程度でも作成できたので記事にすることにしました。
とくに個人的に使用するものであれば案外敷居は高くないので、これを機に何か作成してみてはいかがでしょうか。

## 今回作る拡張機能
今回は「拡張機能の作り方」に焦点を当てたいので、機能は「**Qiitaサイトの背景色を変更する**」というシンプルなものにしようかと思います。
ちなみに、本記事ではストアへの登録は行いません。

## 作成方法
### 1. 作業ディレクトリの作成
ディレクトリ名はなんでも構いません。今回は「change-qiita-bg」というディレクトリに作成しようと思います。
### 2. manifest.json の作成
いきなりよくわからないものがでてきましたがまったく問題ありません。以下のようなファイルを作成してchange-qiita-bgディレクトリ直下に保存しましょう。manifest.jsonの詳しい内容については他記事に任せることとします。

“`cha

【CSS】1つのHTML要素に複数のkeyframeアニメーションを適用させる

# はじめに
HTML要素にアニメーションを当てる際にCSSの`keyframe`を利用する事があると思います。
`animation`プロパティに`keyframe`を指定したCSSを対象のHTML要素にあてることで、アニメーションを付与することができますが、1つのHTML要素に複数の`keyframe`アニメーションを付与したい時にはどうするのか疑問に思ったので調べてみました。

# 結論
シンプルで以外と簡単でした。
`animation`プロパティにおいて「,」で区切ってkeframeを指定するだけでした。
以下2つの`keyframe`（changeColor 、rotate）を指定した例になります。

“`css:
.hogeClass {
/* ～～ */
animation: changeColor 5s infinite alternate, rotate 5s infinite linear;
/* ～～ */
}
“`

# ソース
試しに上記の方法で`animation`プロパティに2つの`keyframe`を設定したUIを作成してみます。
ま

忘備録：モーダルウィンドウ作成

## 久しぶりのJavaScript、モーダルウィンドウ作成をしました。
2年以上放置しておりました。
現実はコーディングではなくデザイン業務ばっかりになってしまったので、また1からJavaScriptを学習することにしました。（ありがとう、ドットインストールさん・・・）

勉強しなおしたことで、以前よりも理解が深まった感じがあるので、
メジャーなものから作成して体に覚えさせていこうと思います〜。
とりあえず今回はモーダルウィンドウから始めていきますよ〜！

## モーダルウィンドウ作成
実際に制作を行う前に、どのように条件を設定して発火させるかメモを取りました。
①：openはクラス名「modal-open」のボタンをクリックして、htmlに「active」クラスをつける
②：closeはクラス名「modal-close」のボタンだけでなく、モーダル背景の「modal-overlay」をクリックしても閉じるようにする

### HTMLの記述
以下、HTMLの記述になります。
わかりやすいようにザッと組んでます。
“`HTML

Pythonで検索キーワードと対象URLをいれたらスクレイピングするツールを作ってみた

## １．きっかけ
仕事中に上司との雑談で、取引先の担当者の異動情報をネット情報から自動でチェックする機能が欲しいよねって話から作成に至った。
本当は、JavaScript等でそのままブラウザから選択してリンクに飛べるようしたいが、今回はまずPythonでリストを出力するイメージで作成。
今後、JavaScript等で作成予定。

## ２．おおまかな機能イメージ
異動情報を探す際の探し先のURLおよびキーワードを設定ファイル（JSON）に記載したら、それを基にスクレイピングして、キーワードを含むリンクを一覧ファイルに出力するイメージ。

## ３．おおまかな設計
①JSON取り込み
　→ JSONファイルに探し先のURLおよびキーワード（複数追加可能）を設定し、ツール実行時にそれぞれ設定内容を取得する。

②リンク先の取得
　→ 探し先のURLからリンク先を抽出し、検索キーワードを検索する先のURLを取得する。

③webページにキーワードが入っているか確認
　→ ②で取得したリンクに対し、htmlファイルを取得し、JSONファイルで指定したキーワードが含まれているか確認。

Web上でPDFをHTMLに変換する

## はじめに
表題通り、PDFをHTMLに変換します。[サイト](https://www.idrsolutions.com/ja/online-pdf-to-html-converter)より変換ができたので、紹介します。

## やりかた
https://www.idrsolutions.com/ja/online-pdf-to-html-converter

①ファイルアップロード

②変換処理を押す

③

ulの「・」を消す方法

### ulの「・」を消す方法

ulの「・」を消す方法はとても簡単で下記のコードを書くと消せる
“`
ul {
list-style:none
}
“`

[before]

[after]

「。」「、」⇔「，」「．」の変換をするだけのサイトを作った

# はじめに
タイトル通り，「。」「、」⇔「，」「．」の変換をするだけのサイトを作りました。
理系の習慣で普段IMEの設定をカンマピリオドにしているのですが、句読点で書くべき場面なのにカンマピリオドで文章書いちゃったときに直すのがめんどくさいので作りました。
あとHTMLの勉強も兼ねてます。Netlifyという無料でドメインを取得できるサービスを使いました。
## リンク
https://kutouten-henkan.netlify.app/

# 使い方
変換したい文章を上のテキストボックスに入れて変換ボタンを押すだけです。変換先は選べるので、句読点をカンマピリオドにすることもできます。ちなみに全角にしか対応してないので注意。

# 最後に
みんなもカンマピリオドを句読点に変換しよう！
~~調べたら似たようなサイトが結構あって草~~

isRequiredでフォームの入力を必須にすると、未入力の場合デフォルトのエラーメッセージが出力される。

# はじめに
React×TypeScript×ChakuraUIでアプリを作成中です。
入力必須フォームを作成する際にisRequiredを使ったのですが、気づいたことがあったのでメモします。
# 問題
**フォームが未入力の場合、「ログインIDの入力は必須です」のエラーメッセージを出したいのに、「このフィールドを入力してください」のエラーメッセージが出てしまいます。**


入力フォームの実装を抜粋しました。
“`tsx:tsx


好きな英単語

リセットCSSでチェックボックスが消えた

## 目的
destyle.cssでリセットしたところ、チェックボックスが見えなくなってしまいました。解決に時間がかかったので、忘備録として残します。

## 結論
`all: revert;`を追加すると表示されました。

“`
input {
all: revert;
}
“`

上記を追記すると、要素に対してカスタマイズされたり変更されたりしたすべてのスタイルが取り消されます。これによりブラウザのデフォルトスタイルに戻るため、リセットCSSで消えていたスタイリングが復活しました。

## まとめ

MDNを参考にしました。

https://developer.mozilla.org/ja/docs/Web/CSS/all

【thymeleaf】アンカーリンクに変数を使いたい場合

だいぶ前にハマった時のメモ.
~~~html:sample.html

~~~

PythonでHTMLファイルをWordに変換する

以前の記事で、Spire.Doc for Pythonライブラリを使用してWordをHTML形式に変換する方法を紹介しましたが、このライブラリはHTMLからWord文書への変換も実現できます。プログラミングによってHTMLをWordに変換することで、手作業でコピー＆ペーストするような、時間がかかり、エラーが起こりやすく、書式が混乱してしまう可能性のある作業を避けることができます。

[**Spire.Doc for Python**](https://www.e-iceblue.com/Introduce/doc-for-python.html)ライブラリは、わずか数行のコードでHTMLファイルをWord Docxフォーマットに変換します。以下はその方法です。

## Pythonライブラリのインストール方法：
Python Wordライブラリは、以下のpipコマンドでインストールできます：
“`
pip install Spire.Doc
“`

## HTMLをWordに変換するPythonコード例
“`python
from spire.doc import *
from

IP住所検索サービス作ってみた

## ■初めに
関西のとある企業でエンジニアをしている物です!

普段はバックエンド領域の構築や運用を行っています。
フロントエンド領域のエンジニアをみて華があって良いなと思う事があります…..

そこで今回は裏方の私がChatGPTの力を借りてwebアプリを作成したお話となります。

今回はサービス解説となります、技術解説は次回の記事に作成させて頂きます。

[IPアドレス住所検索サイト](https://ip.r1999.com/)

## ■IP住所検索サービス


https://ip.r1999.com/

今回作成したwebサービスは「IP住所検索サービス」となります。
IPアドレスやドメインから所属する住所情報を取得し表示するサイトとなります。

フォームに入力したIPデータをJavaScriptのFetchAP