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

Chrome DevTools を使ってみよう (26) ページ中央の配置指定と背景暗転

2017年 08月 06日
今回は以下のページをサンプルにします。 実際にDevToolsを操作しながら読まれると、いっそう判り易いと思います。




 ページ中央に要素を配置する 

これは多くのページで紹介されていますが、原理を理解していないと応用に苦労します。 しかしその内容は、中学生レベルの計算で難しくありません。 判ってしまうと、後々の色々なところで役に立ちます。

 配置指定 

上記サンプルページの「ヘルプのパネル」を、例としてページ中央に配置してみます。

Chrome DevTools を使ってみよう (26) ページ中央の配置指定と背景暗転_a0349576_13485735.png

「ヘルプパネル」の要素名は「div.bloghelp」ですが、最初にこれに「position: fixed」を指定して、メニュー内の配置からフリーにします。 中央に持って行くと、ブログ本文等の下に潜り込むので「z-index:1」を指定。 また、パネルの幅は、配置のフリー化でパネル内の文字列幅になってしまうので、体裁上で切りの良い「width: 300px」を指定しています。

Chrome DevTools を使ってみよう (26) ページ中央の配置指定と背景暗転_a0349576_14105300.png

それ以下が、肝心の「ページの中央配置」の算段です。
幾つか方法がありますが、上の方法は画面にピッタリの幅になる様に「横padding」を計算して、「div.bloghelp」の両横に付加する方法です。

下図は、上の設定の結果の画面で、既に「ヘルプパネル」が左右の中央に配置されています。

Chrome DevTools を使ってみよう (26) ページ中央の配置指定と背景暗転_a0349576_14185032.png

「100vw」というのは便利な値で、ウインドウ横幅(スクロールバー幅込み)を指定に利用できます。「M」は、ここではヘルプパネル幅で「300px」です。 ページにちょうど納まる様な「P」(ここではpadding)の幅値は、下の計算で得られます。

  P=(100vw-M)÷2

M=300px なので、

  p=(100vw-300px)÷2=50vw-150px

先の「div.bloghelp」の指定の中で、calc() という書式を使っています。 これは、値の指定に計算式を持ち込める、とても便利な書式です。

  padding: 50vh calc(50vw - 150px);

これは、paddingを2値で指定しています。
paddingの第1値の「50vh」は、上下padding値になります。 これでは、ヘルプパネルはウインドウの高さの中央より少し下になりますが、高さ位置は少しアバウトにやり過ごしてます。

paddingの第2値は、横padding値になります。 こちらは正確で、状況によって様々に変化するウインドウ幅に対して、常に横padding値を計算して、ヘルプパネルを横方向の中央に配置します。 calc()の書式で注意が要るのは、演算子「+」「-」等の前後に半角空白が要る事です。 これを守らないとコードが上手く働きません。


 背景暗転の指定 

「背景暗転」は、画像のポップアップ等で重宝される表現方法です。 何かの要素を他からきわだたせる手法なので、スクリプトを使ったポップアップやhover等の表示と兼用するのが、一般的な利用場所になるでしょう。

画面中央に持って来たヘルプパネルに背景暗転を指定するのは、既に「padding」がウインドウ内の全領域を覆っているので簡単です。 直接「background」を指定しても良いですが、下図の様にDevToolsの「Add background-color」を使うと、半透過が簡単に指定出来ます。

Chrome DevTools を使ってみよう (26) ページ中央の配置指定と背景暗転_a0349576_15031953.png

下はその操作中ですが、要点を赤枠で示しています。

Chrome DevTools を使ってみよう (26) ページ中央の配置指定と背景暗転_a0349576_15241542.png

黒背景にしたい時は、最初に「フルカラーパレット」の下隅をクリックするのが近道です。
次に透過スライダーで、実際のブラウザ画面を見ながら背景を適当な濃さに調節します。

この調節の結果の例ですが、

  background-color: rgba(11, 11, 11, 0.57);

となったとしても、(11, 11, 11)は(0,0,0)の黒とほぼ同じです。 コードをすっきりさせたいなら、

  background-color: rgba(0,0,0, 0.6);

と書き換えても、問題ありません。



 ページ中央に要素を配置する別の指定方法 

少しだけ違った指定方法ですが、暗背景の付け方は独特です。

 配置指定 

「position: fixed」「z-index: 1」「width: 300px」は同じです。 今度は次のコードで、ヘルプパネルのpadding無しの状態で、配置指定をしています。

  top: 50vh;
  left: calc(50vw - 150px);

Chrome DevTools を使ってみよう (26) ページ中央の配置指定と背景暗転_a0349576_15490152.png


 背景暗転の指定 

同じ様に中央配置になりますが、こちらは padding領域が無いのでbackgroundを指定しても背景色が表に出て来ません。 こんな場合、余り紹介されていませんが、「box-shadow」を使う上手い方法があります。

DevToolsで「Add box-shadow」を押して、「影コントロールボックス」を表示します。

Chrome DevTools を使ってみよう (26) ページ中央の配置指定と背景暗転_a0349576_16150893.png

下図は、このボックで余り使われない「Spread」に、直接「100vw」を入力した所です。

Chrome DevTools を使ってみよう (26) ページ中央の配置指定と背景暗転_a0349576_23460821.png

一般には「Blur」で作られる半影の方を意識して box-shadowを扱う事が多いのですが、この「Spread」値は、影の芯になる部分の広さを指定するものです。 この利用方法では、値は200vwでも1000vwでも良く、影の端がウインドウ端に充分に届いて余裕があれば目的を達します。

「100vw」を指定した場合は、以下のプロパティが設定されます。

   box-shadow: 0 0 0 100vw black;

この影色「black」を rgba(0,0,0, 0.6) に書き換えれば、先の例と同様の半透過の暗背景になります。

   box-shadow: 0 0 0 100vw rgba(0,0,0, 0.6);

Chrome DevTools を使ってみよう (26) ページ中央の配置指定と背景暗転_a0349576_16343979.png

この指定方法は、コード行が少なくて簡潔です。「box-shadow」の利用は、便利な指定方法だと思います。



by Ataron2 | 2017-08-06 01:10 | DevToolsを使ってみよう