GitHubPagesで404ページを作る方法

どうもAtsu1209です。
今回はGitHubPagesで 404エラーページを作る方法を書いて行きます。

# 404エラーとは
404エラーは「クライアント側はサーバーに接続できたけど、クライアントが要求しているものがサーバーに見つからなかった」
簡単に言うと「サーバーへいらっしゃい。いきなりで悪いけどあなたの見たいページうちにはないよ」ということです。
GitHubPagesに限らずいろいろなところで404エラーのときに表示させるページを作ることができます。

# 作り方
GitHubPagesで404ページを作るのはとても簡単で、
`404.html`というHTMLファイルを作って入れておくだけです。
例として私のホームページ(GitHubPagesで管理)を見てみましょう

##### (かなり整理しました。 整理の話は下

hiddenパラメータとは

>＜input> 要素の hidden 型は、`フォームの送信時にユーザーが見たり変更したりすることができないデータをウェブ開発者が含めることができます`。例えば、`現在注文中又は編集中の ID や、一意のセキュリティトークンなどに利用`できます。隠し入力欄はページの表示で完全に非表示になり、ページの中で表示させる方法はありません。

https://developer.mozilla.org/ja/docs/Web/HTML/Element/input/hidden#:~:text=%3Cinput%3E%20%E8%A6%81%E7%B4%A0%E3%81%AE%20hidden%20%E5%9E%8B%E3%81%AF%E3%80%81%E3%83%95%E3%82%A9%E3%83%BC%E3%83%A0%E3%81%AE%E9%80%81%E4%BF%A1%E6%99%82%E3%81%AB%E3%83%A6%E3%83%BC%E3%82%B6%E3%83%BC%E3%81%8C%E8%A6%8B%E3%81%9F%E3%82%8A%E5%A4%89%E6%9B%B4%E3%

アクセシビリティを意識したタブUI

はじめに

タブUIを初めて制作するにあたってインプットの量が初学者の自分にとって多くまた複雑でした。

そのため、今回理解に時間がかかったところを未来の自分にもう一度思い出せるためタイムカプセルとして記録しておきます。

つまずきポイント1 ｜　タブとパネルの紐付け

それぞれ役割の説明

-タブの仕事はタブパネルを制御する役割。
-パネルはどのタブの内容なのか示す役割。
それをaria-ほにゃららとidでそれぞれ紐付ける必要があります。

要点は以下の通りです。

・タブの”id”はパネルの”aria-labelledby”　🌕🌕🌕
・パネルの”id”はタブの”aria-controls”　⭐️⭐️⭐️
“`html:test.py

アクセシビリティに必要なものとは

# はじめに []()
HTML解体新書にてアクセシビリティを考慮した開発が必要であると知った。
そして実際にどのような考慮が行われているのか気になった。そこで現在公開されているいくつかのWebサイトを対象に、Tabキーのみで閲覧し、アクセシビリティの具体的な実装内容を確認した。

# 調査したサイト []()
– Qiita
– Zenn
– MDN
– Youtube
– その他数社のホームページ

# アクセシビリティに必要な実装 []()
調査の結果、Tabキーのみでもマウスと遜色なく閲覧できるサイトでは以下のことが実装されていた
1. メインコンテンツへのスキップリンク
1. マウス操作時と同様の画面変化
1. 見出し・小見出しへのフォーカス

## 1.メインコンテンツへのスキップリンク []()
同ページのメインコンテンツへフォー

orderプロパティで並び順を指定する

# はじめに
学んだことを忘れないように備忘録として残しています

## orderプロパティとは
flexやgridで並び替えた要素を自由に並び替えができるプロパティです。
通常はHTMLで記述した順序がそのまま表示に反映されますが、orderプロパティを使うと、要素ごとに独自の順番を指定でき、異なる順番で表示させることが可能になります。

## 使い方
例.１〜５の箱をフレックスで横並びにして、１,２,４,５,３順番に並び替える。

### 【通常時】

【HTML】
“`html

box1

box2

検索内容の履歴を確認できるGoogle検索風サイト

## グーグル検索の履歴は検索するときに参考にしたい
過去に何を検索したか忘れることが多い。
検索した内容が履歴として、すぐに確認できれば検索が楽になる！
そんなことを思いChatGPTに検索履歴を表示できるGoogle検索風サイトを生成してもらった！
ChatGPTに生成してもらう前に、構成は事前に考えていたりいなかったり(・∀・)

### 構成図

### HTML
“`html

複数行もOK！2行以上のインライン要素のunderlineをアニメーションさせる方法

CSSで複数行のテキストに対してunderlineアニメーションを実装する方法を解説します。従来、複数行のインライン要素に対するアニメーション付きunderlineの実装は困難とされてきましたが、CSS `background`プロパティを活用することで実現可能です。

## 実装のポイント

1. `display: inline`の使用
2. `background`プロパティによる下線の表現
3. `linear-gradient`を使用したアニメーション効果
4. 適切な`transition`の設定

## 基本的な実装

“`css
/* ベーススタイル */
.hvr-underline {
display: inline;
background: linear-gradient(to top, currentColor 2px, transparent 99%) no-repeat;
transition: all 0.5s ease-out;
}
“`

## アニメーションパターン

### 1. 左からのunderline

“`css
/* 初

Node.jsでログインサーバーを作る – 2

# 初めに
今回は、前回のログインサーバーを改造します（？）
# 前回とちがうところ
前回は一つのユーザーまでしか認証ができませんでしたが、今回はユーザーデータをjson形式で管理して複数のユーザーの認証ができるようにします

# ファイル構成
今回のファイル構成は以下の通りです。
“`
—|–public |
|–main.html
|–style.css
|–main.js

|–Server.js
|–userdata.json

“`

# 準備
まず、以下のコマンドをcmdで実行して、ログインサーバーのフォルダーに移動ください
“`
cd C:\Users\\Downloads\
“`
※仮のpathです。実行するときはC:\~の部分を作成したフォルダのpathに変更してください

次に、以下のコマンドを入力します
“`
npm install express cor

【HTML】正確な日時を機械に対して伝える方法

``要素を使用することで機械に対して正確な日時を示すことができm

## ``要素とは

``要素は日付や時刻、経過時間などを表します。
画面に表示される日時情報は人間が読みやすいようにしつつ、`datetime`という属性を使用して正確な日時を機械に対して伝えられます。

## 使用方法
``要素は、以下のように使用します。

“`html
2023年10月1日 14:30
“`

### `datetime`属性
`datetime`属性は、機械が理解できる形式で情報を提供します。
以下のような書式でなければなりません。

**有効な年の文字列**
– `2011`

**有効な月の文字列**
– `2011-11`

**有効な日付の文字列**
– `2011-11-18`

**年のない有効な日付の文字列**
– `11-18`

**有効な週の文字列**
– `2011-W47`

**有効な時刻の文字列**
– `14:54`
– `

【HTML】HTMLの基本③　情報のグループ化について

前回は基本的に使用されるタグについての解説をしました。
今回はWebページの情報のグループ化についてまとめていきます。

ここでのグループ化ですが、
**Webページのbody要素内においての情報を分類すること**を指します。

このグループ化を行うことの何が良いかというと、以下の２点があげられます。

・どんな情報が内容に記載されているかが明示されることでコードの可読性が高くなる
・CSSを用いた際にまとめてスタイルを適用できる

これらを踏まえて説明していきたいと思います。

## グループ化に使用されるタグ

### \

\

…主要なコンテンツ領域を意味します。このタグは１度のみ使用できます。
　下記の例に挙げられる補助的コンテンツは

タグ内に含めないようにします。
　・\

\

　・\

　・\

　・\

### \

…HTML内において、サイト内の主要なリンクやメニュー

意味が不明電卓②

## 全体のコード
“`html

不思議なカラフル電卓

```
- **``部分**：
- ここではペー

Google script でHTMLを作成し表示する方法

1. **Google Apps Scriptのプロジェクトを作成する**:
- Google Driveにアクセスし、左上の「新規」ボタンをクリックして「その他」→「Google Apps Script」を選択します。
- 新しいスクリプトエディタが開きます。

2. **HTMLファイルの作成**:
- スクリプトエディタの左側メニューにある「+」アイコンをクリックし、「HTML」を選択します。
- 「ファイル名」に「index」と入力し、OKをクリックします。

```html

Hello, World!

これはGoogle Apps Scriptで表示されるサンプルのHTMLページです。

```

3. **Apps

初めてホームページを作る方へ

### 1. **基本的なHTMLのテンプレート**
基本的なHTML文書の構造です。これはWebページを作成する際の出発点として使えます。

```html

ウェブページのタイトル

真夏の夜の淫夢で解説する HTML　ほぼネタです

# 初めに
Qiita投稿失礼するゾ〜（謝罪）
この記事では、真夏の夜の淫夢を用いてHTMLを使ったWebページ作成を解説していこうと思う
ちなみに分かりやすい解説は王道を征くGoogleで「HTML書き方」などで調べた方がいいゾ（迫真）

# 何となくHTMLタグの説明
最初にタグの説明をするゾ
h1~h6は、見出し
pは文章を書くときに使う
写真を貼るときはimg src="写真のファイル名" alt="画像が表示されない場合に表示する文章を入れる"ではれる
リンクを貼りたいときは、 a herf="リンク先"
改行をしたいときはbr
今のところはこれでいいと思う
「難しすぎィ」と思うかもしれないかもしれいけどやっていけばわかるようになろと思う
そしたらこれらのタグなどを使ってページを作っていこうと思う
# HTMLを書いていく
急に書いていくと言われても「おじさんやめちくりー」と言ってるであろう淫夢厨がいると思うので、丁寧にやっていく
最初にHTMLなどのファイルを入れるフォルダを作成する（ファイルの名前は基本英語の方がいいゾ←当たり前だよなぁ）
ファイルを作ったら次にコードエデ