web/html の履歴(No.1)

履歴一覧
差分を表示
現在との差分を表示
ソースを表示
web/html へ行く。
- 1 (2023-12-23 (土) 22:53:55)

HTMLタグチェック#

ブックマークレットで簡易チェック#

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 」の部分を変更する。

文字コードとJSのパスを https://raw.githubusercontent.com/wiki/nemusg/nemusg.com/js/tagcheck/tagcheck2.js に変えたVer

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属性#

target="_blank" のセキュリティリスク#

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

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

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

リンクにtarget="_blank"を入れていると、スマホでページ移動できない問題の検証結果 | WordPressテーマ「メシオプレス」公式

動画の埋め込み#

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

HTML5のmovieタグを使う#

<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種類は用意しないといけない

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