【アクセシビリティ】　tabindexを使ってタブキーでフォーカス移動できるようにする方法

こんにちは！
1年目の小川です。

突然ですが、皆さんは**tabindex**を知っていますか？もしくは使っていますか？

今回は、タブキーでのキーボード操作で必要不可欠な**tabindex**についてまとめていきたいと思います。

# こんな人に読んでほしい

* エンジニア
* アクセシビリティに興味がある方
* サイトやアプリのアクセシビリティ対応に重力したい方

# tabindexとは？
**tabindex**とは、タブキーで操作するときに、フォーカスが当たるかどうかを指定するときに使うものです。
パソコンを使う人全員がマウスで操作しているわけではなく、キーボード操作のみで画面の情報を収集している人がいます。
そのような人たちは、タブキーを使って、文章や項目を移動させることがあります。
視覚障害があり、スクリーンリーダー（音声読み上げ）を使う人もその一人です。

# どうやって使うの？
このtabindexは指定する数字によってフォーカスが当たるかどうかが変わってきます。

* tabindex=”0″ 記載した順番にフォーカスが当たる
* tabindex=”1″ 数

GASを触っての雑多なまとめ（基礎知識）

# 基本知識関連
GAS (Google Apps Script) について何も知らなかった私が簡単な開発を通してポイントだなと思った点を挙げております。

## 1. GAS の “スプレッドシート” と “シート” という概念
**スプレッドシート” と “シート” という概念があるが別物**

:::note
* 「スプレッドシート(Spreadsheet)」 == 「Excel における”ブック”」
* 「シート(Sheet)」 == 「Excel における”シート”」
:::

* 私はこの点を把握していなかったため、 `.getActiveSpreadsheet()` のようなメソッドと出会った時に「対象がファイル自体なのかシートなのか」が混乱しました

## 2. Webアプリを公開(デプロイ)できる
こちらの資料が画像が多く分かりやすいです

https://www2.kobe-u.ac.jp/~tnishida/programming/GAS-02.html

* 「GAS でフロントサイド＆バックサイドを実装」「スプレッドシートを DB」として１つの Web アプリ

CSS設計について整理してみる①　～なぜCSS設計が必要になったのか～

# 本シリーズについて
こちらの「CSS設計について整理してみる」シリーズは、完結できるかわかりませんが、少しずつ進められたらと思っております！（私個人の備忘録的な内容です）

内容は、「CSS設計完全ガイド（半田惇志 著）」の内容をもとに執筆させていただいております！（詳細や、筆者が伝えたい正確な内容については書籍を読んでいただけるとよいかと思います。）

https://gihyo.jp/book/2020/978-4-297-11173-1

では参りましょう。

# なぜCSS設計が必要なのか
HTMLやXMLでの文書構造の中にスタイリングが当てられており、文書（HTMLやXML）とスタイルが混在しているのは、好ましくなく、また管理も大変であるということからCSSが提唱されたそうです。

例）CSSが使用される前の例
“`html

こちらはCSSが使用される前のスタイルの当て方です。

“`

このようなスタイルをあてると、スタイルを変更したい際には一つずつ修正する必要があるので大変ですよね…

今となっては

JavaScriptでHTMLパース【DOMParser html】

“`js
await fetch(”).then(r=>r.text()).then(html=>new DOMParser().parseFromString(html,’text/html’))
“`

例

“`js
await fetch(‘https://example.com’).then(r=>r.text()).then(html=>new DOMParser().parseFromString(html,’text/html’))
“`

“`js
const doc = await fetch(‘https://example.com’).then(r=>r.text()).then(html=>new DOMParser().parseFromString(html,’text/html’))
console.log(doc.querySelector(‘a’).href)
“`

https://developer.mozilla.org/ja/docs/Web/API/DOMParser

iOSでサービスを見た時にinputタグでのズーム対策

## 原因

– iOSデバイスでサービスを閲覧して16px以下で指定している`input`タグのフォーカス時にズームされてしまうみたいです。

## 対策

– 今回の行った対策として、`meta`タグの`viewport`の中身に`maxmum-scale=1.0`を指定しました。しかし、参考記事にもよるとこの対策ではアクセシビリティ違反になるみたいです。今回、私が行っていた実装の中身を見ると`meta`タグの`content`属性の中身を見ると`width=375`が指定されていました。その副作用なのか、`initial-scale=1.0`がなかったのでそちらを指定したら改善されました。

## 参考記事

https://zenn.dev/rhirayamaaan/articles/f0209ad6574ed4

https://qiita.com/skwbr/items/b285cc312587c73a4812

ChatGPTを使用して作成したブロック崩しの中を読んでみる。第1回_html編

## 初めに
先日、ChatGPTにブロック崩しゲームを作成してもらい、Webページに埋め込むことに成功しました。
機能的には問題なく動いていますが、私自身がHTML、CSS、JavaScriptに関する知識が不足しているため、コードが完全にブラックボックス状態です。
コードを自分で理解し、何がどのように動いているのかを読み取れるようにするために、基礎から学び直すことにしました。

HTML: Webページの構造を定義し、どの部分にどんな要素が配置されているかを知る。
CSS: デザインやレイアウトを担当し、見た目をどのように調整しているかを理解する。
JavaScript: ゲームの動作を制御し、どのような条件でボールやブロックが動いているのかを把握する。

## 今回の目的
**HTML, CSS, JavaScriptの理解**
**HTML**: Webページの構造を定義し、どの部分にどんな要素が配置されているかを知る。
**CSS**: デザインやレイアウト、見た目をどのように調整しているかを理解する。
**JavaScript**: ゲーム動作の制御、どのような条件でボール

css list-style-position list-style-image 編

# リストマーカーの表示位置を変更する方法
list-style-positionプロパティを使うことでリストマーカーをどの位置に表示するかを指定することができます。
指定方法は2つです
– outside リストマーカーをボックスの外側に表示
– inside リストマーカーをボックスの内側に表示

今回作成したコードと見本画像です。わかりやすいようにliタグに背景色をつけています。一目でリストマーカを含むか判断できると思います

“`indexx.html

1. リスト1
2. リスト2
3. リスト3

css リストの作り方 list-style-type プロパティ

# リストのスタイルを指定
リストの項目の先頭に表示されるマークは”リストマーカー”と言われています。
リストマーカーの指定は”list-style-type”を使います。
リストの作成には
– olタグ Ordered List 順序ありのリスト
– ulタグ Unordered List 順序なしのリスト
これら2つを使います。

## olタグの使い方

“`index.html

1. リスト
2. リスト2
3. リスト3

css 文字の太さ行の高さ文章の配置

# 文字の太さを指定 font-weightの使い方
文字の太さを指定するには２種類の方法が存在します
– 1 キーワードで指定
– normal 通常の太さ
– bold 太字
– lighter 1段階細め
– bolder　１段階太め
– 2 数値で指定
1~1000の数値で指定することができます。normalと400は同じ太さです。boldと700も同じ太さです。

以下が今回作成したコードです。

“`index.html





標準の太さです

太さ400

css 線を引くborderプロパティ

# borderプロパティの使い方
borderプロパティを使用することで線の色や種類や太さを調整することができます

– border-width 太さを設定
– border-style 線の装飾を設定
– border-color 色を設定

## border-widthプロパティ

コードの例がこちらです
“`index.html

細い線

普通の線

太い線

“`
“`style.css
.width_1{
border-width: th

css 余白の設定の仕方

# 余白の設定の仕方
余白の設定には外側のmarginと内側のpaddingがあります。また、marginとpaddingの間の枠線のことをborderといい、余白を設定することができます。

## padding margin の使い方
余白の記述の仕方は複数あります
– margin
– 個別に指定
– margin-top 上
– margin-bottom 下
– margin-right 右
– margin-left 左
– プロパティのみで指定
– margin: 20px; 4辺
– margin: 20px 30px;上下 左右
– margin 20px 15px 30px;上 左右 下
– margin 20px 15px 30px 15px;上 右 左 下
– padding
– 個別に指定

– padding-top: 上
– padding-bottom: 下

css 幅と高さの指定 width height プロパティ

。# 幅と高さの指定

幅と高さの指定にはそれぞれ 幅widthプロパティ 高さheightプロパティを使用します。
インライン要素と呼ばれるには使うことができません。
aタグspanタグstrongタグimgタグ

今回は大きさがわかりやすいように背景色を指定します。
数値を指定する方法とautoを指定する方法があります。
autoを使うことで関連するプロパティを基準に大きさを指定します。
リストにautoを設定したため、幅は親要素、高さはリストを基準に指定されました。

“`index.html

高さや幅の大きさをこれから指定します

背景画像の表示位置を指定する方法 background-positionプロパティ

# background-positionプロパティの使い方
背景画像の表示位置を指定することができます。

## 表示の仕方
表示の仕方はキーワードと数値で指定することができます。何も指定しない場合左上がデフォルトの表示位置になります。

– キーワード
– 横方向に
– left
– right
– center
-縦方向に
– top
– bottom
– center
– 数値
– px
– rem
– %
–
## 実際に記述
今回は右下に表示する方法とpxを使って表示するcssを紹介します。

### キーワードで指定 右下に表示

background-position: right bottom; この記述で背景画像を右下に表示できるのですが何故か縦軸方向に center bottomを指定すると上側に移動する不具合が生じていました。
height: 100vh;この記述をbody要素に追加し表示領域を確保することで解決しま

css 背景画像の設定の仕方

# background-repeatプロパティ
background-image:url();と記述することで背景画像を設定することができるのですが、繰り返し表示を特に指定しないと無限に繰り返しをします。
background-repeatプロパティを使うことで繰り返す方向を指定することができます。
指定方法は４種類です
– repeat
– 特に指定せずに繰り返す
– repeat-x
– 横方向に繰り返す
– repeat-y
– 縦方向に繰り# background-repeatプロパティ
background-image:url();と記述することで背景画像を設定することができるのですが、繰り返し表示を特に指定しないと無限に繰り返しをします。
background-repeatプロパティを使うことで繰り返す方向を指定することができます。
指定方法は４種類です
– repeat
– 特に指定せずに繰り返す
– repeat-x
– 横方向に繰り返す
– repeat-y
– 縦方向に繰り返す
– no-repeat
– 繰

lightbox2 cdnjs形式で使う

## ライブラリで簡単に
*参考YOUTUBEサイト*

– index.htmlとstyle.cssとimagesを用意する。
– リンクからzipファイルをダウンロードしてその中にあるimagesをそのままフォルダに入れる。(imgはsmallとgibの２種類が用意されていた)
https://github.com/Shin-sibainu/image-gallery-with-lightbox/blob/main/style.css


– htmlとcssともに雛形を作成
“`

HTML、CSS、jQueryで目が動ける猫を作りましょう

# 目がカーソルの方向に動く猫
HTML、CSS、jQueryで、目がカーソルの方向に動く猫の作り方を紹介します。
## HTML
まず、HTMLの書き方を紹介します。耳、顔、目、鼻、ひげなどいくつかのdivを作ります。最後にjQueryライブラリとJavaScriptファイルを読み込みます。jQueryはJavaScriptを簡単に書けるようにするためのライブラリで、HTML文書の操作、イベント処理、アニメーション、Ajax通信などを簡単に実装できます。
“`ruby:qiita.rb

HTMLで動くレシート風ホームページを作った話

ある日、レシートを見て思いました。

###### 「レシートってかあいいな……」

という訳でレシートみたいなレトロでかあいいホームページ作ってみました❕❕♡
序でになんか寂しかったので動かしました（

↓すごくすごく頼りにしてるサイト
https://liveweave.com/

~~~ruby:HTML