by shigemk2

当面は技術的なことしか書かない

rel=noopenerのアレ

  • The other page may run on the same process as your page. If the other page is running a lot of JavaScript, your page's performance may suffer.
  • The other page can access your window object with the window.opener property. This may allow the other page to redirect your page to a malicious URL.

ってことで_target=blankとwindow.openerのコンボで悪意のあるURLにリダイレクトさせることが可能になってしまうので、可能な限りaタグにrel=noopenerを入れるのがよいとされる。Lighthouse的にもいいらしいし。

videoタグ雑記

videoタグ雑記

  • controls属性を付与して作られた再生ボタンだとかシークバーはDOMではないぽいからJSだとかで操作できない
  • videoタグのonclickに関数をねじ込めばクリック時の挙動を操作できるが、controls属性を付与するとなぜか動かない
  • posterはいわゆるサムネ

video要素、audio要素をJavaScriptから操作する-HTML5のAPI、および、関連仕様

Building Custom Controls for HTML5 Videos - Treehouse Blog

remarkをちょっと使ってみる

qiita.com

github.com

利点

  • ほぼmarkdownで書ける
  • markdownに内容を集約させることができる
  • ページの追加とかも楽(impress.jsに比べて)

欠点

  • markdownなので、画像の縮小とかサイズ指定とかは出来ない
  • 装飾とかはやっぱりCSSでカスタマイズする必要がある

Title

mapとarea試し書き

HTMLタグ/イメージタグ/画像内に複数リンクを設定する - TAG index Webサイト

画像の中に複数のリンクを貼りたいときに使うやつ。それがmapとareaの組み合わせ。

<img src="map.gif" alt="サンプル" usemap="#sample">

<map name="sample">
<area shape="rect" coords="22,11,122,62" href="map1.html" alt="リンク1">
<area shape="circle" coords="184,86,30" href="map2.html" alt="リンク2">
<area shape="poly" coords="87,78,30,110,81,139,69,113" href="map3.html" alt="リンク3">
<area shape="default" href="map4.html" alt="リンク4">
</map>

shapeで図形を指定しつつ、coordsで範囲を指定する。 とりあえずrectを覚えておきたい。

あと、usemapってあんまり使わないから、usermapって書いちゃって リンクが貼られていない、という凡ミスをやらかすことがあったので、それも注意する。

デフォルトだと指定された範囲のリンクをクリックしても同じタブ、もしくはウィンドウでリンクページに飛ぶので、areaタグにtarget="blank"を追記すると、aタグのtarget="blank"と同じような挙動でリンクページに飛ぶことができるようになる。

マップ <MAP> <AREA> - HTMLタグリファレンス/Tips

nbspの話

ノーブレークスペース - Wikipedia

HTMLのように通常のスペースの並びを1つのスペースにまとめるシステムで、行内に複数のスペースを入れるために使うこともできる。

また、

NBSPと通常のスペースの違いは、NBSPを含む文字列が行末に来て、かつ長すぎて行に収まらない場合、文字列全体(NBSPでつながっている文字列も含めて)が次の行へ移動することにある。

まあこんな感じ

<html>
  <body>
    <p>ほげ                              ほげ</p>
  </body>
</html>

ただ連続してスペースを並べても1つのスペースとしてみなされるけど、

f:id:shigemk2:20140513004214p:plain

&nbsp;

を連続すれば、連続スペースとして処理される。

<html>
  <body>
    <p>ほげ&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ほげ</p>
  </body>
</html>

f:id:shigemk2:20140513004224p:plain

imgタグalt属性のSEO的立ち位置について

読み上げるブラウザではalt属性にテキストを埋め込むの必須である。 画像を認識しないブラウザを使ってる人とか、視覚障害の方とか向けにね。 alt属性の正しい考え方 | SEOとその周辺

検索エンジンのロボットについては、alt属性値の扱いはかなり曖昧

img要素とalt属性の最適化 | SEO 検索エンジン最適化

noscript

スクリプトが動作しないブラウザのために、 代わりに表示させる内容を指定。
タグの性質上、scriptタグのすぐ後ろに配置する必要がある。

<NOSCRIPT>−HTMLタグリファレンス からのサンプルコード。

<script type="text/javascript">
<!--
today = new Date();
document.write(today);
//-->
</script>
<noscript>
<p>このページではJavaScriptを使用しています。</p>
</noscript>

なお、HTML5以前では必ずbodyタグの中に配置する必要がある
(HTML5はheadでもbodyでもどっちでもよい

HTML5/ページ全般/noscript要素 スクリプトが利用できない環境用の内容 - TAG index Webサイト

イメージマップ作成

イメージマップを作成する | 目的別 HTMLリファレンス | Tagland [HTML & Stylesheet解説]

イメージマップを利用すると、たとえば画像のなかの円に、リンクをつけることが出来るんだ。

<img src="画像のURL" usemap="#マップ名">
<map name="マップ名"></map>
<area shape="形状" coords="座標" href="リンク先のURL" alt="代替テキスト">

当然のことだけど、タイポに気をつけること。
coordsをcoordにしたり、閉じタグを忘れたり、usemapをusermapにしたり、#をつけ忘れたり…
ちゃんと書かないと当然動かない。

あと、座標はフォトショとかで確認したらいいと思う。