使いこなして効率アップ！ ChromeのデベロッパーツールでCSSを検証する方法 - ICS MEDIA
ウェブ制作をする上でCSSでのスタイルの記述は必須ですが、意外とデバッグが難しくデザイン通りに実装するには手間がかかります。 そんなときに活躍するのがGoogle Chromeの「デベロッパーツール」です。視覚的にCSSのスタイルが確認、変更できるので、うまく活用することでCSSのデバッグを迅速に行うことができます。 この記事ではデベロッパーツールでCSSをデバッグする方法や便利な機能などを紹介します。記事で使用しているデモは以下のリンクから確認できるので、実際にデベロッパーツールで操作しながら読み進めてみてください。 サンプルを別ウインドウで開く ソースコードを確認する 1. DOMのスタイルを確認 / 変更する デベロッパーツールでは、画面上でスタイルの確認、変更ができます。 (1)デベロッパーツールを開く まずはGoogle Chromeを開きます。 確認したい箇所を右クリックし、［
デベロッパツールの新機能が便利！ そのCSSがなぜ機能しないのか、どう修正すればよいのかが分かる
デベロッパーツールの地味だけど便利な新機能が実装されるので、紹介します。CSSの非アクティブなプロパティを表示し、それがなぜ機能しないのか、どう修正すればよいのか教えてくれる機能です。 たとえば、親がdisplay: flex;ではないのにFlexboxのプロパティを設定しまった場合は、下記のように表示されます。 CSSに携わる人なら、この機能をオンにしておいて損はないでしょう。 display: flex;ではないのにFlexboxのプロパティを設定 ほかにも、widthを設定したのに効かないときは、それインライン要素ですよ、と教えてくれます。 インライン要素にwidthを設定 デベロッパーツールのこの新機能は「Find inactive styles」と呼ばれるもので、要素に適用されている非アクティブなスタイルを見つけることができます。 Find inactive styles -Ca
WordPress納品前チェックリストを作りました | オレインデザイン
ここ数年、WordPress のシェアも右肩上がりで、知名度も上がっており、利用される方も多くなってきています。 また、Webサイトの体を成すまでは比較的スムーズに誰でも進められることが多いこととインターネット上にある WordPress の情報の多さなどもあり、クラウドソーシングサービスなどで安価に制作をしてくれる方に依頼し、納めてもらうというというケースも多いと聞きます。 しかし、少々ウェブ制作を学ばれた方が安価に制作を請け負い、最低限の品質を持たないWebサイトを納められて困ってしまう依頼者（発注者）も多いようで、そういった流れでのお困りごとの相談も少なくありません。 僕個人としても、WordPress はとても好きなプロダクトですので、そのプロダクトに関わったがために（WordPressでウェブサイトを作ってもらったがために）不幸になる方がみえるのは心苦しい部分も感じていました。
WordPress メディアのアップロードから画像が自動生成されなかった時の対処方法 - by Takumi Hirashima
WordPress メディアのアップロードから画像が自動生成されなかった時の対処方法を紹介します。 画像の自動生成を確認 GDライブラリーの確認方法 画像の自動生成を確認 まずは FTP でサーバーにアクセスして、メディアのアップロードで画像がアップロードされているかを確認。 そこで、サムネイルや他のサイズの画像が自動生成されているかどうかを確認します。 画像が自動生成されていない場合、PHP のGDライブラリー（画像ライブラリー）がインストールされていない可能性があります。 GDライブラリーの確認方法 GDライブラリーが環境にインストールされているかを確認するには、現在表示中のページのテンプレートに以下のコードを追加します。 <?php phpinfo(); ?> phpinfo() は現在の PHP の設定を確認することができます。 コードが正しく動くと、PHP の設定が表示されるので
[CSS]HTMLの潜在的な問題を見つける、少し高度なCSSのセレクタ -Linting HTML using CSS
HTMLは間違って記述されても、重大なエラーになることはあまりありません。 そのため、validではないHTML、セマンティックではないHTML、アクセシブルではないHTMLのコードが、ページ内に紛れてしまうことは非常に簡単です。 HTMLの潜在的な問題を見つけることができる、少し高度なCSSのセレクタを紹介します。 Linting HTML using CSS 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 インラインのスタイル リンクのターゲット アクセシブルではない画像 ドキュメントの言語指定 不適切な文字セット アクセシブルではないビューポート属性 ラベルのないフォーム要素 空のインタラクティブな要素 不必要、あるいは非推奨の属性 インラインのスタイル このセレクタは、インラインのスタイルが適用されているページ上のあらゆ
![[CSS]HTMLの潜在的な問題を見つける、少し高度なCSSのセレクタ -Linting HTML using CSS](https://cdn-ak-scissors.b.st-hatena.com/image/square/a2a96d59143a2df01b38a0f16d119ef1fc6061d4/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201702%2F2017031401.png)
FlexboxやFloatでレイアウトが崩れてしまう原因がすぐに見つかるChromeの機能拡張- Pesticide
CSSのレイアウトで思うようにいかない時に、最初に確認すべきことはページ上のすべての要素がどのようにレイアウトされているかです。これを知るには、各要素が区別できるように、要素ごとに異なるカラーのアウトラインをつけると便利です。 ページ上のすべての要素に、要素ごとに異なるカラーのアウトラインをつけ、親子関係も一目で分かる便利なChromeの機能拡張を紹介します。 Pesticide Pesticide -GitHub 以前当ブログで紹介したことがありますが、バージョンアップされており、更に便利になっています。 Pesticideは、2つの方法で利用できます。 Chromeの機能拡張（Pesticide for Chrome） スタイルシートファイル（外部CSS・CDNで利用可） 外部スタイルシートとしても提供されているので、ローカル環境でブラウザを問わず利用することもできます。 簡単なのでC
PingMenu - 常駐してpingを打ち続けるユーティリティ
無線LANなどは時として調子が悪くなってインターネットに接続できなくなることがあります。アクセスポイントにはつながっているので障害に気付きづらく、とてもストレスを感じます。そんな時、ネットワークの状態確認にpingを打つ人は多いのではないでしょうか。 そこで使ってみたいのがPingMenuです。メニューバーに常駐し、pingを打ち続けるソフトウェアです。 PingMenuの使い方 PingMenuを実行しているところです。 ネットワークがなくなると no routeという表示になります。 PingMenuは設定もあるのですが、特に動かないようです。対象となるサーバはGoogle限定となっています。自分のサーバにしたい時にはソースを修正する必要があるようです。ネットワークがちゃんと生きているか確認したい時に使ってみると便利です。 PingMenuはMac OSX用、Microsoft Rec
「なぜか家賃が安い」などの事故物件を地図上に表示＆事故内容のチェックも可能なサイト「大島てる」
「家賃が安い理由を教えてくれない物件」について調べてみると事故物件だった、という話を耳にすることがあります。事故物件というのは、過去に物件内で「何かしらの理由」により住人が亡くなった、などのいわゆる「いわくつき物件」を指す言葉で、そういった情報は通常買い手や借り手がつかなくなるので不動産会社は開示したがらないもの。そんな事故物件を何万件も地図上にマッピングしまくることで、誰でもチェックできるようにした事故物件公示サイトが「大島てる」です。 大島てる CAVEAT EMPTOR: 事故物件公示サイト http://www.oshimaland.co.jp/ サイト上にはマップが表示されており、炎アイコンの中に数字が書かれています。この数字は周辺の事故物件の数を示すもので、関東周辺には1万件超えの事故物件が存在する模様。この炎アイコンをクリックすると…… マップが拡大してより詳細に「どこにどれ
うわぁIE8で表示がおかしい！その原因をチェックしてアドバイスしてくれるオンラインサービス -IE8 Linter
モダンブラウザを基準にページ制作をする人が増えてきましたが、IE8を完全に切るのはなかなか難しいのが現状です。 そんなIE8で、あれ表示がおかしいぞ！という時に、その原因のアドバイスをしてくれる便利なオンラインサービスを紹介します。
CSSのレイアウトの崩れを見つける時に役立つChromeの機能拡張 -Pesticide
ウェブ制作時の困ったは、CSSのレイアウトが思うようにいかない時。 そんな時に役立つ、ページ上の全ての要素のアウトラインを要素ごとに異なるカラーで表示する便利ツールを紹介します。 PesticideはChromeの機能拡張だけでなく、外部スタイルシートとしても提供されているのでローカル環境でブラウザを問わず利用できます。 Pesticide Pesticide -GitHub Pesticideのインストール Pesticideの使い方 Pesticideのインストール Pesticideは2種類、利用方法があります。 Chromeの機能拡張 ローカル環境での使用（スタイルシートファイル） Chromeの機能拡張 下記ページからPesticideをChromeにインストールします。 Pesticide -Chrome ウェブストア インストールが完了すると、上部のバーにPesticideボ
Android Virtual DeviceでFailed to allocate memory:8 エラーが出たので対処 | TeraDas（テラダス）
Android Virtual DeviceでFailed to allocate memory:8 エラーが出たので対処 Android SDK 21.0 + Android Virtual Deviceで、仮想デバイス起動時に以下のエラーが出たので対処。 Starting emulator for AVD 'GalaxyNexus' Failed to allocate memory: 8 This application has requested the Runtime to terminate it in an unusual way. Please contact the application's support team for more information. 対策は以下3つのどれかで可能 １．AVDのプロファイルを書き換えるC:\Users\<ユーザ名>\.andro
サイトの不正なハッキングをいち早く見つける 3 つの方法
+1 ボタン 2 AMP 11 API 3 App Indexing 8 CAPTCHA 1 Chrome 2 First Click Free 1 Google アシスタント 1 Google ニュース 1 Google プレイス 2 Javascript 1 Lighthouse 4 Merchant Center 8 NoHacked 4 PageSpeed Insights 1 reCAPTCHA v3 1 Search Console 101 speed 1 イベント 25 ウェブマスターガイドライン 57 ウェブマスタークイズ 2 ウェブマスターツール 83 ウェブマスターフォーラム 10 オートコンプリート 1 お知らせ 69 クロールとインデックス 75 サイトクリニック 4 サイトマップ 15 しごと検索 1 スマートフォン 11 セーフブラウジング 5 セキュリティ 1
WordPressのテーマ制作者は必携！記事のさまざまなパターンが簡単にテストできる - WP Test
WordPressのテーマで記事がどのように表示されるか、テキスト記事、画像コンテンツ、動画コンテンツなどが正常に表示されるかテストできるWP Testを紹介します。 普通に想定されるパターンだけでなく、タイトルが異常に長い、コメントがたくさんついた、カテゴリが無い、カテゴリが異常にたくさんなど、イジワルなパターンも用意されています。 WP Test ダウンロードできるテストデータはXMLフォーマットで、WordPressに直接インポートできます。画像などはuploadsフォルダでサーバーにアップします。 どんなパターンが用意されているかは、WP Testのデータを読み込ませたデモで見ることができます。たくさんあるデモページから一部をご紹介。
JavaScriptエラーを表示・確認する方法のまとめ
JavaScriptエラーを表示・確認する方法をまとめました。 １．はじめに ブラウザでページを表示したときに正しく表示されない、あるいはjQueryで設置したパーツなどが動作しない場合、JavaScriptエラーが発生している可能性があります。 JavaScriptエラーが発生しているかどうかを確認するためにはエラーを表示するためのコンソールを開く必要がありますが、コンソールの開き方が分からなかったり、ブラウザで操作方法も異なります。 このエントリーでは、以下のブラウザを対象にしてJavaScriptエラーの表示・確認方法を解説します。 Google Chrome Firefox IE ビギナーの方向けの内容です。 ２．エラーになるJavaScriptのサンプル エラーになるJavaScriptのサンプルとして、次のサンプルを用いて解説します。このJavaScriptを実行するとシンタッ
パソコンでサッと電車の遅延情報を確認できるChrome用アプリ | ライフハッカー・ジャパン
疲れやすい、呼吸の浅さを改善。ストレッチポールは毎日使いたいほど気持ちがいい!【今日のライフハックツール】
[SEO]自分のサイトがペナルティを受けていないかチェックする方法 | TechMemo
Tweet TweetWEBサイトを運営している方なら、自分のサイトの検索順位は気になると思います。 なかなか順位が上がらないとき、ついペナルティを疑ってしまいがちですが、実際にペナルティを受けているか確認する方法をご紹介いたします。 手動ペナルティを受けている場合 手動のペナルティを受けた場合、Googleウェブマスターツールで警告メッセージが届きます。 なので、Googleウェブマスターツールを確認することで、手動のペナルティを受けているかどうかは判断できます。 アルゴリズムによるペナルティを受けている場合 アルゴリズムによって自動でペナルティを受けた場合、Googleウェブマスターツールには警告メッセージが届かない場合もあるので、判断が難しいです。 そこで、Googleセーフブラウジングを使います。Googleセーフブラウジングでは、サイトがペナルティを受けているかどうかが一瞬でわか
不具合の原因などを比較調査できるPCの情報レポートを出力するフリーソフト「LookInMyPC」
PCに不具合が出たときに、以前と設定がどう変わっているかを比較する場合や、現状のPC設定を保存する場合などに、利用可能なレポートを出力するフリーソフトが「LookInMyPC」です。Windows 2000、2003、XP、Vista、2008、7上で起動可能となっています。 ダウンロード、インストール、レポートの作成と比較については以下から。 LookInMyPC https://lookinmypc.softonic.jp/ ポータブル版も用意されていますが、ここでは通常版をインストールするので「Click Here to Download Installable Version」をクリック。 ダウンロードしたインストーラーを実行。 通常版をインストールするので、「No-Questions-Asked Installation」をクリック。 「Yes, I do」をクリック 「Than
ネットワークのオフラインを検知して処理を実行できる「Heyoffline.js」:phpspot開発日誌
Heyoffline.js ネットワークのオフラインを検知して処理を実行できる「Heyoffline.js」 フレームワークレスで動いて、onOfflineとかonOnlineとかのイベントハンドラを設定して、オフライン、オンライン時に処理を実行できるみたい。 スマートフォンなんかで、何かを入力してしまっていて、送信ボタンを押したらサーバがオフラインですっていうのは避けたいところなのでこうした仕組みで送信ボタンのアクティブ状態を変更するのも１つの手ですね 家や会社のパソコンは常時接続でオフラインの心配はなくなった、とおもいきやスマートフォンの電波が悪い状態や地下鉄、といったことを考えるとこういう仕組みは必要かもですね 関連エントリ 様々なグラフを描画できるJavaScriptライブラリ「NVD3.js」 ブラウザ上でRubyプログラムをJavaScriptに変換して実行できる「Opal」
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
スマホで動画が視聴できないときは － 動画の視聴確認サイト －
http://blog.ceed.jp/?p=298