Android の Chrome で開発者ツールを使う方法 - Qiita
スマホのサイト作っててPCブラウザのUA偽装じゃなくて実機で見たいってことはよくある。 実機で見ながらHTMLとかCSSをいじって確認したいと思ってスマホで開発者ツール的なのが無いかと探したらあった。 あったけど試したらうまくいかなくて紆余曲折して最終的にめっちゃ簡単だったのでメモ。 やりたいこと PCブラウザのChrome開発者ツールみたいなものをスマホのブラウザでもやる 環境 PC: Windows 7 64bit PC 版 Chrome: ver. 41 Android 端末: SO-03F / Android 4.4.2 Android 版 Chrome: ver. 40 準備 Android の USB デバッグを許可する 設定 ＞ 開発者向けオプション ＞ USBデバッグ にチェック 開発者向けオプションが表示されていなければ、 設定 ＞ 端末情報 ＞ ビルド番号 を連打して表
htmlのmeta refreshを使ったリダイレクト設定
【無料】ねぎお社長のSEOメールマガジン※30秒で登録完了 購読者数は既18000人を突破！ SEO業界20年のねぎお社長が最新情報、ノウハウ、考え方などこのメルマガでしが入手できない情報を配信。SEO,コンテンツマーケティングで売上を上げたい方は、是非、ご購読下さい。 詳細はこちら リダイレクトとは リダイレクトという言葉は「向きを変える）という意味で、主にホームページを移転した場合や特定のページのURLを変更した場合に、新しいURLへアクセスを転送する事を言います。 リダイレクトの方法としては、HTTPレスポンスによるもの、HTMLのmeta refreshによるもの、javascriptによるものがあります。 それぞれのリダイレクトの方法には特徴や注意点があります。順番に見ていきましょう。 HTTPによるリダイレクト 301リダイレクトや302リダイレクトなどで一般的に利用されている
海外からのアクセスを振り分ける[php]
Kotoriはマルファン症候群という難病を患っています！ 今後は、マルファン症候群に関するトピックも扱っていきます！ KOTORI Blogの公式キャラクター「パンD」です。 まえがき この前とある案件で「海外からアクセスがあったら海外用のページに飛ばしたい。でもその海外用のページから日本語ページにリンクを張って日本語のページも見れるようにしたい」という要望を受けました。 この要望を実現するために、クリアすべき点をザックリ挙げると 海外からのアクセスを判別して振り分け 海外用ページから日本語ページにアクセスされた時を判別 この2点です。2つ目はこの記事のタイトルから見れば若干蛇足ですがついでに解説していこうと思います。 海外からのアクセスを判別して振り分けるいくつかの方法 調べたところ、海外からのアクセスを判別する方法の選択肢は3つ程あるようです。 「php」で判別 「.htaccess」
![海外からのアクセスを振り分ける[php]](https://cdn-ak-scissors.b.st-hatena.com/image/square/e21da92b575f1d7b8c0eda39cf88faf6e682f2d7/height=288;version=1;width=512/https%3A%2F%2Fkotori-blog.com%2Fwordpress%2Fwp-content%2Fuploads%2Fpicjumbo.png)
使用している Web ブラウザが IE (Internet Explorer) かどうか判別する | まくまくJavaScriptノート
JavaScript で IE かどうかを判別する IE 判別関数 (isIe) navigator.userAgent プロパティを参照して、ブラウザのユーザーエージェントを調べることで、使用しているブラウザが IE (Internet Explorer) であるかを判別することができます。 IE の場合、ユーザーエージェント名は MSIE あるいは Trident/ で始まります。 // 使用中のブラウザが IE であるかどうかを判別します。 function isIe() { var ua = navigator.userAgent; return ua.indexOf('MSIE ') > -1 || ua.indexOf('Trident/') > -1; } ただし、navigator.userAgent プロパティの値はブラウザの設定により書き換えられる可能性があることに注意
ブラウザのウィンドウサイズを取得する際のjQueryとJavaScriptとCSSメディアクエリの違い｜BLACKFLAG
レスポンシブサイトではウィンドウの幅（画面解像度）によって、レイアウトの調整や動作処理の制御を行います。 ウィンドウサイズ（画面幅／高さ）の取得方法に関しては、スクリプト制御ではjQueryの「.width()」メソッドのほか、JavaScriptの「.innerWidth」メソッドや「.matchMedia」メソッドを使用する方法などがあり、CSSメディアクエリでは「@media only screen and (max-width:○○px)」などといった手法でウィンドウサイズを取得することが可能になります。 それぞれの取得する方法によってすこし厄介なのは、ページ内にスクロールバーがある時とない時で取得する値が変わってくるというもの。 さまざまな場面でウィンドウサイズを取得する機会が増えてきているので、上記のそれぞれ取得方法について比較してみました。 まずは各スクリプト処理とCSSメデ
ブロック要素の比率を維持しながら可変し、文字も可変させるサンプル
ブロック要素の中身です。ブロック要素自体は可変でサイズ変更されますが、ブロック要素の高さは、文章に依存して比率を保持していません。
Rマーク（登録商標）とコピーライト（著作権記号）をHTMLで表す - Rollpie
Rマーク（登録商標）とトレードマークはHTMLで次のように表します。 Rマーク： 記号 ® 実体参照 ® 数値参照 ® トレードマーク： 記号 ™ 実体参照 ™ 数値参照 ™ セミコロンもつきます。 出力例 ® ® ™ ™ アンド記号とセミコロンの間に reg や trade を入れると記号が出力されます。数値参照ではアンドにシャープを続けます。 著作権記号（コピーライト） コピーライト（著作権記号）はHTMLで次のように表します。 記号 © 実体参照 © 数値参照 © セミコロンもつきます。ページUTF8に設定している場合、実体参照で記述する必要はありません。そのまま直打ちで©と入力しても表すことができます。 参考 2019年に学ぶべきプログラミング言語まとめ（web系） 学生の時からプログラミン
[Web] Webページ上でオンライン/オフライン状態を知る、ネットワークの変化に気付く - YoheiM .NET
こんにちは、@yoheiMuneです。 最近知った驚いた機能で、なんとJavaScriptでネットワーク状態を把握する機能があります。 今日はその紹介をブログを書きたいと思います。 現在のネットワーク状態をJavaScriptで知る なんと、以下の１行で現在のネットワーク状態が、オンラインかオフラインかを知ることが出来ます。 var isOnline = navigator.onLine; こんな簡単にできる事を知ってビックリしました。onLineプロパティを使えるか否かも考慮して、以下のようなコードを書くと、 現在のネットワーク状態を知ることが出来ます。 if (navigator.onLine === true) { alert("current network status is online"); } else if (navigator.onLine === false) { a
![[Web] Webページ上でオンライン/オフライン状態を知る、ネットワークの変化に気付く - YoheiM .NET](https://cdn-ak-scissors.b.st-hatena.com/image/square/2cc5747ae72ce23305ad10c40e244a5ff6bd3427/height=288;version=1;width=512/https%3A%2F%2Fwww.yoheim.net%2Fimage%2F139.png)
jQueryでfadeOutの後にremove - Qiita
としてみたところ、 フェードアウトせずにそのまま消えてしまった。 ちょっと調べてみると、処理を待つキューに入る処理と入らない処理があるとのこと。 エフェクト系は概ね入るようだけど、remove()はキューに入らない。 キューに入れるには.queue()を使う。
text-indent -9999pxを使わないでテキストを画像に置換する
imgではなく背景画像として画像を表示したい場面がたまにあるので、text-indent:-9999px;を使わないでテキストを画像に置換する方法をメモしておきます。 サンプルコード まずはtext-indent:-9999px;で実装した場合です。 HTML <div class="sample">テキストテキスト</div> CSS .sample { width: 300px; height: 50px; /* テキストを画像に置換する */ text-indent: -9999px; background: url(./image.png); } text-indent -9999pxでテキストを画像に置換するデモページ こちらでも想定した表示にはできていますが、SEO的にあまりよくなかったり、パフォーマンス的にもよくはありません。 次にtext-indent:-9999px;を使
<a>タグのリンクを無効（disabled）にする - CSS｜OAR CODE
リストの表示で<a>タグを利用していると現在表示中のページのリンクだけ無効にしたいといったことが時々あります。 これまでは<a>タグにdisabledといった属性はないので、<span>タグに切り替えてHTMLを出力していましたが、CSSを使ってもっと簡単にできることを知ったので、そのメモになります。 目次コードコード（IE、Edgeの場合）hrefの属性自体を出力しないコード（JavaScriptの場合）コード（jQueryの場合）実際の表示確認まとめ参考リンク コードは至って簡単で以下のようなCSSクラスを定義します。 a.disabled{ pointer-events: none; } あとは無効にしたいリンクに設定するだけです。 <a href="/" class="disabled" tabindex="-1">CSSクラスに「disabled」を設定したリンク</a> boo
[JavaScript] ファイルコントロールの値をクリアする – コピペで使える JavaScript逆引きリファレンス
ファイルコントロールの値をクリアするには、value値にブランクをセットすればOKです。 サンプルソース 例）ボタンを押すとファイルコントロールの値をクリアする <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>サンプル</title> <script> function test(){ var obj = document.getElementById("f1"); obj.value = ""; } </script> </head> <body> <input type="file" id="f1"> <input type="button" id="btn1" value="クリア" onclick="test();"> </body> </html>
SSLのパスフレーズ（Pass Phrase Dialog）入力を省略してApacheを起動する
パスフレーズ付きでSSLの鍵を作ると、Apache再起動の際にパスフレーズの入力を求められます。 こんな感じです。 通常の起動プロセス [root@www5254ue ~]# service httpd restart httpd を停止中: [ OK ] httpd を起動中: Apache/2.2.15 mod_ssl/2.2.15 (Pass Phrase Dialog) Some of your private key files are encrypted for security reasons. In order to read them you have to provide the pass phrases. Server weblogy.co.jp:443 (RSA) Enter pass phrase: Apache:mod_ssl:Error: Pass phras
phpMyAdminのインポートできる最長: 2048KiBの制限を増やす | デフよん
私は、WordPressのデータベースのバックアップをphpMyAdminで行っていますが、デフォルトではインポートできるファイルサイズが2MB=2048KiBとなっています。幸いなことに、いままでバックアップを戻す機会がなかったので、制限あるなぁと思いつつバックアップであるエクスポートには影響ないのでそのままにしていました。 近いうちに現在のWordPressを動かしている自宅PCサーバーのリプレースを考えていまして、そうすると新サーバーにてデータをインポートするときに上限制限にひっかかってしまう状況です。（現在、zipに圧縮してエクスポートして2.3MBでした。）ということで、2MBの制限を増やして8MBにした備忘録です。 Debianでのphp.iniの場所 ネットでググりますとphp.iniに制限2Mの記述があるので書き換えるとのこと。Debianの場合はどこだ？とファイルを検索す
phiary
Code html 目次となるアンカーと, ページトップに移動するアンカーを設置しています. <body> <h1 id='top'>jQuery でページ内リンクを全てスムーズスクロールにしよう</h1> <h2>Table of contents</h2> <ul> <li><a href='#section1'>Section 1</a></li> <li><a href='#section2'>Section 2</a></li> <li><a href='#section3'>Section 3</a></li> <li><a href='#section4'>Section 4</a></li> </ul> <h2 id='section1'>Section 1</h2> <p class='pad'>Text Text Text Text</p> <a href='#top'
【実例付き】サイト内のgoogle mapに、複数のカスタムピンを落とす方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。まろCです。 今回は、サイト内のgoogle mapに複数のカスタムピンとポップアップの情報を載せる方法を、実例をもとに紹介していきたいと思います。 その方法を利用して制作した案件 https://www.guidoor.jp/ 今回実例として取り上げるのは、「観光スポットにある案内板と連動して情報を取得する」という新しい試みを取り入れた、多言語対応の観光情報サイトです。僕はフロントエンドエンジニアとして制作に関わらせていただきました。 https://www.guidoor.jp/city/mishima/ たとえばこのページでは、各市の観光スポットを一覧確認できます。その情報を地図上でも追えるように、google map上にカスタムされたピンを落としています。 データの用意 複数データを動的に作成するため、htmlでは以下のようにリストを作ります。 <div id="js-
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
フルパスの調べ方 - Qiita
レンタルサーバーでフルパスがわからないときに調べる方法
ChromeでWEBページ全体をフルスクリーンショット！見ているページの全画面キャプチャー画像をダウンロードする方法
input='file'要素のデザインをフルカスタマイズする | オウンドメディア | 大阪市天王寺区ホームページ制作｜合同会社デザインサプライ-DesignSupply.LLC-
