トップ/web/html

web/html の変更点

#author("2023-12-23T22:53:55+09:00","default:nemusg.pad","nemusg.pad")
#author("2025-08-25T00:25:37+09:00;2023-12-23T22:53:55+09:00","default:nemusg.pad","nemusg.pad")
* HTMLタグチェック [#jce7ba7f]

** ブックマークレットで簡易チェック [#dd5763f8]

[[HTML内タグの閉じ忘れをチェックするブックマークレット:http://tockri.blog78.fc2.com/blog-entry-168.html]]

#code_x{{
javascript:var%20w=window.open(`,'_blank','width=800,height=500,scrollbars=yes']];var%20s=document.createElement('script']];s.charset='Shift_JIS';s.id='tagcheck-script';s.src='http://tkr-net.tk/tagcheck/tagcheck2.js?'+Math.random(]];document.body.appendChild(s]];void(0]];
}}

再配布自由ということで社内サーバなどに置くと使いやすいかもしれない。
その場合は「 http://tkr-net.tk/tagcheck/tagcheck2.js 」の部分を変更する。&br;

文字コードとJSのパスを
`https://raw.githubusercontent.com/wiki/nemusg/nemusg.com/js/tagcheck/tagcheck2.js` に変えたVer
#code_x{{
javascript:var%20w=window.open(`,'_blank','width=800,height=500,scrollbars=yes']];var%20s=document.createElement('script']];s.charset='UTF-8';s.id='tagcheck-script';s.src='https://raw.githubusercontent.com/wiki/nemusg/nemusg.com/js/tagcheck/tagcheck2.js?'+Math.random(]];document.body.appendChild(s]];void(0]];
}}

* target属性 [#j68719f7]

*** target="_blank" のセキュリティリスク [#wd7b2603]

- [[リンクのへの rel=noopener 付与による Tabnabbing 対策:https://blog.jxck.io/entries/2016-06-12/noopener.html]]
- [[target="_blank" のセキュリティリスク(デモ動画あり]]:https://reisato.plala.jp/rsato/weblog/2016/07/19/0215.html]]
--  これは飛び先に悪意がある場合なので、変更できない自サイト内を開く場合は多分問題ない。対策も可能なのでtarget="_blank"を使わない理由にもならない。
--  target=_blank 付きのリンク全てに rel="noopener noreferrer" を追加しておくと安心。

*** target="_blank" があるとスマホアプリWebviewで遷移できないことがある [#e3d537ca]

某アプリでもAndroid版でtarget="_blank"がついている場合はリンクをタップしても遷移できないことがあった(2018-2019年]]。
2020年になってから再検証したところ再現しなかったのでアプリのVerかAndroid OSの更新で改善した可能性がある。

- [[リンクにtarget="_blank"を入れていると、スマホでページ移動できない問題の検証結果 | WordPressテーマ「メシオプレス」公式:https://mesiopress.com/target_blank-10648.html]]


* 動画の埋め込み [#u79ec488]

もちろんYouTube使うのが楽なんだけど

** HTML5のmovieタグを使う [#i274e3b0]

#code_x{{
<video width="400" height="300" preload="none" controls="controls" tabindex="0" poster="img/poster.jpg">
<source src="movie.m4v"></source>
<source src="movie.webm"></source>
</video>
}}

webmとm4v
oggとmp4 のように2種類は用意しないといけない

#code_x{{
<meta http-equiv="X-UA-Compatible" content="IE=EDGE,chrome=IE7">
}}

でなんでかIE7-8にも対応？

** リンク [#tfa11976]

- [[<video>タグで動画を埋め込む HTML5リファレンス:http://www.htmq.com/html5/004.shtml]]
- [[HTML5 <video>タグによる動画の再生、現在の再生時間や終了のタイミングの取得方法等:http://zxcvbnmnbvcxz.com/html5-video/]]


* その他 [#h62a9180]

** HTMLのbodyにstyle要素を書いて良いのか [#fb91180d]

なぜだめなのかの説明用

- [[html5.2ではstyle要素をbody内に書けるようになりました - webのあれこれ:https://vanillaice000.blog.fc2.com/blog-entry-676.html]]
- [[html - <body>内に<style>を設定したときの動作仕様 - スタック・オーバーフロー:https://ja.stackoverflow.com/questions/7241/body%E5%86%85%E3%81%ABstyle%E3%82%92%E8%A8%AD%E5%AE%9A%E3%81%97%E3%81%9F%E3%81%A8%E3%81%8D%E3%81%AE%E5%8B%95%E4%BD%9C%E4%BB%95%E6%A7%98]]

#include(parts/feedback,notitle)