今さら聞けないHTML　

CSSからサヨナラできる！？Bootstrapを使ってみた！

# はじめに
本記事は、[アイレット株式会社 新卒 Advent Calendar 2023](https://qiita.com/advent-calendar/2023/iret) の10日目です！

今回はWebアプリを作成する際に、**UIフレームワーク**「[Bootstrap](https://getbootstrap.jp/)」を使用した件について、お話しします。

### 使用の背景
1ヶ月で多くの人々が良いと思って貰えるようなアプリを制作してプレゼンする、という研修がありました。
私は、その研修の中でWebアプリを制作するため、始めの1週間は仕様の策定、次の2週間でコーディング、最後の1週間で不具合修正と予備日を設ける計画を立てたので、約1週間でフロントエンドを制作する必要がありました。

そこで、フロントエンドの中でも特に時間がかかる、**デザイン**の負担を減らすため、Bootstrapを使ってみました！

# 1. Bootstrapとは？
![bootstrap-logo-shadow.png](https://qiita-image-store.s3.ap-

webページに雪を降らせる

HTML と CSS だけで webページに雪を降らせます。
先に例をだして、あとで解説をします。

## 例１

See the Pen
snow1 by okm-uv (@okm-uv)
on

【アクセシビリティ】アクセシビリティを意識したディスクロージャの作り方

## はじめに

みなさんアクセシビリティを意識して開発できていますか？

必要なところに`role属性`を記述したり、`tabキー`でフォーカスができるようにしたりなど、意識しないといけないことも多いです。
そのため、アクセシビリティを完璧にやろうとするのは一苦労です。

ただ、コンポーネントごとに区切って、アクセシビリティを理解しておけば、実装するタイミングに思い出しやすく、アクセシビリティも意識しやすいと思います。

そのため、この記事では「**ディスクロージャ**」に焦点を当てて、アクセシビリティを意識したディスクロージャの実装方法とディスクロージャで意識した方がいいアクセシビリティを解説しようと思います。

## アクセシビリティを意識したディスクロージャの仕様
### ⚪︎ ディスクロージャとは？
ディスクロージャは、コンテンツを折りたたんだり（非表示

WebGL で色々な表現に挑戦する – シェーダーを別のファイルに移す

## この記事の概要

前回の記事ではウィンドウのサイズにあわせて要素を拡大し、リサイズ時も追従するようにしました。

https://qiita.com/xrxoxcxox/items/8b226078e7605276fcb7

今回はシェーダーファイルを上手く扱うための方法についてです。
まだ表現力をアップするには至りません……。

## 現状の確認

現状のコードを抜粋すると、こういった部分があります。

“`typescript
// シェーダープログラムの作成
const vertexShaderSource = `#version 300 es
in vec2 position;
void main() {
gl_Position = vec4(position, 0.0, 1.0);
}`;

const fragmentShaderSource = `#version 300 es
precision mediump float;
out vec4 outColor;
void main() {
outColor = vec4(1.0, 0.0, 0.0, 1

アクモンWebページ作成

HTML CSS練習！！

今日は練習として僕の好きなアーティストのWebページを作ることにしました！！



今回はヘッダーのロゴを押すと公式サイトへ遷移するようにしたのとaboutを押すと下のAboutに飛ぶようにしました！！

実際にコードを書いていくとどのように作られて行くのか分かりますしより記憶に定着しますね！！

明日も完成に向けて頑張ります！

Pug / SCSSでスイカゲームをオマージュしたHTMLゲームを作ったよ！

こんにちはうえむーです！
今回はPug / SCSSでスイカゲームをオマージュしたHTMLゲーム作成したことについてお話しします。
Meguro.cssでCSSに関するLTを行いました。

## HTMLゲームを作ろうとしたきっかけ

HTMLゲームを作ろうとしたきっかけは、ConnpassでMeguro.cssのイベントを見つけて、
CSS好きなので面白いCSSアニメーションに関するLTをやりたいのがきっかけです。

https://megurocss.connpass.com/event/300400/

でも、最初は何を作ろうか決められず、もくもく会の交流会で主催者と何を作ればいいのかを相談して
「今年流行っているものでいいのでは？」とアドバイスをいただき、スイカゲームをオマージュしたHTMLゲームを作ろうと決めました。

## 制作の流れ

HTMLゲームを作るのはいいがLT大会まであと2週間しかない！
と思い色々と準備して実装しました。

### 絵コンテを作る

まずが、アニメーションの動きをイメージしやすくするために絵コンテを作成しました。
絵コンテは映像作品の撮影前に用

JavaScript 第6回 HTMLのスタイル(ID)はクラス(CLASS)より優先

# はじめに
今回はHTMLのスタイルの変更について整理したいと思います。
というのも、モーダルウィンドウを作りたいと思ったからです。
そのために、スタイルが必要だということがわかってきましたので、スタイルに取り組もうと思います。
クリックしたらウィンドウが開いて、またそれを閉じるみたいな、よく広告が画面にでてくるアレです。
そのためにスタイルが必要なんだなということで、試していきたいと思います。

# 今回実施する内容
HTMLにスタイルシートを設定して、JavaScriptでスタイルの変更を実施します。
HTML要素に記載済みのdiv要素に対して、スタイルの変更をおこないます。
スタイルの設定はクラスの設定よりも優先されるということがわかりましたので、ここにまとめておこうと思います。

# ソースコード(Git Hub)
htt

GET・POST使い分け

## 概要
– 理解の確認として、振り返りもかねてGET、POSTの使い分けをまとめる

## GET・POST使い分け
### 参照の場合
>GET メソッドは、［ 現在の，ターゲットリソース用に選定される表現 ］を転送するよう要請する。 **GET は、情報を検索取得する主たる仕組みであり，ほぼすべての処理能 最適化の力点が置かれる所である。** よって、誰かが［ HTTP を介して識別できる何らかの情報を検索取得する ］ことについて話すとき，たいていは GET 要請を為すことを指している。

– GETメソッドは、参照のみに用いる
– GETメソッドは副作用がないことが期待される

### 秘密情報の場合
>9.4. URI 内の敏感な情報の開示
URI は、セキュアなリソースを識別するものであっても，［ 共有され, セキュア化されないもの ］になるように意図されている。 URI は、［ ディスプレイに示される／ ページの印刷時に各用紙に刷られる／ 様々な未保護なブックマークリスト内に格納される ］ことが多い。 **したがって，［ 敏感な／個人識別可能な／開示されるリスクがある

【初心者向け】SEO対策に有効なHTMLタグの使い方って？ SEOライターが解説

## はじめに
この記事では、SEO対策初心者の方に向けてSEO対策に有効なHTMLについて解説します。

「こんなこと当たり前に知ってるわ！」
といった内容もありますが、あくまで初心者の方に向けて書いています。経験者の方はもう一度見直す程度で見ていただけますと幸いです。
私自身もまだまだ初心者なので、この記事に間違いがあればご指摘いただけると幸いです。
## そもそもSEOって何？
SEOとは、Search Engine Optimizationの頭文字をとった略語であり、日本語で言うと、検索エンジン最適化と言います。検索順位によってCTR（クリック率）が大きく異なってきます。
では、検索順位によってどれくらい変わってくるのでしょうか？
| 検索順位 | CTR |
| —- | —- |
| 1位 | 13.94% |
| 2位 | 7.52% |
| 3位 | 4.68% |
| 4位 | 3.91% |
| 5位 | 2.98% |

>出典： [CTR Research Study](https://www.seoclarity.net/mobile-desktop-

NS高キャンパスの図書管理システム開発！

# Flaskを用いたCPの「図書管理システム開発」の概要

### 制作デモページ
制作中のものになりますが、９割型完成しています。
ngrokを使用したデモになるので、自宅でProgramを動かしてないときは止まります。
基本的にこの記事公開中は動かしっぱにしておく予定ですが、メンテナンスの影響で停止させることや想定外のエラーで停止する可能性があります。
データベースなどは、テスト用のデータなので、アカウント登録などは自由にやっていただいて大丈夫です。
https://frank-sole-boss.ngrok-free.app/

### 制作意図
筆者が通学するNS高等学校”F”キャンパスには３００冊以上の先輩や歴代のキャンパス長が寄贈していただいた本が多くあり、もっと管理を確実にしてより多くの人ひとに本の魅力を伝えたいとい

audioタグの各OS・ブラウザ別UI・レスポンシブ仕様まとめ

## はじめに

こんにちは。
最近、新規事業系の部署から異動して朝デジ事業センターCX(カスタマーエクスペリエンス)部に所属している市野です。今は週刊英字新聞Asahi Weeklyのデジタル版であるAsahi Weekly DIGITAL(以下、AWD)の開発をしています。

AWDではHTMLのaudioタグを使って英語音声を再生できるようにしています。ただ、このaudioタグがなかなかの曲者、、、OSやブラウザによって見た目が異なることに加えて、レスポンシブの仕様が異なります。そこで今回はこの仕様について簡単にまとめてみます。

※本記事の内容はは全て執筆時点(2023/12/08)のものです。

## Audioタグのcontrols属性

Audioタグは `contorols`属性を

ロボコンの得点自動集計システムを作った件 (ショート版)【WRO Scoring System】

# 目次

| 章 | タイトル | 内容 |
|:-:|:-:|:-:|
| 1 | [はじめに](#1-はじめに) | この本記事について |
| 2 | [WROとは](#2-WROとは) | WROについて説明 |
| 3 | [得点集計システムとは](#3-得点集計システムとは) | 作製したシステムについて説明 |
| 4 | [システム要件・システム構成](#4-システム要件-システム構成) | システムの具体的な仕様について |
| 5 | [完成したシステム](#5-完成したシステム) | スクショを交えながらシステムを紹介 |
| 6 | [まとめ](#6-まとめ) | まとめ |

# 1. はじめに

この記事は、2023年12月25日公開予定の [小中高生向けロボコンWROの得点集計システムを決勝大会まで持ち込んだお話【WRO Scoring System】]()のショート版記事です。

↑の記事ですが、書きたいことを書きすぎて分量がとんでもないことになってしましました… **(ざっと2万字程度…)**
そこで、初めての方にもサラッと読んでまずは興味を持ってい

【フォーム制作】バックエンドからの要望に基づいたコードの書き方

# はじめに
弊社ではフロントエンドとバックエンドが分かれているので、組み込みがあるときにはHTMLデータを共有して制作してもらいます。
今回は備忘録も兼ねて、実際にあったバックエンドからの要望に基づいたコードの書き方をまとめました。
あくまで弊社バックエンドとのやりとりに基づいているので、他社様だとやり方が違う部分があると思いますが、何か少しでも参考になる部分がありますと幸いです。

# コードの書き方
## nameやvalueは基本的に空でOK
バックエンド側で管理しているデータベースの値が入るので、基本的に場所だけ用意すればOKです。
動作確認等で`name`を設定する必要がある場合は、その旨をコメントで残すようにしています。

“`html:index.html

オプション1オプション2オプション3

// 動

【アクセシビリティ】アクセシビリティを意識したモーダルの作り方

## はじめに

みなさんアクセシビリティを意識して開発できていますか？

必要なところに`role属性`を記述したり、`tabキー`でフォーカスができるようにしたりなど、意識しないといけないことも多いです。
そのため、アクセシビリティを完璧にやろうとするのは一苦労です。

ただ、コンポーネントごとに区切って、アクセシビリティを理解しておけば、実装するタイミングに思い出しやすく、アクセシビリティも意識しやすいと思います。

そのため、この記事では「**モーダル**」に焦点を当てて、アクセシビリティを意識したモーダルの実装方法とモーダルで意識した方がいいアクセシビリティを解説しようと思います。

## アクセシビリティを意識したモーダルの仕様
### ⚪︎ モーダルとは？
モーダルは、通常のウインドウにオーバーライドする形で表示するウインドウです。
そのため、モーダ

streamlitでjavascriptからpythonへデータを受け渡したかったが情報がなかったので作れるようなテンプレートを作ってみた

streamlitで現在の座標を取得しようと思ったのですが、軽く調べた感じでは[少し複雑なコードしか出てきませんでした。](https://discuss.streamlit.io/t/web-geolocation-api-to-get-users-location/9493)
ただjavascriptを実行してstreamlitから取り出したいだけなのにbokehいらないと思ったので模索してみたらstreamlitコンポーネントを作る方法にいきつきました。

“`python
import streamlit as st
from bokeh.models.widgets import Button
from bokeh.models import CustomJS
from streamlit_bokeh_events import streamlit_bokeh_events

loc_button = Button(label=”Get Location”)
loc_button.js_on_event(“button_click”, CustomJS(code=”””

CSSのグリッドレイアウトでアドベントカレンダーを書いてみた🎄

## はじめに
[dipアドベントカレンダー](https://qiita.com/advent-calendar/2023/dip-dev)9日目の記事です！
某カ●ディで毎日お菓子が出てくるリアルアドベントカレンダーを買おうと思ったら売り切れてました・・・😢
アドベントカレンダーがないなら作ればいいじゃない。ということでCSSのグリッドレイアウトについて紹介しながらアドベントカレンダー風デザインのサンプルコードを書いてみようと思います！
なお、サンプルに使用している画像はCanvaの生成AIを、物語はChatGPT3.5を利用しました。
## まずは作ったものを・・・
まずはグリッドレイアウトを利用して作ったアドベントカレンダーをご覧ください🎉
各日付のカードをめくると物語が読める仕掛けになっています。

俺からReact, Vueを学んでみないか？リアルな電卓を作ってみよう！

# 俺からReact, Vueを学んでみないかシリーズ
無茶苦茶調子に乗ったタイトルですが、インプレッションを集めるために煽っているだけです。すみません。

誰も使ってくれないだろう無駄なもの([HTML/CSSで作る超リアルな電卓など]())をどんどんアウトプットしていこうという企画です。

## リアルな電卓はお好きですか？
今回はリアルな電卓を作成しましたwww
皆さんが想像しているよりリアルです。心の準備は宜しいでしょうか？

作成したといっても、NextjsにHTML/CSSを反映させただけですけど、、、
とはいえ、reactjsで動くように無茶苦茶修正しましたし、JavaScriptも修正が大変でした。

—

### 完成物

下記から確認できます！
[https://dashboard-next-ui.vercel.app/next-ui](https://dashboard-next-ui.vercel.app/next-ui)

![スクリーンショット 2023-12-08 14.58.26.png](https://qiita-image-store.

NS高キャンパスの図書管理システム開発！

# Flaskを用いたCPの「図書管理システム開発」の概要

### 制作デモページ
制作中のものになりますが、９割型完成しています。
ngrokを使用したデモになるので、自宅でProgramを動かしてないときは止まります。
基本的にこの記事公開中は動かしっぱにしておく予定ですが、メンテナンスの影響で停止させることや想定外のエラーで停止する可能性があります。
データベースなどは、テスト用のデータなので、アカウント登録などは自由にやっていただいて大丈夫です。
https://frank-sole-boss.ngrok-free.app/

### 制作意図
筆者が通学するNS高等学校”F”キャンパスには３００冊以上の先輩や歴代のキャンパス長が寄贈していただいた本が多くあり、もっと管理を確実にしてより多くの人ひとに本の魅力を伝えたいとい

divの中の文字列が縦方向で中央にならない

# はじめに

SNSによくある投稿に対して下側についているユーザプロフィールの項目について

あれが思う通りにならない。

あれこれやったが、とりあえず、下のコードに戻した。


本当はdiv の縦方向で 中央に綺麗によってほしい。

(というかそもそもなぜ文字列が下にそろってたり、上にそろってたりするの？）

→画像があるからだ。画像の高さがあるから、下にそろっているように見えるだけ。

“`html

あたし

Popover APIが便利そう

# 導入
Chrome 114からサポートされたPopover APIを使用することでJavascriptなしで簡単にポップオーバーを実装できるようになりました。

# ポップオーバーとモーダル
ポップオーバーと似たUIにはモーダルがありますが、そもそもポップオーバーとモーダルは何が違うのでしょうか？
MDNによると、
> * モーダルというのは、ポップオーバーが示されている間、ページの残りの部分は、ポップオーバーが何らかのアクションを起こすまで（例えば、重要な選択がなされるまで）、反応しないようにレンダリングされるということです。
> * 非モーダルというのは、ポップオーバーが表示されている間も、ページの残りの部分が反応するようにするということです。

とのことです。[(https://developer.mozilla.org/ja/docs/Web/API/Popover_API)](https://developer.mozilla.org/ja/docs/Web/API/Popover_API)
今回紹介するPopover APIは表示されている間は他の要素を操作できるUIで