プロが教える店舗＆オフィスのセキュリティ対策術

マジレス希望

レスポンシブかつ、スマホ、携帯で見たとき左右に余白のできるhtml・cssを教えてください

解決済

  • 質問者：マモン
  • 質問日時：
  • 回答数：2件

下は私のサイトで今使っているhtmlのコンテンツ前までです。コンテンツ（文章）の下はタグを閉じたりとかだけなのでたぶん大丈夫かと。
サイトはFC2ホームページ。

ググったり、理想のサイトのソースを見たりして自分でだいぶカスタムしてます。

レスポンシブかつ、余白ありにはなったんですが、携帯で見たときたまに余白が消えて画面左右のいっぱいまで文章が広がるときがあります。友人には携帯で読めるんだからいいじゃんといわれましたが気になって仕方ありません。
消えたえり、消えなかったりです。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Style-Type"content="text/css">
<meta name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version10.0.0.0 for Windows">
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=Shift_JIS" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Cache-Control" content="no-cache" />
<link rel="shortcut icon" href="/favicon.ico" />
<meta name="robots" content="noindex, follow" />
<meta name="robots" content="none,noindex,nofollow,noarchive">
<meta name="robots" content="noindex,nofollow,noarchive">
<meta name="robots" content="none">
<meta name="viewport" content="width=device-width,user-scalable=no,maximum-scale=1" />

<link rel="stylesheet" media="all" type="text/css" href="style.css" />
<!-- ※デフォルトのスタイル（style.css） -->
<link rel="stylesheet" media="all" type="text/css" href="tablet.css" />
<!-- ※タブレット用のスタイル（tablet.css） -->
<link rel="stylesheet" media="all" type="text/css" href="smart.css" />
<!-- ※スマートフォン用のスタイル（smart.css） -->
<style type="text/css">
body {
text-align:center;
letter-spacing:0.3px;
font-size:medium;
font-family:ＭＳ Ｐゴシック", "Osaka", "ヒラギノ角ゴ Pro W3;
}
.header {
max-width:500px;
text-align:center;
color:#665971;
background-image:url(http://img.mobilerz.net/sozai/433_w.gif);
background-position:center;
border:1px solid #dddddd;
}
.contents {
max-width:500px;
text-align:left;
line-height:20px;
}


a:link { color: limegreen; text-decoration:none;}
a:visited { color: limegreen; text-decoration:none;}
a:hover { color: palegreen; text-decoration:none;}
a:active { color: palegreen; text-decoration:none;}

</style>
<center></head><center>
<body onload="emoji();" marginwidth="15">
<div style="padding: 0; font-size: medium; line-height: 20px;">
<div class="header"></div>
<div class="contents"><br /><br /><br />


どこをどう書き換えたら余白が消えたりせず、きちんと表示されるでしょうか。
パソコンではとくに支障ありません。
確認はアンドロイド、アイフォンでやっております。


ちなみに余談ですが、私の一番の理想スタイルはピクシブの文章画面です。
でもピクシブのソースはまったくどこがどこだかわからなかったので諦め、それに近くなるように努力しています。

ご指導よろしくお願いいたします。

質問者からの補足コメント

  • はじめまして、回答本当にありがとうございます。
    先に指摘されました、スクリーンの問題ですが、ググってみて出てきた一発でレスポンシブになる！というやつをコピペしまして…私自身は理解していませんでした。実際にレスポンシブになっちゃったので……

    後半なのですが、どれがどれを指定するかなど内容が理解できても、それをどこに上書きか、挿入かがわかりません……ごめんなさい！

    もしお時間ありましたら、どこに上書きか教えてもらえないでしょうか。

    私は、パソコンでは５００pxの幅、
    スマホではその画面に合わせた幅（左右にpadding15）、
    といった感じにしたいのです。

    お力添えをぜひお願いいたします

    No.1の回答に寄せられた補足コメントです。 補足日時：2015/12/19 21:01
    通報する
通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (2件)

No.1ベストアンサー

  • 回答者： ORUKA1951
  • 回答日時：

まずHTMLが間違ってるし・・・


HTML4.01なのにXHTMLの書き方になっているし、文書構造のわからないdivがあるし・・
DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加する( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )

後方互換を考えるなら、まずリキッドで製作する。
ついで、mediaでスタイルシートを切り替える。
media="all"は使いません。意味わかってないのじゃないかと・・
media="screen" でスマホ、タブレット、パソコンのブラウザです。
media="handheld"が携帯用です。
media="print"が印刷用
media="aural, speech" がスクリーンリーダー用
　allはまずいです。

そのうえでレスポンシブデザインになりますが無駄なスタイルシートを読み込ませないためには、
最初に
<link rel="stylesheet" media="screen" href="screen.css">
<!-- とscreen共通のスタイルを読み込ませて -->
<link rel="stylesheet" media="screen and (max-width: 800px)" href="mobile.css">
<link rel="stylesheet" media="screen and (max-width: 480px)" href="smart.css">
・・・のほうがメンテナンスしやすいでしょう。
IE9用に
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/t …
<![endif]-->

<body>
　<div class="header">
　　<h1>見出し</h1>
　</div>
　<div class="section">
　　<div class="nav">
　　　<h2>目次</h2>
　　</div>
　　<h2>記事見出し</h1>
　　<p>段落記事</p>
　</div>
　<div class="footer">
　　<h2>フッター</h2>
　</p>
</body>

screen.css
html,body{margin:0;padding:0;line-height:1.6em;}
div.header,div.section,div.footer{margin:5px;max-width:1000px;margin:0 auto;}
div.section{position:relative;}
div.section div.nav{position:absolute;left:0;top:0;height:100%;width:200px;}
div.section h2,div.section p{margin-left:210px;}

smart.css　　最低限の上書き
div.section div.nav{position:static;height:auto;width:auto;}
div.section h2,div.section p{margin-left:auto;}

　まず、率直に文書構造だけをHTMLとしてマークアップしたら
Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html )
　のDATAなどでHTMLの文法チェックをする。
そのうえで、リキッドでデフォルトのスタイルシートを記述して、mediaquery(レスポンシブ)に対応したブラウザ用に記述する。
この回答への補足あり
    • good
    • 0
    • 件
通報する

No.2

  • 回答者： ORUKA1951
  • 回答日時：

＞もしお時間ありましたら、どこに上書きか教えてもらえないでしょうか。


　困りましたね。・・・これは不可能なのです。あなたの文書の構造もわからないので。
　それはして上げようにもできないのです。人の作ったものを手直しするのはとてつもなく大変なのですよ。
　たぶんゼロから書き直したほうが簡単です。私はサイトの修正を依頼されますが、利用できるのは文字データと画像だけですから、それだけ抜き出して作り直す。

　なぜ、「どこに上書きか教えてもらえないでしょうか。」に具体的に答えられないかが、わかるように具体的なサンプルを作ってみました。下記をテキストエディタにコピペして

1) タブは＿に置換してあるのでタブに戻す。
2) :は：(全角)に置換してあるのでタブに戻す。

[説明]
　このように文書構造だけを忠実にマークアップします。
＞私の一番の理想スタイルはピクシブの文章画面です。
　これはHTMLを作るうえでは一切関係ないのです。
　￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣
　逆に文書構造だけきちんとマークアップされていれば、好きにデザインできる。

★ divのclass名は、HTML5の新しい要素名に対応させています。
　<div class="header"></div>はHTML5では<header></header>となります。section,article,nav,footerも同様
★Another HTML Lint - GatewayのDATAでチェック済み
★スタイルシートは後で


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http：//www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
＿<title>サンプル</title>
＿<meta name="author" content="ORUKA1951">
＿<meta http-equiv="Content-Style-Type" content="text/css">
＿<link rev="made" href="mailto：oruka1951&#64;hoge.com" title="send a mail" >
＿<link rel="START" href="../index.html">
＿<style type="text/css">
<!--
-->
＿</style>
</head>
<body>
＿<div class="header"><!-- この文書のヘッダ -->
＿＿<h1 id="title">Your title</h1>
＿＿<div class="nav"><!-- ナビゲーション -->
＿＿＿<ol>
＿＿＿＿<li><a href="#question">質問</a>
＿＿＿＿＿<ol>
＿＿＿＿＿＿<li><a href="#supplement">補足</a></li>
＿＿＿＿＿</ol>
＿＿＿＿</li>
＿＿＿＿<li><a href="#response">回答</a></li>
＿＿＿</ol>
＿＿</div>
＿</div>
＿<div class="section" id="question"><!-- 本文記事 -->
＿＿<h2>
＿＿＿レスポンシブかつ、スマホ、携帯で見たとき左右に余白のできるhtml・cssを教えてください
＿＿</h2>
＿＿<p>
＿＿＿下は私のサイトで今使っているhtmlのコンテンツ前までです。コンテンツ（文章）の下はタグを閉じたりとかだけなのでたぶん大丈夫かと。
＿＿</p>
＿＿<p>
＿＿＿サイトはFC2ホームページ。
＿＿</p>
＿＿<p>
＿＿＿ググったり、理想のサイトのソースを見たりして自分でだいぶカスタムしてます。
＿＿</p>
＿＿<p>
＿＿＿レスポンシブかつ、余白ありにはなったんですが、携帯で見たときたまに余白が消えて画面左右のいっぱいまで文章が広がるときがあります。友人には携帯で読めるんだからいいじゃんといわれましたが気になって仕方ありません。
消えたえり、消えなかったりです。
＿＿</p>
＿＿<p>
＿＿＿どこをどう書き換えたら余白が消えたりせず、きちんと表示されるでしょうか。
＿＿</p>
＿＿<p>
＿＿＿パソコンではとくに支障ありません。
＿＿</p>
＿＿<p>
＿＿＿確認はアンドロイド、アイフォンでやっております。
＿＿</p>
＿＿<p>
＿＿＿ちなみに余談ですが、私の一番の理想スタイルはピクシブの文章画面です。
でもピクシブのソースはまったくどこがどこだかわからなかったので諦め、それに近くなるように努力しています。
＿＿</p>
＿＿<p>
＿＿＿ご指導よろしくお願いいたします。
＿＿</p>
＿＿<div class="article" id="supplement"><!--article：完結した記事 -->
＿＿＿<h3>質問者からの補足コメント</h3>
＿＿＿<p>
＿＿＿＿先に指摘されました、スクリーンの問題ですが、ググってみて出てきた一発でレスポンシブになる！というやつをコピペしまして…私自身は理解していませんでした。実際にレスポンシブになっちゃったので……
＿＿＿</p>
＿＿＿<p>
＿＿＿＿後半なのですが、どれがどれを指定するかなど内容が理解できても、それをどこに上書きか、挿入かがわかりません……ごめんなさい！
＿＿＿</p>
＿＿＿<p>
＿＿＿＿もしお時間ありましたら、どこに上書きか教えてもらえないでしょうか。
＿＿＿</p>
＿＿＿<p>
＿＿＿＿私は、パソコンでは５００pxの幅、スマホではその画面に合わせた幅（左右にpadding15）といった感じにしたいのです。
＿＿＿</p>
＿＿</div>
＿</div>
＿<div class="section" id="response"><!-- section：記事 -->
＿＿<h2>回答</h2>
＿＿<p>基本からきちんと学んでいけば決して難しいものではないです。</p>
＿＿<p>
＿＿＿そのほうがはるかに早道で将来も引き返さなくてよい。一度、<a href="http：//www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/cover.html">HTML4.01の仕様書</a>くらいは一通り目を通しておかれるのがよろしいかと。とても勉強になります。
＿＿</p>
＿＿<dl>
＿＿＿<dt> 書きたい内容を文書構造だけを率直にマークアップする。</dt>
＿＿＿<dd>HTML4.01strictが簡単でよいでしょう。</dd>
＿＿＿<dd>
＿＿＿＿<code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"&gt;</code>ではなくて、←<a href="http：//www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/conform.html#h-4.1"><q>HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。</q></a>
＿＿＿</dd>
＿＿＿<dd><code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http：//www.w3.org/TR/html4/strict.dtd"&gt;</code></dd>
＿＿＿<dd>これで、すべてのブラウザで標準(standard)で描画されるのでブラウザ間のずれに悩まされることが激減します。
＿＿＿＿<p><a href="http：//www.htmq.com/htmlkihon/302.shtml">DOCTYPEスイッチ－HTMLの基本</a></p>
＿＿＿</dd>
＿＿＿<dt>文書ができたら、</dt>
＿＿＿<dd><a href="http：//www.htmllint.net/html-lint/htmllint.html">Another HTML Lint - Gateway</a>などで文法チェックをします。
<em>※ここでチェックできるのは文法だけで、文書構造が正しくマークアップされているかはチェックできません。</em></dd>
＿＿</dl>
＿＿<p class="quotation"><q>もしお時間ありましたら、どこに上書きか教えてもらえないでしょうか。</q></p>
＿＿<p>
＿＿＿それはして上げようにもできないのです。人の作ったものを手直しするのはとてつもなく大変なのですよ。
＿＿</p>
＿＿<p>
＿＿＿たぶんゼロから書き直したほうが簡単です。私はサイトの修正を依頼されますが、利用できるのは文字データと画像だけですから、それだけ抜き出して作り直す。
＿＿</p>
＿</div>
＿<div class="footer"><!-- この記事のフッタ -->
＿＿<h3>A nice footer</h3>
＿</div>
</body>
</html>
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報