質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

91.25%

  • CSS

    4071questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • Dreamweaver

    86questions

    Dreamweaverは、アドビシステムズ(株)が開発したWebページ作成ソフトです。 HTMLやXHTMLだけでなく、PHPやASPなどのサイバーサイドスクリプトの編集も可能で、 OracleやMicrosoftSQLServerなどの、データベースとの連携機能もあります。 Webデザイナーなどの専門業界で圧倒的なシェアを誇っているソフトです。

右のメニューの横幅指定している所が不明

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 86

moitaro

score 130

お世話になっております。

CSSの指定している場所が分からないので
調査方法をご教授頂きたく質問表記失礼します。

メニューA   コンテンツ内容を
メニューB   こちらに記述
メニューC   します。

というページを作成したのですが

コンテンツ内容を
こちらに記述
します。


の下に左右のスクロールバーが出てきてしまい
どこで指定しているのか分かりません。

<div id="wp-main-side">
    <!-- TemplateBeginEditable name="main" -->
<div id="main">
コンテンツ内容を<br/>
こちらに記述<br/>
します。<br/>
</div><!--main end-->
<!-- TemplateEndEditable -->
<div id="side">
<ul class="accordion" id="accordion-1">
    <li class="ac_top"><a href="../a/index.html">メニューA</a></li>
    <li class="ac_top"><a href="../b/index.html">メニューB</a></li>
    <li class="ac_top"><a href="../c/index.html">メニューC</a></li>
</ul>
</div>
</div>


#wp-main-side {
    width:920px;
    margin:auto;
}

#main {
    width: 680px;
/*調整残骸/    width: 920px;/**/
    float: right;
    margin-bottom: 30px;
    /*ここから出たの隠す*/
    overflow: auto;
}

#side {
    width: 220px;
    float: left;
    line-height: 30px;
    text-indent: 20px;
    font-size: 12px;
    margin-left: 10px;
    padding-top: 20px;
    margin-bottom: 30px;
}


となっているのですが下のサイドバーを指定している部分は
どちらが怪しいがご助力頂けないでしょうか?

お忙しいところ大変申し訳ないのですが
上記お問い合わせいたします。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

checkベストアンサー

+3

ブラウザの開発者ツール等は試されたのでしょうか?

-追記-
ご提示のコードでHTML「コンテンツ内容をこちらに記述します。」の部分が無いのですが、こちらもHTML・CSSをご提示ください。他の皆さんからより良い回答を得れると思います。

-Chrome開発者ツール使い方・参考リンク先-
https://saruwakakun.com/html-css/basic/chrome-dev-tool

他にも多々ありますので「Chrome開発者ツール使い方」等で質問者さんにとって、理解しやすいサイトを、検索して見てください。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/01/09 15:44

    コメントありがとうございます。
    chromeでどこが悪いのか調査する能力が無いため
    困っているのです……

    お勧めURLなどございましたらお教え頂けないでしょうか?

    キャンセル

  • 2018/01/09 15:51

    追記 ありがとうございます……

    仰る通りtemplateを貼っただけで記載がなかったですね……

    最小単位で作り直して確認した方が良い気がしてきました……((+_+))

    キャンセル

  • 2018/01/09 15:56

    めげる必要はありません。つまづきは皆あります。あって当然です。一つ一つ解決していけば良いですし、最終的に求める形が出来るまでは大変でしょうが、開発者ツールが最低限でも使えるようになると随分楽になります。頑張ってください。
    (^^)

    キャンセル

  • 2018/01/09 16:06

    度々ありがとうございます。
    おかげさまで解決できましたっ

    上記には書き忘れていた.pageでwideを指定していたのが原因でした……

    この度は本当にありがとうございました。

    キャンセル

  • 2018/01/09 16:15

    解決されてなによりです。これからも大変でしょうが頑張ってください。

    キャンセル

+3

左右のスクロールバーが出てきてしまいどこで指定しているのか分かりません。

    overflow: auto;


これが原因かと。

auto
ユーザエージェントに依存する動作です。Firefox のようなデスクトップブラウザでは、コンテンツがはみ出るならスクロールバーを作ります。
overflow - CSS | MDN

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/01/09 13:43

    ありがとうございます。
    overflow: auto;
    をコメントアウトしてみてみると上手く行っているように【みえた】のですが
    文章などで右側が切れているので
    全頁 style="width: 670px;"と入れ込まないと出来ない状況です……
    chromeなどで頁を見て調査してもどこで指定しているか分からないので困っております……

    しょうがないから
    全頁 style="width: 670px;"と入れても良いので
    今後の為 どうやって調査すれば良いのかご教授頂けないでしょうか?

    お忙しいところ大変申し訳ないのですが上記お問い合わせいたします。

    キャンセル

  • 2018/01/09 13:53

    「どこで指定しているか分からない」とのことですが、style="width: 670px;" と属性を入れているのであれば、すべてインライン指定なのではないのですか?
    Chrome で調査しているとのこと、Elementsタブで要素を選択し、Computedでスタイルを確認すると右寄せされている文字列が当該スタイルが指定されている部分になるかと思います。そういう話ではなく?

    キャンセル

  • 2018/01/09 15:24

    たびたび本当にありがとうございます。

    >Elementsタブで要素を選択し、Computedでスタイルを確認する
    だと思うのですが
    wp_main_side で920
    でmain で 640
     side で 220
    だったので
    wp_main_side で920 を消しても↓のバーが消えず……

    >Computedでスタイルを確認する
    というのがグーグルで調査しても分かりかねます……

    申し訳ないのですがもう少しご助力頂けないでしょうか?

    キャンセル

  • 2018/01/09 16:12

    『↓のバーが消えず』が何のことなのかちょっと分かりませんでした。何をどうしたいのか書いていただいた方が話が早いかもしれませんね。

    キャンセル

  • 2018/01/09 16:12

    あ、解決してましたか。

    キャンセル

  • 2018/01/10 09:27

    コメントありがとうございます。
    おかげさまで解決しました。

    スキルを磨いて皆様のお役に立てるように頑張ります。
    ありがとうございました。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

ただいまの回答率

91.25%

関連した質問

同じタグがついた質問を見る

  • CSS

    4071questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • Dreamweaver

    86questions

    Dreamweaverは、アドビシステムズ(株)が開発したWebページ作成ソフトです。 HTMLやXHTMLだけでなく、PHPやASPなどのサイバーサイドスクリプトの編集も可能で、 OracleやMicrosoftSQLServerなどの、データベースとの連携機能もあります。 Webデザイナーなどの専門業界で圧倒的なシェアを誇っているソフトです。