◆HTML/CSS　備忘録② ブロック要素とインライン要素

## ブロック要素

要素が、行全体のまとまりになっているもの。

代表的なものは、【div/p/h1～h6/header/footerなど】

下記の特徴があります。

**・縦方向に積み上がる**
**・縦横の高さや幅を設定できる**

また、一般的に他のブロック要素やインライン要素を含むことができます。


## インライン要素

要素が、行の中の一部のまとまりになっているもの。

代表的なものは、【a/spanなど】

以下の特徴があります。

**・横方向に並ぶ**
**・縦横の高さや幅の設定ができない**

また、一般的にテキストや他のインライン要素を含むことができますが、ブロック要素は含むことができません。

![インライン要素.png](https://qiita-image-store.s3.ap-northeast-1

MBOX を HTML に変換する方法 – 2 つの簡単な方法

同様の課題に直面していて、適切な解決策を見つけることができなかった場合は、ここが正しい場所です。 このブログ投稿では、添付ファイルを保持しながら MBOX ファイルを HTML 形式に変換するさまざまな方法を検討します。 電子メール クライアントを利用する最初の方法から始めましょう。 ほとんどの電子メール クライアントは、HTML などのさまざまな形式で電子メールをエクスポートする機能を提供します。

MBOX ファイルを HTML に変換する方法

続きを読む ：- https://www.wholeclear.com/mbox/html/

1. Mozilla Thunderbird の使用 (無料/手動):

– Mozilla Thunderbird は、MBOX ファイルをサポートする人気のある電子メール クライアントです。
– Thunderbird を使用して MBOX を HTML に変換するには、次の手順に従います。
– コンピュータに Mozilla Thunderbird をインストールして開きます。
– 電子メール アカウントを設定するか、必要がない場合はこの

HTMLとCSSについて説明できる

# 1. HTMLとはなにか

HTMLはWebページを制作するための基本的なプログラミング言語の一つです。HTMLは、テキストベースの文書を構造化し、その文書に含まれる要素やコンテンツに意味を与えるためのマークアップ言語です。
# 2.CSSとはなにか
CSSは、Webページやウェブアプリケーションの見た目やスタイルを定義するためのスタイルシート言語です。HTMLが文書の構造を定義するのに対して、CSSはその文書のデザインやレイアウトを指定します。HTMLとCSSを組み合わせることで、魅力的で整然としたWebページを作成することができます。

# 3.HTML Living Standard
HTML Living Standard は、HTMLの仕様書の最新版であり、HTMLの標準使用を定義している文書です。これは、HTMLの進化についての指針や標準を提供するものであり、セブ開発者やブラウザメーカーが一貫した方法でHTMLを解釈・実装できるようにするためのドキュメントです。
HTML Living Standardは、HTMLの進化に合わせて追加・改訂されるため、ウェブ開発

自分と会社用のコーディングフレームワークを考えたので、せっかくだからちゃんとサイトにまとめてみた

コーディングフレームワークを勝手にがっちり考えたので、せっかくだからサイトにちゃんとまとめて使えるものにして会社に持ち込みました、というお話です。


https://floncss.dsflon.net/

デザインとかロゴとかそれっぽい感じになったなと自分では満足してる。

※ 一般配布は目的としていないので、ダウンロードファイルにパスワードがかかっています
※ 何分一人でしこしこ作っているだけなので誤字脱字などはご容赦ください

## 作成にいたる背景
– チーム内で実装ルールを統一したいのはもちろん
– 新人教育の場面でも教材としたい
– 納品時や協業するパートナーさんにコーディングドキュメントが求められた場合、こちらのサイトを渡すことでドキュメントとしてしまいたい

といったところで、

live-serverでMIME typeエラーが出た話

# はじめに
最小構成でwebアプリを作ろうと思い立ちgithub copilotを使いながら楽々作っていこうと思ったらつまづいたので備忘録として残しておきます。

## 開発環境
* Terminal Zsh
* VSCode Version: 1.85.1 (Universal)
* Google Chrome ver120.0.6099.129（Official Build） （arm64）
* npm v10.2.3
* node v20.10.0
* live-server

## live-serverのインストール
live-serverはVSCodeの拡張機能でもありますが、ターミナルから実行したかったのでnpmでインストールしました。
“`zsh:zsh
npm install -g live-server
“`

## ディレクトリ構成
“`
.
├── README.md
├── index.html
└── module
├── Hello.js
└── time.js
“`

## プログラム
以下のようなコーディングを行いました。

Code ウェブサイト用フローティングコンタクトボタンのスタイルとHTMLコード

このコードは、ウェブサイト上に固定された連絡方法を表示するためのものです。具体的には、Zalo、Facebook、およびホットラインへの直接リンクを含むフローティングコンタクトボタンが設定されています。

スタイル定義部分では、.float-contact クラスがフローティング要素の位置とスタイルを定義しています。この要素は画面の左下に固定され、z-indexの値が非常に高く設定されているため、他の要素の上に表示されます。

.chat-zalo, .chat-face, そして .float-contact .hotline クラスは、それぞれのボタンの背景色、角の丸み、パディング、文字色などを設定しています。特に、各サービスに応じて異なる背景色が指定されています（例えば、Zaloは緑色、ホットラインは赤色）。

また、メディアクエリを使用して、画面幅が549ピクセル以下の場合には、フローティングボタンの位置とパディングを調整し、フォントサイズを小さくしています。

最後に、HTML部分では、実際にユーザーがクリックできる3つのボタン（Zalo、Facebook、ホットライン）が定

CSS だけで、かつ不要な div を使わずに、擬似 Progressive blur

## この記事の概要

あるときこちらの記事を見ました。

https://note.com/usagimaruma/n/nef24b2ec0090

CSS でのストレートな実装はできないようで、なかなかパワー系の実装が紹介されていました。

この表現のためだけに 350 もの div を作成するのはなあ……と思い、もう少し現実的なやり方を考えてみました。

この記事ではコードの一部を載せていますが、全体はこちらのリポジトリに置いてあります。

https://github.com/xrxoxcxox/qiita-progressive-blur

## Progressive blur の実現の方向性

usagimaru さんの記事にある通りですが、現状実現されている方向性は以下のどちらかです。

1. フィルターを小刻みに並べる
1. アルファマスクによる擬似 Progressive blur

1 の `フィルターを小刻みに並べる` は冒頭の codepen のようなやり方です。
2 の `アルファ

Androidアプリで表示したHTML画面のボタンタップ時のイベント処理の備忘

# はじめに
Androidアプリの画面は、主にXMLやJetpack Composeによって構築されますが、HTMLファイルを画面として表示させることも可能です。
そのため、HTML画面の表示とボタンタップ処理の制御方法を、本記事に備忘として記載してみました。

# やりたいこと
実装する処理の順序は以下です。
[1. HTML画面のボタンタップでURLスキームが発火される](https://qiita.com/tsuna_san/items/4cbdb63cf3b0b50d6247#1-html%E7%94%BB%E9%9D%A2%E3%81%AE%E3%83%9C%E3%82%BF%E3%83%B3%E3%82%BF%E3%83%83%E3%83%97%E3%81%A7url%E3%82%B9%E3%82%AD%E3%83%BC%E3%83%A0%E3%81%8C%E7%99%BA%E7%81%AB%E3%81%95%E3%82%8C%E3%82%8B)
[2. 発火されたスキームをアプリで検知してダイアログを表示する](https://qiita.com/tsuna_san/i

Tiptap の bold extension で strong タグの代わりに b タグを使う

ただの備忘録

[Tiptap](https://tiptap.dev/) では [`@tiptap/extension-bold`](https://tiptap.dev/docs/editor/api/marks/bold) を使うことで Bold な文字列に対応することができる。

しかしデフォルトでは全てが `strong` タグに変換されてしまう。

> The extension will generate the corresponding \ HTML tags when reading contents of the Editor instance. All text marked bold, regardless of the method will be normalized to \ HTML tags.

`strong` タグは強い重要性を示すものであり、ただの画面上の強調スタイル以上の意味を持つことになる。

自分のユースケースでは相応しくないと感じたので、別のタグで出力したくなった。

## extension を e

TinyMCEを青空文庫エディタにする

# 青空文庫エディタ
Meryのマクロ機能を利用して青空文庫エディターというのがある、私も使っていたが、初心者向けではないのでもう少し直感的に操作するものができないかと思っていた。ウェブ用のHTMLエディタを使って、HTMLから青空文庫に変換する機能をつけたものつくった。それを青空文庫エディタにした。

https://kyukyunyorituryo.github.io/AozoraEditor/

# 仕組み
TinyMCEでHTMLを作成して、turndownを改造したhtml2aozoraで青空文庫に変換している。AozoraJavaScriptParserで青空文庫からHTMLに変換しなおしている。それぞれのHTMLタグやクラスが違うので改造して対応している。

TinyMCE　https://www.tiny.cloud/

turndown　https://github.com/mixmark-io/turndown

html2aozora　https://github.com/kyukyunyorituryo/html2aozora

AozoraJavaScri

プログラム初心者が、2ヶ月でHTML→RubyonRailsまで学んだ勉強法

# はじめに
みなさんこんにちは、ちゅらデータ所属のえいとびーと(@eightbeat-8b)と申します
XR好きでVRやARなど触っています

2023のアドベントカレンダーを書くぞと決意に決意を重ね、新年から既に1週間立ってしまいました。
まぁ、過ぎてしまったものは仕方がないということで、今からでも遅くないだろうとキーボードを叩くに至ったわけです。

**早速ですが、私、実はプログラミングができません。**
入社して1年以上立つのですが、XR関連の開発が中心でして、UnityやUnrealEngineでの作業が殆どでした。
いやいや、それでもプログラムは使うやろ?と思いきや、意外となんとかなってしまい、今の体たらくになっている顛末です。

**「そろそろプログラム覚えないと、社内ニートまっしぐらやな」**
それだけは避けないとあかん、そう考えプログラミングを学び始めました

というわけで、「2ヶ月でHTMLからRubyonRails完走した話」
そして

**Progate、RubyonRailsチュートリアルはいいぞ!! な話を書いていきます**

# 私のプログラミングの

最近流行りのスプリットレイアウトデザイン

最近よく見かける、あるWEBデザインについてまとめてみました。なお正確な名前は分かってないのでここでは「スプリットレイアウトデザイン」と記載します。（もしわかる方がいれば教えてください）

## スプリットレイアウトデザインとは
大まかに言ってしまうと２カラムのレイアウトです。ただ従来の２カラムと違う点としては、片方がスクロール可能で、もう片方が固定されているようなデザインとなります。

実際に見てもらうとわかりやすいので参考を用意しました。

▼https://ahp-web.jp/zl-helloidea/

▼https://www.onca-coffee.com/
![スクリーンショット 2024-01-07 17.23.29.png](https://qiita-image-store.s

アクセシビリティを意識した実装の意義について確認する

### この記事で分かること
– 身体に関わる障害を持つ方の雇用率
– それをデスクワークで改善させることにおいてはアクセシビリティは有効

# 1. 背景
アクセシビティにも色々定義がありますが、身体に関わる障害を持つ方のための実装をする意義を確認したいと思った為です。

# 2. 各身体に関わる障害と有効なアクセシビリティ

https://developer.mozilla.org/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility

| 身体に関わる障害のカテゴリ | 有効なアクセシビリティ |
| —- | —- |
| 視覚 | スクリーンリーダーや拡大/ズームを使用してテキストにアクセス |
| 運動機能 | キーボード（または他のマウス以外の機能）を使用してウェブサイトの機能をアクティブ化 |
|聴覚|音声や動画のコンテンツのキャプション/字幕またはその他の代替テキストに依存

# 3. 令和4年度 国内雇用 身体に関わる障害を持つ方の人数とその割合
令和５年６月１日時点のデータ

サムネイルを押すとメイン画像が切り替わる動作の実装方法

サムネイルを押すとメイン画像が切り替わる動作の実装方法

サムネイル画像をクリックするとメイン画像をふわっと切り替えるjQuery
【jQuery】サムネイルをクリックしてメイン画像を切り替える方法【枠線の変更方法も解説】

Tailwind cssのみでモーダルウインド実装する方法

Tailwind cssのみでモーダルウインド実装する方法

tailwindcss だけでモーダルを実装してみる

【HTML】複数のフォームコントロールに一括でdisabledを設定する方法

`fieldset`要素を使用して以下のように使用することで`fieldset`要素の子孫要素のフォームコントロールにまとめて`disabled`を設定できます。

“`html

“`

多言語サイトを簡単に作りたくない? – 自作のJavaScriptライブラリもどき

# ナニコレ？
自分が作ったJavaScriptライブラリもどき。ライブラリではないです（笑）
# 本編
多言語サイトを実装しようと思ったのですが、多言語となるとファイル数がいっぱいで管理しにくいところが不便ですね。
それを解決するのが、名付けて…
“`
タイトル：私のキラキラ・ダイナミック json & js 多言語変換ライブラリ
別名：`LD-lang.js`
対応言語：英語・日本語
*初期設定あり
“`

ネーミングセンスがバグってますね。
一応、コードを見せるとこんな感じ。
“`JS:LD-lang.js
function change_lang() {
var lang = localStorage.getItem(‘lang’);
var head = $(‘head’);
var headChildren = head.children();
var childrenLength = headChildren.length;
for (var i = 0; i < childrenLength; i++) {

web.devの「ダイアログ コンポーネントを作成する」を読んでみた

# 1. 背景
web.devの「ダイアログ コンポーネントを作成する」を偶然見つけたのでそこから勉強になったことをまとめようと思った為です。

https://web.dev/articles/building/a-dialog-component?hl=ja

# 2. web.devとは
@kinshotomoya さんの
以下の記事で分かりやすくまとめられていましたのでご覧ください！

https://qiita.com/kinshotomoya/items/c7e127c83b89fab721a7

# 3. 勉強になったこと
## 3.1. カスタム属性
記事ではmodal-modeというカスタム属性を作っていました。
複数モーダルの区別を付ける為に使用されています。

## 3.2. cssのみでdialogの背景をoverflow:hiddenにする方法
“`css
html:has(dialog[open][modal-mode=”mega”]) {
overflow: hidden;
}
“`
:::note
– IEでは未対応です。
– Firefoxは2

それぞれのタグの使い方(文書のメタデータ編)

## 文書のメタデータに利用するタグ
文書のメタデータは、文書自体に関する情報で、通常はコンテンツの内容そのものではなく、その文書についての情報を提供します。これは、ウェブページや他の文書に関する情報であり、コンピュータや検索エンジンが文書を理解しやすくするために使われます。そのため、表示内容には反映されません。しかし**Webブラウザが内容を理解する＝検索結果に直接影響を与える部分**となるので、できる限り充実させることが重要(やりまくれば良いというわけではないのがむずがしいところですが…)です。

具体的な文書のメタデータには、以下のようなものがあります：
1. **タイトル**: 文書のタイトルは、その文書の内容を簡潔に表します。例えば、ウェブページの場合、ブラウザのタブに表示されるタイトルや検索エンジンの検索結果で表示されるタイトルなどに使われます。
1. **文字エンコーディング**: 文書内のテキストがどのような文字コードでエンコードされているかを示します。これにより、ブラウザやアプリケーションが正しくテキストを解釈できます。
1. **概要や説明**: 文書の内容を要約

VSCODEの拡張機能を使用して日本語表示に切り替える

## VSCODEを日本語表示に切り替える

VSCODEを自分のPCにインストールしたので、
日本語表示に切り替える方法を記載します。

また本記事は、あくまでも**自分が振り返る際のメモ程度の記事**になるため、
専門性はございません。あらかじめご了承ください。

下図は、インストールを終えアプリケーションを開いた画面


![3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3663716/a0b71c88-b46f-f00