人気ブログランキング | 話題のタグを見る
Studio TA Subsite の案内とお知らせ

Chrome DevTools を使ってみよう (11) ウインドウ幅の表示と正確なコントロール

2017年 08月 05日
Toolsの編集画面の説明は以下のページをサンプルにしています。 実際にDevToolsを操作しながら読まれると、いっそう判り易いでしょう。



 〔 ウインドウ幅をコントロールする 〕 


 ウインドウ幅を知る必要性 

自ブログをどの様なウインドウ幅で見てもらうのか、それを小型のノート画面を前提にするか、幅広いデスクトップモニターを前提にするか、ここはスキンデザインの要所です。

例えば、Chromeのウインドウを狭めて行った場合に、1000pxの幅まではデザイン崩れとならない様にしたいとします。 大雑把なデザインなら大した話ではないですが、手の込んだデザインを施していると、あちらは残しこちらは削りという、すり合わせの必要が出て来ます。

そんな場合、1000pxに納まるかを確かめるには、デザインの最中にウインドウ幅を知る必要があります。


 DevToolsを起動するとウインドウサイズが表示される 

Chromeでアレンジ対象のページを表示してDevToolsを起動すると、Chrome画面の右上のコーナーにウインドウサイズが表示されます。 Toolsが別ウインドウか同一ウインドウかには関係ありません。

Chrome DevTools を使ってみよう (11) ウインドウ幅の表示と正確なコントロール_a0349576_22564471.png

この表示はウインドウのサイズを変更した時にだけ表示され、数秒後に自動的に消えます。 少し早過ぎて不便ですが、常時表示にする方法は無い様です。 この機能で、ウインドウ幅を変えながらテストし、崩れる限界の幅を一応知れるようになります。

しかし、マウスでウインドウ端を掴んでドラッグする操作が、つきまといます。 これは動きが粗すぎて調整し難い時があり、上手い方法を探して見つけました。


 ウインドウのサイズ変更モード 

ウインドウ枠の上辺(タイトルバー)の何もない所を右クリックして、メニューの「サイズ変更」を押します。

Chrome DevTools を使ってみよう (11) ウインドウ幅の表示と正確なコントロール_a0349576_23195195.png

これでマウスポインタが十字矢の形になり、ウインドウが「サイズ変更モード」になります。

Chrome DevTools を使ってみよう (11) ウインドウ幅の表示と正確なコントロール_a0349576_23200639.png

マウスでウインドウ端をドラッグするだけでは、このマークを出した意味は無いように見えます。
しかしこのモードに入ると、「Ctrl」+「」「」のキー操作でウインドウ幅を調整できる様になっています。 このキー操作で、ウインドウの右上の幅表示を見ながら、とても微細で正確な調整作業ができます。

注意が要るのは、この操作中にマウスが動くと、甚だしくウインドウサイズが変わってしまう事です。「サイズ変更モード」に入ったら、下手にマウスに触れない様にします。

またこの操作で、ウインドウ幅をピタリと決まった幅に固定する事が出来ます。 マウスのドラッグではpx単位の正確さを求めるのは大変です。 方法は簡単で、上記の操作で指定幅に合せ、マウスに触れない様に「Enter」キーを押すだけです。 これで自動的に「サイズ変更モード」が終了し、ウインドウ幅が固定されます。

デザインの幅調整では、このウインドウ幅の微調整操作が一番役にたちました。


 他に使えるかも知れない機能 定規表示 

DevToolsの最上段 右側の「」マークをクリックし、メニューの「Settings」を押します。

Chrome DevTools を使ってみよう (11) ウインドウ幅の表示と正確なコントロール_a0349576_00175780.png

「Settings」で「Preferences」→「Elements」の項を探し、最後の「Show rolers」にチェックを入れ、右上の「×」でメイン画面に戻ります。

Chrome DevTools を使ってみよう (11) ウインドウ幅の表示と正確なコントロール_a0349576_00182239.png

これで、Chrome画面の上辺と左辺に定規が表示される様になります。

Chrome DevTools を使ってみよう (11) ウインドウ幅の表示と正確なコントロール_a0349576_00324050.png

但し、Tools左ウインドウ内か、右ウインドウのセレクタ上にマウスポインタが無いと定規は表示されません。 目盛りが読み取り難い事もあって、崩れる限界の幅を正確に知るには使い難いです。


 他に使えるかも知れない機能 エミュレーション/カスタムデバイス 

上と同様に「」マークからメニューの「Settigs」に入り、「Devices」を開きます。 ここは使用したいエミュレーション環境を選んで登録する画面ですが、ここで最上段の「Add custom device...」を押します。

Chrome DevTools を使ってみよう (11) ウインドウ幅の表示と正確なコントロール_a0349576_01024816.png

以下の様なカスタムデバイスの登録画面が出ます。 ここで、エミュレーションする表示画面のサイズを自由に設定できます。 下図は「幅1000px 縦720px」のデスクトップモニターを指定しています。 「touch / no touch」でポインタの表示と扱い方が変わります。 最後の枠で「LCD1000720」と記入していますが、ここは空白でかまいません。

Chrome DevTools を使ってみよう (11) ウインドウ幅の表示と正確なコントロール_a0349576_01245446.png

適当な登録名を付け「Add」を押すと、カスタムの仮想モニター「MinLCD」が登録されました。

Chrome DevTools を使ってみよう (11) ウインドウ幅の表示と正確なコントロール_a0349576_01270373.png

右上の「×」でメイン画面に戻り、上段の左の「Toggle device toolbar」を押します。

Chrome DevTools を使ってみよう (11) ウインドウ幅の表示と正確なコントロール_a0349576_01292502.png

Chrome画面が、デバイスのエミュレーション画面に変わります。

Chrome DevTools を使ってみよう (11) ウインドウ幅の表示と正確なコントロール_a0349576_01372764.png

左の「▼」マークを押し、デバイス選択のパレットで先ほど登録した「MinLCD」を選択。

Chrome DevTools を使ってみよう (11) ウインドウ幅の表示と正確なコントロール_a0349576_01561304.png

これで、幅1000pxの仮想モニターでの表示が確認出来ます。

エミュレーション表示は、調節可能なウインドウ幅の概念がなく、PC画面で言えばブラウザウインドウを最大表示した状態です。 しかもページを適当に拡大縮小して、画面幅にフィットさせて表示します。

これでは、デバイス幅を狭めても「ページの幅を狭める」のでなく「ページ全体の縮小表示」となり、知りたい事が判りません。

残念ながら今回のニーズには使えませんが、エミュレーション機能は大変に有効です。 カスタムデバイスの登録は他のところで必要になるかも知れません。

エミュレーションを終了するには、Toolsメイン画面の上段の「Toggle device toolbar」を押します。



by Ataron2 | 2017-08-05 22:40 | DevToolsを使ってみよう