HTML - 版の履歴

Senooken: meta refreshリダイレクト

2025-09-03T03:10:02Z

meta refreshリダイレクト

@@ 276行目: / 276行目: @@
 スマホサイトにはcanonicalを設定する。
   <link rel=”canonical” href=”http://www.example.com”>
 canonicalを設定すると、指定したURL以外検索結果に表示されなくなるらしい。例えば、多言語サイトなどの場合は、canonicalは設定したらまずい。
@@ 294行目: / 292行目: @@
   [https://developers.google.com/search/blog/2013/04/5-common-mistakes-with-relcanonical?hl=ja rel=canonical 属性に関する 5 つのよくある間違い  |  Google 検索セントラル ブログ  |  Google for Developers]
 ==CSS==

Senooken: /* Head */

2025-08-29T08:47:32Z

Head

← 古い版		2025年8月29日 (金) 17:47時点における版
254行目:		254行目:
	==== Head ====		==== Head ====
	head要素内に配置する要素。メタ情報的なものが多く、SEO対策目的のものが多い。		head要素内に配置する要素。メタ情報的なものが多く、SEO対策目的のものが多い。

			https://grok.com/share/c2hhcmQtMw%3D%3D_12bea72f-9905-471e-bb87-a531d5b6b1f0

			JavaScriptで動的生成するのはまずい。JavaScriptで動的生成していいのは、重要でないもの。インタラクティブなUIとか、トラッキングコードとか。なくても問題ないものだけ。

	===== canonical =====		===== canonical =====

Senooken: Head head要素内に配置する要素。メタ情報的なものが多く、SEO対策目的のものが多い。 canonical

2025-08-29T08:37:40Z

Head head要素内に配置する要素。メタ情報的なものが多く、SEO対策目的のものが多い。 canonical

← 古い版		2025年8月29日 (金) 17:37時点における版
251行目:		251行目:

	typeのデフォルトがsubmitなので注意する。基本はtype="button"にする。		typeのデフォルトがsubmitなので注意する。基本はtype="button"にする。

			==== Head ====
			head要素内に配置する要素。メタ情報的なものが多く、SEO対策目的のものが多い。

			===== canonical =====
			[https://ferret-plus.com/1809 canonical（カノニカル）とは？URLの正規化でSEOのマイナス評価を避けよう｜ferretメディア]

			[https://digital-marketing.jp/seo/site-structure-canonical/ link rel="canonical"タグの使い方とSEOの評価について｜Webマーケティング・SEO相談はデジ研]

			canonical=正統なという意味。

			例えば、ECサイトで色違い商品のように、ほぼ中身が同じページができることがある。検索エンジンは内容がほぼ同じページのあるサイトは品質が低いとして、検索優先順位を下げる。これの回避用。重複しているページ側に、正統なページURLを指定すると、評価を下げないとのこと。
			<head>
			<link rel=”canonical” href=”http://www.example.com/blog/”>
			</head>
			他に、スマホサイトとPCサイトがある場合も役立つ。alternateとの合わせ技。

			pcサイト上で以下を記述。
			<link rel=”alternate” media=”only screen and (max-width: 640px)” href=”http://www. example.com/sp/”>
			スマホサイトにはcanonicalを設定する。
			<link rel=”canonical” href=”http://www.example.com”>
			ｓ

			canonicalを設定すると、指定したURL以外検索結果に表示されなくなるらしい。例えば、多言語サイトなどの場合は、canonicalは設定したらまずい。

			<nowiki>*</nowiki> 色違い製品は紛らわしいので設定したほうがいい。

			* 色違い
			* スマホ・PC
			* AMP

			有益な rel=canonical 指定を行うには:

			・重複ページの本文コンテンツのほとんどが canonical ページにもあることを確認する。
			・rel=canonical の指定は１ページで１つとし、かつページのタグ内で指定する。
			・rel=canonical のリンク先が、有効なコンテンツが含まれている URL であること（404 やソフト 404 ではないこと）を確かめる。
			・特集記事が検索結果に表示させたい URL と見なされてしまうため、ランディングページまたはカテゴリページで特集記事への rel=canonical リンクを指定することは避ける。

			[https://developers.google.com/search/blog/2013/04/5-common-mistakes-with-relcanonical?hl=ja rel=canonical 属性に関する 5 つのよくある間違い \| Google 検索セントラルブログ \| Google for Developers]

	==CSS==		==CSS==

Senooken: /* Form */

2025-08-29T08:30:18Z

Form

← 古い版		2025年8月29日 (金) 17:30時点における版
31行目:		31行目:
	「[https://senooken.jp/post/2015/09/20/2595/ HTMLの空要素にはXHTMLとEPUB3との互換性維持のため閉じスラッシュをつけるべき – senooken JP]」では属性がある場合、スペースが必要とあったが、これはツールの問題。		「[https://senooken.jp/post/2015/09/20/2595/ HTMLの空要素にはXHTMLとEPUB3との互換性維持のため閉じスラッシュをつけるべき – senooken JP]」では属性がある場合、スペースが必要とあったが、これはツールの問題。

	==Form==		===Form===
	===About===		====About====
	Ref: [https://developer.mozilla.org/ja/docs/Web/HTML/Element/form <form>: フォーム要素 - HTML: ハイパーテキストマークアップ言語 \| MDN]		Ref: [https://developer.mozilla.org/ja/docs/Web/HTML/Element/form <form>: フォーム要素 - HTML: ハイパーテキストマークアップ言語 \| MDN]

54行目:		54行目:
	*legend: fieldsetのラベル。		*legend: fieldsetのラベル。
	fieldsetが一番外側で、その中にformやinputがあるイメージ。		fieldsetが一番外側で、その中にformやinputがあるイメージ。
	===Attribute===		====Attribute====
	重要な属性が何個かある。		重要な属性が何個かある。
	*action: 送信先のURL。		*action: 送信先のURL。
60行目:		60行目:
	*method: 送信時のHTTPメソッド。get=デフォルト。URLクエリー (?と&区切り)。post=フォームデータをリクエスト本体に設定。dialog=dialog要素内で有効。		*method: 送信時のHTTPメソッド。get=デフォルト。URLクエリー (?と&区切り)。post=フォームデータをリクエスト本体に設定。dialog=dialog要素内で有効。
	*novalidate: 論理値。フォーム送信時の検証を無視。		*novalidate: 論理値。フォーム送信時の検証を無視。
	===Autocomplete===		====Autocomplete====
	Ref: [https://developer.mozilla.org/ja/docs/Web/HTML/Attributes/autocomplete HTML 属性: autocomplete - HTML: ハイパーテキストマークアップ言語 \| MDN]		Ref: [https://developer.mozilla.org/ja/docs/Web/HTML/Attributes/autocomplete HTML 属性: autocomplete - HTML: ハイパーテキストマークアップ言語 \| MDN]

87行目:		87行目:
	*[https://zenn.dev/wataru_nishi731/articles/ae3ee00fdd2279 パスワード入力時の補完をブラウザにさせつつ、1Passwordなどのパスワードマネージャーにも対応させたい]		*[https://zenn.dev/wataru_nishi731/articles/ae3ee00fdd2279 パスワード入力時の補完をブラウザにさせつつ、1Passwordなどのパスワードマネージャーにも対応させたい]
	自動補完の条件がある。他のドメインにsubmitする場合はそのままだと対象外。また、autocomplete=usernameすると、ログイン時の入力補完の支援を受けられる。ややトリッキー。自動補完してほしいところはこれを指定しておくとひとまず楽ではある。		自動補完の条件がある。他のドメインにsubmitする場合はそのままだと対象外。また、autocomplete=usernameすると、ログイン時の入力補完の支援を受けられる。ややトリッキー。自動補完してほしいところはこれを指定しておくとひとまず楽ではある。
	===datalist===		====datalist====
	Ref: [https://mamewaza.com/support/blog/datalist.html datalistタグ＆inputのlist属性の使い方と注意点 [無料ホームページ作成クラウドサービス　まめわざ]]		Ref: [https://mamewaza.com/support/blog/datalist.html datalistタグ＆inputのlist属性の使い方と注意点 [無料ホームページ作成クラウドサービス　まめわざ]]

101行目:		101行目:
	</datalist>		</datalist>
	</syntaxhighlight>		</syntaxhighlight>
	===数値入力===		====数値入力====
	*[https://qiita.com/myzkyy/items/5630c32097aa68315cc5 HTML5で追加された input[type=number] を使う上での注意 #JavaScript - Qiita]		*[https://qiita.com/myzkyy/items/5630c32097aa68315cc5 HTML5で追加された input[type=number] を使う上での注意 #JavaScript - Qiita]
	*[https://note.com/takamoso/n/n79df2d8f16bf 📝数値という理由だけで input[type="number"] 要素を使わない｜たかもそ／Web Creator.]		*[https://note.com/takamoso/n/n79df2d8f16bf 📝数値という理由だけで input[type="number"] 要素を使わない｜たかもそ／Web Creator.]
111行目:		111行目:

	type="tel"だとイベントで値をとれる。		type="tel"だとイベントで値をとれる。
	===readonly/disabled===		====readonly/disabled====
	*[https://developer.mozilla.org/ja/docs/Web/HTML/Attributes/readonly HTML プロパティ: 読み取り専用 - HTML: ハイパーテキストマークアップ言語 \| MDN]		*[https://developer.mozilla.org/ja/docs/Web/HTML/Attributes/readonly HTML プロパティ: 読み取り専用 - HTML: ハイパーテキストマークアップ言語 \| MDN]
	*[https://bonoponz.hatenablog.com/entry/2020/11/12/%E3%80%90HTML%E3%80%91%3Cinput%3E%E3%82%BF%E3%82%B0%E3%81%AEreadonly%E5%B1%9E%E6%80%A7%E3%81%A8disabled%E5%B1%9E%E6%80%A7%E3%81%AE%E9%81%95%E3%81%84 【HTML】<input>タグのreadonly属性とdisabled属性の違い - 小さなことからこつこつと。]		*[https://bonoponz.hatenablog.com/entry/2020/11/12/%E3%80%90HTML%E3%80%91%3Cinput%3E%E3%82%BF%E3%82%B0%E3%81%AEreadonly%E5%B1%9E%E6%80%A7%E3%81%A8disabled%E5%B1%9E%E6%80%A7%E3%81%AE%E9%81%95%E3%81%84 【HTML】<input>タグのreadonly属性とdisabled属性の違い - 小さなことからこつこつと。]
130行目:		130行目:
	\|}値の送信可否が非常に重要な違い。見た目だけで、送信する必要がないならば、disabledでOK。		\|}値の送信可否が非常に重要な違い。見た目だけで、送信する必要がないならば、disabledでOK。

	=== name属性 ===		==== name属性 ====

	==== query送信 ====		===== query送信 =====
	[https://stackoverflow.com/questions/8730622/how-to-append-querystrings-to-a-url-on-submit-of-a-form html - How to append querystrings to a URL on submit of a form? - Stack Overflow]		[https://stackoverflow.com/questions/8730622/how-to-append-querystrings-to-a-url-on-submit-of-a-form html - How to append querystrings to a URL on submit of a form? - Stack Overflow]

146行目:		146行目:
	<input type="hidden" name="q" value="123">		<input type="hidden" name="q" value="123">

	==== []配列参照 ====		===== []配列参照 =====
	フォーム送信時に、サーバーサイドで配列として参照させることができる。nameの末尾を[]にすると配列扱い。キーを指定することもできる。省略すると0始まりの配列扱い。		フォーム送信時に、サーバーサイドで配列として参照させることができる。nameの末尾を[]にすると配列扱い。キーを指定することもできる。省略すると0始まりの配列扱い。

159行目:		159行目:
	基本はcheckboxとselectのみ。逆に、これら以外は配列にしない。input[type=radio]は、送信する際は結局1個の値になる。特定したければ、[value=]のセレクターを使えばいい。		基本はcheckboxとselectのみ。逆に、これら以外は配列にしない。input[type=radio]は、送信する際は結局1個の値になる。特定したければ、[value=]のセレクターを使えばいい。

	==== リレーションとの命名規則 ====		===== リレーションとの命名規則 =====
	https://chatgpt.com/c/673ad9c5-5d48-800b-a937-b8ff4fade246		https://chatgpt.com/c/673ad9c5-5d48-800b-a937-b8ff4fade246

220行目:		220行目:
	}		}

	=== Other ===		==== Other ====

	==== noscript ====		===== noscript =====
	https://chatgpt.com/c/67496a3d-4b88-800b-9d3b-a3ca26e70970		https://chatgpt.com/c/67496a3d-4b88-800b-9d3b-a3ca26e70970

247行目:		247行目:
	[https://developer.mozilla.org/ja/docs/Web/API/Popover_API ポップオーバー API - Web API \| MDN]		[https://developer.mozilla.org/ja/docs/Web/API/Popover_API ポップオーバー API - Web API \| MDN]

	==== button ====		===== button =====
	[https://developer.mozilla.org/ja/docs/Web/HTML/Reference/Elements/button <button>: ボタン要素]		[https://developer.mozilla.org/ja/docs/Web/HTML/Reference/Elements/button <button>: ボタン要素]

Senooken: button

2025-08-29T05:01:20Z

button

← 古い版		2025年8月29日 (金) 14:01時点における版
246行目:		246行目:

	[https://developer.mozilla.org/ja/docs/Web/API/Popover_API ポップオーバー API - Web API \| MDN]		[https://developer.mozilla.org/ja/docs/Web/API/Popover_API ポップオーバー API - Web API \| MDN]

			==== button ====
			[https://developer.mozilla.org/ja/docs/Web/HTML/Reference/Elements/button <button>: ボタン要素]

			typeのデフォルトがsubmitなので注意する。基本はtype="button"にする。

	==CSS==		==CSS==

Senooken: Element void element

2025-05-19T00:47:53Z

Element void element

@@ 18行目: / 18行目: @@
 *要素名は小文字でなければならない
 *開始タグ/終了タグの省略ができない
-*通常のHTMLで終了タグの無い <img> 要素などは <img /> の様に閉じる必要がある
+*通常のHTMLで終了タグの無い <img> 要素などは <img/> の様に閉じる必要がある
 ==Form==
 ===About===

Senooken: /* style要素 */

2025-02-18T01:39:57Z

style要素

← 古い版		2025年2月18日 (火) 10:39時点における版
253行目:		253行目:

	ただ、HTML 5.2でOKだったこともあり、既存のWebブラウザーは解釈する。が、bodyに書きたいなら、JavaScriptでhead内のstyle要素に追記したらいいと思う。		ただ、HTML 5.2でOKだったこともあり、既存のWebブラウザーは解釈する。が、bodyに書きたいなら、JavaScriptでhead内のstyle要素に追記したらいいと思う。
			let style = document.querySelector('head style');
			if (!style) {
			style = document.createElement('style');
			document.head.appendChild(style);
			}
			style.textContent += ``;
			ｋ

			こういうイメージ。

	====CSS building blocks====		====CSS building blocks====

Senooken: style要素

2025-02-17T07:19:11Z

style要素

@@ 238行目: / 238行目: @@
 ===CSS — Styling the web===
 [https://developer.mozilla.org/ja/docs/Learn/CSS CSS - ウェブ開発を学ぶ | MDN]
 ====CSS building blocks====
 =====CSS の値と単位=====

Senooken: Compass

2024-12-20T04:55:53Z

Compass

@@ 584行目: / 584行目: @@
 |}
 Ruby Sassは既にサポート終了なので、いま使うとなるとDart SassかLibSassのどちらか。
 ===Bootstrap===

Senooken: /* Sass */

2024-12-20T04:17:09Z

Sass

← 古い版		2024年12月20日 (金) 13:17時点における版
555行目:		555行目:
	* [https://sass-lang.com/ Sass: Syntactically Awesome Style Sheets]		* [https://sass-lang.com/ Sass: Syntactically Awesome Style Sheets]
	* [https://webrandum.net/sass-compile-type/ 「Dart Sass」「LibSass」「Ruby Sass」などSassの種類や記法に関するまとめ – Webrandum]		* [https://webrandum.net/sass-compile-type/ 「Dart Sass」「LibSass」「Ruby Sass」などSassの種類や記法に関するまとめ – Webrandum]

			Syntactically Awesome Style Sheetsの略とのこと。

	CSSで解釈される2種類の構文で構成されたスクリプト言語。変数の利用、数値計算などCSSで対応していない記法をCSSに変換可能にする。		CSSで解釈される2種類の構文で構成されたスクリプト言語。変数の利用、数値計算などCSSで対応していない記法をCSSに変換可能にする。