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

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

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

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

以下の（１）から（３）のとおり具体例をお示しさせていただきます。

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

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

（２）内側のbox内でimgなどを配置する場合にも内側boxにpositionの起点を作る

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

（３）レスポンシブに対応可能なフォントサイズなどの単位（％、VW等）を使う

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

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

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