すぐ消えてしまう要素をDevToolsで確認するTips集
はじめに こんばんは！ 皆さんは以下のようなすぐ消えてしまう要素をDevToolsで確認したいときはどうしますか？ 常に表示されるようにわざわざコードを修正してから、DevToolsで要素を確認したりしていませんか？DevToolsをうまく使うことで、わざわざコードの修正をせずとも簡単に要素の確認をできるのでそのちょっとしたTipsのご紹介です！ ① CSSイベントでの確認方法 まずはCSSイベントで要素の表示制御を行っているパターンでの確認方法です。以下のようにCSSイベントのhoverで表示制御をしている要素を例にDevToolsで確認する方法を見ていきましょう！ import "./style.css"; export const Index = () => { return ( <div> <button className="myButton">Button</button> <
HTML5 の Drag and Drop API と File API を使ってファイルアップロードを実装する - しばやん雑記
HTML5 の Drag and Drop API を使うことで、ブラウザにドロップされたファイルの情報を扱うことが出来ます。そして File API を組み合わせることで、ファイルの中身まで扱うことが出来るようになります。 そして FormData オブジェクトと XHR を組み合わせることでアップロード処理までを実装することが出来ます。完成図はこんな感じです。 今回は JavaScript の処理が中心です。jQuery を使っているので追加してくださいね。 $(function () { var uploadFiles = function (files) { // FormData オブジェクトを用意 var fd = new FormData(); // ファイル情報を追加する for (var i = 0; i < files.length; i++) { fd.append(
Chrome紹介ページに隠された、イケてるHTMLコーディングテクニックとGAの最新版コードみたいなの - Web Analytics Latte
CMでやってるChromeの紹介ムービーをなにげなく見てたら、ちょっとおかしいことに気づきました。最先端ブラウザであるChromeの、その紹介サイトとなれば当然HTML5対応してるはず、と思ってみて気づいた点です。 HTMLソースを眺めてみて、気づきました。これがナウいソースなのかと関心する点が多々ありますが、2点、すげぇ！と思ったところがあるので紹介します。 １．Google Analyticsのタグが最新版を超えてる GAの貼り付けタグが公式のものではないことがまず1点目の違和感です。通常はこんな感じでゴチャゴチャしてるんですが //before <script type="text/javascript"> var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-XXXXXXXX-1']); _gaq.push(['_trackPag
新規でサイトを作るのに使えそうなの一式。Ver 3
随分前に、Ver2の見直しをして3になってたんですけど、公開してなかったので今更ながら公開です。 中身は2を使ってみて、社内のマークアップエンジニアからフィードバックもらったり、自分でも違和感が有った部分を調整してます。 それなりの期間使ってみて、問題をあんまり感じていないので、完成度としては大分良くなったかなぁって思います。 新規でサイトを作るのに使えそうな一式。Ver 3をDL（zip：40kb） Ver 3を見る Ver.3の中身ご説明 主な変更点を。 style.cssのwidthなどのプロパティをまとめていたのをVer1と同じに。 default.cssに書かれていた、p要素のmargin-bottomの指定をstyle.cssに移動。 default.cssのfont-familyの指定を若干変更。 index.htmlにGoogleカスタムサーチ用に使えるソースを記入。 Ja
[ ﾌﾌﾇ｡ｿﾍﾅｪ･鬣ﾜ KAYAC BM11 ] ･ﾖ･愠ｰ･ﾑ｡ｼ･ﾄ､釥�ｺﾝ､ﾎ｣ｵ､ﾄ､ﾎ･ｭ･ﾛ･�
BM11 ･ﾖ･愠ｰ･ﾑ｡ｼ･ﾄ BM11 ､ﾇ､ﾏﾂｿ､ｯ､ﾎ･ﾖ･愠ｰ･ﾑ｡ｼ･ﾄ､�･遙ｼ･ｹ､ｷ､ﾆ､､､ﾞ､ｹ｡｣･ﾖ･愠ｰ･ﾑ｡ｼ･ﾄ､ﾏ｡｢･ﾖ･愠ｬ｡ｼ､ﾎｳｧ､ｵ､ｬｴﾊﾃｱ､ﾋｼｫﾊｬ､ﾎ･ﾖ･愠ｰ､ﾋﾄﾉｲﾃ､ﾇ､ｭ､�､ﾁ､遉ﾃ､ﾈ､ｷ､ｿ･�･ﾝ･､･ﾈ ･｢･ｯ･ｻ･ｵ･熙ﾎ､隍ｦ､ﾊ､筅ﾎ｡｣ｺﾇｶ皃ﾇ､ﾏﾁｴｲ靂ﾌ､ﾋ Flash ､ｽｼｨ､ｷ､ｿ､遙｢･ﾖ･愠ｰｾ螟ﾎ HTML ､ｭｴｹ､ｨ､�､筅ﾎ､ﾊ､ﾉ｡｢ｶﾅ､ﾃ､ｿ､筅ﾎ､篦ｿ､ｯｸｫ､ｫ､ｱ､�､隍ｦ､ﾋ､ﾊ､ﾃ､ﾆ､ｭ､ﾞ､ｷ､ｿ｡｣ ､ｳ､ﾎ･ｨ･ﾈ･熙ﾇ､ﾏ｡｢･ﾖ･愠ｰ･ﾑ｡ｼ･ﾄ､ﾎ JavaScript ､ｯｾ螟ﾇｵ､､ﾄ､ｱ､�､ﾙ､ｭ｡｢･ｭ･ﾛ･讀ﾎ･ｭ･ﾛ･ｵ､ｫｾﾋ､ﾞ､ﾈ､皃ﾞ､ｹ｡｣ 1. ﾌｾﾁｰｶﾖ､ﾎｽﾅﾊ｣､ﾋｵ､､ﾄ､ｱ､隍ｦ
文字列から要素を作りたいときはinnerHTMLではなくcreateContextualFragmentを使う - 素人がプログラミングを勉強していたブログ
追記：ベンチマークをコメントを元に修正 文字列から要素を作りたい場合、 var temp = document.createElement('div'); temp.innerHTML = '<span>foo bar fizz buzz!</span>'; とやることが多い。 だが、不要なdiv要素ができて気持ち悪いし、for文でchildNodesをひとつずつ処理する必要があって、不便。 divの中にhead要素を入れることはできないので、innerHTML=''としても、要素は作られない。 RangeのcreateContxtualFragmentを使うと、こういった問題を避けることができる。 例えば、上のコードをcreateContextualFragmentを使って書き直すと、 var range = document.createRange(); range.createCon
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IDEA * IDEA