みかづきブログ・カスタム

基本的にはちょちょいのほいです。

HTML

metaタグを使ってGoogleの検索結果に引っかからないようにする 🔍

developers.google.comGoogle検索ディベロッパーガイドたるものがあるので、これに従いましょう。ものすごくざっくり結論を書けば、 <meta name="robots" content="noindex" /> というmetaタグをhead要素内に書いておけば、検索結果に表示されなくなります。 そんなケースはないような気がしますが、G</meta>…

Vimeoにホスティングしたビデオをiframeからしか呼び出せなくする(vimeo.com上で非表示にする) 🎥

個人的には、ウェブページでビデオを表示したいときにvideoタグを直接書くことはほとんどなくて、YouTubeやVimeoにホスティングして、API経由で表示したり、iframe埋め込みをすることが多いです。その際、例えばログインしたユーザーのみなど、限られたユー…

formタグを入れ子にすると、子のformが消える 😱

すごく単純な話なのですが、 <form id="parent"> <form id="child"></form> </form> という感じで書くと がレンダリングされません。消えます。コンポーネント単位で開発していて、僕が作ったformが表示されずに、なんでだろうと思って調べると、 他の人が作ったformと入れ子になっていることが原因ということ…

ドラッグ&ドロップでファイルをアップロードする(HTML Drag and Drop API無しバージョン) 📦

ウェブサイトにファイルをアップロードする際、ファイルをドラッグ&ドロップするUIをよく見かけます。 そういったUIを実装しようとすると、HTML Drag and Drop APIを使いたくなることでしょう。developer.mozilla.orgしかし、実はinputタグでも簡単に作成す…

inputタグのinputmode属性によるキーボードの見栄えを調査する(iOS編) 🔍

はじめに 見栄え一覧 none text decimal numeric tel search email url kana kana-name katakana おわりに はじめに HTML5.2にて廃止予定なので、できることなら使いたくないことでおなじみのinputmode属性ですが、なんだかんだで便利なので使いたくなるケー…

base64でbrank.gifを生成する 🖼

ウェブサイト制作中、まれに1px × 1pxの透過画像が欲しいなと思うことがあります。 主に、IEやAndroidのバグ回避のときなどなんですが。そんなとき、画像ファイルを用意するのは面倒なので、base64をつかってました。1px × 1pxの透過pngならこんな感じです。…

GAFAのviewportの書き方を調べて、最強のviewportを検討する 💻

結論 viewportは環境ごとに設定すべきか Apple Google Amazon Facebook viewport-fit=coverをつけるべきか viewport一覧 Macで観覧 iPhoneSE(320px)で観覧 iPhoneX(375px)で観覧 Pixel2(411px)で観覧 iPad(768px)で観覧 iPad Pro(834px)で観覧 Nex…

IE11でdatasetをつかってdata属性を動的に更新すると属性セレクタで指定したスタイルが反映されない 💻

結論 IE11ではdatasetでdata属性を更新してもスタイルが反映されない IE11でもsetAttributeでdata属性を更新すればスタイルが反映される! 詳細 かれこれ、ずーっと悩んでいたことだったのですが、IE11では、 属性セレクタをつかってスタイルを指定 dataset…