【HTML&CSS】課題サイト③会社概要ページを作る

コーディング講座で会社概要のページを作りました。表組みと地図を表示させるコツをまとめました。

表組みで行を繋げたときに中身を中央に揃える

たとえば、以下の画像のように「住所・連絡先」のタイトル行を「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;
}

情報を中央に配置したいとき
tableタグには今まで使っていた「display: flex;、align-items: center;」は使えない（表組みが崩れる）。

▼参考：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。

要素を全幅表示にするかしないか
・幅を固定する＝wrapperなどで幅を設定する。
・全幅表示にする＝wrapperなどで幅を設定しない。

他の下層ページについては、コーディングの課題が出たので進めていこうと思います。
この辺はまだ初級中の初級だと思うので、さくっとこなせるようになりたいです。