[画像]
アップしたホームページをスマホ対応にしたけど、自分のスマホで見ても字が小さくて読めない
ネットで探して、テキトーなページを読みながら、スマホ用のＣＳＳをシコシコ書く。
昨日コピペしたコードも、訳も分からずに貼り付けただけなので、スマホ対応させようとすると直ぐに馬脚を現す。
やれやれ・・・。
元のＨＴＭＬコードも少し弄った。
ＨＴＭＬ：ここからーーーーーーーー
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<!-- inital scale -->
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="sample.css" />
<title>浮沈子の部屋</title>
<body>
<div class="wrapper">
<div id="pagebody">
<!-- ヘッダ -->
<div id="header"><h1><a href="index.htm">浮沈子の部屋</a></h1></div>
<div id="header1">まだ工事中（いつまで！？）</div>
<!-- メインメニュー -->
<ul id="menu">
<li id="menu01"><a href="index.htm">ほーむ</a></li>
<li id="menu02"><a href="koujityu.htm">ごあいさつ（工事中）</a></li>
<li id="menu03"><a href="koujityu.htm">アルバム（工事中）</a></li>
<li id="menu04"><a href="koujityu.htm">リンク（工事中）</a></li>
</ul>
<!-- サブメニュー（左カラム） -->
<div id="submenu">
<div id="submenu_header">
<h2>アルバム</h2>
</div>
<ul id="submenu_body">
<li><a href="
[URL]">2019プエルトガレラ</a></li>
<li><a href="
[URL]">2019ケアンズ</a></li>
</ul>
</div>
<!-- サブメニュー（右カラム） -->
<div id="submenu2">
<div id="submenu_header">
<h2>リンク</h2>
</div>
<ul id="submenu_body">
<li><a href="
[URL]">ブログ「kfujitoの徒然by浮沈子」</a></li>
<li><a href="
[URL]">東京アメッシュ</a></li>
</ul>
</div>
<!-- サブメニュー（下左カラム） -->
<div id="submenu3">
<div id="submenu_header">
<h2>ダイビング関係</h2>
</div>
<ul id="submenu_body">
<li><a href="
[URL]">ＰＡＤＩ</a></li>
<li><a href="
[URL]">ＧＵＥ</a></li>
<li><a href="
[URL]">ＳＤＩ/ＴＤＩ/ＥＲＤＩ</a></li>
</ul>
</div>
<!-- フッタ -->
<div id="footer"><address>(C)2019 Copyright 浮沈子 All Rights Reserved.</address>
</div>
</div>
</div><!--div class="wrapper"を閉じる-->
</body>
</html>
ＨＴＭＬ：ここまでーーーーーーーー
継ぎ足しで書いたＣＳＳも、一応全部載せておく。
動かなくなった時のバックアップということもあるしな（今日は、３回くらい動かなくなりました）。
スパゲッティだろうが、ざる蕎麦だろうが、動くプログラムが正義だ・・・。
ＣＳＳ：ここからーーーーーーーーーー
@charset "utf-8";
ｺﾒﾝﾄをする