ウィンドウのサイズを確認しながらデバッグする方法
2015/01/26
レスポンシブのWebサイトを作成するときウィンドウ幅を見ながら画面表示をみたいので、こんなことをしていた。
<script> $(function(){ $(window).resize(function() { console.log($(window).width()); }); }); </script>
ウィンドウ幅が変わるたびにconsole.logでブラウザの開発ツール上で表示させていた。
WordPressの初心者が独学でホームページ作成したときの技術メモ
2015/01/26
レスポンシブのWebサイトを作成するときウィンドウ幅を見ながら画面表示をみたいので、こんなことをしていた。
<script> $(function(){ $(window).resize(function() { console.log($(window).width()); }); }); </script>
ウィンドウ幅が変わるたびにconsole.logでブラウザの開発ツール上で表示させていた。
上記のようなことしなくてもよかった。
ブラウザ(ForeFox)の開発ツールを起動し、下記に示すところに「レスポンシブデザインモード」というものがあった。
「レスポンシブデザインモード」をクリックすると、
表示が切り替わり、ウィンドウサイズを自由に変更でき、サイズも確認することができました。
ずっと知らなかった・・・・
今回はFireFoxですがおそらくChromeでもあるでしょう。
ブラウザ標準搭載の開発ツールにはいろいろ機能があるけど全然使いこなせてない気がする・・・
ブログを投稿するとき、よく画面のコピーをとることがあります。標準機能の「Alt …
WordPressのセキュリティ強化のため、adminユーザを削除してパスワード …
ホームページ上からGoogleMap上に指定した住所へリンクを貼った時に軽くトラ …
Windowsマシンを使って十数年、この度マシンをMacに移行することになりまし …
Google AdSenseを導入したので手順のメモ。Google Adsens …
bootstrap便利です。WEB製作でレスポンシブ対応するときこれを使ってます …
Google Analytics でアクセス解析したいとき、管理者からのアクセス …
ファイルを解凍するとき通常解凍ソフトを使って解凍します。 しかし最近はいろんな圧 …
PhotoShopの初心者の私です。今回、画像に写っている邪魔な物体を削除するの …
以前LikeBoxを使った以下の記事を書いたのですが2015/6/23日をもって …