ウォーターサーバーとコーヒーマシンが一体化した画期的マシン >>

現在色々なサイトなどを参考にしながら、知り合いのwebサイトを制作しております。
スマホ実機で表示した際にhタグが思っていた箇所より上にあがってしまったり、
paddingで付けている要素(オレンジの「ライブ情報」の背景色)の位置が下がってしまったりしてしまいます。

positionかline-heightに問題があるのかと思い色々いじってみたのですがどうにも直せません。
そもそものhtmlの宣言だったり根本的なところで間違いがあるのでしょうか・・。

ソースすべてをのせたら長くなりますので、URLを貼らせていただきます。
http://mariko.kirara.st/
必要な情報かわかりませんが、さくらサーバーを使用しており、こちらは無料でついてくるサブアドレスを使用しています。
よろしくお願いします。

「スマホの実機でレイアウトが崩れてしいます」の質問画像

このQ&Aに関連する最新のQ&A

A 回答 (4件)

読み返してみたら、この『教えてgoo!」の仕様で、リンクが変換されていますね。


それで
★タブは_に置換
★htt://は、http:// に置換しておきました。
 全体でもこれだけの量にしかならない(^^)
 
<!doctype html>
<html>
<head>
_<meta charset="utf-8">
_<title>ピアニストまりこのサイト</title>
_<meta name="description" content="ピアニストまりこの活動情報を掲載しています">
_<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
_<meta name="author" content="ORUKA">
<!--[if IE]>
_<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
_<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
_<link rel="stylesheet" href="css/style.css">
<style media="screen">
<!--
html{margin:0;padding:0;}
body{max-width:1000px;width:80%;margin:0 auto;position:relative;}
h1{position:relative;font-size:80px;}
h1:after{content:attr(title);white-space:pre;color:white;position:absolute;top:5%;left:5%;}
h1 img{width:100%;height:auto;}
section h2{display:none;}
section ol,section ul{
_list-style:none;
_padding:20px;
_margin:1em 0;
}
section>*>li{position:relative;text-indent:30px;line-height:1.6em;}
section>*>li:before,
section>*>li:after{
_content: "";
_display: block;
_height: 15px;
_width: 15px;
_left:15px;
_position: absolute;
_top:2px;
_border-radius:15px;
_background-color:orange;
}
section>*>li:after{
_height: 18px;
_width: 18px;
_left: 8px;
_top:10px;
_border-radius:36px;
_background-color:red;
}
section>*>li{
_background-color: rgba(255, 255, 255, 0.8);
_border-radius: 5px;
_box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
_margin-bottom: 28px;
_padding: 0 10px;
}
section>*>li>*>li{line-height:2em;}
section>*>li>*>li.live.Info:before{
_content:attr(title);
_font-weight:bold;
}
section>*>li>*:first-child{
_border:solid 1px black;
_border-width:2px 0 0 0;
}
section>*>li>*>li.live.Info time{font-weight:bold;}
section>*>li>*>li.live.Info time:before{
_content:"ライブ情報";
_border-radius:0.2em;
_color:white;
_background-color:rgb(255,160,0);
_padding:0.2em;
}
body{
background: -moz-linear-gradient(left 45deg, yellow,orange);
background: -webkit-gradient(linear, left top, right bottom, from(yellow),to(orange));
}
@media screen and (max-width: 1000px) {h1{font-size:70px;}
@media screen and (max-width: 800px) {
h1{font-size:60px;}
body{width:100%;margin:0;}
}
@media screen and (max-width: 600px) {h1{font-size:40px;}
@media screen and (max-width: 480px) {h1{font-size:30px;}
-->
</style>
</head>
<body>
_<header>
__<h1 title="Mariko
Kirara"><img src="http://mariko.kirara.st/img/main.jpg" width="1000" height="600" alt="Mariko Kirara"></h1>
_</header>
_<section>
__<h2>メニュー</h2><!-- sectionには必ず見出し要素が一つだけ!! -->
__<ol>
___<li>NEWS
____<ul>
_____<li class="live Info" title="2017.01.01"><time>2017-1-28</time>中日ビル@栄にて演奏予定。詳細準備中。</li>
_____<li class="live Info" title="2017.01.01"><time>2017-0-29</time><a href="http://www.centrair.jp/enjoy/event/1200576_1485.html" target="_blank">セントレア音楽祭</a>出場します!</li>
____</ul>
___</li>
___<li>CONTACT
____<ul>
_____<li>クリックするとメールソフトが起ち上がります。</li>
_____<li><a href="mailto:mariko.coco.y.pina@gmail.com">samplesample&#64;gmail.com</a></li>
____</ul>
___</li>
___<li>PROFILE
____<ul>
_____<li>埼玉県出身名古屋在住。サルサと音楽が好き!</li>
____</ul>
___</li>
___<li>DISCOGRAPHY
____<ul>
_____<li>Coming Soon</li>
____</ul>
___</li>
__</ol>
_</section>
_<footer>
__<p>©2017&ensp;mariko.kirara</p>
_</footer>
</body>
</html>
    • good
    • 0
この回答へのお礼

何度もありがとうございます!
リンクが不思議なことになっていたのは、教えてgooの仕様だったのですね。
ソースの量がとてもシンプルになっていて驚きです。
すみません。上記に書いていただいたソースはcssはhtmlとは別ファイルで作成して読み込むということでよかったでしょうか?

また、以下は古いIEブラウザ対応のJsでしょうか?
<!--[if IE]>
_<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
_<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

お礼日時:2017/01/13 23:22

>構造とプレゼンテーションの分離など難しそうに思えてしまうのですが、


まず基礎ができていないと本当だめですね。
 逆にとても簡単になるのですよ。
たとえば
 ナビゲーションリストを様々にデザインしてみよう。( http://www.ichiya.com/WebService/Howto/sample/HT … )
 FirefoxやIEのように代替スタイルシートに対応しているブラウザで、訪問して[表示]→[スタイルシート]に進み、色々なスタイルシートを選択したり、印刷プレビューを確認してごらんなさい。
 HTMLには文書構造しか書かれていないために、いろいろ手の込んだデザインが可能になるのですよ。HTMLの内容の変更/メンテナンスも簡単ですし、あとからデザインの変更だけでなくコロッと変えることもできる。
    • good
    • 0
この回答へのお礼

遅くなりすみません!
代替スタイルシートに対応しているブラウザ・・その辺りのこともいまいち把握できてないのですが、普段使っているクロームで印刷プレビューを見たら表示とまったく違っていて驚きました。
他のブラウザで試してみます!

お礼日時:2017/01/13 23:15

★言い忘れましたが、タブは_に置換してあるので戻し、


Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html )
 の右上のDATAなどで、HTMLを確認しておきましょう。

★ウェブ開発でしたら、開発ツール( https://addons.mozilla.org/ja/firefox/extensions … )の豊富なfirefoxをお使いだと思いますが、firebugと、FireMobileSimulator( https://addons.mozilla.org/ja/firefox/addon/fire … )を使うと楽でしょう。

こうやって、HTMLは、ひたすら文書構造だけをマークアップしていきます。
現在(とはいっても、HTML4.01の勧告の20年来)最も大事なことは、
構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
 なのです。それによって、デザインの自由度も増しますし、「文書の構造をプレゼンテーションと切り離すことで広汎なプラットフォームや多様なメディアでの文書提供コストを低下でき、文書の改訂も容易になる」
★HTML、とくにHTML5では、文書構造を正確にマークアップすることが求められますので、デザインのためにHTMLの要素を使うことはしません。してはなりません。
 それぞれの要素には、何が含まれていなければならないとか、何を意味するかがとても厳しいです。sectionは文書の階層を示しますし、sectionには必ず見出し要素がひつようになります。
<section>
 <h2></h2>
 <section>
  <h3></h3>
  <section>
   <h4></h4>
のように
★<div class="container">
 <div class="main-container">
 <main class="wrapper">
 <div class="main-body">
このようなDIVの使い方は、根本的に間違っています。
<div class="container">→要は<body>ということ
<div class="main-container">→必要なら<article>を使うべき。この程度なら不要
<main class="wrapper">→このぺーじの主題をひとつだけ指定します。ここで使ってはならない。
<div class="main-body">→たぶん<section>

 先のサンプルHTMLをご覧ください。ああ書かないと検索エンジンには通用しない。

スタイルシートの部分です。
・最初にリセットされていますが、それはしません。ブラウザの持つデフォルトのスタイルシートは、可能な限り活用して、必要な部分のみスタイルシートで上書きしましょう。
・スマホ対応の前にリキッドで製作するのが基本です。リキッドでないのにMediaQuery使うことはありません。

フォントの詳細は指定していませんが、たったこれだけで済むはずですよ
・ウィンドウ幅で文字の大きさを変えています。それ以外の指定は弄らない。

<style media="screen">
<!--
html{margin:0;padding:0;}
body{max-width:1000px;width:80%;margin:0 auto;position:relative;}
h1{position:relative;font-size:80px;}
h1:after{content:attr(title);white-space:pre;color:white;position:absolute;top:5%;left:5%;}
h1 img{width:100%;height:auto;}
section h2{display:none;}
section ol,section ul{
_list-style:none;
_padding:20px;
_margin:1em 0;
}
section>*>li{position:relative;text-indent:30px;line-height:1.6em;}
section>*>li:before,
section>*>li:after{
_content: "";
_display: block;
_height: 15px;
_width: 15px;
_left:15px;
_position: absolute;
_top:2px;
_border-radius:15px;
_background-color:orange;
}
section>*>li:after{
_height: 18px;
_width: 18px;
_left: 8px;
_top:10px;
_border-radius:36px;
_background-color:red;
}
section>*>li{
_background-color: rgba(255, 255, 255, 0.8);
_border-radius: 5px;
_box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
_margin-bottom: 28px;
_padding: 0 10px;
}
section>*>li>*>li{line-height:2em;}
section>*>li>*>li.live.Info:before{
_content:attr(title);
_font-weight:bold;
}
section>*>li>*{
_border:solid 1px black;
_border-width:2px 0 0 0;
}
section>*>li>*>li.live.Info time{font-weight:bold;}
section>*>li>*>li.live.Info time:before{
_content:"ライブ情報";
_border-radius:0.2em;
_color:white;
_background-color:rgb(255,160,0);
_padding:0.2em;
}
body{
background: -moz-linear-gradient(left 45deg, yellow,orange);
background: -webkit-gradient(linear, left top, right bottom, from(yellow),to(orange));
}
@media screen and (max-width: 1000px) {h1{font-size:70px;}
@media screen and (max-width: 800px) {
h1{font-size:60px;}
body{width:100%;margin:0;}
}
@media screen and (max-width: 600px) {h1{font-size:40px;}
@media screen and (max-width: 480px) {h1{font-size:30px;}
-->
</style>
    • good
    • 0
この回答へのお礼

チェックツールやコードまでありがとうございます!!
助かります。そして勉強させていただきます。
リセットcssも必要ない点や、まずはリキッドで制作・・など目からうろこです。
構造とプレゼンテーションの分離など難しそうに思えてしまうのですが、
まず基礎ができていないと本当だめですね。

解説や参考サイト、コードまで書いてくださり本当にありがとうございました。

お礼日時:2017/01/10 22:09

>現在色々なサイトなどを参考にしながら、


 HTMLやCSSの仕様書ですか??
 この世界、数学の勉強と同じで難しい問題集をいくら解いてみても伸びないのと同じ。基礎からキチンと学べば、あれほど簡単でちょろい科目はないのと同じ。
Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification 日本語訳( https://momdo.github.io/css2/Overview.html )
などをきちんと読まれてますか??
divは、HTML5では原則使いません。
NOTE:Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable.( https://www.w3.org/TR/2014/REC-html5-20141028/gr … )
 著者は他に適切な要素がない時の最後の手段としてdiv要素を用いるよう強く推奨する。
main要素の使い方が根本的に誤り・・

 HTMLもCSSも、もっと簡単に済むはずですよ。
★HTML5の各要素の使い方がまるで間違っています。
 ・sectionは内部に一つだけ見出し要素をもつひとまとまりの記事
 ・divは原則使いません
 ・classやidは、文書構造を示す適切な要素がないとき、あるいはそれだけでは足りないとき
すくなくとも、その程度の内容でしたら、mediaqueryの必要もないでしょう。

<!doctype html>
<html>
<head>
_<meta charset="utf-8">
_<title>ピアニストまりこのサイト</title>
_<meta name="description" content="ピアニストまりこの活動情報を掲載しています">
_<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
_<meta name="author" content="ORUKA">
<!--[if IE]>
_<script src="http://html5shiv.googlecode.com/svn/trunk/html5. …
_<script src="http://css3-mediaqueries-js.googlecode.com/svn/t …
<![endif]-->
_<link rel="stylesheet" href="css/style.css">
<style media="screen">
<!--
/* この部分は後で */
-->
</style>
</head>
<body>
_<header>
__<h1 title="Mariko
Kirara"><img src="http://mariko.kirara.st/img/main.jpg" width="1000" height="600" alt="Mariko Kirara"></h1>
_</header>
_<section>
__<h2>メニュー</h2><!-- sectionには必ず見出し要素が一つだけ!! -->
__<ol>
___<li>NEWS
____<ul>
_____<li class="live Info" title="2017.01.01"><time>2017-1-28</time>中日ビル@栄にて演奏予定。詳細準備中。</li>
_____<li class="live Info" title="2017.01.01"><time>2017-0-29</time><a href="http://www.centrair.jp/enjoy/event/1200576_1485. … target="_blank">セントレア音楽祭</a>出場します!</li>
____</ul>
___</li>
___<li>CONTACT
____<ul>
_____<li>クリックするとメールソフトが起ち上がります。</li>
_____<li><a href="mailto:mariko.coco.y.pina@gmail.com">samplesample@gmail.com</a></li>
____</ul>
___</li>
___<li>PROFILE
____<ul>
_____<li>埼玉県出身名古屋在住。サルサと音楽が好き!</li>
____</ul>
___</li>
___<li>DISCOGRAPHY
____<ul>
_____<li>Coming Soon</li>
____</ul>
___</li>
__</ol>
_</section>
_<footer>
__<p>©2017 mariko.kirara</p>
_</footer>
</body>
</html>
    • good
    • 0
この回答へのお礼

丁寧に教えてくださりありがとうございます。
きちんとした仕様書を読まずに作成しておりました・・。見た目上ページを作るだけの基礎は人に教えていただいて、そのあとはwebデザイナーさんのブログだったりを見て作っておりました。
教えていただいたサイトも初めてみました。わかっていないことが多すぎてお恥ずかしい限りです。
mainやdivの使い方もよくわかっておらず・・・勉強しなおします。
mediaqueryも必要ないのですね!

お礼日時:2017/01/10 21:57

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

このQ&Aと関連する良く見られている質問

Qforeachで回った数を表示したい

単純な質問ですみません。
====
//getTestlistは別ファイルで定義済み。
<?
$testlist=getTestlist();
foreach($testlist as $test){
?>


<? } ?>
====
例えば↑こんなふうにforeachで$testlistが存在するだけ回したとします。
そのときに何回まわったか?($testが何件あったか?)だけを表示したいのですが、そんなことってできますか?
表示したい位置は<? } ?>の外側にと考えています。
あさってな質問でしたらすみません。
phpVer 4.3

よろしくお願いいたします。

Aベストアンサー

<?
$testlist=getTestlist();
$n=0;
foreach($testlist as $test){
$n++;
?>
<?}?>

<?=$n?>回
とかでよいかと思います。

途中でbreakなどが無ければ
<? echo count($testlist) ?>でも良いかも知れません。


人気Q&Aランキング