今さら聞けないHTML 2022年05月22日

今さら聞けないHTML 2022年05月22日
目次

nl2br関数使用時のブラウザ画面の挙動まとめ

# 経緯
nl2br関数を文字列に適用させる際に、”と””で囲んだ際のソースコード画面およびブラウザ画面の挙動の違いを整理したかったため。

# 環境

* 言語 php 7.4.29
* ブラウザ Google Chrome
* macOS Monterey 12.1 (M1チップ)

# 検証結果まとめ

|テストケース|テスト文字列|nl2br適用|Webページでのソースコード表示|ブラウザ画面|
| :—: | :—: | :—: |:—: | :—: |
| 1 | ‘\n’| なし | 改行なし(\nがそのまま表示)|改行なし(\nがそのまま表示)|
| 2 | ‘\n’| あり | 改行なし(\nがそのまま表示)|改行なし(\nがそのまま表示)|
| 3 | “\n” | なし| 改行あり(\nが消失) |改行なし(\nが消失し、半角スペースが入る)|
| 4 | “\n” | あり| 改行あり(\nが消失し、\
タグが出現) |改行あり(\nが消失)|

# 検証コード

“`php5:検証テスト1〜4

元記事を表示

ホームページを作る[Windows]

# 目次
1. 事前準備
1. FLASKの書き方

# 1. 事前準備
ここでは、flaskで作った簡潔なWebアプリケーションをHerokuに送信し、実行します。
### Herokuの環境構築
[こちら](https://qiita.com/kitahide12123/items/5f4c5b207fa87ed4af7a “Herokuをインストールしよう”)を参考に行ってください
### ディレクトリの構築
以下のように、フォルダ、ファイルを作成します。
>“`bash:ディレクトリ構造
>/
> |–flaskr/
> | |–templates/ # htmlフォルダ
> | | |–index.html
> | |–staics/ # cssフォルダ
> | | |–style.css
> | |–__init__.py
> | |–main.py # flaskのメイン処理
> |–flask_run.py # flask起動
> |–Procfile # Heroku

元記事を表示

JavaScriptライブラリ「FlipPlayer」を作りました

自称・画期的なアニメーションライブラリ「[FlipPlayer](http://spice-tortoiseshell-baseball.glitch.me/)」を作ったので、宣伝も兼ねて開発記を書いていきます。

# FlipPlayer
http://spice-tortoiseshell-baseball.glitch.me/

で公開しており、スライドショーやアニメーションなどをHTMLページへ簡単に設置できるというものです。  

## 開発の動機
2020年に、Flashが廃止されてしまったというのが一番の要因です。実を言うと私は2019からネットを使っていて、その過程でたまにFlashアニメーションを見かけたりしていました。もともと個人サイトなどに興味があり、廃止は名残惜しいな、と思って作ったのがこいつです。

# 開発期間
大体1週間くらいかかりました。いやはや、ライブラリを作るのは大変ですね。

# 仕組み
ざっくりな仕組みは、キー入力の読み取りと画像遷移、オブジェクト生成などのスクリプトでできています。いちいち変数を宣言しなければいけないため一見複雑に見えますが、中

元記事を表示

HTML Living Standard に記載されている仕様が、Nu Html Checker でエラーが出るので調べてみた

## 要約
* [validator.w3.org/nu](https://validator.w3.org/nu) は新しい仕様のチェックに対応していない(2022/05/21現在)
* Nu Html Checker は HTML Living Standard 更新に合わせてアップデートされているが、validator.w3.org/nu には反映されていない
* ローカルから 最新の Nu Html Checker を実行することで新しい仕様のチェックができる

## ことの発端
* First View で Layout Shift が発生するので対策を調べていたところ、Picture タグにも width / height を設定することができるらしい (https://www.mitsue.co.jp/knowledge/blog/frontend/202105/31_1512.html)
* Picture タグ内に width / height を設定したところ Nu Html Checker でエラー

気になったので調べてみる

## HTML Living St

元記事を表示

実際にWebの閲覧で眼を悪くした人がおすすめするWebの色配色

MSXパソコンで color 15,4,7 ではじめて
そのあと、白文字、黒文字のMS-DOSとかを比較的長期間体感して、今の時代に目を悪くした人が、色の提案をしています。

## ライトモード

背景に使用すべき色:#ccc~#eee
通常の文字:#222
目立たせる色:#000 (過剰利用はしないこと)

## ダークモード

背景に使用すべき色:#222~#333
通常の文字:#ddd~#eee
目立たせる色:#fff (過剰利用はしないこと)

## この配色の考え方

普段からディスプレイで白色は多く見る為に、白色は全体的になるだけ抑えており、ちょっとでもグレーに近づけておきます
明るい色と暗いの差異を減らし、かつ、明確にしておく

:::note info
これで対処しておけばいいや、っていう悪い例をあげます。
この配色は、かえってピュアブラックとかを使ったほうのが見やすくなるし、色の差異が逆に少なくなり、目の疲労が更に加速します

color: #ccc;
background: #444;

color: #444;
background: #eee;

:::

元記事を表示

Flexboxとレスポンシブ対応

# Flexbox
CSSレイアウトの一種です。基本的に私は要素を横並び、縦並び、中央ぞろえなどのを行う際に利用しました。
Flexboxは親や子の箱のサイズが拡大縮小しても、その空間に応じてレイアウトが可変するためとても柔軟性が高いものでもあります。

### FlexコンテナーとFlexアイテム
Flexレイアウトは大きく分けて2種類の要素に分かれており、それぞれ設定できるプロパティが異なります。

・Flexコンテナー
Flexレイアウトの内親の箱となるものです。display:flexと設定することでFlexコンテナーになります。
Flexコンテナーは内容の並ぶ方向(横・縦) / 横方向の整列方法 / 縦方向の整列方法 / 折り返し方法 などを設定することができます。

・Flexアイテム
コンテナー内に入ってるものは自動的にFlexアイテムとなります。
Flexアイテムは内容の並び順 / 伸縮比率 / 個別の縦位置などを設定することができます。
Flexアイテム内に更にdivが含まれるなど、入れ子になっているアイテムはFlexアイテムにならないことに注意。

### Flex

元記事を表示

ローカルでも使える超簡易な絞り込み機能(プルダウン・キーワード)付きリスト

## 画像やPDFも載せられる絞り込み機能付きリストがほしい

自分が過去に作ったページとか画像などを見返す必要が時々あって、パワポに画像を貼り付けてリストっぽくしてctrl+Fで探したりしてたけど、絞り込みできないから不便だった。

エクセルだと画像やPDFを含む絞り込みは厳しい。
Confidentialな情報が含まれるので外部サービスを使うのはNG。データベース等構築するほどでもない。

なので、htmlだけでそれっぽいリストを作成しました。

データはhtml内の配列で羅列。
ポータビリティが良いようにCSSもJSも全部インラインで入れてしまっているので、ミニマムこの1ファイルだけでOKです。
jQueryをCDNじゃなくてダウンロードすれば、オフラインでも使えますね。

HTML/CSSコーダーが初めてPhotoshopを使うときのポイント

自分はデザイナーじゃないけどPhotoshopのデザインカンプをもらってHTML/CSSをコーディングする、というときに、文字や色の情報を取り出す手順を書いていきます。

# 対象の読者
– Photoshopに初めて触れる人
– PhotoshopのデザインカンプをもらってHTML/CSSをコーディングする人
– 自分でデザインするわけではないが、最低限コーディングに必要な情報を確認したい、デザイナーの意図を読み解きたい人

# Photoshopのインストール

Photoshopは有料のアプリです。色々なプランがあります。プランの比較やインストール手順などはこちら↓を参考にしました。

https://citrus-designs.com/install-photoshop/

# psdファイルを開く

今回は、こちら↓のサイトから、ショップのホームページの練習用のpsdファイルをお借りして説明します。

https://usagidesign-e.com/download/

ダウンロードしたpsdファイルがこちらです。
![](https://i.gyazo.com/896

元記事を表示

Eslintのエラーについて

### 概要
webpackを利用してjQueryを記述中にeslintのエラーが出たので、エラーの意味と解決策


“`javascript
var storyTitle = $(“.p-story”).find(“.js-blockTitle–scroll”).html();
var storyTitleTrim = $.trim(storyTitle);
var newHtml2 = “”;
storyTitleTrim.split(“”).forEach( v => {
newHtml2 += “” + v + ““;
});
$(“.p-story”).find(“.js-blockTitle–scroll”).html(newHtml2);
“`
“`
error ‘storyTitle’ is assigned a value but never used no-unused-vars
“`
→変数定義の際にvarを使用するのは望ましくないからconstかletで定義しようというエラー
varをconstもしくはletに変更

元記事を表示

Teachable Machineを使ったデジタルサイネージ作ったら、通知が鳴りやまなくなりましたよ。すっかり人気者です!

## かっこいいデジタルサイネージを作りたい!!作りたい!!作りたい!!
どうも 北海道オホーツク海沿岸のスーパーで働いています いきなり幼稚園児みたいなノリですが40超えました😀

経緯

Amazonや楽天などのECサイトや他のスーパーに行かずわざわざウチのお店に来てくれるお客様に、**ちょっとでも良い気分で帰ってもらいたい**そんな事を思ってます(照)
だから商品の良い所をもっと伝えられたらと、手書きPOPをつくったり、メーカーさんからCMのデータをもらってタブレットで流したりしてましたが、お客様に伝わっているのかもっと役立つ方法はないのかと思っていたりしました
ところがある日どうでしょう、よくよく考えたらスマホやタブレットが簡単に手に入り、音楽や映像を自分で作れる時代になって、さらに誰でも手軽に画像認識ツールが出来るTeachable Ma

🔰静的HTMLファイルをNode.jsで立ち上げたサーバーを使ってLocalhostに表示させる!

Progateを使ってWeb製作をし始めてから2週間。ある程度知識が集まってきたので、ほぼ同じでもいいから自分で何か作ってみようと始めた矢先…。

エクスプローラに置いている静的HTMLファイルを、Node.jsを使って立ち上げたサーバーで表示したい。サーバーを立ち上げるコードなどは知っていたが、Progateと同じコードでやってもできない。

結局解決したが、気を付けなければいけないことがあったので、自分の勉強の証として残しておきます。

# 結論:パスが違った
ファイルの階層はこんな感じ

“`
MyIntroduction
├── public
│ ├── img
│ │ └──background.png
│ └── css
│ └──stylesheet.css
├── view
│ └── index.html
├── app.js
└── package.json
“`

下記のapp.jsはExpressを使ってルーティングをするためのファイルで、改善前です。

“`javascript:app.

HTMLとCSS

# WEBサイトの構造
HTMLはWEBサイトを作るための言語です。
そもそもWEBサイトとは一要素で構成されるのではなく、複数の要素が合わさって作られています。
大分類では、html要素、head要素、body要素と分類されます。
もっと細かく分けると、ヘッダーやメインビジュアルメイン、フッタいったものにも分けられます。
正確にはさらにここから分割することも可能ですが、それは別途参照。
“`


#コード

#コード

#コード

#コード


“`
実際のコード画面は上記のような感じです。<〇〇>と</〇〇>囲んだコードがその要素に反映されます。
またHTMLは「入れ子の構造」というものになっています。
簡単に言うと要素の中に要素を挿入し、さらにその要素内に別の要素を追加するといった書き方です。

“`


#コード

3カ月の学習を終えて

現職からの転職を考えて、プログラミングの学習を始めてから約3カ月。
企業提出用のポートフォリオがひと段落ついたため、こちらのQiitaのほうに今までの学習の振り返りや発生したエラーの解決方法を備忘録として投稿していこうと思います。
主に使用した言語はHTML、CSS,Ruby,Railsです。

# HTML,CSS
簡単に言えばWEBサイトを構成するための言語です。
HTMLでWEBサイトの大まかな構造を作り、CSSで外観を整えるといったイメージ。
# Ruby
WEBアプリケーションを作るために必要な言語
#### HTMLとの違い
HTMLは「WEBサイト」を作るための言語、対してRubyは「WEBアプリケーション」を作るための言語です。
「WEBサイト」は訪問者が受動的に閲覧するものです。つまり、静的なページのことです。

一方「WEBアプリケーション」は訪問者に能動的な動作を求める者です。閲覧だけでなく、情報を入力してもらい、その内容によって表示が変わります。
具体的には、ユーザー登録機能や検索機能などです。入力した内容によってマイページの表示は変化するし、検索結果も当然変わ

[初学者] HTMLでwebサイトを作成するために必要な知識 ①

# HTMLでwebサイトを作成する

## 用語

### タグ

“`:タグ
<>
“`
開始タグ、終了タグなど
要は<>1つでタグ

### 要素
“`:要素

HTML

“`
タグも含めた、これ全体を要素と呼ぶ
**h1は要素名**である

### 属性

“`:書き方
<要素名 属性="属性値">

1.要素名の後ろに半角スペース
2.属性に = を付ける
3.属性値を ” or `で囲む
“`

要素名に対して、属性という設定をつけるイメージ

“`:意味
要素名の、属性(設定)は、属性値
“`
と置き換えて読めばいい

“`:例

“`

画像(img)の場所(src)は”http://…..”(url)

## 語法一覧

### 見出しをつける

“`:書き方

見出し

見出し

.
.
.

見出し

“`

`

`から`

`まで大見出し、中見出し、子見出しと昇順で重

お前らはまだ img タグの alt 属性の付け方を間違っている

# 1行で
`alt`属性は、「全ての **画像をその`alt`属性のテキストに置き換えたときにページの意味が変わらない** 」ようにつける。
([HTMLの標準規格書より](https://html.spec.whatwg.org/multipage/images.html#general-guidelines))

マジでこれに尽きる。

# 具体例

## 例1:ロゴ
![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2354612/1a517966-c64b-9a6a-0912-9f7c0de3e9a5.png)

### ❌ 間違ったマークアップ
“`html:間違い

会社ロゴ

我々の使命、それは世界にイノベーションを〜

“`

画像を`alt`属性のテキストに置き換えると以下のように意味がおかしくなる。

“`html:間違いの置き換え

会社ロゴ

我々の使命、それは世界にイノ

100日後くらいに個人開発するぞ!day030

## 今日もHTML&CSSを総復習してみた!【後編】

### ヘッダータグとフッタータグ
– ヘッダーとフッターのタグは非常によく使われるためHTMLには`

`タグと`

`タグが存在する
– `

`タグと`

`タグを使うことで`

`とクラス名を用いる方法は不要になる
– 例:`

`とクラス名を用いる方法
– ``
– `

`
– `

`
– `

`
– 例:`

`タグと`

`タグを用いる方法
– `

`
– `

`

django-allauthでページをカスタマイズする際のファイル名一覧

# はじめに
当記事は`django-allauth`でページをカスタマイズする際のファイル名が検索しても一部しか載っていなかったりしたので、備忘録を兼ねて一覧を記しています。
Djangoやdjango-allauthの導入方法などは触れていませんのでご注意ください。
また、漏れやミス等ありましたらご指摘していただけると幸いです。

# django-allauthバージョン

“`
pip list|grep django-allauth
django-allauth 0.50.0
“`

# ページと対応するファイル名一覧
以下に、ページ名と作成すべきファイル名の一覧を示しています。
| ページ名 | ファイル名 | ページ機能概要 |
|———–|————|————|
|Sign In|login.html|ログインページ|
|Sign Up|signup.html|新規登録ページ|
|Verify Your E-mail Address|verification_sent.html|新規

スーパーの鮮魚売場でお魚くわえた3Dドラ猫を出現させたい

こんにちは。
最近初めてARに触れる機会がありまして、
自分でも何かつくってみたいなと思い、実装してみました。

## お魚くわえたどら猫を見たことがないから自分で作る!

私は小売業で働いているのですが、AR技術を学んだときに
自分の家で飼っている猫がスーパーに現れると
日々のお仕事が楽しくなるんじゃないか考えました。

で、飼っている猫がスーパーのどこに行くかと考えたときに
お魚売場だなと・・・

そこでふと出てきたこの曲!
お魚くわえたドラ猫 追っかけて~♪
サザエさんの曲!!!!

歌の出だしの1フレーズですが、そもそもお魚くわえたドラ猫見たことないなと思ったので
AR使ってお魚売場で魚くわえてる猫を実装してみようと思います。

## 一旦完成した作品がこちら

### 実際に使用することもできます!
このQRコードをスマートフォンで読み取って、
![image.png](https://qiita-image-store.s3.ap-northea

【CSS】カスケードレイヤーの使い方 – @layer

## 概要
CSSの新機能「カスケードレイヤー」がいよいよ主要ブラウザすべてにサポートさました。
それに伴い、カスケードレイヤーの使い方についてまとめました。

## カスケードレイヤー `@layer`とは?
カスケードレイヤーとは、**スタイルの優先順位**を**レイヤー**として管理できるようにしたCSSのアットルールです。
*※ アットルールは、`@import`や`@charset`などの`@`から始まる構文のこと*

カスケードレイヤーが登場したことで、
CSSの詳細度とスタイルの順番を明示的に階層化できるため、
`!important`だらけで、CSSが思い通りに当たらないようなカオスな状態から脱却することができます。

ただ、*「classでスタイルが当たらないから、カスケードレイヤーで当てよう」* といった気軽に当てると、
今とあまり変わらなくなるので、CSSをしっかり設計してから、反映していく必要はあります。

### 今までと何が違うの?
:::note
今までの優先度の順位にCascade Layersが追加されました。
インラインのstyle属性に記述したスタ

C#VB.NET HTMLをPDFに変換する方法

HTMLファイルをPDFに変換すると、オフラインで読み取ることができるほか、そのコンテンツを保存して忠実にフォーマットできるなど、多くの利点があります。Spire.PDFは、HTMLをPDFに変換する2つの方法を提供します。1つはQT Webプラグインを使用する方法で、もう1つはプラグインを使用しない方法です。QTプラグインを使用して変換を行うことをお勧めします。

次のセクションでは、QTプラグインの有無にかかわらずSpire.PDF for .NETを使用してHTMLWebページ(URL)またはHTML文字列をPDFドキュメントにレンダリングする方法を示します。

QTプラグインを使用してURLをPDFに変換する
QTプラグインを使用してHTML文字列をPDFに変換する
プラグインなしでURLをPDFに変換する
プラグインなしでHTML文字列をPDFに変換する

## Spire.PDF for.NETをインストールします

まず、Spire.PDF for.NETパッケージに含まれているDLLファイルを.NETプロジェクトの参照として追加する必要があります。DLLファイルは、[こ