ウォッチ
現在色々なサイトなどを参考にしながら、知り合いのwebサイトを制作しております。
スマホ実機で表示した際にhタグが思っていた箇所より上にあがってしまったり、
paddingで付けている要素（オレンジの「ライブ情報」の背景色）の位置が下がってしまったりしてしまいます。
positionかline-heightに問題があるのかと思い色々いじってみたのですがどうにも直せません。
そもそものhtmlの宣言だったり根本的なところで間違いがあるのでしょうか・・。
ソースすべてをのせたら長くなりますので、URLを貼らせていただきます。
http://mariko.kirara.st/
必要な情報かわかりませんが、さくらサーバーを使用しており、こちらは無料でついてくるサブアドレスを使用しています。
よろしくお願いします。
No.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@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>
-
-
- 0
- 件
-
この回答へのお礼
お礼日時：2017/01/13 23:22
何度もありがとうございます！
リンクが不思議なことになっていたのは、教えて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]-->
No.3
- 回答日時：
＞構造とプレゼンテーションの分離など難しそうに思えてしまうのですが、
まず基礎ができていないと本当だめですね。
逆にとても簡単になるのですよ。
たとえば
ナビゲーションリストを様々にデザインしてみよう。( http://www.ichiya.com/WebService/Howto/sample/HT … )
FirefoxやIEのように代替スタイルシートに対応しているブラウザで、訪問して[表示]→[スタイルシート]に進み、色々なスタイルシートを選択したり、印刷プレビューを確認してごらんなさい。
HTMLには文書構造しか書かれていないために、いろいろ手の込んだデザインが可能になるのですよ。HTMLの内容の変更/メンテナンスも簡単ですし、あとからデザインの変更だけでなくコロッと変えることもできる。
-
-
- 0
- 件
-
この回答へのお礼
お礼日時：2017/01/13 23:15
遅くなりすみません！
代替スタイルシートに対応しているブラウザ・・その辺りのこともいまいち把握できてないのですが、普段使っているクロームで印刷プレビューを見たら表示とまったく違っていて驚きました。
他のブラウザで試してみます！
No.2
- 回答日時：
★言い忘れましたが、タブは＿に置換してあるので戻し、
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>
-
-
- 0
- 件
-
この回答へのお礼
お礼日時：2017/01/10 22:09
チェックツールやコードまでありがとうございます！！
助かります。そして勉強させていただきます。
リセットcssも必要ない点や、まずはリキッドで制作・・など目からうろこです。
構造とプレゼンテーションの分離など難しそうに思えてしまうのですが、
まず基礎ができていないと本当だめですね。
解説や参考サイト、コードまで書いてくださり本当にありがとうございました。
No.1
- 回答日時：
＞現在色々なサイトなどを参考にしながら、
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>
-
-
- 0
- 件
-
この回答へのお礼
お礼日時：2017/01/10 21:57
丁寧に教えてくださりありがとうございます。
きちんとした仕様書を読まずに作成しておりました・・。見た目上ページを作るだけの基礎は人に教えていただいて、そのあとはwebデザイナーさんのブログだったりを見て作っておりました。
教えていただいたサイトも初めてみました。わかっていないことが多すぎてお恥ずかしい限りです。
mainやdivの使い方もよくわかっておらず・・・勉強しなおします。
mediaqueryも必要ないのですね！
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！
似たような質問が見つかりました
- その他（プログラミング・Web制作） 次に、楽天のアジャイル就活に参加して、1日で内定を獲得できる。私は大企業に就職できる? 2 2022/04/17 13:38
- HTML・CSS リンクバナーのHTMLタグ。画像を変えたり、設置位置を変えるとバナー貼付け側はどう見える？ 2 2023/02/01 12:01
- インターネットビジネス ネット上での研究や知識の紹介について SNSや情報サイトなどで、例えば 「ハーバード大学の研究から分 2 2023/08/23 23:08
- Google Maps パソコンの地図サイトなどで 3 2023/02/18 23:06
- その他（セキュリティ） 匿名チャットアプリのトラッキングについて。顔写真や個人情報の漏洩はあるのか。 2 2023/03/28 00:00
- インターネット広告・アフィリエイト アフェリエイトサイト 作成について 5 2022/05/13 21:31
- Google Drive Google form を利用して 問い合わせフォームを作りたい 1 2022/04/25 14:15
- HTML・CSS WEBサイトの構築。表示データとWEBデザインを分離する考え方を専門用語・業界用語では何と言うか？ 8 2022/09/27 09:16
- PHP sessioncookieをではなくcookieを使わなければならない理由について… 4 2022/11/07 13:01
- HTML・CSS Dreamweaver のテンプレートでの相対パスの設定について 2 2023/06/13 17:28
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
<table>の高さ固定。情報増加時...
-
「・」(黒い点)を非表示にした...
-
リストマーカーをボックス内に...
-
liタグの中に<p>タグやら<dl>を...
-
display:table;を多段表示させたい
-
画像横のテキストをセンターに...
-
ol要素の番号とリスト項目の離...
-
HTMLで組織図を作成する方法
-
<ul><li></li></ul>にするメリ...
-
リストを2つに分割して、それぞ...
-
<ul>と<li>リストマークを消す...
-
親ページ側からインラインフレ...
-
html <li>の中の文字一部に色を...
-
HTMLで画像を3つ並べる方法
-
複数行にまたがる括弧を表示し...
-
レスポンシブWebデザインでリン...
-
ulとliで囲った文字の一部を変...
-
<ul>～</ul>が二つ続くと間に改...
-
番号付きリスト（<Ol><Li>・・...
-
横並びのボタンの背景を片方だ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
リストマーカーをボックス内に...
-
番号付きリスト（<Ol><Li>・・...
-
liタグの中に<p>タグやら<dl>を...
-
レスポンシブWebデザインでリン...
-
<table>の高さ固定。情報増加時...
-
<ul><li></li></ul>にするメリ...
-
リストの数字のフォントサイズ...
-
HTMLで組織図を作成する方法
-
ulタグやliタグの中でｂｒタグ...
-
divタグ内のコンテンツが重なっ...
-
画像にリンクを張ると画像がず...
-
複数行にまたがる括弧を表示し...
-
ページを開いているときのリン...
-
html <ul></ul>の並びで一行空...
-
html／cssの、navを２段にする...
-
HTML5のfooterに見出しを付けて...
-
<ul>～</ul>が二つ続くと間に改...
-
htmlの<ol>タグで、数字などを...
-
リンク文字同士の間隔を開ける...
-
CSSでつくったメニューのアニメ...
おすすめ情報
