メモ

HTML5のvideoタグでautoplayをさせたいのに、なぜかWindowsのChromeで自動再生されないという現象が発生した。 このautoplayってのは結構厄介で、音声が出るようになっているとスマホのブラウザで自動再生されないことがあるとかってのはよく聞いていたのですよね。 なので使用した動画はエンコード時に音声トラックを完全に削除していたのですが、Chromeで自動再生されない。 FirefoxとEdgeではOK。 Chromeも以前は同じやり方で自動再生されていたと思うのですが。。。 結論としてはvideoタグにmutedを入れたら解決しました。 音声トラックが入っていなくても、mutedと明示しないとダメみたい。 というか、今後ほかのブラウザでもダメになる可能性もあるし、これからはおまじない的にデフォルトで入れといたほうがいいのかな。 それよりも、知らないうちに自動再生自体がダメになったりしたらめんどくさいな。。。 まぁ基本的に自動再生の動画なんて作り手の自己満足だと思っているのですが、一作業者に過ぎないコーダーには決定系ないんでしょうがないですねぇ。

Firefoxでアンカー付きで別のページに移動したときに、ページが正しくない位置にスクロールするという現象が発生しました。 A.htmlページ内のリンクで、「href="B.html#anc1"」などとなっていて、クリックすると、B.htmlのanc1の箇所が表示されないということです。 この現象、ググってみると、同じような症状の報告が結構古くから有るようです。 Firefoxに以前から存在する問題なのかも。 ただし、古くから報告されている問題が、現在発生している問題と同じものかどうかは分かりません。 現象が同じでも原因が違うことは考えられます。 当然もともと発生しない場合もあるし、「こうするとなおる（かも）よ」というアドバイスはいろいろ出てきます。 しかし、いくつかの方法を試しても今回僕が遭遇した現象は解消しなかったのと、いちいち原因を考えるのもしちめんどくさえので、一気に解決できるJavaScriptを組んでみました。 ■■==スクリプトここから  window.onpageshow = function(){   //ページのURLからアンカー部分を取得   var myhash = $(location).attr('hash');   if ( myhash.length > 1 ) { //アンカーがあった場合     if($(myhash).length){ //アンカーに対応するidの要素があった場合       var nScrolltop = $(window).scrollTop();       var nOffset = $(myhash).offset().top;       //現在のスクロール位置とアンカーに対応するidのY座標（本来有るべき位置）を取得       if( Math.abs(nScrolltop-nOffset) > 5 ) { //2つの位置の差が5以下の場合   ...

条件がいまいち確実にわからないのですが、iPad miniでレイアウトが崩れることがあるようです。 おそらく条件はこんな感じ。 ・display:inline-blockを指定している ・iOS9  どんな現象かというと、文字であらわすとこんな感じです。 【正しい表示】 このボタンをクリック 【1文字落ちた表示】 このボタンをクリッ ク 派生して、overflow:hiddenを同時に使っている場合は、最後の1文字が消える現象のようにも見えます。 また、改行する要素としない要素が並んでいる場合、inline-blockは基本が下ヨセなので、頭がそろわずにガタガタになります。 どうやらiOS9のバグなのではないかと思いますが、簡単に解決する方法があります。 それは、 white-space:nowrap を指定する。 これで落ちなくなります。 nowrapが指定できない場合は、、、、困りますね。

Web制作において、サポートが終わっていると分かっていても、一定数のユーザーがいることからなかなか切れない古いIE。 さすがにIE8はもう良いでしょとなってきています。 IE9、IE10も良いでしょ、と個人的には思いますけれども、対応出来ないわけでも無かったりするので、じゃあした方が良いかって話しになっちゃったりします。 まぁ減っていたとしても少しはいて、観られるなら観られるに越したことはないのですよね。 （ベンダーのサポートが切れている場合は正式に対応していますとは言えないでしょうけど） で、対応するとなると困るのは検証環境。 サポートが切れた環境なので用意もしづらいのですよね。 IEtesterなんていう古いブラウザをエミュレートするようなソフトを使っていた時期もありましたが、最近では、OS含めて環境自体をバーチャルマシンで動かして確認出来るようです。 ちょっとこの際環境を作ってみました。 （１）VirtulBoxをインストールして、仮想環境を動かす準備をする （２）マイクロソフトから配布されている旧OSのイメージをダウンロードして仮想環境を構築する この２ステップ。 無料です。 ただし、全て自己責任で！ （１）について https://www.virtualbox.org/ ここからVirtualBoxというソフトを入れます。 これをインストールするとコンピューターの中に仮想のコンピューターのハードができる感じ。 （２）について https://developer.microsoft.com/en-us/microsoft-edge/tools/vms/ このマイクロソフトのサイトからOSのイメージファイルを入手します。 OS+IEのバージョンが選べます。 またプラットフォームはVirtualBox用のものを選んでください。 ダウンロードしたら解凍し、VirtualBoxの「ファイル」→「仮想アプライアンスのインストール」で出てきたファイルを読み込みます。 特に設定変更する必要は無さそうですけどお好みに応じて。 しばらく待つと完了して晴れて使えるようになります。 僕の場合はネットも普通に繋がりました。 注意点は ・ハードディスクの容量が結構必要なこと ・マイクロソフトのOSイメージは...

スマホサイト隆盛の現在において、レスポンシブデザインの知識はHTML5のコーダーにとって必須ですね。 レスポンシブデザインというと、まぁ、普通はメディアクエリで画面の横幅基準でブレイクポイントを作り、設定を切り替えるという方法をとるでしょう。 bootstrapもこれですね。 とある仕事で、もうちょっとアプリ的に対応したいという場合がありまして。 つまり、メディアクエリで対応するレスポンシブの場合、ブレイクポイント同士の間は同じCSS設定が反映されるため、全体の見た目が一定ではないのですね。 例えば、横幅320px～374pxで文字サイズを12pxに指定した場合、一行に入る文字数は320pxの場合と360pxの場合では異なります。 その分、行数が減る箇所もあれば、それによってやや余白が出ることもあるでしょう。 そうじゃ無くて、どんな画面サイズでも、（ほぼ）常に一定のレイアウトにしたい、というのがその時の要望。 例えば画像を横幅100%で表示するとすると、その画像はどんなサイズの端末で見ても横一杯に広がって見えます。 横幅に対する画像の中の（画像化された）文字の比率も一緒です。 こういうことを画像じゃなくてテキストでもやりたいと。 で、考えた方法は２種類あります。 （１）cssのvwという単位を使う （２）jQueryで横幅から基本のサイズを割り出し、全体をそれに対する比率で設定する ■（１）について 単位というとpxとか%とかemとかいろいろあります。 cssで数値を%で指定した場合、ボックスの幅なんかは、親要素に対する割合になります。 しかし、文字のサイズ（font-size）を%で設定した場合、親要素のfont-sizeに対する割合になるのですね。 例えば画面の横幅320pxに対して、1行に10文字入れたい場合、文字は32pxにすれば良いのですが、これをfont-size:10%とは書けないのですね。 そこで新しく登場したのがvwという単位。 上記の例で言うと、font-size:10vmと書くことができるのです。 vwは、画面の横幅に対する比率を設定することができる単位で、1vwは「画面の横幅に対する1%」です。 おお、すげー！便利！ と思ったんだけど、落とし穴が。 vwのブラウザ対応を調...

アンカーリンク（いわゆるページ内リンクってやつ）で飛ぶ位置は、指定したIDの場所です。 例えば アンカーリンク と書けば、id="target01"が指定されている要素がページの一番上に来るように表示されます。 飛び先のidの指定は タグで無くても良いんですけど、昔は みたいに書いてました。 今でもこの方法でも良いですし、今回はこれでやってみます。 アンカーの飛び先（一番上に来る表示位置）をずらしたい場合というのが最近あるわけです。 どういうときかというと、ヘッダをCSSで固定表示している場合。 スクロールしてもメニューが見えるように、ずっと一番上に付いてくるアレですね。 何も考えずにページ内リンクすると、ヘッダが付いてきている分、上の方が隠れてしまうのですね。 そこで、ヘッダの高さ分だけ表示位置をずらしたい、となるわけです。 前置きが長くなりましたが、具体的な方法としてはこんな感じ。 ターゲットにする タグをこんな風に書きます。 こうすると50ピクセル分だけ下にずれ、また他の要素には（多分）影響は無いです。 主要なブラウザで見てみましたが、ちゃんと動作するみたい。

スライスで切った画像をつなげたり重ねたりしているレイアウトにおいて、お客様からこんな風に言われることがあります。 「画像がすこしずれている」 「画像と画像の間に白い線（隙間・余白）が入る」 一続きになっているデザインの画像を、スライスしてきっちり並べているはずなのに、環境によって画像の間に隙間が入ってしまって汚い、読めない、などの現象が発生することがあります。 たちが悪いのは、製作環境でなかなか再現しないこと。 私もお客様にHTML形式のメールマガジンで、（昔ながらの）table組みできっちり並べたはずの画像の間に白線が入るといわれ、ブラウザやOSを聞いたりして確認したのですが、どうしても再現せずに困ったのですよね。。。 で、先日原因が判明しました。 Dreamweaverのせいではなく、CSSやHTMLの誤記でもなく、単にブラウザの表示設定が100%でなかったこと、でした。（泣） Windowsの場合、ブラウザの上にマウスカーソルがある時に、ctrlを押しながらホイールを回すとブラウザの表示比率設定がだいたいのブラウザで変わります。 Macのノートなんかは、トラックパッドで二本指操作で、縮めたり拡大したりすることができます。 意図的にやっている場合は良いんですけど、これが無意識のうちにやってしまうことがあるんですね。 で、例えば縦幅が100ピクセルの画像を90%で表示すれば90ピクセルで割り切れますけど、101ピクセルだと小数点が出てしまう。 ピクセルは表示の最小単位なので小数点はまずいですからブラウザが補正するんですが、この弊害で隙間ができてしまうことがあるのですね。 これはなかなかに解決しづらい問題なので、表示比率を100%に戻してもらって、OKがでれば良いですが、「ユーザーの中にも同様の現象が起こる可能性があるから対応したい」とか言われると面倒です。 table組みの場合は、中に入っている画像のサイズと同じ大きさの指定をtdに入れることで解決できるようです。 （少なくとも私の場合は大丈夫でした） divなど他の要素で囲っている場合も、まずはサイズ指定を明示的に合わせてみてどうか、というところでしょうか。 やれやれ。