アップしたホームページをスマホ対応にしたけど、自分のスマホで見ても字が小さくて読めない ― 2019年09月28日 23:47
アップしたホームページをスマホ対応にしたけど、自分のスマホで見ても字が小さくて読めない
ネットで探して、テキトーなページを読みながら、スマホ用のＣＳＳをシコシコ書く。
昨日コピペしたコードも、訳も分からずに貼り付けただけなので、スマホ対応させようとすると直ぐに馬脚を現す。
やれやれ・・・。
元のＨＴＭＬコードも少し弄った。
ＨＴＭＬ：ここからーーーーーーーー
<!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="https://fuchinshi.web.fc2.com/fc2-imageviewer/?aid=1&iid=1">2019プエルトガレラ</a></li>
<li><a href="https://fuchinshi.web.fc2.com/fc2-imageviewer/?aid=1&iid=2">2019ケアンズ</a></li>
</ul>
</div>
<!-- サブメニュー（右カラム） -->
<div id="submenu2">
<div id="submenu_header">
<h2>リンク</h2>
</div>
<ul id="submenu_body">
<li><a href="http://kfujito2.asablo.jp/blog/">ブログ「kfujitoの徒然by浮沈子」</a></li>
<li><a href="https://tokyo-ame.jwa.or.jp/">東京アメッシュ</a></li>
</ul>
</div>
<!-- サブメニュー（下左カラム） -->
<div id="submenu3">
<div id="submenu_header">
<h2>ダイビング関係</h2>
</div>
<ul id="submenu_body">
<li><a href="https://www.padi.co.jp/">ＰＡＤＩ</a></li>
<li><a href="https://www.gue.com/">ＧＵＥ</a></li>
<li><a href="https://www.sditdierdi.jp/">ＳＤＩ/ＴＤＩ/ＥＲＤＩ</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";
/*============================================
全般的なスタイル
============================================*/
* {
margin:0; padding:0; /*全要素のマージン・パディングをリセット*/
line-height:1.5; /*全要素の行の高さを1.5倍にする*/
color:#333333; /*文字色*/
}
body {
background-image:url("https://fuchinshi.web.fc2.com/fc2-imageviewer/1/1/17.jpg?_=1569589751"); /*ページ全体の背景画像*/
text-align:center; /*IE6以下でセンタリングするための対策*/
}
div#pagebody {
width:900px; margin:0 auto; /*内容全体をセンタリング*/
text-align:left; /*テキストの配置を左揃えにする*/
}
/*============================================
ヘッダ
============================================*/
div#header {
height:85px;
background-color:#cccccc; /*ヘッダ部分の背景色*/
}
h1 {
padding:23px 0px 0px 10px; /*見出し内容の位置調整*/
font-family:Arial, Helvetica, sans-serif; /*フォントの種類*/
}
h1 a {text-decoration:none;
} /*リンクの下線を無くす*/
#header a:hover {
background-color:#ffffff; /*リンクにマウスが乗ったら色を変える*/
}
div#header1 {
height:40px; /*背景画像のサイズに合わせてボックスの高さを指定*/
padding:10px 0px 0px 12px; /*見出し内容の位置調整*/
background-color:#ffffff; /*headder1の背景色*/
color:#ff4500
}
/*============================================
メインメニュー
============================================*/
ul#menu {
height:46px; background-color:#eeeeee; font-weight:bold;
}
li#menu01,li#menu02,li#menu03,li#menu04,li#menu05 {
float:left; /*リスト項目を横に並べる*/
display:inline; /*リスト項目をインライン表示にする*/
list-style-type:none; /*リストマーカー無しにする*/
}
li#menu01 {
width:100px; height:42px;
}
li#menu02 {
width:250px; height:42px;
}
li#menu03 {
width:250x; height:42px;
}
li#menu04 {
width:200px; height:42px;
}
ul#menu a {
display:block; /*リンクをブロック表示にする*/
height:42px; padding-top:4px; text-align:center;
text-decoration:none; /*リンクの下線を無くす*/
font-family:Arial, Helvetica, sans-serif; /*フォントの種類*/
}
ul#menu li a:hover {
background-color:#ffffff; /*リンクにマウスが乗ったら色を変える*/
}
/*============================================
サブメニュー（上左カラム）
============================================*/
div#submenu {
width:440px; /*幅の指定*/
margin:20px 10px 10px 0px; /*位置調整（IE6のバグに注意）*/
display:inline; /*IE6のマージン算出のバグ対策*/
float:left; /*サブメニューのカラムを左寄せにする*/
}
/*サブメニューのヘッダ部分（余白調整・背景色・文字サイズなど）*/
div#submenu_header {
height:26px; padding:4px 0px 0px 0px;
background-color:#cccccc;
font-size:60%; font-weight:bold; text-align:center;
}
/*サブメニューのボディ部分（余白調整・背景色）*/
ul#submenu_body {
padding-bottom:6px;
background-color:#cccccc;
}
ul#submenu_body li {
font-size:90%; /*文字サイズを90%にする*/
list-style-type:none; /*リストマーカー無しにする*/
display:inline; /*リスト項目をインライン表示にする*/
}
ul#submenu_body li a {
display:block; /*リンクをブロック表示にする*/
margin:0px 4px 0px 4px; /*サブメニュー項目のマージン*/
padding:2px 0px 2px 20px; /*サブメニュー項目のパディング*/
background-color:#eeeeee; /*サブメニュー項目の背景色*/
text-decoration:none; /*リンクの下線を無くす*/
}
ul#submenu_body li a:hover {
background-color:#ffffff; /*リンクにマウスが乗ったら色を変える*/
}
/*============================================
サブメニュー２（上右カラム）
============================================*/
div#submenu2 {
width:440px; /*幅の指定と位置調整*/
margin:20px 0px 10px 0px; /*位置調整（IE6のバグに注意）*/
float:right; /*カラムを右寄せにする*/
}
div#pickup ul {
margin-left:10px; /*左マージンを10px空ける*/
font-size:60%; /*フォントサイズを90%にする*/
}
div#pickup li {
list-style-type:none; /*リストマーカー無しにする*/
line-height:1.8; /*行の高さを1.8倍にする*/
}
/*============================================
サブメニュー３（下左カラム）
============================================*/
div#submenu3 {
width:440px; padding-top:10px; /*幅の指定と位置調整*/
clear:both; /*回り込みを解除する*/
float:left; /*カラムを右寄せにする*/
}
div#pickup ul {
margin-left:10px; /*左マージンを10px空ける*/
font-size:60%; /*フォントサイズを90%にする*/
}
div#pickup li {
list-style-type:none; /*リストマーカー無しにする*/
line-height:1.8; /*行の高さを1.8倍にする*/
}
/*============================================
フッタ
============================================*/
.wrapper{
min-height: 100vh;
position: relative;/*←相対位置*/
padding-bottom:40px;/*←footerの高さ*/
box-sizing: border-box;/*←全て含めてmin-height:100vhに*/
}
div#footer{
width:900px;
background-color: rgba(192, 192, 192, 0.4);
clear:both; /*回り込みを解除する*/
height:25px;
text-align: center;
padding: 0px 0px 15px 0px;
position: absolute;/*←絶対位置*/
bottom: 0; /*下に固定*/
}
address {
font-style:normal; /*フォントスタイルを標準にする*/
font-size:small; /*フォントサイズを小さくする*/
padding:5px 0px 0px 0px; /*要素内容の位置調整*/
color:#000000
}
/*------------------------------------
ここからスマホ用
------------------------------------*/
@media only screen and (max-device-width: 640px) {
@charset "utf-8";
/*============================================
全般的なスタイル（スマホ）
============================================*/
* {
margin:0; padding:0; /*全要素のマージン・パディングをリセット*/
line-height:1.5; /*全要素の行の高さを1.5倍にする*/
color:#333333; /*文字色*/
}
body {
/* background-image:url("https://fuchinshi.web.fc2.com/fc2-imageviewer/1/1/17.jpg?_=1569589751"); ページ全体の背景画像（解除）*/
text-align:center; /*IE6以下でセンタリングするための対策*/
}
div#pagebody {
width:100%; margin:0 auto; /*内容全体をセンタリング*/
text-align:left; /*テキストの配置を左揃えにする*/
}
/*============================================
ヘッダ（スマホ）
============================================*/
div#header {
height:85px;
background-color:#cccccc; /*ヘッダ部分の背景色*/
}
h1 {
padding:23px 0px 0px 10px; /*見出し内容の位置調整*/
font-family:Arial, Helvetica, sans-serif; /*フォントの種類*/
}
h1 a {text-decoration:none;
} /*リンクの下線を無くす*/
#header a:hover {
background-color:#ffffff; /*リンクにマウスが乗ったら色を変える*/
}
div#header1 {
height:30px; /*背景画像のサイズに合わせてボックスの高さを指定*/
background-color:#ffffff; /*headder1の背景色*/
margin:10px 10px 10px 12px; /*位置調整（IE6のバグに注意）*/
color:#ff4500
}
/*============================================
メインメニュー（スマホ）
============================================*/
ul#menu {
height:120px; font-weight:bold;
}
li#menu01,li#menu02,li#menu03,li#menu04,li#menu05 {
float:left; /*リスト項目を横に並べる*/
/* display:inline; リスト項目をインライン表示にする（解除）*/
float: none; /*リスト項目を横に並べる（解除）*/
list-style-type:none; /*リストマーカー無しにする*/
}
li#menu01 {
width:100px; height:25px;
}
li#menu02 {
width:250px; height:25px;
}
li#menu03 {
width:250px; height:25px;
}
li#menu04 {
width:200px; height:25px;
}
ul#menu a {
display:block; /*リンクをブロック表示にする*/
height:25px; padding-top:4px; text-align:center;
text-decoration:none; /*リンクの下線を無くす*/
font-family:Arial, Helvetica, sans-serif; /*フォントの種類*/
}
ul#menu li a:hover {
background-color:#ffffff; /*リンクにマウスが乗ったら色を変える*/
}
/*============================================
サブメニュー（上左カラム）（スマホ）
============================================*/
div#submenu {
width:100%; /*幅の指定*/
margin:20px 0px 10px 0px; /*位置調整（IE6のバグに注意）*/
display:inline; /*IE6のマージン算出のバグ対策*/
float:left; /*サブメニューのカラムを左寄せにする*/
}
/*サブメニューのヘッダ部分（余白調整・背景色・文字サイズなど）*/
div#submenu_header {
height:26px; padding:4px 0px 0px 0px;
background-color:#cccccc;
font-size:60%; font-weight:bold; text-align:center;
}
/*サブメニューのボディ部分（余白調整・背景色）*/
ul#submenu_body {
padding-bottom:6px;
background-color:#cccccc;
}
ul#submenu_body li {
font-size:90%; /*文字サイズを90%にする*/
list-style-type:none; /*リストマーカー無しにする*/
/* display:inline; リスト項目をインライン表示にする（解除）*/
}
ul#submenu_body li a {
display:block; /*リンクをブロック表示にする*/
margin:0px 4px 0px 4px; /*サブメニュー項目のマージン*/
padding:2px 0px 2px 20px; /*サブメニュー項目のパディング*/
background-color:#eeeeee; /*サブメニュー項目の背景色*/
text-decoration:none; /*リンクの下線を無くす*/
}
ul#submenu_body li a:hover {
background-color:#ffffff; /*リンクにマウスが乗ったら色を変える*/
}
/*============================================
サブメニュー２（上右カラム）（スマホ）
============================================*/
div#submenu2 {
width:100%; /*幅の指定*/
margin:10px 10px 10px 0px; /*位置調整（IE6のバグに注意）*/
display:inline; /*IE6のマージン算出のバグ対策*/
float:left; /*サブメニューのカラムを左寄せにする*/
}
/*サブメニューのヘッダ部分（余白調整・背景色・文字サイズなど）*/
div#submenu_header {
height:26px; padding:4px 0px 0px 0px;
background-color:#cccccc;
font-size:60%; font-weight:bold; text-align:center;
}
/*サブメニューのボディ部分（余白調整・背景色）*/
ul#submenu_body {
padding-bottom:6px;
background-color:#cccccc;
}
ul#submenu_body li {
font-size:90%; /*文字サイズを90%にする*/
list-style-type:none; /*リストマーカー無しにする*/
/* display:inline; リスト項目をインライン表示にする（解除）*/
}
ul#submenu_body li a {
display:block; /*リンクをブロック表示にする*/
margin:0px 4px 0px 4px; /*サブメニュー項目のマージン*/
padding:2px 0px 2px 20px; /*サブメニュー項目のパディング*/
background-color:#eeeeee; /*サブメニュー項目の背景色*/
text-decoration:none; /*リンクの下線を無くす*/
}
ul#submenu_body li a:hover {
background-color:#ffffff; /*リンクにマウスが乗ったら色を変える*/
}
/*============================================
サブメニュー３（下左カラム）（スマホ）
============================================*/
div#submenu3 {
width:100%; padding-top:10px; /*幅の指定と位置調整*/
clear:both; /*回り込みを解除する*/
float:left; /*カラムを右寄せにする*/
float: none; /*リスト項目を横に並べる（解除）*/
}
div#pickup ul {
margin-left:10px; /*左マージンを10px空ける*/
font-size:60%; /*フォントサイズを90%にする*/
}
div#pickup li {
list-style-type:none; /*リストマーカー無しにする*/
line-height:1.8; /*行の高さを1.8倍にする*/
}
/*============================================
フッタ（スマホ）
============================================*/
.wrapper{
min-height: 100vh;
position: relative;/*←相対位置*/
padding-bottom:30px;/*←footerの高さ*/
box-sizing: border-box;/*←全て含めてmin-height:100vhに*/
}
div#footer{
width:100%; padding-top:10px; /*幅の指定と位置調整*/
background-color: rgba(192, 192, 192, 0.4);
height:30px;
padding: 5px 0;
position: absolute;/*←絶対位置*/
bottom: 0; /*下に固定*/
}
address {
font-style:normal; /*フォントスタイルを標準にする*/
font-size:small; /*フォントサイズを小さくする*/
padding:5px 0px 5px 0px; /*要素内容の位置調整*/
color:#000000
}
} /*スマホ対応終わり*/
ＣＳＳ：ここまでーーーーーーーーーー
自分じゃスマホなんかで絶対見ないからな。
文字が小さ過ぎて読めない。
それを、コンテンツの見映えだけ変えて、人様に読んでいただこうなどという殊勝な心掛けはない。
同じコンテンツを、スタイルシートを使って、見せ方を変える。
その方法を体験するだけの話だ。
配置を変えたり、並び方を変えたり、文字の位置をピクセル単位でずらしてみたり・・・。
スマホは実機を使ったから、その都度サーバーにアップロードする。
開発環境もあるらしいが、そっちの使い方のほうが難しそうだからな。
自分のスマホで沢山だ・・・。
今週は、パソコンに向かっている時間が長い。
目も、身体も疲れる。
体調は、余計悪くなりそうだしな。
運動不足で、目がしょぼしょぼする。
まるで、現代人のようだ。
現代人か。
違いない・・・。
ネットで探して、テキトーなページを読みながら、スマホ用のＣＳＳをシコシコ書く。
昨日コピペしたコードも、訳も分からずに貼り付けただけなので、スマホ対応させようとすると直ぐに馬脚を現す。
やれやれ・・・。
元のＨＴＭＬコードも少し弄った。
ＨＴＭＬ：ここからーーーーーーーー
<!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="https://fuchinshi.web.fc2.com/fc2-imageviewer/?aid=1&iid=1">2019プエルトガレラ</a></li>
<li><a href="https://fuchinshi.web.fc2.com/fc2-imageviewer/?aid=1&iid=2">2019ケアンズ</a></li>
</ul>
</div>
<!-- サブメニュー（右カラム） -->
<div id="submenu2">
<div id="submenu_header">
<h2>リンク</h2>
</div>
<ul id="submenu_body">
<li><a href="http://kfujito2.asablo.jp/blog/">ブログ「kfujitoの徒然by浮沈子」</a></li>
<li><a href="https://tokyo-ame.jwa.or.jp/">東京アメッシュ</a></li>
</ul>
</div>
<!-- サブメニュー（下左カラム） -->
<div id="submenu3">
<div id="submenu_header">
<h2>ダイビング関係</h2>
</div>
<ul id="submenu_body">
<li><a href="https://www.padi.co.jp/">ＰＡＤＩ</a></li>
<li><a href="https://www.gue.com/">ＧＵＥ</a></li>
<li><a href="https://www.sditdierdi.jp/">ＳＤＩ/ＴＤＩ/ＥＲＤＩ</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";
/*============================================
全般的なスタイル
============================================*/
* {
margin:0; padding:0; /*全要素のマージン・パディングをリセット*/
line-height:1.5; /*全要素の行の高さを1.5倍にする*/
color:#333333; /*文字色*/
}
body {
background-image:url("https://fuchinshi.web.fc2.com/fc2-imageviewer/1/1/17.jpg?_=1569589751"); /*ページ全体の背景画像*/
text-align:center; /*IE6以下でセンタリングするための対策*/
}
div#pagebody {
width:900px; margin:0 auto; /*内容全体をセンタリング*/
text-align:left; /*テキストの配置を左揃えにする*/
}
/*============================================
ヘッダ
============================================*/
div#header {
height:85px;
background-color:#cccccc; /*ヘッダ部分の背景色*/
}
h1 {
padding:23px 0px 0px 10px; /*見出し内容の位置調整*/
font-family:Arial, Helvetica, sans-serif; /*フォントの種類*/
}
h1 a {text-decoration:none;
} /*リンクの下線を無くす*/
#header a:hover {
background-color:#ffffff; /*リンクにマウスが乗ったら色を変える*/
}
div#header1 {
height:40px; /*背景画像のサイズに合わせてボックスの高さを指定*/
padding:10px 0px 0px 12px; /*見出し内容の位置調整*/
background-color:#ffffff; /*headder1の背景色*/
color:#ff4500
}
/*============================================
メインメニュー
============================================*/
ul#menu {
height:46px; background-color:#eeeeee; font-weight:bold;
}
li#menu01,li#menu02,li#menu03,li#menu04,li#menu05 {
float:left; /*リスト項目を横に並べる*/
display:inline; /*リスト項目をインライン表示にする*/
list-style-type:none; /*リストマーカー無しにする*/
}
li#menu01 {
width:100px; height:42px;
}
li#menu02 {
width:250px; height:42px;
}
li#menu03 {
width:250x; height:42px;
}
li#menu04 {
width:200px; height:42px;
}
ul#menu a {
display:block; /*リンクをブロック表示にする*/
height:42px; padding-top:4px; text-align:center;
text-decoration:none; /*リンクの下線を無くす*/
font-family:Arial, Helvetica, sans-serif; /*フォントの種類*/
}
ul#menu li a:hover {
background-color:#ffffff; /*リンクにマウスが乗ったら色を変える*/
}
/*============================================
サブメニュー（上左カラム）
============================================*/
div#submenu {
width:440px; /*幅の指定*/
margin:20px 10px 10px 0px; /*位置調整（IE6のバグに注意）*/
display:inline; /*IE6のマージン算出のバグ対策*/
float:left; /*サブメニューのカラムを左寄せにする*/
}
/*サブメニューのヘッダ部分（余白調整・背景色・文字サイズなど）*/
div#submenu_header {
height:26px; padding:4px 0px 0px 0px;
background-color:#cccccc;
font-size:60%; font-weight:bold; text-align:center;
}
/*サブメニューのボディ部分（余白調整・背景色）*/
ul#submenu_body {
padding-bottom:6px;
background-color:#cccccc;
}
ul#submenu_body li {
font-size:90%; /*文字サイズを90%にする*/
list-style-type:none; /*リストマーカー無しにする*/
display:inline; /*リスト項目をインライン表示にする*/
}
ul#submenu_body li a {
display:block; /*リンクをブロック表示にする*/
margin:0px 4px 0px 4px; /*サブメニュー項目のマージン*/
padding:2px 0px 2px 20px; /*サブメニュー項目のパディング*/
background-color:#eeeeee; /*サブメニュー項目の背景色*/
text-decoration:none; /*リンクの下線を無くす*/
}
ul#submenu_body li a:hover {
background-color:#ffffff; /*リンクにマウスが乗ったら色を変える*/
}
/*============================================
サブメニュー２（上右カラム）
============================================*/
div#submenu2 {
width:440px; /*幅の指定と位置調整*/
margin:20px 0px 10px 0px; /*位置調整（IE6のバグに注意）*/
float:right; /*カラムを右寄せにする*/
}
div#pickup ul {
margin-left:10px; /*左マージンを10px空ける*/
font-size:60%; /*フォントサイズを90%にする*/
}
div#pickup li {
list-style-type:none; /*リストマーカー無しにする*/
line-height:1.8; /*行の高さを1.8倍にする*/
}
/*============================================
サブメニュー３（下左カラム）
============================================*/
div#submenu3 {
width:440px; padding-top:10px; /*幅の指定と位置調整*/
clear:both; /*回り込みを解除する*/
float:left; /*カラムを右寄せにする*/
}
div#pickup ul {
margin-left:10px; /*左マージンを10px空ける*/
font-size:60%; /*フォントサイズを90%にする*/
}
div#pickup li {
list-style-type:none; /*リストマーカー無しにする*/
line-height:1.8; /*行の高さを1.8倍にする*/
}
/*============================================
フッタ
============================================*/
.wrapper{
min-height: 100vh;
position: relative;/*←相対位置*/
padding-bottom:40px;/*←footerの高さ*/
box-sizing: border-box;/*←全て含めてmin-height:100vhに*/
}
div#footer{
width:900px;
background-color: rgba(192, 192, 192, 0.4);
clear:both; /*回り込みを解除する*/
height:25px;
text-align: center;
padding: 0px 0px 15px 0px;
position: absolute;/*←絶対位置*/
bottom: 0; /*下に固定*/
}
address {
font-style:normal; /*フォントスタイルを標準にする*/
font-size:small; /*フォントサイズを小さくする*/
padding:5px 0px 0px 0px; /*要素内容の位置調整*/
color:#000000
}
/*------------------------------------
ここからスマホ用
------------------------------------*/
@media only screen and (max-device-width: 640px) {
@charset "utf-8";
/*============================================
全般的なスタイル（スマホ）
============================================*/
* {
margin:0; padding:0; /*全要素のマージン・パディングをリセット*/
line-height:1.5; /*全要素の行の高さを1.5倍にする*/
color:#333333; /*文字色*/
}
body {
/* background-image:url("https://fuchinshi.web.fc2.com/fc2-imageviewer/1/1/17.jpg?_=1569589751"); ページ全体の背景画像（解除）*/
text-align:center; /*IE6以下でセンタリングするための対策*/
}
div#pagebody {
width:100%; margin:0 auto; /*内容全体をセンタリング*/
text-align:left; /*テキストの配置を左揃えにする*/
}
/*============================================
ヘッダ（スマホ）
============================================*/
div#header {
height:85px;
background-color:#cccccc; /*ヘッダ部分の背景色*/
}
h1 {
padding:23px 0px 0px 10px; /*見出し内容の位置調整*/
font-family:Arial, Helvetica, sans-serif; /*フォントの種類*/
}
h1 a {text-decoration:none;
} /*リンクの下線を無くす*/
#header a:hover {
background-color:#ffffff; /*リンクにマウスが乗ったら色を変える*/
}
div#header1 {
height:30px; /*背景画像のサイズに合わせてボックスの高さを指定*/
background-color:#ffffff; /*headder1の背景色*/
margin:10px 10px 10px 12px; /*位置調整（IE6のバグに注意）*/
color:#ff4500
}
/*============================================
メインメニュー（スマホ）
============================================*/
ul#menu {
height:120px; font-weight:bold;
}
li#menu01,li#menu02,li#menu03,li#menu04,li#menu05 {
float:left; /*リスト項目を横に並べる*/
/* display:inline; リスト項目をインライン表示にする（解除）*/
float: none; /*リスト項目を横に並べる（解除）*/
list-style-type:none; /*リストマーカー無しにする*/
}
li#menu01 {
width:100px; height:25px;
}
li#menu02 {
width:250px; height:25px;
}
li#menu03 {
width:250px; height:25px;
}
li#menu04 {
width:200px; height:25px;
}
ul#menu a {
display:block; /*リンクをブロック表示にする*/
height:25px; padding-top:4px; text-align:center;
text-decoration:none; /*リンクの下線を無くす*/
font-family:Arial, Helvetica, sans-serif; /*フォントの種類*/
}
ul#menu li a:hover {
background-color:#ffffff; /*リンクにマウスが乗ったら色を変える*/
}
/*============================================
サブメニュー（上左カラム）（スマホ）
============================================*/
div#submenu {
width:100%; /*幅の指定*/
margin:20px 0px 10px 0px; /*位置調整（IE6のバグに注意）*/
display:inline; /*IE6のマージン算出のバグ対策*/
float:left; /*サブメニューのカラムを左寄せにする*/
}
/*サブメニューのヘッダ部分（余白調整・背景色・文字サイズなど）*/
div#submenu_header {
height:26px; padding:4px 0px 0px 0px;
background-color:#cccccc;
font-size:60%; font-weight:bold; text-align:center;
}
/*サブメニューのボディ部分（余白調整・背景色）*/
ul#submenu_body {
padding-bottom:6px;
background-color:#cccccc;
}
ul#submenu_body li {
font-size:90%; /*文字サイズを90%にする*/
list-style-type:none; /*リストマーカー無しにする*/
/* display:inline; リスト項目をインライン表示にする（解除）*/
}
ul#submenu_body li a {
display:block; /*リンクをブロック表示にする*/
margin:0px 4px 0px 4px; /*サブメニュー項目のマージン*/
padding:2px 0px 2px 20px; /*サブメニュー項目のパディング*/
background-color:#eeeeee; /*サブメニュー項目の背景色*/
text-decoration:none; /*リンクの下線を無くす*/
}
ul#submenu_body li a:hover {
background-color:#ffffff; /*リンクにマウスが乗ったら色を変える*/
}
/*============================================
サブメニュー２（上右カラム）（スマホ）
============================================*/
div#submenu2 {
width:100%; /*幅の指定*/
margin:10px 10px 10px 0px; /*位置調整（IE6のバグに注意）*/
display:inline; /*IE6のマージン算出のバグ対策*/
float:left; /*サブメニューのカラムを左寄せにする*/
}
/*サブメニューのヘッダ部分（余白調整・背景色・文字サイズなど）*/
div#submenu_header {
height:26px; padding:4px 0px 0px 0px;
background-color:#cccccc;
font-size:60%; font-weight:bold; text-align:center;
}
/*サブメニューのボディ部分（余白調整・背景色）*/
ul#submenu_body {
padding-bottom:6px;
background-color:#cccccc;
}
ul#submenu_body li {
font-size:90%; /*文字サイズを90%にする*/
list-style-type:none; /*リストマーカー無しにする*/
/* display:inline; リスト項目をインライン表示にする（解除）*/
}
ul#submenu_body li a {
display:block; /*リンクをブロック表示にする*/
margin:0px 4px 0px 4px; /*サブメニュー項目のマージン*/
padding:2px 0px 2px 20px; /*サブメニュー項目のパディング*/
background-color:#eeeeee; /*サブメニュー項目の背景色*/
text-decoration:none; /*リンクの下線を無くす*/
}
ul#submenu_body li a:hover {
background-color:#ffffff; /*リンクにマウスが乗ったら色を変える*/
}
/*============================================
サブメニュー３（下左カラム）（スマホ）
============================================*/
div#submenu3 {
width:100%; padding-top:10px; /*幅の指定と位置調整*/
clear:both; /*回り込みを解除する*/
float:left; /*カラムを右寄せにする*/
float: none; /*リスト項目を横に並べる（解除）*/
}
div#pickup ul {
margin-left:10px; /*左マージンを10px空ける*/
font-size:60%; /*フォントサイズを90%にする*/
}
div#pickup li {
list-style-type:none; /*リストマーカー無しにする*/
line-height:1.8; /*行の高さを1.8倍にする*/
}
/*============================================
フッタ（スマホ）
============================================*/
.wrapper{
min-height: 100vh;
position: relative;/*←相対位置*/
padding-bottom:30px;/*←footerの高さ*/
box-sizing: border-box;/*←全て含めてmin-height:100vhに*/
}
div#footer{
width:100%; padding-top:10px; /*幅の指定と位置調整*/
background-color: rgba(192, 192, 192, 0.4);
height:30px;
padding: 5px 0;
position: absolute;/*←絶対位置*/
bottom: 0; /*下に固定*/
}
address {
font-style:normal; /*フォントスタイルを標準にする*/
font-size:small; /*フォントサイズを小さくする*/
padding:5px 0px 5px 0px; /*要素内容の位置調整*/
color:#000000
}
} /*スマホ対応終わり*/
ＣＳＳ：ここまでーーーーーーーーーー
自分じゃスマホなんかで絶対見ないからな。
文字が小さ過ぎて読めない。
それを、コンテンツの見映えだけ変えて、人様に読んでいただこうなどという殊勝な心掛けはない。
同じコンテンツを、スタイルシートを使って、見せ方を変える。
その方法を体験するだけの話だ。
配置を変えたり、並び方を変えたり、文字の位置をピクセル単位でずらしてみたり・・・。
スマホは実機を使ったから、その都度サーバーにアップロードする。
開発環境もあるらしいが、そっちの使い方のほうが難しそうだからな。
自分のスマホで沢山だ・・・。
今週は、パソコンに向かっている時間が長い。
目も、身体も疲れる。
体調は、余計悪くなりそうだしな。
運動不足で、目がしょぼしょぼする。
まるで、現代人のようだ。
現代人か。
違いない・・・。
コメントをどうぞ
※メールアドレスとURLの入力は必須ではありません。 入力されたメールアドレスは記事に反映されず、ブログの管理者のみが参照できます。
※なお、送られたコメントはブログの管理者が確認するまで公開されません。
※投稿には管理者が設定した質問に答える必要があります。