HTML5で正方形を描写する（リバーシの外観の作図）

ブログ作成
2023.03.15

こんにちは、ふみです。みなさんはブログ等のウェブサイトで正方形を表示させたいと思ったことはありますか？

今回はHTML5 (Hyper Text Markup Language version5) で正方形を描写する方法をいくつか紹介します。

横幅と高さに同じ長さを指定する

正方形を作成するにはCSSを使用して幅と高さが等しくなるように指定します。
具体例は次のとおりです。

<div style="width: 100px; height: 100px; background-color: green;"></div>

この例では、div要素を使用して正方形を作成し、style属性を使用してCSSスタイルを設定します。width（幅）とheight（高さ）を100pxに設定し、background-color（背景色）を緑色に設定しています。

WordPress（ワードプレス）では、このコードを「カスタムHTML」に貼り付けると緑色の正方形が表示されます。
下の正方形は記事内に挿入したカスタムHTMLに上記コードを貼り付けたものです。

また、CSSをstyleタグ内に記述する場合は、次のようになります。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>正方形</title>
  <style>
    .square {
      width: 100px;
      height: 100px;
      background-color: green;
    }
  </style>
</head>
<body>
  <div class="square"></div>
</body>
</html>

この例ではdiv要素にsquareというクラスを追加し、styleタグ内でスタイルを設定しています。

上記コードはメモ帳等のテキストエディタにコピー＆ペーストして、拡張子「.html」で保存後、ブラウザから開くと確認できます。

親要素の幅に合わせる

親要素の幅に合わせて同じ高さの正方形を作成するには、高さを指定しない方法で記述します。
CSSのpadding-topプロパティを使用して、%値で高さを指定します。具体例は次のとおりです。

<div style="padding-top: 100%; background-color: green;"></div>

この例では、%値で指定したpadding-topプロパティが要素の幅に対して相対的に設定されるため、ウィンドウサイズなどの変更に応じて正方形のサイズが調整されます。

下の正方形はWordPressのカスタムHTMLに上記コードを貼り付けたものです。

この正方形はブラウザのウィンドウサイズを変更して幅を狭めると、高さも調整されて正方形を維持します。

横幅のみを指定する

横幅のみを指定して正方形を作成する場合は、親要素の幅に合わせる四角形のdiv要素の外側に、横幅を指定するdiv要素を追加します。
具体例は次のとおりです。

<div style="width: 100px;">
  <div style="padding-top: 100%; background-color: green;"></div>
</div>

この例では「親要素の幅に合わせる」の具体例のコードに、親要素としてwidthを100pxに指定するdiv要素を追加しています。

下の正方形はWordPressのカスタムHTMLに上記コードを貼り付けたものです。

一辺の幅の最大値を指定する

一辺の幅の最大値を指定して正方形を作成する場合は、親要素の幅に合わせる四角形のdiv要素の外側に、横幅の最大値を指定するdiv要素を追加します。
具体例は次のとおりです。

<div style="max-width: 500px;">
  <div style="padding-top: 100%; background-color: green;"></div>
</div>

この例では「親要素の幅に合わせる」の具体例のコードに、親要素としてmax-width（最大幅）を500pxに指定するdiv要素を追加しています。
スマートフォン等、ウィンドウサイズが500px未満の場合、ウィンドウサイズに応じて正方形のサイズが調整されます。
パソコン等、親要素の領域幅が500pxを超える場合は一辺の長さが500pxの正方形になります。

下の正方形はWordPressのカスタムHTMLに上記コードを貼り付けたものです。

中心に文字を配置する

正方形の中心に文字を配置するには、CSSを使用して、テキスト要素を水平および垂直方向に中央揃えする必要があります。具体例は次のとおりです。

<div style="max-width: 500px; position: relative;">
  <div style="padding-top: 100%; background-color: green;"></div>
  <p style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); margin: 0;">
    文字1
  </p>
</div>

この例では「一辺の幅の最大値を指定する」の具体例のコードに、p要素を加えて文字を配置しています。
p要素の「position: absolute;」は親要素内にレイアウト空間が作成されないので、同じ親要素内にある正方形のdiv要素のレイアウトの影響を受けなくなります。p要素の他の各スタイルは中央に移動させるための値を指定しています。
また、p要素の「position: absolute;」のレイアウトの基準にする為、親要素のスタイルに「position: relative;」を追加しています。

下の正方形はWordPressのカスタムHTMLに上記コードを貼り付けたものです。

文字1

レスポンシブデザインの表要素に大きさの比率が変わらない文字を配置する

正方形の表の作成には<table>要素を使います。
CSSをstyleタグ内に記述する場合の具体例は、次のとおりです。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!--レスポンシブデザイン-->
  <title>リバーシ1</title>
  <style>
    #square-frame1{
      position: relative;
      margin: 0;
      padding: 0;
      max-width: 600px;
    }
    #square-frame1 div{
      padding-top: 100%;
      margin: 0;
    }
    #square-frame1 table {
      position: absolute;
      top: 0;
      left: 0;
      margin: 0;
      table-layout: fixed;
      width: 100%;
      height: 100%;
      border-collapse: collapse;
    }
    #square-frame1 td {
      width: 12.5%;
      height: 12.5%;
      padding: 0; /*罫線内側の余白*/
      background-color: green;
      border: 1px solid black;
      text-align: center;
      font-size: min(7vw, 42px); /*7%, 600px*7%=42px*/
      font-weight: bold;
    }
    #square-frame1 .black-stone {
      color: black;
    }
    #square-frame1 .white-stone {
      color: white;
    }
  </style>
</head>
<body>
  <div id="square-frame1">
    <div></div>
    <table>
      <tr><td></td><td></td><td><td></td><td></td><td></td><td></td><td></td></tr>
      <tr><td></td><td></td><td><td></td><td></td><td></td><td></td><td></td></tr>
      <tr><td></td><td></td><td><td></td><td></td><td></td><td></td><td></td></tr>
      <tr><td></td><td></td><td><td class="white-stone">●</td><td class="black-stone">●</td><td></td><td></td><td></td></tr>
      <tr><td></td><td></td><td><td class="black-stone">●</td><td class="white-stone">●</td><td></td><td></td><td></td></tr>
      <tr><td></td><td></td><td><td></td><td></td><td></td><td></td><td></td></tr>
      <tr><td></td><td></td><td><td></td><td></td><td></td><td></td><td></td></tr>
      <tr><td></td><td></td><td><td></td><td></td><td></td><td></td><td></td></tr>
    </table>
  </div>
</body>
</html>

この例では「中心に文字を配置する」の具体例のp要素をテーブル要素に置き換えています。
style属性の記述をstyleタグ内に移動していますが、内容はほぼ同じで、最大幅が500pxから600pxに変更しています。「background-color: green;」は<div>要素から、反映の優先順位が高い<td>要素に移動しています。
ここでは8行8列の表を作成して、中央の4マスに白と黒の文字「●」を配置しています。
max-width（最大幅）が指定されている表において、枠と文字の大きさの比率を同じにする場合は、font-sizeを「vw」（ビューポートの幅に対する割合）で指定後、font-sizeの最大値に「max-width × vw（％）」の計算値を設定すると、どのような画面でも表枠と文字の大きさの比率を一定にできます。
<td>要素は「padding: 0;」（余白なし）に設定すると、文字のスペースが最大になります。
文字「●」は<td>要素内に直接記述していますが、この方法は文字の大きさが表枠内のスペースを超えると、枠が大きくなり、他の枠が狭くなってしまいます。

上記コードをメモ帳等のテキストエディタにコピー＆ペーストして、拡張子「.html」で保存後、ブラウザから開くと次のようになります。

●●
●●

リバーシ（オセロ）をイメージして作図しましたが、石の大きさがかなり小さくなっています。
しかし、文字の大きさをこれ以上大きくすると、石の入っている枠の幅も大きくなるので、均一でなくなってしまいます。
これよりも大きな文字を表枠内に配置するには、次に紹介する方法で記述する必要があります。

表要素に大きな文字を配置する（リバーシの外観の作図）

正方形の表枠内に大きな文字を配置して、リバーシの画像をつくります。
具体例は、次のとおりです。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!--レスポンシブデザイン-->
  <title>リバーシ2</title>
  <style>
    #square-frame2{
      position: relative;
      margin: 0;
      padding: 0;
      max-width: 600px;
    }
    #square-frame2 div{
      padding-top: 100%;
      margin: 0;
    }
    #square-frame2 table {
      position: absolute;
      top: 0;
      left: 0;
      margin: 0;
      table-layout: fixed;
      width: 100%;
      height: 100%;
      border-collapse: collapse;
    }
    #square-frame2 td {
      position: relative;
      width: 12.5%; /*罫線太さが均一の場合は不要*/
      height: 12.5%; /*罫線太さが均一の場合は不要*/
      padding: 0; /*不要*/
      background-color: green;
      border: 1px solid black;
      text-align: center; /*不要*/
      font-size: min(16vw, 96px); /*16%, 600px*16%=96px*/
      font-weight: bold;
    }
    #square-frame2 .black-stone {
      color: black;
    }
    #square-frame2 .white-stone {
      color: white;
    }
    #square-frame2 p {
      position: absolute;
      top: 50%;
      left: 50%;
      transform:
      translate(-50%, -50%);
      margin: 0;
    }
  </style>
</head>
<body>
  <div id="square-frame2">
    <div></div>
    <table>
      <tr><td></td><td></td><td><td></td><td></td><td></td><td></td><td></td></tr>
      <tr><td></td><td></td><td><td></td><td></td><td></td><td></td><td></td></tr>
      <tr><td></td><td></td><td><td></td><td></td><td></td><td></td><td></td></tr>
      <tr><td></td><td></td><td><td class="white-stone"><p>●</p></td><td class="black-stone"><p>●</p></td><td></td><td></td><td></td></tr>
      <tr><td></td><td></td><td><td class="black-stone"><p>●</p></td><td class="white-stone"><p>●</p></td><td></td><td></td><td></td></tr>
      <tr><td></td><td></td><td><td></td><td></td><td></td><td></td><td></td></tr>
      <tr><td></td><td></td><td><td></td><td></td><td></td><td></td><td></td></tr>
      <tr><td></td><td></td><td><td></td><td></td><td></td><td></td><td></td></tr>
    </table>
  </div>
</body>
</html>

この例では「表要素に文字を配置する」の具体例の<td>要素内の文字を「position: absolute;」で設定した<p>要素に記述しています。
<td>要素内の「position: absolute;」で設定した要素は、親要素のサイズを超えても表枠の幅が調整されなくなります。

また、<table>要素を「table-layout: fixed;」で設定していて、<td>要素内に枠がずれる要素が入っていない場合は、罫線の幅が同じ場合に限り、表枠の幅が均一になります。

上記コードをメモ帳等のテキストエディタにコピー＆ペーストして、拡張子「.html」で保存後、ブラウザから開くと次のようになります。

リバーシ2

●

●

●

●

これでレスポンシブデザインのリバーシの画像が完成しました。

まとめ

  • div要素はwidthとheightを同じ値にしてbackground-colorを設定すると正方形が表示される
  • %値で指定したpadding-topプロパティは、要素の幅に対して相対的に設定される
  • 正方形に幅、最大幅を指定する場合は、padding-topを設定したdiv要素の親要素にサイズを指定する
  • 「position: absolute;」は「position: relative;」を設定している親要素を基準に相対配置される
  • 最大幅が設定された表において、枠と文字の大きさの比率を同じにするには、font-sizeの最大値を「max-width × vw（％）」の計算値で設定する

ありがとうございました。

スポンサーリンク

コメント

タイトルとURLをコピーしました