使いこなして効率アップ！ ChromeのデベロッパーツールでCSSを検証する方法 - ICS MEDIA
ウェブ制作をする上でCSSでのスタイルの記述は必須ですが、意外とデバッグが難しくデザイン通りに実装するには手間がかかります。 そんなときに活躍するのがGoogle Chromeの「デベロッパーツール」です。視覚的にCSSのスタイルが確認、変更できるので、うまく活用することでCSSのデバッグを迅速に行うことができます。 この記事ではデベロッパーツールでCSSをデバッグする方法や便利な機能などを紹介します。記事で使用しているデモは以下のリンクから確認できるので、実際にデベロッパーツールで操作しながら読み進めてみてください。 サンプルを別ウインドウで開く ソースコードを確認する 1. DOMのスタイルを確認 / 変更する デベロッパーツールでは、画面上でスタイルの確認、変更ができます。 (1)デベロッパーツールを開く まずはGoogle Chromeを開きます。 確認したい箇所を右クリックし、［
CSSを活用してHTMLのセマンティックエラーを指摘する方法 - ICS MEDIA
CSSはWebページの見た目を整えるものですが、ちょっと違う使い方もできます。たとえば、予期せぬ横スクロールが発生した時、以下のようにすることで全ての要素のアウトラインが表示され、不用意にはみ出している部分が視覚的に分かりやすくなります。 * { outline: 2px solid red; } これを応用してタグの不適切な利用部分をハイライトできます。 このような不適切なタグ利用を検知して警告する「デバッグCSS」を作ってみました。このようなCSSをLintのようにする使い方は#lintHTMLwithCSSのハッシュタグで海外でも考案されています。仕様上許可されないものは赤色で点滅、ダメではないが、やらない方がベターなものは黄色で点滅するようになっています。 当記事では下記のデモを見ながらだと理解を深めやすいので、合わせて読むことをオススメします。 サンプルを別ウィンドウで開く コー
Facebookデバッガーとは？ページの内容とシェアされる内容が違う場合の対処法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。ディレクターのエリカです。 やっとのことでリリースしたメディアサイト。 早速投稿した記事をFacebookでシェアしようとしたら、シェアされる画像や内容がなんかちょっと違うなんてことありませんか？ そんなときは、連日のリリース作業で疲れ果てて泥のように眠るエンジニアを叩き起こす前に、まずはどういう状況か把握しましょう。 はじめに まず、Facebookでシェアされる内容については、サイトのOGP（Open Graph Protocol）というものでコントロールされています。 例えば、あるサイトのURLをFacebookでシェアしようとしたとき、Facebook側はそのページの情報を持っていなければ直接そのページにアクセスし、情報を取得・解析したうえで、そのデータをFacebook側が保持します。（スクレイピングといいます） そして、すでにFacebook側が保持しているデータが
うわぁIE8で表示がおかしい！その原因をチェックしてアドバイスしてくれるオンラインサービス -IE8 Linter
モダンブラウザを基準にページ制作をする人が増えてきましたが、IE8を完全に切るのはなかなか難しいのが現状です。 そんなIE8で、あれ表示がおかしいぞ！という時に、その原因のアドバイスをしてくれる便利なオンラインサービスを紹介します。
JavaScriptエラーを表示・確認する方法のまとめ
JavaScriptエラーを表示・確認する方法をまとめました。 １．はじめに ブラウザでページを表示したときに正しく表示されない、あるいはjQueryで設置したパーツなどが動作しない場合、JavaScriptエラーが発生している可能性があります。 JavaScriptエラーが発生しているかどうかを確認するためにはエラーを表示するためのコンソールを開く必要がありますが、コンソールの開き方が分からなかったり、ブラウザで操作方法も異なります。 このエントリーでは、以下のブラウザを対象にしてJavaScriptエラーの表示・確認方法を解説します。 Google Chrome Firefox IE ビギナーの方向けの内容です。 ２．エラーになるJavaScriptのサンプル エラーになるJavaScriptのサンプルとして、次のサンプルを用いて解説します。このJavaScriptを実行するとシンタッ
WordPressのwp-config.phpで出来る事いろいろ - かちびと.net
自分用メモ。wp-config.phpの設定 で出来る事のリストです。よくある カスタマイズは、テーマファイル内 にコードを書きますが、wp-config で出来る事を知っておくのもとても 大事ですね。 普段あまり利用しないので覚えてないし、困ったときはいちいち探してるので時間をロスしないようにメモしておきます。 スニペットのメモリストですし、細かい解説は面倒なんでしません。また、「wp-configってなんだろう？」という方には全くお役に立てないと思います。 wp-config.phpで出来る事リスト 以下リストです。古いバージョンの事は視野に入れてません。 リストはCODEXのwp-config.phpの編集から抜粋しています。 ※変更前にバックアップして下さい ※自己責任でお願いします ※コード一覧は記事最下部に有ります 01. デバッグモードにする define('WP_DEBUG
タグの閉じ忘れをチェックするブックマークレットが便利。 | バニデザノート
タグの閉じ忘れをチェックするブックマークレットを紹介します。 もう数年使わせてもらってます。 コーディングがほぼ終わった状態で、カラム落ちとか なにか表示がおかしいとき、divタグなどの閉じ忘れってよくあるのですが どのタグ周辺の閉じタグがないのかをワンクリックでチェックしてくれるものです。 使い方は簡単で、こちらのページのインストール項目の「タグ対応をチェック」というリンクをドラッグしてブックマークツールバーに入れるだけ。 あとは、チェックしたいページで さきほどブックマークツールバーに入れたブックマークを押すと 自動でチェックしてくれます！ ご参考にどうぞ。 HTML内タグの閉じ忘れをチェックするツール[ブックマークレット] 関連記事 セリフ体をうまく利用しておしゃれな印象の４サイト 2011/12/26 Fireworksの微妙な色の調節に、「ブレンダー」が便利です。 2011/12
JavaScriptエラー時にエラーを分かりやすく通知してくれるChrome拡張「JavaScript Errors Notifier」:phpspot開発日誌
JavaScriptエラー時にエラーを分かりやすく通知してくれるChrome拡張「JavaScript Errors Notifier」 2011年05月10日- JavaScript Errors Notifier - Chrome ウェブストア JavaScriptエラー時にエラーを分かりやすく通知してくれるChrome拡張「JavaScript Errors Notifier」 エラーがあった場合に、アドレスバーの星アイコンのとなりに次のように通知してくれます。 アイコンをクリックすれば具体的なエラー内容が分かるという物。 赤のアイコンでエラー検知が分かりやすくていいですね。 通常の状態ではエラーがあろうと、デベロッパーツール等でコンソールを開いてない限り気づくことは出来ませんが、これは開発者は必須のツールかもしれませんね。 関連エントリ PHPのエラーなんかをブラウザで確認できるC
Firebugの使い方 | THE HAM MEDIA
Webサイト制作をしている方には、必需品なんじゃないかと思われるくらい便利なFirefoxのアドオン『Firebug』。HTMLやCSSのコーディングを担当している人の多くはいれているアドオンですね。 Firebugを入れて使っている人は多いようなのですが、意外と知られていない機能が盛り沢山だったということが、先日の勉強会（SaCSS）にて発覚！使っているといっても、一部の機能に限られてしまっているようなのです。 もちろん「そんな機能知ってるよ！」というくらい使っている人も多いと思います。しかし、そんなに使いこなせていないや、活用できていない！という人も勉強会の時に多かったように、実際にも多いはず！ Firebugの使い方をもう少し知っていると、Webサイトの制作の時に便利だ！と思える場面が多々でてくるので、是否今回ご紹介する機能は抑えておき、活用してみてください。 HTML&CSSの確認
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://blog.ceed.jp/?p=298
mod_rewrite_tips.html