今さら聞けないHTML　

Font Awesomとは（自分用）

・Font Awesomeとは
無料で利用可能なWebアイコンフォント。

・使い方
CDNプラットフォームを読み込む。
htmlファイルのhead内に入れる。
“` “`

・ポイント
外部サイトでの接続で表示されているのでインターネット環境は必須。

PythonでPDFをHTMLに変換する

## はじめに
特定の目的により、PDFをHTML形式に変換する必要が出てくる場合もあります。これは、内容物を直接Webページに埋めめ込むことができ、アクセシビリティを向上させる助けになります。また、PDFをHTMLに変換することで、簡単に編集や内容の更新が行えるようになります。具体的な方法は以下の通りです。
## ツール
* Python 3.12.0
* [Spire.PDF for Python](https://www.e-iceblue.com/Introduce/pdf-for-python.html)

このライブラリは購入する必要がありますが、30 日間の無料試用版も提供されています。
もっと多いサンプルコードについて、[Spire.PDF for Python](https://www.e-iceblue.com/Download/Spire-PDF-Python.html)をダウンロードして参照してください。

## インストール
まず、Spire.PDF for Pythonと plum-dispatch v1.7.4を VS Code にインポートしください。

要素を横に並べる（自分用）

次のようなリストをCSSで横並びにしてみる。

①リストをインラインにする

②floatを使う

③flexを使う
![スクリーンショット (13).png](https://qiita-image-

ブロック要素とライン要素（自分用）

・ブロック要素
行全体のまとまりを作る。
div,header,footer,nav,section,article,p,ul


・インライン要素とは
行の中の一部のまとまり
span,img,small,strong,a…など


Modalって作るの難しい・・・諳んじれますか？

ふと気になって調べること数十回。自分の中で区切りをつけたいので記事にまとめます！

あと、諳んじる必要は全く無いと思っています！

## 環境

BrowserがあればOKです。

一応、[リポジトリ]()にNode プロジェクトとしても作ってあります。`npm run start`で動きます。

## 実装

### Modal構成要素

– ダイアログ中央表示
– Overlay
– 表示・非表示切り替え

では、順番に実装していきましょう。

### ダイアログ中央表示

絶対位置で、ダイアログを中央に配置します。

“`html:index.html

Dialog

“`

“`css:style.css
#dialog {
position: fixed; /* 絶対位置で表示 *

Mapboxで位置情報をリアルタイムにウェブ上に表示する方法

この記事では、ユーザーの位置情報をリアルタイムで取得し、その情報に基づいて地図上にマーカーを動的に更新することで、ユーザーの現在地を視覚的に追跡する機能を提供します。これにより、ウェブベースの地図アプリケーションでリアルタイムの位置追跡機能を実現できます。

**自己紹介**

みなさんこんにちは！

世界を体験できるメディアをミラーワールドを通じて作っているかっつーです。それを作るための背景や思いなどについては[こちらの記事](https://note.com/katsu1008/n/n6b2cd805a929)を参考にしてください！

作るまでの具体的なステップについては[こちらの記事](https://note.com/katsu1008/n/nf72df1aa5d47)をご参考にしてください。

僕は世界のあらゆる境界線に関心があります。細胞や自己と他者、障害、国境、社会的対立など世界は境界線の積分でできていると考えています。

これらの境界線をテクノロジーによって、なめらかにし、自由自在にすることができれば、人々が生きやすいなめらかな社会が実現できると考えています。

###

aタグtarget=”_blank”のセキュリティ的問題点

今回の記事は、新米エンジニアの僕がフロントエンドの保守を行って、普段通りプルリクを出したら、すごく有益なコードレビューを上司の方にしていただいたのでそれをまとめます。

## aタグのtarget=”_blank”
まず、この`target=”_blank”`をaタグに追加するとどうなるかを説明します。
このオプションを追加することでaタグをクリックしたときに別タブが開かれて表示されるようになります。
これは、ブラウザの設定なども影響するのですが、基本的にはこのオプジョンをつければ、別タブでの表示が確約されます。

## target=”_blank”のセキュリティ的な問題点
本来、リンクをクリックした時に別タブが開かれるようにする理由としては、ユーザエクスペリエンスを向上させ、離脱率を下げるという目的があります。しかし、この`target=”_blank”`には、リンク元の情報を保持して別のタブを開くという性質があります。これによって、悪意あるユーザがリンク元のページの情報を抜き取ったり、攻撃をしたりするという問題が起こりえます。

## 解決策
この解決策としては、`rel=”no

ずれなくWebページを印刷させるためのCSSティップス集

用紙の大きさはA4とかって決まっているとき、その決まった大きさにずれずに収まるように印刷できるようなウェブページを作るときのティップス集。複数のページにしたいときにも対応。

# `@page` を書く
[`@page`](https://developer.mozilla.org/ja/docs/Web/CSS/@page) はCSSの@ルールの一つで、印刷するときの用紙の大きさ等を指定できる。

“`css
@page {
size: 297mm 210mm;
margin: 0;
}
“`

[`size`](https://developer.mozilla.org/ja/docs/Web/CSS/@page/size) プロパティでA4横向きの大きさで印刷することを表している。A4以外の大きさの紙に印刷しようとすると縦横比を保ったまま拡大縮小される模様。縦横比を保ってくれるので、別の大きさの用紙を使っても余白はできるがレイアウトが崩れることはなくせる。

`margin` プロパティで印刷するときの余白を指定できる。余白にはヘッダーやフッターを入れることができるよ

Djangoテンプレートで使えるコメントアウトメモ

# 1.はじめに
djangoアプリの開発中にコメントアウトで引っかかって手間取ったのでまとめます.

# 2.ブラウザ側で無効になるコメントアウト

htmlやjsのコメントアウトがこれに当たります.このコメントアウトはブラウザの検証機能から見えるので残すときには注意が必要です.
“`






“`

# 3.テンプレートエンジン側で無効になるコメントアウト
Djangoのテンプレートタグなどを使ってもコメントアウトすることができます.こちらはテンプレートエンジンで無効になるのでブラウザの検証機能から見えるhtmlやjsのソース内から見ることができません.

“`


{% comment %} コメントアウト {% endcomment %}
{{# コメントア

Html構文を取得後、UTF８に変換する際の注意点

# Html構文を取得後、UTF８に変換する際の注意点

アップルのサイトにWebサイトをフェッチ（Fetch)する時のサンプルとして以下のコードを載せている。

しかし、このコード内には推奨されない関数が使われている。

“`swift:Sample
func startLoad() {
let url = URL(string: “https://www.example.com/”)!
let task = URLSession.shared.dataTask(with: url) { data, response, error in
if let error = error {
self.handleClientError(error)
return
}
guard let httpResponse = response as? HTTPURLResponse,
(200…299).contains(httpResponse.statusC

SEO対策の具体例を忘れないための備忘録

## head内に書くべきタグ

“`.html

buttonの縦位置

# はじめに
`html`の`button`が横に並んでいる中で、`hover`したときに`font-size`をちょっと大きくしてやろうとしたとき、若干上に浮く！？と気づいたので、その調査結果と、対策です。

# 課題
課題と解決策まで１つで書いてしまいますが、大げさにするとこんな感じ。
フォントサイズを大きくしてるだけなのに、なんでボタン自体がずれてるの！？という問題。フォントサイズを小さくすると下にずれる。

See the Pen

mix-blend-modeを使用して白黒反転を簡単に実装

## mix-blend-modeを使用で白黒反転

mix-blend-modeとは、cssのプロパティの一つで
要素の内容物と親要素の内容物や要素の背景をどのように混合するかを設定できるもの。

https://developer.mozilla.org/ja/docs/Web/CSS/mix-blend-mode

混合するのが主な用途かもしれないですが、実はdifferenceを使用すると簡単にカラーの反転を実装することができます。

“`
mix-blend-mode: difference;
“`

たったこの１行を該当箇所のスタイルに適応させてあげるだけです！

しかも、テキストカラー、背景色などいろいろなものが対象です。
試しにテキスト（color）とハンバーガーメニュー（background-color）を対象として検証してみました！

【Bun/Node.js】fetchした画像をBase64形式のData URLsに変換する方法

# 背景

Redisでキャッシュした画像をWebページで表示できるようにしたい。Redisはバイナリセーフなので画像をそのまま保存できるが、HTMLのimgタグで表示する際の扱い易さを考慮して、まずはBase64形式のData URLsに変換することに決めた。

# 方法

“`js
// 画像を取得する
const response = await fetch(“https://avatars.githubusercontent.com/u/40382980?v=4”)

// レスポンスをBlobオブジェクトとして取得する
const blob = await response.blob()
const { type: fileType } = blob

// Bufferオブジェクト経由でBase64文字列に変換する
const arrayBuffer = await blob.arrayBuffer()
const myBuffer = Buffer.from(arrayBuffer)
const base64 = myBuffer.toString(‘base64’)

【VanillaJS】headタグにscriptタグを書いても動かなかった

# はじめに

ナイトウ([@engineer_naito](https://twitter.com/engineer_naito))と申します。

Vueを最近勉強しています。

Vueを勉強しているのですが、それ以前にTypeScript, JavaScriptの基礎知識が不足していることに気づきました。
そこでまずはフレームワークを利用せずに、

– HTML
– CSS(JavaScript)
– JavaScript(Vanilla)

でTODOアプリを作成してみることにしました。

## コード

– JSFiddle

https://jsfiddle.net/engineer_naito/modrsev9/21/

単純なTODOアプリです。
– タスクを入力して「登録」ボタンを押すとタスクが画面に表示される(箇条書き)
– 「削除」ボタンを押すとそのタスクが画面から消える
– チェックボックスを押すとタスクに取り消し線が入る

“`html: index.html

プロフィール写真切り取り機能の実装

# はじめに
実務で、プロフィールで顔写真を登録できるようにしたいと要望がありました。

* プロフィール写真は表示回数が多いため、ファイルサイズを小さくする必要がある
* プロフィール写真を表示する際に、ちょうど良くなるように写真を切り取りできるようにする必要がある
* 写真を切り取り後に、プレビューできるようにする
* ユーザーが使いやすいUIにする

上記の点を意識して、実装を行いました。

今回写真切り取り機能を実装するにあたり、以下のQiitaの記事を大いに参考にさせていただきました。

https://qiita.com/yamazaki3104/items/abbcb88f573d3c5a4a40

# 実装サンプル

CSSのhasを使ってみたかっただけ

# はじめに
最近cssでhas使ってみたらと言われたので、使用してみました。

# hasってなに？
> :has() は CSS の疑似クラス関数で、引数として渡される相対セレクターのいずれかが、その要素から辿ってアンカーとして少なくとも一つの要素とマッチする場合に、その要素を表します。この疑似クラスは、相対セレクターリストを引数として取ることで、参照している要素に関して親要素や前の兄弟要素を選択する方法を提供します。

https://developer.mozilla.org/ja/docs/Web/CSS/:has

# 完成イメージ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3289992/16e4980f-79fb-dbce-8

justify-contentについて

## justify-contentとは
flexアイテムの配置を指定するプロパティで、左寄せ・右寄せ・中央寄せなど、アイテムの間の余白などを指定することができます。

また、justify-contentは、display:flex;で横並びにした要素の配置を指定するプロパティです。

web制作をしている時、横に並べた要素の間隔を均等に配置したりとか、要素を中央に寄せたりすることができます。

justify-contentには使い方が何種類かあるのですが今回はよく使うものでいうと

・flex-start（左寄せ）
・flex-end （右寄せ）
・center（中央寄せ）
・space-between（両端揃え）
・space-around（アイテムの両側に均等な余白をつける）

などになります。

具体的にどんな変化があるのか見ていきます。

まずboxを作っていきます。
HTMLは親要素である「content」というクラスのついたdivの中に子要素である「box」というクラスのついたdivが入っています。

“`html

<

【HTML】削除ボタン付きタグのサンプル

## 削除ボタン付きタグとは？

こういうの。


## コード

ChatGPT3.5くんがほぼ作ってくれました。
マジで便利。

“`html