みんなの「教えて(疑問・質問)」にみんなで「答える」Q&Aコミュニティ

こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

HTML、CSSについて教えて下さい

http://sima1211.html.xdomain.jp/ の下部のようにしたいとHTMLやCSSをコーディングしているのですが、どうにもズレやGoogleマップが想定通りに縮小してくれず、自力では限界を感じたので質問させて頂きます。
現在作成中のHTML仮置き場→sima2930.webcrow.jp/
CSS→~/css/style.css
どうか、皆さんのお知恵を借りたいと存じます。

投稿日時 - 2017-06-07 15:15:58

QNo.9338319

困ってます

質問者が選んだベストアンサー

http://sima2930.webcrow.jp/ のソース拝見しました。
正直言って、どこからご説明したらいいかちょっと悩ましいですw

「細かいこと言うなー」と思われるかもしれませんが、HTMLでは絶対に必要なことですからお話ししますね。



【その1:大きなウインドウで見た時、組織名や地図の横幅がデロンと広がる問題】
このページのHTMLのバリデートチェックはしていますか?
ざっと見たとだけでも構造の致命的なエラーとして
254行目 :</div> : 開きタグがありません
259行目 :<div class="inner"> : タグが閉じていません
が出ています。

まず、
●254行目 :</div>を、277行目 :</ul>と278行目 :</section>の間に移動して下さい。

そして
●253行目 :</div><!-- /.contents -->を、278行目 :</section>の後に移動して下さい。

これでエラーが解消されて、大きなウインドウで見た時、組織名や地図の横幅がデロンと広がる問題がなくなるはずです。

問題の部分はいま、
body > section#sec05 > div.inner(*1) > ul.col2 > li(*2) > div#map
になっていますが、これは間違い。【その1】を実行すると
body > div#contents > section#sec05 > div.inner(*1) > ul.col2 > li(*2) > div#map
と正しくなります(たぶん)。

htmlを書くのにDreamweaverなどのソフトをお使いならそのバリデート機能を、ないなら
The W3C Markup Validation Service
https://validator.w3.org/
などでHTML構文にミスがないか確認してください。



【その2:画面の幅を狭くしていったとき横並びが崩れる問題】
画面の幅が775pxより狭くなった時、
●style.cssの108行目 :li {margin-left:2em;}が原因で崩れています。
 style.cssの255行目 :.col2 liに {margin-left:0;}を追加しましょう。




【その3:スマホサイズにしたとき縦1列にならない問題】

●もとにしたページは@media only screen and (min-width: 641px)
で幅640px以上なら横並び、それ以下なら立て並びに指定いています。
style.cssの255行目 :.col2 li の1行を以下のように変更しましょう。

.col2 li {
display: inline-block;
width: 100%;
margin: 20px 0 20px 0;
}
@media only screen and (min-width: 641px)
.col2 li {
width: 40%;
padding: 0 3%;
vertical-align: top;
}


以上です。

追記:あと質問とは直接関係ないですが

【重要な問題1】
<dd href="tel:0124xxxxxx">0134-xx-xxxx</dd>
▲ddにhrefつけても何も機能しません。つけるなら
<dd><a href="tel:0124xxxxxx">0134-xx-xxxx</a></dd>
ですね。
なおかつ市外局番が違ってますのでよく確認されることをお勧めします。
サイト掲載の電話番号が違うと全く関係のない肩にご迷惑をかけることになりますので。

【重要な問題2】
地図の横の組織名や住所が書かれているdlですが、一番上の組織名のところ<dt>がないですね。
これHTML上のルルール違反です。<dt>なしの<dd>はやめましょう。必ず<dt>とコンビで!
※<dt>1個に<dd>複数はOKです。

他にもいっぱいありますが、とりあえず。

投稿日時 - 2017-06-17 17:18:52

お礼

丁寧なご指摘とご指導、ありがとうございました。
あと、お礼が遅れてしまい申し訳ありません。

無料のテンプレートをダウンロードしてStylenoteというエディタで作成していたのですが、私のせっかちな性格が出たようで、多分ご指摘のタグは消してしまったのかもしれません。

非常に細かくご指摘、ご指導いただいたのでベストアンサーにさせていただきます。

投稿日時 - 2017-06-23 11:32:27

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(2)

ANo.1

参考サイトを参考に、
【googleマップの配置に関して】は

.col2 li {
display: inline-block;
width: 40%;
padding: 0 3%;
vertical-align: top;
}

こちらの追記、あるいは差し替えでいけるかと思います。
お試しいただければと思います。

投稿日時 - 2017-06-07 17:24:40

あなたにオススメの質問