今さら聞けないHTML　

DjangoのCreateViewの実装の仕方を理解する

こんにちは。
株式会社クラスアクト インフラストラクチャ事業部の大塚です。

前回DjangoのFormViewとmodel、HTMLのform要素について理解を深めていきました。
今回はその学びの中で出てきた『FormViewではなくてCreateViewでも同様に実装できる』ということを確かめるためにコーディングをしてみました。

https://qiita.com/ohtsuka-shota/items/3f87d8fbc6a375bd1e5d

# github
以下にコード一式を格納しております。

https://github.com/ohtsuka-shota/publicDjangoStudy/tree/main/createTestPJ

# 環境構築
## 環境イメージ
今回は以下の環境で構築しております。createTestPJという名前のプロジェクトとMyCreateという名前のアプリを作成しています。
構成要素は以前のFormViewを継承させた環境と殆ど同じです。違いとしては、forms.pyを用意していないことです。
![django-ページ10.draw

フォームに郵便番号検索機能を実装する方法

今回はフォームに郵便番号検索機能を実装する方法をここに書き留めていきたいと思います！

フォームの入力機能など普段使用する際に、郵便番号を入力すると住所の番地の手前まで検索することができる機能があると思います。

今回はその郵便番号検索機能をjsを用いて実装する方法を記載したいと思います。

## HTMLファイル実装

まずは、検索画面の実装を行います。

簡単なデザインとしてBootstrap4.5を用いて次のように記述します。

““index.html

郵便番号を入力してください

WebGL で色々な表現に挑戦する – とにもかくにも canvas に描画する

## この記事の概要

HTML, CSS だけと比べて、WebGL を用いると表現力がアップします。
しかし WebGL や canvas に関連する記事が割と少なく、頑張って学んでいる最中です。
学んだ内容について、備忘録を兼ねて記事を書いていきます。

`canvas` 要素は、ただ HTML 上に配置したところでなんの効力も発揮しません。
描画領域を提供するだけで、その領域内に描画するための内容は含まれないからです。

実際の描画は、JavaScriptを使用して `canvas` 要素の描画コンテキストに命令を送ることで行われるのですが、一度にたくさんのことをやろうとすると複雑になります。
そのため、この記事では非常に簡単な内容だけを説明します。

## バンドラーの設定

バンドラーは無くても動かせますが、今後の色々を考えてセットアップしておきます。
自分はパッケージマネージャーとして Bun を使っていて、Vite で環境を構築しました。

“`sh
bunx create-vite
“`

フレームワークは無し（Vanilla）で、TavaScriptを選択しました

自己紹介がてら「自分を紹介するホームページでも作ってみない？」2日目

# 自己紹介
はじめましての人は初めまして。お久しぶりの方はお久しぶりです。
…あれこれ昨日もやった？

# タグを紹介していこう
この記事を書いてるときはあまりにも眠すぎて早く寝たい精神で書いているので、ただただタグを羅列しておきます。
「こんなタグがあるんだな～」って覚えておけば将来役に立ちます…たぶん。

タグの中にはちょっとした種類分けがあります。

今回は私の勝手な区分で「区分けをするタグ」「本文じゃないタグ」「コンテンツタグ」「インラインタグ」に分けさせて頂きます。

# 区分けをするタグ
## ``
これは、この中の内容がHTMLだよ！っていうことを示すタグです。
確かにいらないといえばいらないのですが、これは暗黙の了解としてちゃんと書いておきましょう。

“`html

ここがHTMLだよ

“`

## ``
これは、この中の内容は本文というよりかはそのページの情報だったりとかが書いてあるところであると示すタグです。
「本文じゃないタグ」の多くはこの`head`の中に書き

【CSS】Scroll-driven AnimationsとCSSの進化

## はじめに
この記事は、2023年12月1日に開催された[Meguro.css #9](https://megurocss.connpass.com/event/300400/)で発表した内容です。

## 内容
### 導入
こんにちは、私はQiita株式会社の出口 裕貴です。

普段は、QiitaのPdM 兼 デザイングループのマネージャーをしています。
私は、デザイン, フロントエンドに関連する情報を中心に発信しているので、よかったらXのフォローしていただけると嬉しいです。

—

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

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

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

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

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

## アクセシビリティを意識したアラートの仕様
### ⚪︎ アラートとは？
アラートは、ユーザーのタスクを中断することなく、ユーザーの注意を引く方法で短く重要なメッセージを

HTML・CSSで要素を見えなくする方法とアクセシビリティ

## これは何

Webサービスなどを作っていると、しばしば「要素を非表示」にするタイミングがあります。

– モーダルやドロップダウン、ツールチップなどアクションによって「表示/非表示」になる要素
– 要素を開閉できるアコーディオンメニュー
– レスポンシブでdesktop/mobileの時だけ表示したい要素

などなどです。

こうしたUIを実装するときに、選ぶ方法によっては、アクセシビリティツリー上で削除されたりされなかったりします。

そのため、適切な方法を選ばないと、本来読み上げもスキップしたかったのに読み上げられてしまったり、逆に読み上げはして欲しいのに読み上げられなくなったりします。

また、見た目的には非表示になっていても、hoverやfocusができる場合とできない場合があり、意図せぬ挙動にもつながります。

:::note
アクセシビリティツリーとは、DOMツリーに基づいて生成されるスクリーンリーダーなどの支援技術に使用される情報です
:::

そこで、要素を見えなくする方法をレイアウト上で無視されるかとアクセシビリティツリー上でどう読み上げられるかでまとめてみまし

親切なalt属性の指定ってどんなのだろう

# これは何

alt属性の好ましい指定方法をまとめた記事です。
嘘か真か、Appleやディズニーのサイトでaltがしっかりしてなかったので訴えられた例があるそうです。
親切なalt属性の指定をしたら、ハッピーな人が一人でも増えないかなと思い記事にしました。

# 対象読者

* デザイナー
* スタイルのコーディングをするエンジニア
* 記事を書くときに `img` タグなどをさわることがある人

# alt属性の役割

alt属性の役割は大きく分けて3つです。

1. 画像が表示されないときの代替テキスト
* 画像を読み込めなかった時
* モバイルのデータローミングをOFFにしている
* 画像を非表示設定している
* 身近な例だとTeamで貼り付けた画像をSlackでは展開しないので代替テキスト表示
2. スクリーンリーダーなどでの読み上げ
3. 検索エンジン最適化（SEO）

# alt属性を適切に書く

## 通常の場合

記事内などで書くときは下記のようなパターンが推奨されています。
例えば下記の画像が、記事内に掲載されたとします。

DjangoのModelとForm、HTMLのform要素の関係性を理解する

こんにちは。
株式会社クラスアクト インフラストラクチャ事業部の大塚です。

最近、DjangoやHTML等のWebアプリケーション周りの勉強を強化しています。
この記事ではタイトルの通り、DjangoのModelとFormについて、HTMLのform要素について関係性をまとめ、理解していきたいと思います。

# DjangoにおけるFormとHTMLにおけるForm
結論から書いてしまうと、要素としては関連しているけれども概念としては若干異なるものみたいです。

HTMLのForm要素を使用すると以下のようなユーザに入力を求められるWebページを作成することが可能となります。別の表現をすると「ユーザからの入力データを受け付けるためのコンテナ」というみたいです。
上記のHTML/CSSコードは以下を参照してください。

https://qiit

数式を入力してグラフ化してくれるサイトを作ってみよ

# 1.はじめに
最近、何か作りたいと思い何がいいかなあと悩んでいたのですが、
昔数学の課題を解くのに[ウルフラムアルファ](https://ja.wolframalpha.com/)を使っていたのを思い出したので少し自分でもやってみようと思い作ってみました。
# 2.環境
windows 10
VScode
plotly(グラフ描画)
# 3.プログラム
“`html:HTML

グラフ描画

HTML メモ

## HTMLについて
### HTML
– HTML 要素が一覧表示されています。
– [公式](https://developer.mozilla.org/ja/docs/Web/HTML/Element)
– [HTMLタグリファレンス](http://www.htmq.com/html/indexm.shtml)
– [GitHub](https://github.com/whatwg/html)

### HTMLタグついて
–

要素: ブロックボックスで要素全体を1つの長方形にして表示します。
– 要素: インラインボックスで要素を行ボックスにして1行ずつ折り返して表示します。
–

要素: 文書内にスタイルシートを記述するための要素です。
–

要素: 表内でセルの行を定義します。
–

要素: 表のセルのグループ用の見出しであるセルを定義します。
–

要素: 表でデータを包含するセルを定義します。

### HTML5コンテンツモデル
– 「 〇〇

CSSで幾何学模様を描いてみた

# はじめに
この記事は アイスタイル [Advent Calendar 2023](https://qiita.com/advent-calendar/2023/istyle) 1日目の記事です。

こんにちは、アイスタイルではフロントエンド周りをちまちま触っているsakaguchiiと申します。
すこし昔の話になりますが弊社のサービス「[@cosme](https://www.cosme.net/)」のロゴをリニューアルした際、「Dot & Space」がロゴのコンセプトとなりました。

https://www.wantedly.com/companies/istyle/post_articles/202287

今回は幾何学模様である「Dot&Space」をCSSで実装するとしたらどう実装しようか？というものを記事にしようと思います😊
# ① Dotを並べてみる
コンセプトの通り「Dot」から生まれる「Space」を表現するために、まずはシンプルに丸い要素を並べてみます。

langとhreflang – 多言語サイト作り概説

日本語サイトだけを作っている分には、最初に``と記述してそれでOK。
でも、複数の言語を使ったサイトを作り始めたらめっちゃ気になる… それが、`lang` と `hreflang` ですね。

# 最初に結論
`lang`は、ユーザビリティや可読性のために利用すべし。とっても重要。CSSでも使えて便利。
`hreflang`は、SEO対策用。

# lang

こちらの記事を引用しつつ、まとめてみます。

https://webaim.org/techniques/language/

### lang属性によるローカライズの様子

##### ローカライズが効果的な場面の例

– ``要素の使用時にブラウザーがさまざまな言語の引用符を適切に表示できるようになる。
“`html

Main Computer のドイツ語版。

フランス議会を主催し

【HTML】セマンティックなマークアップでアクセシビリティ・可読性・SEOを向上させる

## これは何

Webを作っていると、よく「セマンティックにマークアップするのが良い」と耳にします。

今でこそこの意味と重要性を理解していますが、コーディングを始めた頃は「セマンティックとはなんなのか」「なぜ大事なのか」、いまいちピンときていませんでした。

そこで、コーディングを初めて頃の自分に伝えておきたいセマンティックのことをまとめてみました。

## そもそも「セマンティックなマークアップ」とはなんなのか

HTMLのマークアップで使う`h1~h6`や`p`といった要素は、それぞれ「見出し」や「段落」をいった意味を持ち、こうした要素を「セマンティック要素」と呼びます。
（中には意味を持たない要素もありますが）

そして、この意味を適切にマークアップすることを「セマンティックなマークアップ」などと表現します。
（ここの表現の仕方は人によって異なり、「セマンティックマークアップ」や「適切なセマンティクスのマークアップ」などと表現することもあります。）

セマンティックなマークアップは、「アクセシビリティの向上」「コードの可読性の向上」「SEOの向上」などにつながり、Webを作る

プログラムをカラフルなhtmlにしてブログ記事に貼り付けよう！

　『[なでしこスクリプトをhtmlに変換](https://n3s.nadesi.com/id.php?2670)』という素敵プログラムを**TKI**さんが作成し、なでしこ3貯蔵庫にアップしてくださいました！
　TKIさんは、はてなブログで長年、日本語プログラミング言語「なでしこ」についてのブログを書いてくださっている方です。

https://tkizzz.hatenablog.jp/

　たいへん参考になります～📝👀

　さて、TKIさんによると、**アドベントカレンダーの記事を彩ってもらうために** 今の時期にこのプログラムを投下してくださったそうですよ！
　ありがたいですね～‼️‼️‼️
　ワタクシ一年の経つのがあまりにも早すぎて何も考えておらず・・・今年はなでしこも何のアニバーサリーでもないみたいだしな～どうすっかな～～・・・などとダラダラしていたコトを猛省いたしますですよ💧

　そんなわけで今年は、これを使わせていただき記事を書いていくつもりですので、TKIさんの許可を得て、まずはその紹介をさせていただこうと思います。

# そもそもなでしことは
　日本語プログラミング言

自己紹介がてら「自分を紹介するホームページでも作ってみない？」1日目

# 自己紹介
はじめましての人は初めまして。お久しぶりの方はお久しぶりです。
今年もアドベンドカレンダーの季節がやってきて、今年は何を書こうかなと考えていましたが、まぁまずは自己紹介でもしようかなと。
というわけでホームページを作りましょう。（？？？）

# そもそもホームページとは？
皆さんがみてるこれです。
ブラウザを開いて、なんか検索したりURLを開いて表示されるページのことです。
つまり今回作るのは、ブラウザで自己紹介が見れるみたいな感じのものです。

# 材料
ホームページはHTML(`HyperText Markup Language`)という言語で書かれています。
これは、「ブラウザに対してこんな感じで表示してね～」という指示書みたいなものです。
HTMLファイルをダウンロードしたブラウザ君は、「あーここは太字ね…あーここの文字は色を変えるのね～…」みたいな感じでやって、最終的に私たちに完成形を見せてくれるというわけです。[^renderer]
この世には色々な種類のブラウザがありますが、ブラウザの種類によっては表示される内容に違いが出ることがあります。
それは、

【アクセシビリティ】アクセシビリティを意識したスイッチボタンの作り方

## はじめに

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

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

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

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

## アクセシビリティを意識したスイッチボタンの仕様
### ⚪︎ スイッチボタンとは？

スイッチは、ユーザーが二つの値（オン/オフ）を選択できるコンポ

【HTML/CSS】CSSグリッドにしょうもないミスで苦戦した話

# 結論からいうと
### 　　　　　　　　　　タグの戸締りはちゃんとしよう

# 事の発端
始めてホームページを作ってみようとHTMLとCSSを触り始め、~~楽すぎ本なんかなくても行けそうだわってくらい~~スムーズに制作が進んでいた。そんななかCSSでグリッド表示をしてみようと挑戦した矢先のことであった。
まず完成想定はこちら
そしてこれを目指して打ち込んだ結果
### そうはならんやろ！？
なぜか生まれる謎の空白が出来てしまった…

# なんでこうなったの？(解説)
この謎の空白を見てから私は様

ソートアルゴリズムを視覚化した

# 1.はじめに
　今回は、バブルソートやクイックソートなどのソートアルゴリズムを視覚的に理解するために役に立つウェブサイトを作成したいと思い開発を行いました。
完成予想図
各ソートの解説についてはご自分で調べていただけたらなと思います。豊富にあります。

# 2.実行環境
“`:環境やツール
windows 10
vscode
HTML
CSS
JavaScript
“`
# 3.開発プロセス
まず、ソートアルゴリズムの種類を調べ、HTMLとCSSを使い大体のインターフェイスを決定します。
その後、一番簡単であるバブルソートから実装しテストを行い正しく動作するか確認します。
バブルソートの動作が確認できたら、他のソートについて調べて実装していく流れとなります。
# 4.プログラムの詳細
“`html:index.html

ChatGPT Plusでプログラミングをしよう

この記事は、筑波NSミライラボ Advent Calendar 2023、7日目の記事です。

# 自己紹介
こんにちは！東京大学大学院暦本研究室に所属している今村翔太です！

この春に筑波大学情報科学類を卒業しました。ご縁があって、去年の筑波NSミライラボ2022に引き続き、今年も参加させていただいてます！

普段は拡張現実（AR）や大規模言語モデル（LLM）を使ったプロダクトを開発していたり、視線を使ったインタフェースの研究をしていたりします。

# LLMでプログラミングをする
今回のアドベントカレンダーでは、そんな普段お世話になっているものの中から、特にLLMについて書いていこうと思います。

LLMといえば、代表格はOpenAI社のChatGPTが有名かと思います。
実は、このアドベントカレンダーを書いているのは11月30日。

そうChatGPTが誕生して1周年の日です🎉🎉🎉

去年の今頃、何やら話題になっていて触ってみたらすごくて感動したのを覚えています。
当時は今でいうGPT-3.5で、まだまだ限界もありつつも、それでもそれまで経験がしたことのない様なレベルの応答性能や