feildsetを使う

今回はMFI(mobile first index)で作っていきます。

0335670003.php

<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
fieldset{
	border:1px #C0C0C0 solid;
}
</style>
<fieldset>
<legend>オーナー情報</legend>
・事業者名:<br>
<?php echo $owner; ?><br><br>
・住所:<br>
<?php echo $address; ?>
</fieldset>

<br><br>
<fieldset>
<legend>電話番号情報</legend>
<table width="100%" cellpadding="5">
<tr>
	<td>市街局番</td><td><?php echo $num1; ?></td><td>市内局番</td><td><?php echo $num2; ?></td>
</tr>
<tr>
	<td>加入者番号</td><td><?php echo $num3; ?></td><td></td><td></td>
</tr>
</table>
</fieldset>

google mapを追加

<style>
#content{
	width:800px;
	margin:10px auto;
}
fieldset{
	border:1px #C0C0C0 solid;
}
</style>
<div id="content">
<h1>電話番号 <?php echo "　".$num1."-".$num2."-".$num3;?></h1>
<table width="100%">
<tr><td width="52%" valign="top">
<fieldset>
<legend>オーナー情報</legend>
・事業者名:<br>
<?php echo $owner; ?><br><br>
・住所:<br>
<?php echo $address; ?><br><br>
</fieldset>
</td><td width="48%" align="right" valign="top">
<div id="map" style="width: 350px; height: 250px;"></div>
</td>
</tr></table>
<br><br>
<fieldset>
<legend>電話番号情報</legend>
<table width="100%" cellpadding="5">
<tr>
	<td>市街局番</td><td><?php echo $num1; ?></td><td>市内局番</td><td><?php echo $num2; ?></td>
</tr>
<tr>
	<td>加入者番号</td><td><?php echo $num3; ?></td><td></td><td></td>
</tr>
</table>
</fieldset>
</div>
<script type="text/javascript" src="//maps.google.com/maps/api/js?sensor=false"></script>
<script>
    function drawMap(address) {
        var geocoder = new google.maps.Geocoder();
        geocoder.geocode(
                {
                    'address': '（〒104-0061）東京都中央区銀座１丁目９−１８',
                    'region': 'jp'
                },
                function (results, status) {
                    if (status == google.maps.GeocoderStatus.OK) {
                        google.maps.event.addDomListener(window, 'load', function () {
                            var map_tag = document.getElementById('map');
                            var map_location = new google.maps.LatLng(results[0].geometry.location.lat(),results[0].geometry.location.lng());
                            var map_options =
                            {
                                zoom: 16,
                                center: map_location,
                                disableDefaultUI: true,
                                mapTypeId: google.maps.MapTypeId.ROADMAP
                            };

                            var map = new google.maps.Map(map_tag, map_options);

                            var marker = new google.maps.Marker({
                                position: map_location,
                                map: map
                            });
                        });
                    }
                }
        );
    }
    drawMap();
</script>

Nice