コーディング講座で会社概要のページを作りました。表組みと地図を表示させるコツをまとめました。
表組みで行を繋げたときに中身を中央に揃える
たとえば、以下の画像のように「住所・連絡先」のタイトル行を「th rowspan=”2″」で1行にした場合、「住所・連絡先」が中央(赤点線)に配置されない。
【HTML】
<table class=”company_table”>
・・・
<tr>
<th rowspan=”2″>住所・連絡先</th>
<td>大阪市浪速区大国2-2-22</td>
</tr>
<tr>
<td>06-000-0000</td>
</tr>
</table>

thのプロパティに「vertical-align: middle;」を設定する。
【CSS】
.company_table th {
background-color: #eee;
width: 30%;
vertical-align: middle;
}

▼参考:headerに「display: flex;、align-items: center;」を使って要素を中央に配置した記事はこちら
iframeでグーグルマップを表示させる
地図の表示の大きさを変えるには
グーグルマップを表示させるとき、リンクを共有する前の段階での表示の大きさ=HTMLで表示される大きさになる。地図の表示の大きさを変えたい場合はリンクを表示する前の段階で調整すること。

地図の下にできた微妙な余白をなくしたい
iframeタグを使用すると下にかすかな余白ができてしまう場合があるが、「vertical-align: bottom;」で消せる。

【CSS】
.map iframe {
width: 100%;
vertical-align: bottom;
}
地図を全幅表示にしたい
style.cssに以下のwrapperを設定しているので、iframeタグのクラスにwrapperを設定すると幅が固定されてしまう。
【CSS】
.wrapper {
max-width: 960px;
width: 100%;
margin: 0 auto;
}
今回は地図を全幅表示にしたいので、iframeにwrapperを設定しなければOK。
他の下層ページについては、コーディングの課題が出たので進めていこうと思います。
この辺はまだ初級中の初級だと思うので、さくっとこなせるようになりたいです。
コメント