WordPressの勉強がてら

WordPressの初心者が独学でホームページ作成したときの技術メモ

WordPressの勉強がてら

ウィンドウのサイズを確認しながらデバッグする方法

      2015/01/26

レスポンシブのWebサイトを作成するときウィンドウ幅を見ながら画面表示をみたいので、こんなことをしていた。

<script>

    $(function(){

        $(window).resize(function() {

            console.log($(window).width());

        });

    });

</script>

ウィンドウ幅が変わるたびにconsole.logでブラウザの開発ツール上で表示させていた。

スポンサーリンク

 

ブラウザの機能で確認できる

上記のようなことしなくてもよかった。

ブラウザ(ForeFox)の開発ツールを起動し、下記に示すところに「レスポンシブデザインモード」というものがあった。

「レスポンシブデザインモード」をクリックすると、

表示が切り替わり、ウィンドウサイズを自由に変更でき、サイズも確認することができました。

ずっと知らなかった・・・・

今回はFireFoxですがおそらくChromeでもあるでしょう。

ブラウザ標準搭載の開発ツールにはいろいろ機能があるけど全然使いこなせてない気がする・・・

 - その他Tips

  • このエントリーをはてなブックマークに追加

  関連記事

thumbnail_other
GoogleMapへのリンクを住所で貼るときに失敗したこと

ホームページ上からGoogleMap上に指定した住所へリンクを貼った時に軽くトラ …

thumbnail_other
パスワード自動生成サイト

WordPressのセキュリティ強化のため、adminユーザを削除してパスワード …

thumbnail_other
page plugin(facebook埋め込み)をレスポンシブ対応する

2015年6月にfacebookをwebサイトに埋め込むには「like box」 …

thumbnail_other
Google Analytics で特定のIPアドレスからのアクセスを除外する

Google Analytics でアクセス解析したいとき、管理者からのアクセス …

thum_other
PhotoShopを使って背景の邪魔な物体を簡単に削除する

PhotoShopの初心者の私です。今回、画像に写っている邪魔な物体を削除するの …

thumbnail_other
bootstrapのグリッドレイアウトだけ使うのが好き

bootstrap便利です。WEB製作でレスポンシブ対応するときこれを使ってます …

thumbnail_other
フォルダ内のファイル一覧をテキストデータに落とす方法

データを納品する際の資料作成時など、ファイルの一覧表を作りたいことがたまーにあり …

thumbnail_other
HPに各スタッフのアメブロのタイトルを新着順に表示させる

あるお店の各スタッフのアメーバブログの更新情報をホームページに乗せることになり、 …

thumbnail_other
クリップボードの履歴を保存できるフリーソフト

「Ctrl+C」 でクリップボードにコピーできるのは通常1つで、1つ前にコピーし …

thumbnail_other
ネットショップBASE(ベイス)のAPIを使って商品一覧を表示させてみた

簡単に無料でネットショップが開設できるサービス「BASE」。無料ってのがとても魅 …