すぐ消えてしまう要素をDevToolsで確認するTips集
はじめに こんばんは！ 皆さんは以下のようなすぐ消えてしまう要素をDevToolsで確認したいときはどうしますか？ 常に表示されるようにわざわざコードを修正してから、DevToolsで要素を確認したりしていませんか？DevToolsをうまく使うことで、わざわざコードの修正をせずとも簡単に要素の確認をできるのでそのちょっとしたTipsのご紹介です！ ① CSSイベントでの確認方法 まずはCSSイベントで要素の表示制御を行っているパターンでの確認方法です。以下のようにCSSイベントのhoverで表示制御をしている要素を例にDevToolsで確認する方法を見ていきましょう！ import "./style.css"; export const Index = () => { return ( <div> <button className="myButton">Button</button> <
【JavaScript】scrollTopが効かない時の対処法
先日遭遇したJavaScriptでの現象について。 タイトルにある通り、scrollTop プロパティに値を指定しても、その位置にスクロールしない現象が発生しました。 何故か scrollTop から返ってくる値が常に 0 になっており、それが原因のようです。 で、こちらの問題の解決にあたって、下記の記事が参考になりました。 document.body.scrollTopが常に0を返す謎を調べてみた – Qiita https://qiita.com/tkengo/items/ee758c75ba874757b7fd この記事によると、原因は scrollTop プロパティでスクロール位置を取得したい要素に下記の CSS を指定するとのことでした。 #sample { overflow-y: auto; width : 300px; height: 200px; } width と hei
HTMLやCSSやJavaScriptなどのコードをかっこよく魅せるために使用できる無料ツールのまとめ
HTMLやCSSやJavaScriptなどのコードをかっこよく魅力的に見せるために使用できるツールを紹介します。 プレゼンなどでコードを人に見せる時をはじめ、TwitterやFacebookやInstagram用にコードの画像を最適化して見せることもできます。 6 Awesome Ways To Present Your Code 🔥 by Niharika Singh ⛓ 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに Carbon Codeimg.io Pastie Rust Playground Silicon Polacode はじめに Web制作者はいつか、コードを発表する時がくるかもしれません。プレゼン、ツイート、ブログ、あるいはスニペットを人に見せる時です。 あなたのコードを素敵に見せるために使用できる
jQueryで要素の表示・非表示を判定する方法
jQueryの要素の表示・非表示を判定する方法を紹介します。 １．基本 jQueryでは、要素の表示・非表示のためのメソッドとして、show()とhide()が提供されています。 show()は指定した要素を表示します。 $('#foo').show(); hide()は指定した要素を非表示にします。 $('#foo').hide(); が、表示・非表示を判定する方法として、isShow()やisHide()、isVisible()などは提供されていません。 ２．css('display')で判定する show()はdisplayプロパティ「block」、hide()はdisplayプロパティを「none」にするので、これを判定に利用します。 if ($('#foo').css('display') == 'block') { // 表示されている場合の処理 } else { // 非表示
[ASP.NET][C#][JavaScript] 特定のファイルをブラウザにキャッシュさせなくしたい
js や css ファイルを修正して, ブラウザで試すときに, ブラウザにキャッシュされてしまっており修正が反映されないことがままあります. 私はこれでハマりました. それで, そのファイルだけキャッシュさせなくしたい. そのための方法を, C#(ASP.NET)版と 生のhtmlに JavaScript を埋め込む版 の2つ描きました. C#(ASP.NET)版 これを <!-- 修正中のjsファイル --> <script src="/scripts/test.js"></script> こうじゃ! <!-- 修正中のjsファイル --> <script src="/scripts/test.js?timestamp=@DateTime.Now.Ticks.ToString()"></script> こうするとhtmlでは <script src="/scripts/test.js?t
![[ASP.NET][C#][JavaScript] 特定のファイルをブラウザにキャッシュさせなくしたい](https://cdn-ak-scissors.b.st-hatena.com/image/square/8bd105de0ef5b34b50c63f6ac28b69c95503f8a6/backend=imagemagick;height=288;version=1;width=512/https%3A%2F%2Fchomado.com%2Fwp-content%2Fuploads%2F2016%2F01%2Fcropped-aSdLGr6h_400x400.jpeg)
静的サイトで JS/CSS のキャッシュを防ぎつつレポジトリをキレイに保つ
「ABOUT」のページをリニューアルしました。 １つ前のデザインのままだったものを、現在のデザインに沿って作りなおして、ついでに文章やレイアウトなども整えました。 公開したものの問題発生 意気揚々と公開してみたのですが、１つ問題が見つかりました。 ページを公開したあと、本番環境を表示するとデザインが崩れていました。そのあと、ページをリロードすると期待通りの結果になりました。 原因は CSS がキャッシュされていた ことでした。 たとえページが更新されていたとしても、JavaScript や CSS は古いキャッシュを使い続けてしまうことがあります。 で、この問題に対処しようとしたのですが、「静的生成」「生成結果を GitHub で管理」「キャッシュ問題への対策」の 3 つのいいとこ取りをしようとすると、意外に複雑でした。 その話をいまからします。 キャッシュ問題の一般的な解決策 よく見る解
キャッシュを有効にしつつ、cssやjsファイルの変更を確実に反映させる | doop
Webサイトを開発させる上で、キャッシュのせいでcssやJavascriptがうまく反映されないと言う事はよくある話。 私が作っているサイトでも、サイトのレスポンス向上のためにキャッシュを利用しているが、 修正がうまく反映されず、「あれ？」と思う事がしばしば。 特に、開発環境では頻繁にファイルを更新するため、.htaccessでキャッシュを抑止しているけれど、 本番環境と開発環境で異なるファイルを管理するのも若干ストレスだったりする。 そんな訳で、回避策を検討してみた。 条件としてはこちら。 サイトはphpで開発している 対象はcssファイル、js（javascript）ファイル レスポンス向上のため、キャッシュは利用する ファイルを修正した際、ユーザにキャッシュクリアをさせなくても、修正した内容は確実に反映される 対象ファイル（この場合css、jsファイル）以外の修正は行わない では、実
IE8をレスポンシブ、HTML5やCSS3、rgba角丸に対応させる場合の注意点まとめ - 京都のお墨付き！
IEでHTML5やCSS3を使う場合、いくつか補助プログラムを読み込んだり、制作上の注意点があります。これは、きちんとHTML5やCSS3の仕様を身につけていないと「動作しない」などのトラブルに見舞われることがあります。 この記事では、「なぜ、そうする必要があるのか」をキチンと書いて、仕様・仕組みを理解した上で使いこなすことができるようになる事を目標に書きました。 IE8で、HTML5のSectionsタグを使えるようにする「html5shiv.js」 「Sectionsタグ」とは以下のタグです。これはHTML5で定義されていますが、IE8では使えないもの(HTML5で追加した分)があります。これを使えるようにするのが「html5shiv.js」です。 section (HTML5から追加) nav (HTML5から追加) article (HTML5から追加) aside (HTML5か
ブログ記事のコピーと右クリック禁止でパクリ転載防止する方法
右クリック禁止とコピー禁止のCSSを紹介します。これでブログの記事をパクられた。画像を勝手に利用された、というのが多少防げる。頑張って書いた記事や画像がパクられたくないって人は参考までにどうぞ。抜け道は多いので本当に多少レベル CSSでテキストのマウスドラッグでの選択とコピー禁止 CSSのエリアに以下内容を記述することで、テキスト選択とマウスのドラッグを禁止してコピーを防止することが出来ます。 body{ user-select:none; -moz-user-select:none; -webkit-user-select:none; -webkit-user-drag:none; -khtml-user-select:none; -khtml-user-drag:none; } これはFirefoxとsafariとGoogleChromeで有効で、あの憎きIEには通用しないので別の対処
お手軽にWeb開発できるエディタ Brackets - Qiita
ちょっとしたWebアプリを作りたい・・ そんな時は [Brackets] (http://brackets.io/)がおすすめ！ 特徴 Windows/Mac/Linux対応 日本語対応 HTML, CSS, Javascriptを中心にPHP, node.jsなども開発可能 コードを編集すると自動でブラウザの表示も変わる”ライブプレビュー"機能 便利な拡張機能たくさん（拡張の開発もjavascriptで簡単にできるらしい） 他にも何かとすごいらしい 詳しくは[公式サイトへGo!] (http://brackets.io/) インストール方法 公式サイトからダウンロード＞開いてインストールを すすめていけば入ります！ コマンドとか不要です！ 実際に開発を始める 1. アプリのフォルダを作って、Bracketsに追加する 2. HTMLファイルを作る 3. ライブプレビュー開始 4. 完了！
CSSやJavaScriptファイルを連結、圧縮·Minify MOONGIFT
jQueryやPrototypejs、YUIなど様々なJavaScrptライブラリが登場している。また、CSSもフレームワークが出てきており、便利な反面、表示されるまでのコネクション数やダウンロードサイズが肥大化している。 CSSやJavaScriptを連結＆圧縮 それを解決する手段として、サイズの縮小や複数のファイルをまとめてしまうという方法がある。それを自動化してくれるのがMinifyだ。 今回紹介するオープンソース・ソフトウェアはMinify、JavaScript/CSSの連結、圧縮ソフトウェアだ。 MinifyはPHPで作られており、Webベースで動作する。Minifyにファイルのパスを渡すことで余計な改行や空白を圧縮してサイズを小さくしてくれる。そして複数のファイルを渡すことで連結してくれる機能もある。 生成されたファイル 作成するのは同一ドメイン内のファイルに限られる。また、グ
Modernizrを使ってブラウザーの機能を調べるには
ユーザー・エージェント文字列を使ってブラウザー単位で、使用可能なHTML5／CSS3機能を判定する方法は時代遅れだ。これからは機能単位で判別しよう。その方法を解説。 本稿では、Webブラウザーで使用できる機能を調べるのに、ユーザー・エージェント文字列を使ってブラウザー単位で判定するのではなく、機能単位で使えるかどうかを判別する方法を紹介する。 Modernizrとは HTML5やCSS3では、HTMLで表現できることが大幅に強化された。そのため、HTML5＆CSS3が普及するにつれ、きれいな見た目のサイトやリッチなレイアウトを持つサイトが増えてきている。 しかし、HTML5／CSS3機能の実装状況はブラウザーごとに異なるため、HTML5／CSS3の仕様として定義されているからといってそのまま使えるわけではない。この実装の差異に対応するために、これまでは、JavaScriptやサーバーサイド
Document: querySelector() メソッド - Web API | MDN
引数 selectors 文字列で、照合する 1 つ以上のセレクターを設定します。この文字列は有効な CSS セレクター文字列でなければなりません。そうでない場合は SyntaxError 例外が発生します。 なお、HTML 仕様書では、属性値が有効な CSS 識別子であることを要求していません。class または id 属性の値が有効な CSS 識別子でない場合、セレクター内で使用する前に、その値に対して CSS.escape() を呼び出すか、文字のエスケープで説明されている手法のいずれかを使用する必要があります。例については、属性値のエスケープを参照してください。 返値 Element オブジェクトで、文書内で指定された CSS セレクターに最初に一致する要素を示すオブジェクト、もしくは、一致する要素がない場合は null を返します。 指定されたセレクターに一致するすべての要素のリ
これは凶悪……コーディングのヤバいバグ＆仕様 Best5 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。LIGフィリピン支社代表のせいとです。 コーディング中にバグやブラウザ仕様のせいで、「なんじゃこりゃアア」ってなること、皆さんありませんでしょうか。 今回は、その中でもとりわけ「なんじゃこりゃアア具合」が激しいトラブルを、僕の独断と偏見のランキング形式でお話しさせていただきます。 なんでランキング形式にしたかというと、そっちの方が面白いと思ったからです。面白くなかったらごめんなさい。 第5位 IE9.jsを入れると、IE7で謎の隙間が発生しまくる IE9.jsを採用したサイトをIE7,8で見ると、 <class="ie7_anon ie7_class6" id="ie7_pseudo2" style="overflow: hidden; display: block;"/> こんなものが追記されていたりします。 こいつに高さがあるせいで、隙間が生まれてしまいます。が、こいつがな
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
DESIRE 中森明菜 - 歌詞タイム
Code Babies
【ASP】キャッシュを有効にしつつ、cssやjsファイルの変更を確実に反映させる(Cache Busting) - Qiita
自治労福岡県本部
Disable autocomplete via CSS
http://plus.appgiga.jp/masatolan/2014/03/28/51357/
