今さら聞けないHTML　

erbの<% %>を楽に入力する【VSCode】

# はじめに
`erb`を使う時、`<% %>`や`<%= %>`の入力が手間ですので、解消します。
# 環境
| | |
|:-:|:-:|
| エディタ | VSCode |
| 言語 | erb（html系 拡張子 なら応用可能）|
| | |
# やりたいこと
“Emmet”のように、shorthandで`<%%>`を呼び出せるようにします。

“Emmet”についてはこちら

https://qiita.com/kohki_takatama/items/ec0bec86277bf90f94eb

# 実装手順
VSCodeで行ってください。
| `ctrl + shift + P`で設定を開く | snippetを検索し、開く |
|:-:|:-:|
||![スクリーンショット

Webを支える技術 – HTTP、URI、HTML、そしてREST –

# はじめに
webの理解力を深めるために復讐とアウトプットの練習を兼ねて

# 第１部
## 第1章　Webとは何か
– webサイト
– ユーザーインタフェース
– プログラム用のAPI

## 第2章 Webの歴史
SOAPとは…RPC（分散オブジェクトグループ）の動きの中で最も基本的なプロトコル

## 第3章 REST、webのアーキテクチャスタイル
RESTとは
– クライアントサーバ：ユーザインタフェースと処理を分離する
– ステートレスサーバ：サーバ側でアプリケーション状態を持たない
– キャッシュ：クライアントとサーバの通信回数と量を減らす
– 統一インタフェース：インタフェースを固定する
– 階層化システム：システムを階層に分離する
– コードオンデマンド：プログラムをクライアントにダウンロードして実行する

# 第2部 URI
## 第2章 URIの仕様
URI…Uniform Resource Identifier(統一リソース識別子)

例）http://blog.example.jp/entries/1
上記の例のURIを構成するパーツ
– URIス

タイピングが遅い人用の C♯ の入力補助用 html を公開してみる。

タイピングが遅い人向けの
C♯ の入力補助用の html を作成しましたので
皆さんの役に立てればと思い
公開してみます。

[オンラインで動作するバージョンはこちら](https://uni928.github.io/sephiroth_csharp_creat_aider/)

[ダウンロードはこちら(Google Drive)](https://drive.google.com/file/d/1js001-NbiaGYmKovGbF0Bu4KdSnQNF7N/view?usp=sharing)

***

この html の見た目


***

この html の使い方

各ボタンを押すと
そのコードがクリップボードにコピーされます。

例えば

“`Csharp
for(int i = 0; i < list.Count; i++)

jQuery で日付フォーム（日付範囲ピッカー）を作成

完成イメージ

今回はホテル予約サイトなどでよく見る日付の範囲を選択するフォームをhtml、jquery、cssを用いて作成しました。


入力フォームをクリックするとカレンダーが表示されます


日付を2つ選択すると選択された期間に色が付き、決定ボタンを押すとフォームに日付けが表示されます。クリアボタンで選択した日付を解除します

![スクリーンショッ

FlaskとHTMLでシンプルな小学生向け算数クイズアプリを作成する方法

## はじめに
この記事では、FlaskとHTMLを使用してシンプルなクイズアプリを作成する方法を紹介します。このアプリケーションでは、サーバーサイドでFlaskを利用して問題を生成し、クライアントサイドではHTMLとJavaScriptを使って問題を表示し、ユーザーからの回答を受け付けます。クイズの問題は算数の基本的な計算問題をランダムに生成し、ユーザーが選択肢をクリックして回答できるインターフェースを提供します。さらに、ユーザーがクイズを提出すると、正答率を計算して結果を表示します。

このアプリを作成することで、Flaskの基本的な使い方や、HTML、CSS、JavaScriptの連携方法を学ぶことができます。以下に、ディレクトリ構成やプログラムの詳細な説明を示しますので、ぜひ参考にしてみてください。

### ディレクトリ構成

まず、アプリケーションのディレクトリ構成は以下のようになります。

“`
quiz_app/
├── app.py
├── static/
│ └── style.css
└── templates/
└── index.html
“

WebブラウザからDB登録する

# 仕様
画面から名前、年齢、Eメールアドレスを入力し、登録ボタンを押すとDBに登録される。
### 入力画面
### 登録完了画面
### DB登録状況

### 動作設計
“`plantuml
@startuml
box “Port 8080” #Ligh

HTMLの自分用チートシート

# はじめに
HTMLのタグを忘れたとき用に。

# HTMLのタグまとめ
## 枠組み
|タグ|説明|
|:-:|:-:|
|html|HTMLの文書ということを表す|
|head|ブラウザには表示されず、ページのタイトルや説明文、外部ファイルのリンクなどの情報を記述|
|meta|ヘッダ内で文字コードや説明文を記述|
|title|タブやブックマークしたときのタイトルに表示される|
|link|CSSファイルなどの外部ファイルを読み込むときに使う|
|body|ブラウザで表示される部分|

## 表示部分
|タグ|説明|
|:-:|:-:|
|h1 ～ h6|見出し。数字が大きくなると見出しが小さくなっていく|
|p|段落を表す|
|img|画像の表示。src属性で画像を指定、alt属性で画像をうまく読み込めなかったときに表示するテキストを記述|
|a|リンクを貼る。リンク先はhref属性で指定|
|ul|番号なしの箇条書きリスト|
|ol|番号ありの箇条書きリスト|
|li|リストの項目|

## 表
|タグ|説明|
|:-:|:-:|
|table|表を表し、表全体を囲む|
|

Flexboxでの比率設定について

# はじめに
webサイトの模写でFlexboxを使用した際に横並びの要素を1:2で配置する方法について調べました。
今回は’flex-grow’,　’flex-shrink’,　’flex-basis’の3つのプロパティについて紹介します。

## flex-grow
‘flex-grow’は、フレックスアイテムが親コンテナ内で利用可能な余分なスペースをどの程度拡大するかを指定するプロパティです。

“`
.content {
width: 800px;
display: flex;
}

.item1 {
flex-grow: 1; /* 他のアイテムと比べて1倍のスペースを取る */
}
.item2 {
flex-grow: 2;/* 他のアイテムの2倍のスペースを取る */
}
“`

## flex-shrink
‘flex-shrink’は、親コンテナ内のスペースが不足したときに、フレックスアイテムがどの程度縮小するかを指定します。

“`
.content {
width: 800px;
display: flex;
}
.item1

音楽ファイルの再生

# はじめに

初心者でもミュージックの再生、停止することは簡単だったので実装してみた。

# 機能

再生アイコンを押すと音楽が流れ始め表示がSTOPアイコンに切り替わるボタンの実装。

# 実装

“`:HTML