さんた工房

スマホ対応の表を作る

パソコンで制作するのにちょうどいい幅や長さがスマホでみると幅がはみ出たりするのが。google-mapの地図やyoutubeの動画の埋め込み。
それに表です。

 表の場合の会社案内等にはこの場合は2列の12行でつくる。いろんな方法があるらしいが一番簡単な方法です。普通に下記のように表をつくる
(これはスマホやタブレットで見ている場合は横幅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>&nbsp; 社名</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>&nbsp;</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の埋め込み失敗例はこちら

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>

≪ ホームページ制作の価格  |  googleマップの埋め込み失敗 ≫