- 1. YouTube解説のマスターを作るベースを作ってみた。
- 2. overflow: hidden の要素内にアンカーリンクのゴールを置くと要素が上にズレることがある
- 3. PythonでExcelの表をHTMLファイルに変換する方法
- 4. MBOX を HTML 形式に変換するにはどうすればよいですか? 完全ガイド
- 5. HTMLとReactでのonclickの関数の渡し方の違いについて
- 6. flex row-gapでパーセント値が効かない時の対処法
- 7. div タグのスタイルを参照しようとしたら参照できなかった話
- 8. jsでのエラー解消法
- 9. htmlでJavascript処理を出来るようにテキストファイルを読み込む
- 10. 推し活ドリブンで作ったメッセージ表示ツール
- 11. ChatGPT使えば結構いい感じのサイト作れるんじゃね?というお話。 Part2
- 12. marqueeが非推奨なので代替物の雛形をanimateメソッドで再現
- 13. 動的に追加された要素も静的要素もまとめてイベントの面倒をみるJS
- 14. HTML: img要素で遊ぶ
- 15. スニペットで超効率的にコードを書く方法【VSCode】
- 16. 話しかけたら楽に判るから 値付け間違いないもん♥byいしかわ version 0
- 17. 【CSS】mask-imageプロパティで簡単にSVGの色変えができた
- 18. 【CSS】は::file-selector-buttonでスタイルをつけよう
- 19. Xpathが正しいかをチェックする方法：画像付で優しい説明（windows/chrome）
- 20. カレー作りを例にしたレンダリング説明（フロントエンド）
YouTube解説のマスターを作るベースを作ってみた。
作ってみた。解説画面の元になるパターンとscript。
mp4の動画はサンプル動画。動画に重ねてイメージと、textを出せるかが、今回の試み。
なお、重ね枚数、textのJavascriptはこれには、組み込まれていません。
“`html
overflow: hidden の要素内にアンカーリンクのゴールを置くと要素が上にズレることがある
## 事象
タイトルの通り。
gifをご覧ください
黒枠の四角には overflow: hidden がかかっている状態です。
「第2章」の見出しにはidが振られております。動画のように、アンカーリンクをクリックすると赤丸とその下の第2章部分が上にずれますね。
もちろんこちらの理想は「赤丸の大部分が見えた状態を保ちつつ、」第2章の見出しまで飛んでほしいわけです## 起こる条件
overflow: hidden をはずしたときに「スクロールバーがでる」時にこれが起こります。
「http~~~/#section2」のようにアクセスするとずれます。## 何が起こっているのか
overflow: hiddenで切り取る前に、黒枠の四角内で該当位置（第2章の見出し）まで移動してから切り取っているように見えます## 解決策？
「起
PythonでExcelの表をHTMLファイルに変換する方法
Excelワークブックは一般的なスプレッドシート形式であり、データの組織化、分析、表示に広く使用されます。Excelファイルは通常、専用のドキュメントビューアで表示する必要があります。Excelテーブルをより互換性のある形式で表示したい場合は、HTML形式に変換して、さまざまなブラウザで直接表示することができます。また、ExcelファイルをHTML形式に変換すると、Excelテーブルをウェブページに簡単に埋め込んだり、直接ウェブページとして表示したりすることができます。本記事では、**Pythonを使用してExcelワークブックまたはワークシートをHTMLファイルに変換する方法**について説明します。
– **[Pythonを使用してExcelワークブックをHTMLファイルに変換する方法](#pythonを使用してexcelワークブックをhtmlファイルに変換する方法)**
– **[Pythonを使用してExcelワークシートをHTMLファイルに変換する方法](#pythonを使用してexcelワークシートをhtmlファイルに変換する方法)**
– **[Pythonを使用してEx
MBOX を HTML 形式に変換するにはどうすればよいですか? 完全ガイド
MBOX ファイルを HTML 形式に変換したいと考えている人はいますか? その場合、この記事では、Windows ユーザーに最も効果的な方法を利用して、MBOX ファイルを HTML 形式に一括でエクスポートするプロセスを説明します。 詳細については続報をお待ちください。
対照的に、HTML は、Web ページ情報をコンピュータ上にローカルに保存するために使用される Web ページ形式として機能します。 HTML ファイルには、Web ブラウザ アプリケーションから簡単にアクセスできます。
ただし、標準のテキスト エディタ アプリケーションを使用して MBOX ファイルの電子メールに直接アクセスすることはできません。 したがって、ユーザーは MBOX ファイルを HTML 形式にシームレスにエクスポートするための適切なソリューションを必要としています。
MBOX ファイルを HTML にエクスポートする最も一般的な理由
• HTML ファイルは、アクセスするために特定の電子メール アプリケーションを必要とする MBOX ファイルとは異なり、Web ブラウザ経由で広くアクセスで
HTMLとReactでのonclickの関数の渡し方の違いについて
# ReactとHTMLのonclickにおける違い
ReactとHTMLにおけるonclick属性の記述方法の違いは、イベントハンドラーの処理方法の違いに起因します。## React
`onclick={test}`
– 関数オブジェクトの内容を渡す
– イベント発生時に渡された関数オブジェクトが実行される
– イメージ的にはコンポーネント内には関数が存在するけれどscriptタグに記載の無い（レンダリングの中にない）関数の処理の内容をonclickのイベントハンドラに格納している。
## HTML`onclick=”test()”`
– 関数名を文字列として渡す
– イベント発生時に文字列が評価され、関数呼び出しが行われる
– イメージ的にはクリックされると`return “test()”;`のようになってscriptタグのtest関数が呼び出される感じ。
## Reactにおける関数オブジェクトの扱い
Reactでは、イベントハンドラーとして関数オブジェクトを直接渡すことができます。これは、JavaScriptの関数オブジェクトは、メモリ上のアドレスを持つオブジェクトで
flex row-gapでパーセント値が効かない時の対処法
# はじめに
flexをレスポンシブに実装する時、row-gapにパーセント値が効かなかったため、その時はvwを使用すればよいと知ったので、その内容について共有します。# おさらい
今回に出てくるgapと長さの単位についてざっくりおさらいします。
## gap
gapは **flexやgrid等のすき間の大きさを決める** cssのプロパティで、わざわざmarginやnth-childを使って余白調整しなくても良くなります。詳しくは[こちら](https://developer.mozilla.org/ja/docs/Web/CSS/gap)
## 長さの単位
cssで使用する長さの単位は **絶対長の単位** と **相対長の単位** に分類されています。
* 絶対長：px（ピクセル）、pt（ポイント）、cm（センチメートル）
* 相対長：%（パーセント）、vw、em絶対長は他の長さとの関係で決まらず一定の値で、相対長は親要素のフォントサイズや画面幅といった何かとの比較でサイズが決まり、基準となる要素の大きさを変更することで相対的に変化します。
詳しくは[こちら](h
div タグのスタイルを参照しようとしたら参照できなかった話
例えば、次のような HTML と CSS があったときに、
“`html:hoge.html
“`
“`css:hoge.css
#hoge {
display: flex;
}
“`以下のコードでコンソールに出力されたのは “flex” ではなく**空文字**だったという話です。
“`javascript:hoge.js
const divElement = document.getElementById(“hoge”);
console.log(divElement.style.display); // 空文字が出力される
“`## 解決方法
上記のコードで言うと `divElement.style.xxxx` で参照できるのは JavaScript で動的に設定したスタイルとなるため、CSS で適用したスタイルを参照する場合は `window.getComputedStyle()` を使用します。
https://developer.mozilla.org/ja/docs/Web/API/Window/
jsでのエラー解消法
# 振り返り ~js編~
– クエリパラメータの取得方法
[URLのクエリパラメーターの作り方と取得や削除する方法](https://www-creators.com/archives/4463)
[Javascript でURLのパラメータを取得する方法](https://masanyon.com/javascript-url-query-parameter/)
– 引数 →復習
[引数を使って関数へ値を渡す](https://www.javadrive.jp/javascript/function/index3.html#google_vignette)
htmlでJavascript処理を出来るようにテキストファイルを読み込む
一度やったのだけど忘れてしまって、やり直してみました。
fileからtextareaに出すにはJavascriptを読み込み時に一度だけ読み込めば、objectが常駐して閉じるまでtextareaの選択リストを更新してくれます。
textareaをクリックして、実行ルーチンはこれとは関係ありません。
**htmlの見本**
“`html
studio こっちみて！😍😍😍
```実行結果
要素を左から順にクリックして最後に白い部分をクリックしたのが以下の実行結果。
スニペットで超効率的にコードを書く方法【VSCode】
## タイピングが面倒ならスニペット
スニペットとは、**自分でカスタマイズ** できるショートカットのようなもの。例えば、cと打ったら `console.log();` が表示される、ということができる。
ファイルの種類ごとに管理できるので、上の例だと c と打ったときにPythonだと `cv2` と表示させたいということもできる。
## 普段使っているスニペットを紹介
僕がVSCodeで使っているスニペットを紹介します。ちなみにスニペットのjsonファイルを呼び出すには、以下のようにすればよい。
- `command` + `^control` + `p` でEnter
- 呼び出したい言語 (pythonなど) を選択するか入力する
HTMLとJavascriptでつくる
声を掛けたら それらしいのを返してくれるヤツ## 下記課題解決のプロトアウト
お弁当や総菜など商品作ってラベル貼るときな
ラベル貼機にその商品の品番入力背なあかんねんけど
品番は紙の表になっとって見にくい探しにくいねん品番多いねん 紛らわしいのもあんねん 表から探すのめんどいやん！
何ページもある表から探してって、その時間が無駄や！
しかも見間違いが多発すんねん！と あつく かたる いしかわてんちょう
## 作りたい商品の名前を話したら 検索して表示してくれるのでけへんか？！
音声からそれらしい商品の候補を出しゃ、探しやすいやん
探す時間めっちゃ少なくなるやん！
間違え減るやん！楽できるやん！と あつく かたる いしかわてんちょう
## HTMLとJavascriptで書いて
【CSS】mask-imageプロパティで簡単にSVGの色変えができた
hover時、ナビのカレント時など同じアイコンで色だけ変えたいときに、別の色にした別画像で書き出すのが面倒で悩み続けてきました。
useタグを使う方法もありましたが、何故かうまくできず、、、
そこで出会った`mask-image`がかなり優秀だったので備忘録です。# `mask-image`の使い方
基本的に`background-image`と同じように扱えます。
`mask-image`にSVGのファイルパスを指定し、`mask-position` 、`mask-repeat`、`mask-size`をそれぞれ指定します。```scss:SCSS
.nav-item {
display: inline-block;
width: 32px;
height: 32px;
// mask関連の指定
mask-position: center center;
mask-repeat: no-repeat;
mask-size: contain;
mask-image: url(../img/icon-home.svg);
background:
【CSS】は::file-selector-buttonでスタイルをつけよう
``は直接スタイル指定ができず、デザインの変更
が面倒だったのですが、`::file-selector-button` を使えば簡単に指定できることを知ったので備忘録です。# 使い方
See the Pen
::file-selector-button by himeka223 (<
Xpathが正しいかをチェックする方法：画像付で優しい説明（windows/chrome）
自動テストでXpathを自動取得しても要素が探せない、手動で直してもうまくいかない、そもそもこのXpathってあってる？がわからないときはChromeで純粋にXpath要素取得だけをチェックすることが手っ取り早いです。
（Chromeの拡張機能でもそういう機能があるはずなので、デベロッパーツールが難しいと感じてしまう人は拡張機能を探してみるのもアリですが筆者はデベロッパーツールが一番使いやすいと感じています）
## Xpathを検証する方法
### 対象ページをChromeで開く
ここでは例として自動テスト用に用意されているダミーサイトを開きます
https://hotel.testplanisphere.dev/ja/index.html
### デベロッパーツールを開く
Windowsは``F12``キー
Macは``Command``
カレー作りを例にしたレンダリング説明（フロントエンド）
フロントエンド開発で耳にするレンダリングについて書いていきます。
レンダリングとは？
レンダリングと言われるとピンとこないかもしれませんが、いつもインターネットで色々なサイトを観覧しているかと思います。
みなさんがいつも目にしているその画面上に映し出されているものが、レンダリングされた結果なのです。
ですので、画面に映し出されるまでにコンピュータが頑張ってやってくれている処理がレンダリングです。結論：人が目で見て視覚的にわかる状態にするためにコンピュータが頑張って行う処理
ざっくりとした理解としては下記で問題ありません。
"レンダリング ＝ いつも目にしているWebページができるまでの処理（過程）"ではどのようにして、いつもみている画面のようになっているのでしょうか。
みなさんが見ている画面上のものは、サーバに格納されているデータから構成されています。
HTMLやCSSと耳にしたことがるかと思いますが、HTMLやCSSといったデータをサーバから受け取りコンピュータが頑張って処理をした結果が、みなさんがいつも目にしている画面になっているのです。【レンダリングの流れ（メイ
