f@ctor

今さら聞けないHTML　2022年11月14日

今さら聞けないHTML　2022年11月14日
目次

英語の発音、大丈夫ですか？人知れずこっそり確認できるアプリです。　「なんで忘れるかなぁ俺の格言。それならつくる！《企画編③》」

## 音声認識は進んでいる
競馬で負けた時に作った勝負事の格言、せっかく作っても有効に使われたことが無く、それを改善するためにスマホアプリを作ろうとしています。
　　　[NOTE記事：なんで忘れるかなぁ俺の格言。それならつくる！《企画編①》](https://note.com/xedge748hagi/n/n1352db87dae7)
　　　[Qiita記事：芸術は爆発だ！私の頭もだ！やり場のない怒りを芸術の域に昇華させる
　　　アプリです。「なんで忘れるかなぁ俺の格言。それならつくる！《企画編➁》](https://qiita.com/Xedge748hagi/items/7f2c0e7bff17fc38198b)
格言のような文章をパソコンではなくてスマホで手入力するのは苦手だなと思い、音声入力ツールを試しました。思ったより間違えずに聴き取って書き出してくれます。ソースコードを見ていたらこんな設定が。
　　　　　　![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2887131/50d0

元記事を表示

【アクセシビリティ】WAI-ARIAを完全に理解した。

![image1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/1f73fdb5-68a0-99f8-2e64-d7d46a63e9ed.png)
## はじめに
みなさんは、WAI-ARIAを知っていますか？

私は、スクリーンリーダーでも読めるようにするため、`aria-label` を使ったり、
`role`を使って、要素の役割を明確にしたりなど業務でよく使うものは、理解しているつもりです。

ただ他にどんな種類のWAI-ARIAがあるか、その役割はなんなのか、
いまいちわからないなと思っていませんでした。

なので今回は、調べたWAI-ARIAについて、まとめたので、ぜひご覧ください。

私の理解度は↓この位置です。 ご注意ください。

:::note warn
1.完全に理解した　← 今ここ
2.なにもわからない
3.チョットデキル
:::

## WAI-ARIA
### WAI-ARIAとは？
WAI-ARIAは、**Web Accessibility Initiative

元記事を表示

デジタル庁公開のデザインをhtml/cssに落とし込んでみた。

# はじめに

デジタル庁が公開したデザインシステムがよさそうなデザインでしたので、適当に遊ぼうかと思いました。
html/cssで公開してくれればすぐに使いやすいと思ったんですが、どうやらFigmaでしか配っていない。。
ということでhtml/cssに落とし込んでみました。

https://www.digital.go.jp/policies/servicedesign/designsystem/

## 注意事項

– 趣味程度に作ったものを、使いたい人がいればどうぞというものです。
– 細かい部分は間違っていることもあるかと思います。(ラジオボタン難しかったので、何とか再現した感じです。)
– 自分用に目的もなくつくっていましたので、命名等のポリシーもめちゃくちゃです。許してください。
– 大変つかれましたので、厳しいコメントは受け付けません。
– 気が向いたら、もう少しきれいにするかもしれません。

## 完成概要
ページとしてはこんな感じ

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws

元記事を表示

パワーワードをバトルさせるアプリをレベルアップしてみた～Ver2～ #JavaScript #WebSpeechAPI

### 1.先日作成したアプリをレベルアップしたい
先日、パワーワードをバトルさせ勝敗を決定するアプリ **『ぱわーわーどばとる』** を作成しました。
結構いろんな方に見ていただいて、私が作成したQiita記事の中では一番参照されています。
せっかくなので、作成したアプリをレベルアップすることにしました。

※前回作成したアプリの詳細はリンク先を参照いただけると嬉しいです。
**【前回記事リンク】**

https://qiita.com/kana87/items/18de38997edf64c09086

### 2.「ぱわーわーどあぷり」とは
レベルアップしたアプリはリンク先にて公開しています。

https://prismatic-cheesecake-e864d4.netlify.app

#### 3.アプリの利用ガイド
1.入力欄にバトルさせたいパワーワードを入力する
2.「たたかわせ

元記事を表示

【HTML+CSS】文字の前後のみに下線を引いたタイトルを作る

## はじめに
はじめまして．qiita初投稿になります．
現在，自身のWebサイトをリニューアルしようとしているのですが，そのなかで考えた「文字の前後のみに下線を引いたタイトル」の実現に少し手間取り，またそれに類似したサンプルコードも見当たらなかったため，備忘録的にまとめておきます．
## 作りたいもの
![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2927950/d4c5784c-3fab-158b-0dc3-7dcd04f894dd.png)
こんな感じで，文字の前後に下線を引きたい．
## 最初に試したこと
疑似要素に下線を引いた．

Firebase, 生のHTML(Java Script)を用いた簡単な開発環境をつくる

# はじめに
私がはじめてデータベースに触れたのはFirebaseである。
ネットゲームのようにDBはネット上に存在することが当たり前だと思っていたからである。
その中でFirebaseはとても使いやすかった。
そのおかげでJava Script, DBに対する理解度が深まって他の言語に対する抵抗もかなり減る結果になった。
ここでは初心者が簡単にDBを用いたホームページなどを作るとき、基本的な設定がわかるように、書いておく

# 環境
window 10
node.js 18.12.1
Firebase 8.6.5

# 基本設定

## Firebase

Firebaseにログインし、直感的にわかるように、使ってみる → プロジェクト追加をする

https://firebase.google.com/

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2821152/466642a8-e7b2-b9f7-4238-7116c65e96a2.png)

使ってみるをクリックし、プ

元記事を表示

【2022年】YouTube埋め込みの全パラメータを一覧にしてみた

今回はYouTube動画の埋め込み時に使用出来るパラメータを調査しました。
各所パラメータの紹介がされていますが、中にはサポート停止で使用出来ないものもあり、なかなか使いにくいなと感じています。
そこで、2022年現在におけるYouTube動画埋め込みにて使用可能なパラメータを一挙にまとめていきたいと思います。

# YouTube動画の埋め込み方法
(1) 動画画面の「共有」をクリックする
(2) 「埋め込む」をクリックする
(3) 下記のようなiframeタグに囲まれたコードを埋め込みたい箇所にコピペする
““
# YouTube動画のパラメータとは？

端的にいえば、**埋め込み動画をカスタマイズするための文字列**のことです。

例えば、上記のコードで言えば、
“