| Tweet |
|
●パソコンで制作するのにちょうどいい幅や長さがスマホでみると幅がはみ出たりするのが。google-mapの地図やyoutubeの動画の埋め込み。
それに表です。
● 表の場合の会社案内等にはこの場合は２列の１２行でつくる。いろんな方法があるらしいが一番簡単な方法です。普通に下記のように表をつくる
（これはスマホやタブレットで見ている場合は横幅100%になっているハズです。パソコンでは横幅500pxくらいです
●失敗例はこちら
| 郵便番号 | 591-8044 |
| 住所 | 大阪府堺市北区中長尾町3-3-7 灰谷マンション203 |
| 社名 | さんた工房 |
| 電話番号 | 072-253-7937 |
| FAX番号 | 072-275-8821 |
| 携帯 | 080-4246-3521 |
| ホームページ | http://santa-21.com |
| メール | info@santa-21.com |
| Line ID | santa21ggg |
| 備考 |
●この表のhtmlソース
<table border="1" cellpadding="1" cellspacing="1">
<tbody>
<tr>
<td style="width: 20%;">郵便番号</td>
<td style="width: 80%;">591-8044</td>
</tr>
<tr>
<td>住所</td>
<td>大阪府堺市北区中長尾町3-3-7 灰谷マンション203 </td>
</tr>
<tr>
<td> 社名</td>
<td>さんた工房</td>
</tr>
<tr>
<td>電話番号</td>
<td>072-253-7937</td>
</tr>
<tr>
<td>FAX番号</td>
<td>072-275-8821</td>
</tr>
<tr>
<td> 携帯</td>
<td>080-4246-3521</td>
</tr>
<tr>
<td>ホームページ</td>
<td>http://santa-21.com</td>
</tr>
<tr>
<td>メール</td>
<td>info@santa-21.com</td>
</tr>
<tr>
<td>Line ID</td>
<td>santa21ggg</td>
</tr>
<tr>
<td>備考</td>
<td> </td>
</tr>
</tbody>
</table>
●この表のCSS
table{
width:100%;
table-layout: fixed;
}
| 日 | 月 | 火 | 水 | 木 | 金 | 土 |
| 1 | 2 | 3 | 4 | 5 | 6 | 7 |
| 8 | 9 | 10 | 11 | 12 | 13 | 14 |
| 15 | 16 | 17 | 18 | 19 | 20 | 21 |
| 22 | 23 | 24 | 25 | 26 | 27 | 28 |
| 29 | 30 | 31 |
●googlemap埋め込みのCSS
.gmap {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.gmap iframe,
.gmap object,
.gmap embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
● googlemapのインラインフレームのHTML
<div class="gmap">
<iframe src="埋め込みコード</iframe>
</div>
●YouTube埋め込み CSS
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
●Youtube埋め込みHTML
<div class="video-container">
<iframe width="560" height="315" src="埋め込みコード" frameborder="0" allowfullscreen></iframe>
</div>