Webマーケティング記事 web学習 Wordpress関係

正円を複数個並べてレスポンシブル対応にする方法(簡易編)

2021/09/21

レスポンシブ対応のCSS凝縮

1 コーディングにあたって    

html,cssのコーディングにおいて、正方形や正円をpx指定で作るのであれば、そう難しくありません。しかし、PCサイト、iPad、スマホなど媒体が変わっても形が崩れたり、枠からはみ出すないような設定(レスポンシブ設定)にするにはテクニックが必要です。また、上・下、左・右、前・後等狙った位置に指定したいという場合も、同様です。 

 

理由は、レスポンシブ対応での文字や画像、イラストの位置指定を行う際には、どこを起点としているかということが重要になるからです。この起点を指定しないと、画面の(左0、上0)を起点として計算してしまい、指定が複雑になってしまいます。また、ピクセルなど絶対値ではなく画面サイズに応じた割合が指定できる単位(%やvw,vh等)を使う必要もあります。

 

以下の(1)から(3)のとおり具体例をお示しさせていただきます。

(1)boxを複数重なるレイアウトを行う場合には一番外側のboxにpositionの起点を作る

「uchi1(内側のbox)」の位置を指定したいなら、その外側にある直接の親要素「soto1(外側のbox)」に位置の起点となる(position:relative)の指定が必要です。これは、boxの位置指定の基本となります。親要素に(position:relative)に指定がない場合、デフォルトでは初期値として(position:static)が指定され、画面の左上が起点となってしまい、うまくいかないことが多いです。よって、boxを親子関係で重ねる場合には、子要素にpositionを指定することがなくても、親要素枠上にpngなどのイラストを配置したい場合などは、親要素に(position:relative)を指定しおきましょう。

 

(2)内側のbox内でimgなどを配置する場合にも内側boxにpositionの起点を作る

次に「uchi1(内側のbox)」の中に入る画像やタイトル文字などの位置指定が必要です。「soto1(外側のbox)」から見たら子要素だった「uchi1(内側のbox)」が今度は画像やタイトル文字にとっては、親要素「soto1(外側のbox)」となります。よって、それらの位置を指定するために、(position:relative)を指定する必要があります。そして、画像やタイトル文字はその起点(top0:left0の位置)から見てどれくらいの位置に指定したいのか(position:absolute)を指定する必要があります。

 

(3)レスポンシブに対応可能なフォントサイズなどの単位(%、VW等)を使う

位置を指定する際に、画面サイズが変わっても相対的な位置を維持したい場合は、pxやemでは上手くいかない場合があります。その場合、単位に%や、vh,vw等を使うことが必要です。

 

完成形は以下のとおです。 

 

前回のブログでは、画像(img)を背景画像(background)として指定しましたが、今回はポジション指定(position)で作ってみました。色々なパターンで作れるとコーディングの幅も広がると思います。

シャドー文字と写真

完成形

2 各パーツの準備 

まず、最初にhtmlのコーディングに必要なブロック要素などのタグ< >とそれに対応するcss名(class名)を設定します。今回準備するのは、外枠(class名:soto1)、内枠(class名:uchi1)、画像(imgタグ)、文字(Pタグ)です。

 

この時点で、「ボックスは何個必要か?」、その中に「どんな要素((imgタグ)、文字(Pタグ))が必要か?」をイメージし、確定できるようにしておくと後で手直しの必要がなくなり良いと思います。
 

 

 

レスポンシブに必要なパーツ

3 外側のboxと内側のboxの関係の指定

準備が出来たら、「soto1(外側のbox)」と「uchi1(内側のbox)」の親子関係の指定を行います。boxは基本的にブロック要素なので、必然的に縦長の形状になります。すなわち、スマホサイズのレイアウトを先に作ることになります。
今回は、「soto1(外側のbox)」に対して、特段「uchi1(内側のbox)」を固定する必要(position:relative)はありませんが、念の為に(position:relative)を設定しておきましょう。
ここで指定する命令は、スマホサイズの横幅に対して、ほぼいっぱいになるようにwidth:96%と、イラストを中央に配置できるよう、margin:0 autoをつけておきます。

この時点でのboxはまだ正方形ではなく縦横の比率がばらばらな長方形となります。

 

 
レスポンシブな親子ボックスの指定

4 長方形をレスポンシブ対応の正方形にする 

次は、レスポンシブ対応の正方形を作ります。ここで重要なことは、widthとpadding-topの値の%を同じにすることです。そして、さらに重要なのが、今回は正方形3つを横に作ることになっていますので、widthは自ずと30%程度(1/3なので)と決まります。
widthを30%と指定した場合、padding-top:も30%に指定する。必要があります widthが20%ならpadding-topも20%にすれば正方形は保てるということです。そうでないと、正方形が崩れます…。
(※ レスポンシブの正方形を作る方法として、もう一つの方法があります。それはwidthとheightに同じ数値のvw( viewport widht)をつける方法です。vw( viewport widht)は、「表示領域」の幅を規準にした横幅が指定できる方法です。単位は33VWなど割合の小数点以下を指定します。

レスポンシブ長方形から正方形へ

5 「uchi1(内側のbox)」の指定 

「uchi1(内側のbox)」は、親要素である「soto1(外側のbox)」に対しては子要素でしたが、中に入る画像(imgタグ)や文字(Pタグ)にとって、親要素にあたります。よって、中に入る画像(imgタグ)や文字(Pタグ)を固定できるようにするためにpositionの起点指定(position:relative)を行います。
また、このboxは正方形ではなく正円にしたいので、border-radius:50%を指定します。そして中に入る文字や画像で、正円よりはみ出み出た部分は見えないよなくなるようにする為に、overflow-hiddenをつけます。

 

 

border-radiusで正円に

6 レスポンシブ対応の正方形を3つ作る

次に正方形から正円になったuchi1(内側のbox)を縦に3つ並べられるようコピペします。uchi1のタグはdiv要素<div>とブロック要素なので、何も指定しなければ、縦並びになります。 

これはそのまま、縦長が求められるスマホ画面用として活用できます。

また、ソースコードがPC画面に影響が及ばないよう、今までのコーディング内容にMedia Query指定をしておきます。(本来はPC用でも、スマホサイト用でも同じコーディングはMedia Queryの指定が必要ないのですが、バグが起こらないようにとりあえずこのように設定しておきます。) 

@media screen and (max-width:960px) {.uchi1{width:90%;margin:2em;}}

因みにMedia Queryの記載では以下の注意が必要です。 

@media screen and  (max-width:960px) …○ andと( )の間に半角スペース

@media screen and (max-width:960px) …✕ andと( )の間に半角スペースなし

たかが半角スペースと思いますが、これがないとメディアQueryは全く効かないので、大変重要な要素です。覚えておきたいです。

ここで、スマホサイズ用としてuchi1boxにおいては、中身のタイトル文字と、img画像を引き連れて画面サイズが変わっても、位置関係が崩れないようになったはずです。

5 正円は縦並びになる

7 長方形 (class名 uchi1)の中に写真(imgタグ)とタイトル文字(Pタグ)を適切な場所に配置する

内枠の設定を行います。 

(1)写真<imgタグ>の設定

・写真(imgタグ)からみた親要素である、「uchi1」の左端上(top:0 left:0)のポジションからの位置をposition:absoluteで指定します。

・写真を縦横比が崩れないように、要素の中に配置するには、object-fit:coverが必要です。今回の写真は元々が正方形なので結果的には不要でしたが、つけておいても問題ないので、つけておきましょう。
object-fit:coverでは、配置された画像などは縦横比を維持したまま、要素のコンテンツボックス全体を埋めるように拡大縮小されます。)(これも重要)

・高さの指定について、ブロック要素の場合は、高さを上手く認識しないので、高さを自動調整してくれる「height:auto;」をつけます。(これも重要)

(2)タイトル文字<pタグ>の配置  

タイトル文字タグの設定は以下のとおり行います。
・左上起点からの位置指定(position:absolute)
・文字の大きさを指定する  font-size: 4vw;単位にemを利用するとマイナスの余白(negative(-)margin)が利用できなかったので、pxかvwで指定する。 
・line-heightを指定する
line-heightはフォントに依存する。通常1.2の値が指定されており、その分maginが出てしまうので、1に指定しておく。
・レイヤーを一番上に配置する。下層レイヤーの写真などに隠れない様にする z-index:3

・縦位置を(概ね)真ん中に設定する   top:50% [(概ね)の理由は文字の高さ分を考慮していない為]

・縦位置を文字の高さも考慮し、(正確に)真ん中に設定する margin-top:-2vw
文字をトップから50%の位置に配置するので、font-sizeの自分の高さの半分だけ上に戻してあげれば、高さがきっちり真ん中に来る。
・横位置で中央に配置させる text-align:center
文字はin-line要素なので、通常text-align:centerで真ん中に来るはずがうまくいかない…理由はposition:absoluteを使っているのでうまく横幅を認識してくれないらしい。よって… 
・pタグの横幅を指定(text-align:centerが効かない対応策) <P>タグ自体を横幅いっぱいのwidth:100%を指定してあげる。(これで解決!)

8 スマホ対応の縦並びから横並びに配置変えする

そして、各々のレスポンシブの正方形がレスポンシブの正円になったら、PCサイト用として、縦並びから横並びに変更する為に、外枠に「display:flex」を指定します。 

@media screen and {min-width:960px{ } }でPC用に作った指定内容を{ }の中にいれます。最終的に出来上がったソースコードはcode penに記載させていただいとおりです。   

6 正円を縦並びから横並びに

9 実際のコード(code pen)  

See the Pen
by 佐久間 俊雄 (@zojydusc)
on CodePen.

10 まとめ

html,cssを使われている方で、「何でこんなにめんどくさいんだ!」と思われる方も多いのではないかと思います。自分も正直そう思います。

しかし、このようなことを行ってトライし続けていけば、コーディングのレベルも上がっていき、いずれは、より良いレイアウトづくりに時間と労力をかけずに行っていけるようになると信じていきたいと思います。 

-Webマーケティング記事, web学習, Wordpress関係