今さら聞けないHTML　

クラウドストレージサービスを自作した話

# はじめに
結構前に作りました。当時は金がなく、google driveを契約できるほどの経済力が全くなかったのですが、その時思いました。無いなら自分で作ってしまえばいいと。

## ハードウェア
都合のいいことに余っていたpcパーツがありました。流石に全て揃っていたわけではないのでCPUとマザーボードは買い足しました。これらのパーツでサーバーとなるPCを新たに組み、ハードウェアを用意することができました。4TBのHDDが転がっていたのも大変都合がよかった。

## 構想
Djangoを使ってシステムを構築し、bootstrapでいい感じに整えようと考えました。
アカウント毎のデータの管理、データ残量、アップロード制限、パスワードの変更、アカウントの新規作成、pdfファイルのプレビュー、動画ファイルのサムネイル作成自動化、サムネイル画像のデータサイズの自動縮小、スクロールによるページング、レスポンシブ対応、など諸々の機能を実装する。

# 完成後のホーム画面
![無題402_20240603141831.JPG](https://qiita-image-store.s3.ap-n

instagramの投稿で「埋め込み」が表示されない

インスタグラムの投稿をHTMLに貼り付けるときに、１つ躓いたポイントがあります。
＜つまづいたこと＞
instagramの投稿ページで「埋め込み」が表示されない
＜解決方法＞
instagramのアカウントが非公開設定だと表示されないようです。公開用アカウントを準備したところ、無事に表示されました。

＜参考文献＞

【2024年最新】Instagramの埋め込み方法！ホームページを魅力的に！

HTML文書のタイトルの左横書き・右横書き

HTML文書のタイトルが左横書きで表示されるか右横書きで表示されるかはUnicodeのBIDIアルゴリズムによって決定される（`title`要素の`direction`プロパティの値などには依存しない）。そのため、ついうっかりタイトルの１文字目をアラビア文字にするとタイトルは右横書きで表示されてしまう。たとえば`title`要素を

“`html

“`

と書くと次のように表示される（Microsoft Edgeの場合）。


タイトルの文字の進行方向を正しく表示するためにはUnicodeの方向制御コードを使う。たいていの場合はタイトルの頭にleft-to-right markを付け加えるだけでよい。

“`htm

Reactのvideo埋め込みでつまづいた話と解決策

## 結論 …！
htmlでは動画を埋め込む際に
“`

“`
のようにプロパティを指定するが、Reactの場合はこれらをキャメルケースで指定すること！
“`

“`
## 終わりに …
いい加減こんなところでつまづくのはやめにしたいですが…どこかの初心者の方のおお役に立てれば…

[rails7]背景画像が表示されない件

## 目的
rails7でwebアプリを作成している途中で、トップページに背景画像を挿入する際に何をやっても挿入されない事態に陥りました。
その問題の解決記事も少なく少しハマったので備忘録として残したいと思います。

#### 対象者
rails7で背景画像を設定したいけどうまくいかない人

## 開発環境
– Rails 7.0.4.3
– ruby 3.1.2
– bootstrap 5.3.3

## 問題
まず背景画像を表示する際にHTMLとCSSを下のように設定しました。

“`top.html

本文

“`

“`top.css
background-image{
background-image: image-url(‘app/assets/images/background.jpg’);
}
“`

これで表示されると思いきや、全く表示されず。画像の欠片も表示されず。
「まぁHTMLとCSS書くの久しぶりやし、設定が間違っているっしょ。調べれば余

HTMLのメタタグに何を書くのか

## OGP
https://ogp.me/
### 基本
“`html






“`

#### type
* music.song
* music:duration – integer >=1 – The song’s length in seconds.
* music:album – music.album array – The album this song is from.

RPGの戦闘シーン（？）のシュミレーターを作ってみた

## 初めに
今回はRPGゲームの戦闘シーンのシュミレーター（？）を作ります
## 準備物
特になし
## ファイル構成
今回はmain.htmlだけで作ります
## プログラムをコピペ
以下のコードをコピペしてください
“`html:main.html

HTMX：シンプルかつパワフルなフロントエンド開発の新潮流

# 導入
近年、フロントエンド開発の世界は急速に進化しています。React、Vue.js、AngularなどのJavaScriptフレームワークは、複雑で双方向なアプリケーションを構築するための強力なツールを提供しています。しかし、それらのフレームワークの学習曲線や複雑さが障壁となることも少なくないと感じています。そんな中、HTMX（Hypertext Markup eXtensions）は、HTMLを中心に据えたシンプルで効果的なアプローチを提供することで注目を集めています。今回はそんなHTMXについてまとめようと思います。
## HTMXとは何か？
HTMXは、従来のHTMLベースのウェブ開発に動的な機能を追加する軽量なライブラリです。HTMXを使用すると、フロントエンドの処理を記述するためにJavaScriptをほとんど、またはまったく書かずに済むため、開発効率が大幅に向上します。

### HTMXの主な機能には以下が含まれます：

・サーバーからの部分的なHTMLスニペットの読み込みと差し替え
・HTML属性を使ったリクエストトリガーの定義
・WebSocket、Server

AWSの公式ドキュメントが修正されるに至った経緯

# ことのはじまり
@kohki_takatama さんの記事 [XMLのイメージを掴む
](https://qiita.com/kohki_takatama/items/d9a255fa12b6b2c54430) が投稿される

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

## HTML / XML のリリースされた年 が 1998 / 1993 となっておりおかしいことに気が付いてコメントする

> > | | HTML | XML |
> > | --- | --- | --- |
> > | リリースされた年 | 1998 年 | 1993 年 |
>
> 逆では？
>
> > June 1993
>
> https://www.w3.org/MarkUp/draft-ietf-iiir-html-01.txt
>
> > 1993年にはIETFからHTML仕様書バージョン1.0が公開され、SGMLからの拡張として文法定義のDTDを持つようになった。
>
> https://ja.wikip

VScodeの便利技紹介！

今回は、私自身が普段VScodeを使っている際に活用している便利な技をご紹介します！

## 1.HTML5のひな型を入力する方法
　
　上記画像のように「html」と入力すると右下に表示される「html:5」を選択。または、「!」を入力し、右下に表示される「!」を選択することで以下のようにHTML5のひな型を一気に入力することができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2149624/1c9

【一口メモ】CSSやjavascriptなどのファイルを編集した後何回再読み込みしても更新されないときの対処法

## 困ったこと
CSSやJavascriptを編集した後サーバーなどにあげたりし、再読み込みしても更新されないときがある。

## 原因
①Webページが参照する画像ファイルやCSSファイルなどの**キャッシュ**、あるいは②Webページで実行されたJavaScriptが動的に読み込んだファイルなどの2次的なキャッシュが残っているためである。

**キャッシュ**というのは、2回目以降に開かれるWEBページをよりスムーズに開くため、あるいはサーバー負荷の軽減等のため、一定期間内に同ページを開くときは、前回開いていた履歴を表示する。

1回目に開いたときと2回目で開いたときの間に、HTMLファイルが変更されない、かつCSSファイル等の外部ファイルが更新されると、高速化するために便利なキャッシュが、逆に正確性を欠くものとなる。

## 解決策

基本的にキャッシュを削除すればよい。ブラウザにフォーカスされているときに次の操作を試みる。（以下Windows）

### 解決策1　Ctrl + Shift + R　または　Shift + F5

Webページから直接参照している画像ファイル