# HTMLの基本的な操作
2月10日からプログラミングを始めたので、忘備録として書いていきます。また自己成長の為に、アウトプットも兼ねて記事を作っていくので宜しくお願いします。
#### 見出しを付ける
“`
リンゴ
“`
上記のように見出しを作る。また、数字を大きくしていくと、見出しが小さくなる。最大は6まで。
#### 段落を作成する
“`
リンゴ
リンゴアメが食べたい
“`
pはparagraph（段落）の略になる。h2要素やp要素で囲んだテキストは改行されて表示される。
#### コメントの書き方
“`
“`
囲んだテキストのことを「コメント」と呼ぶ。
コメントとして書かれたテキストはブラウザには表示されないの
## 経緯
https://qiita.com/akira-hagi/items/749f70127ee1d4fa4206
ほぼ前回の続きです
webページのソースをディレクトリそのままにスクレイピング、
詳しく述べると、
`https://www.hoge.com/huga/hoge/index.html`と`https://www.hoge.com/huga/index.html`のソースをまとめて取得するとき、
ドメイン名をトップディレクトリとし、
“`
└── www.hoge.com
└── huga
├── hoge ── index.html
└── index.html
“`
のようにしてローカルに持ってきました
このHTMLソース群の中からリンク（aタグのhref要素やimgタグのsrc要素など）を抽出したいと考えました
~~スクレイピングする時にわざわざソースをローカルに落とさずに直で抽出すればいいじゃんというツッコミは無しでお願いします~~
## とりあえず思いつくままに書く
“`python
fr
kintoneでは標準機能に加えて、JavaScriptやプラグインを使えば自由にカスタマイズできるようです。
今回はコールセンターでの作業効率化のため、電話番号のコピーボタンを実装しました。
# 前提
– kintoneでデータの管理をしている方。
– kintoneのカスタマイズをしたい方。
– kintoneにコピーボタンを実装したい方。
上記のような内容を実装したい方は、ぜひ参考にしてみてください。
# 完成系
“`kintone_customize.js
(() => {
‘use strict’;
// 詳細画面でイベントを宣言
kintone.events.on(‘app.record.detail.show’, event => {
// ボタンを設置
let CopyButton = document.createElement(‘button’);
CopyButton.innerHTML = ‘copy’;
CopyButton.id = ‘電話番号’;
CopyButton.style.borde
2023/2/9 紹介するツールが少ないですが、順次追加していく予定です。
windows編は[こちら](https://qiita.com/harryp0tterK/items/1d1b6a85d3bf9d51ada5)
## はじめに
初投稿です。
GIGAスクール構想として一人一台端末が配布されてから約二年が経ちました。
現役中学生の自分が、2年間端末を使ってみて、プログラミングがどこまでできるのか試して感じたことを書こうと思います。
GIGAスクール構想について詳しいことは[こちら](https://www.mext.go.jp/a_menu/other/index_0001111.htm)で説明されています。
GIGAスクール構想のなかで、2020年度からプログラミングの授業が必修となりましたが（高校でも情報Ⅰができました）、現状、3学年の技術科で数時間程度扱うだけです（2年生なので受けたことはありません）。そのプログラミングも、scratchなどのビジュアルプログラミングのみが必修となっており、高校に入ってテキストベースの疑似プログラミングを学ぶとき、苦労するのではないか
引き続き現在のCSSを整理するために本書を手に取った。
– 作成したデモ
– https://effulgent-madeleine-e53618.netlify.app/
# スマホ対応しながらPCで幅が広がりすぎないように%で余白を指定する
“`css
.container {
width: 92%; /* 345px/375px */
max-width: 1214px; /* これ以上広がりすぎないようにする */
margin-left: auto;
margin-right: auto;
}
“`
# テーブルの2カラム目まで固定して横スクロールできるようにする
“`css
/* テーブルにwrapperを作る */
.table-wrapper {
overflow: auto; /* オーバーフローするとスクロールできるようにする */
margin-top: 20px;
}
.table th:nth-child(1) {
-webkit-position: sticky;
position: sticky
# はじめに
最近、アコーディオンUIと言えば、`details` `summary`を使った実装がアクセシビリティもバッチリで良いと聞きます。
しかしながら、全ての状況においてこの実装が適しているのかというとそうとも言えないんじゃないか、とふと思いました。
MDNの例や、このタグを紹介されているページなどを見ると、Q&Aや、何かのリストをアコーディオンに格納するために使っているものが多く、実際そのような使い方には特に抵抗感はありません。
しかし、「ページが長くなるから」などのデザイン的意図を含んだ理由で、`section`で囲われるような大きなコンテンツをまるっとアコーディオンの中に格納する場合などは、details（詳細）とsummary（概要）という英語から想像するに、適していないんじゃないか？と感じてしまいます。
“`html:こういうやつは合法なの？
許されざる呪文
死の呪い、磔の呪い、服従の呪文を指す言葉です。
これらの呪いは1717年に使用が禁止され、服従の呪文の支配下だった場合を除
LEGOシティのトレイン(https://www.lego.com/ja-jp/themes/city/train)
のリモコンやアプリでは一つの電車しか操作できないので、
電車を複数台動かそうとすると都度リモコンやスマホを用意する必要があります。
少し調べた限りだとサードパーティでも複数台動かせるアプリなどが見つからなかったので（ご存知でしたら教えて下さい）
作ってみました。
当初スマホアプリで作成しようとしたものの、
[Web Bluetooth API](https://developer.mozilla.org/ja/docs/Web/API/Bluetooth)というブラウザでbluetooth接続するライブラリがあることを知ったので、
インストール不要のブラウザで操作できるものにしました。
完成品は[こちら](https://kametter.github.io/lego_train_bluetooth/)です。
# 内容
対応ブラウザであれば`navigator.bluetooth`クラスが用意されているので、それを使用。
実装自体は[JavaScriptを介
# 複数の半角スペースが1つにトリムされてしまう
“`入力値.
あい うえお
“`
“`表示.
あい うえお
“`
HTMLのルール上、複数の半角スペースは1つにトリムされてしまいます
上記の例では、5つの半角スペースを入力したにも関わらず、表示上は1つに。
実際に入力したスペースの分表示されるようにしたいと思います
# 解決策1：white-spaceでcssをあてる
@juner さんの[ご指摘](https://qiita.com/baby-0105/items/a31d1c989753c9212106#comment-e9fe0482eff4f967fc66)より `解決策1` 追記
`white-space: pre-wrap;`
> 連続するホワイトスペースはそのまま残されます。行の折り返しは、改行文字や
要素のあるときか、行ボックスを埋めるのに必要なときに行います。
jsでゴニョゴニョする必要は無く、割と簡単に正しく表示できました
“`入力値.
あい うえお
“`
“`表示.
あい うえお
“`
この記事の内容は、[CSS-Tricks の記事（「Simulating Mouse Movement」というタイトルのもの）](https://css-tricks.com/simulating-mouse-movement/)で見かけた、「マウスカーソルの軌跡上でパーティクルを発生させる処理」を、p5.js の処理で置きかえた時の話です。
自分が実装した内容を動作させた時の様子は、以下のとおりです。
## 元の処理の内容
今回の参照元で用いた、「マウスカーソルの軌跡上でパーティクルを発生させる処理」は、以下の部分に掲載されたものです。
そこで実装されていた JavaScript のプログラムは以下のとおりです。
:::note
このサイトのお話をしています。
https://konbraphat51.github.io/Text-Labeling/
:::
## この記事は
極性分析や文書分類などで、テキストデータをラベリングしたいタイミング、ありますよね。
そこで、冒頭の手軽のラベリングできるサイトを作りました。
## 実装
### 全体コード
全体コードはこの通りです。
“`html
MysqlのデータをHTML, PHPで表示する（3. Mysqlのデータ書き換え）
お疲れ様です。
真冬でもクーラーガンガンのJuesa09です。
さって今回は、前回第2回から新たに以下機能を追加してみました。
1. 表の状況欄に在庫状況（Y:在庫あり, M:在庫なし）を反映。
2. ”データベースに登録”ボタンを押すと在庫状況Y（在庫あり）でデータベースに登録し、下表にも反映。
3. 下表中の”売れた日”欄に売上日を記入して最右の”売上記録”ボタンを押すと、データベース内の在庫状況をMへ書き換え。また、”売れた日”欄のテキストアエリアと”売上記録”ボタンをクローズする。（下画像中ID8のよう）
コードは以下になります。（データベースのカラムの設定は第2回を見て頂けますと幸いです。）
“`
