こんにちは、ふみです。みなさんはブログ等のウェブサイトで正方形を表示させたいと思ったことはありますか？
今回はHTML5 (Hyper Text Markup Language version5) で正方形を描写する方法をいくつか紹介します。
CONTENTS
横幅と高さに同じ長さを指定する
正方形を作成するには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
このやり方は、p要素の記述範囲が親要素の幅の50%を超えると、改行されて表示されます。
親要素の幅の100%まで使う場合は、p要素のスタイルに「width: 100%;」を追加すると、幅一杯まで改行されずに表示することができます。
レスポンシブデザインの表要素に大きさの比率が変わらない円を配置する（リバーシの外観の作図）
表の作成には<table>要素を使います。テーブルは通常、行と列の組み合わせで成り立っているため、正方形に直接することは難しいですが、セル（<td>要素）のサイズを調整して近似的に正方形にします。
ここでは正方形の表枠内に円を配置して、リバーシの画像をつくります。
具体例は、次のとおりです。
（先日公開したコードは、iPhoneの画面で表示の不具合が出ていましたので、修正しました。）
<!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-table {
table-layout: fixed;
width: 100%;
max-width: 600px;
border-collapse: collapse;
background-color: green;
}
#square-table td {
position: relative;
border: 1px solid black;
text-align: center;
padding: 0;
width: 12.5%;
padding-top: 12.5%;
}
#square-table td > div{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
}
#square-table .white-stone {
background-color: white;
padding-top: 80%;
margin: 10%;
border-radius: 50%;
}
#square-table .black-stone {
background-color: black;
padding-top: 80%;
margin: 10%;
border-radius: 50%;
}
</style>
</head>
<body>
<table id="square-table">
<tr><td></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></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td><div class="white-stone"></div></td><td><div class="black-stone"></div></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td><div class="black-stone"></div></td><td><div class="white-stone"></div></td><td></td><td></td><td></td></tr>
<tr><td></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></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
</table>
</body>
</html>この例では<td>要素内に「position: absolute;」で設定した<div>要素を記述しています。
<td>要素内の「position: absolute;」で設定した要素は、親要素のサイズを超えても表枠の幅が調整されなくなります。セル内のコンテンツを中央寄せするために、絶対配置を使用しています。
<td>要素はセルの幅と高さを近似的に一致させるために、’padding’を使っています。
サイズの計算は 100% ÷ 8（マス） = 12.5% となります。
また、<table>要素を「table-layout: fixed;」で設定していて、<td>要素内に枠がずれる要素が入っていない場合は、罫線の幅が同じ場合に限り、表枠の幅が均一になります。
上記コードをメモ帳等のテキストエディタにコピー＆ペーストして、拡張子「.html」で保存後、ブラウザから開くと次のようになります。
これでレスポンシブデザインのリバーシの画像が完成しました。
この表枠（<td要素>）内に文字を記入する場合は、「<div>（記入する文字列）＜/div＞」の形にすると、表枠の幅が調整されずに記入できます。
max-width（最大幅）が指定されている表において、枠と文字の大きさの比率を同じにする場合は、font-sizeを「vw」（ビューポートの幅に対する割合）で指定後、font-sizeの最大値に「max-width × vw（％）」の計算値を設定すると、どのような画面でも表枠と文字の大きさの比率を一定にできます。
CSSの記述例は次のとおりです。
#square-table td > div {
font-size: min(12vw, 72px);
}「min(基本値,最大値);」という形で値を設定します。
max-width: 600px の表枠内の文字の大きさを12%で一定にする場合、最大値の計算は 600px × 12% = 72px となります。
まとめ
- div要素はwidthとheightを同じ値にしてbackground-colorを設定すると正方形が表示される
- %値で指定したpadding-topプロパティは、要素の幅に対して相対的に設定される
- 正方形に幅、最大幅を指定する場合は、padding-topを設定したdiv要素の親要素にサイズを指定する
- 「position: absolute;」は「position: relative;」を設定している親要素を基準に相対配置される
- 最大幅が設定された表において、枠と文字の大きさの比率を同じにするには、font-sizeの最大値を「max-width × vw（％）」の計算値で設定する
ありがとうございました。
コメント