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

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

ただいまの
回答率

91.04%

  • HTML

    7227questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • CSS

    4609questions

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

  • Dreamweaver

    103questions

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

左にメニューがあるページを作成したい

解決済

回答 2

投稿 編集

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

moitaro

score 163

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

SEO関係でHTML内では
メニュー記述を下にしてテンプレートを用いて表示しようとしております

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

その際 templateの作成方法についてお伺いします。

<div id="wp-main-side">
    <!-- TemplateBeginEditable name="main" -->
<div id="main">
<h2 class="title2">○○</h2>
内容がないよう
</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>


とのソースがあるのですが
cssでの指定が上手く行きません……

#main {
    width: 680px;
    margin-bottom: 30px;
    margin-left: 350px;/*コレを追加*/
}

#side {
    width: 220px;
    float: left;
    line-height: 30px;
    text-indent: 20px;
    font-size: 12px;

    margin-left: 10px;
    padding-top: 20px;
    margin-bottom: 30px;

    /*追加して色々やろうとした残骸↓/
    position:absolute;
    margin-top: 10px;*/
}


根本的に考え方が誤っているのかも知れませんが
cssで

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


と指定する方法をご助力頂けないでしょうか?

年始から仕事で大変ですが
上記お問い合わせいたします。

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 2

checkベストアンサー

+1

一般的な方法ではfloat:leftとclearfixを使用します。
clearfixは全体wrapperのdiv(wp-main-sideのところ)に追加してください。
(border入れたら落ちるためwp-main-sideのwidthは余裕を持って920pxにしています。
box-sizing:border-boxの方が楽だとは思いますが……)

css

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

#main{
    width:680px;
    margin-bottom: 30px;
    float:right;
    border:1px solid red;
}

#side{
    width:220px;
    float:left;
    border:1px solid red;
}

.clearfix::after{
  content: "";
  display: block;
  clear: both;
}

ちなみにmainをfloat:rightにしていますが、htmlの記述順がside → bodyであるなら両方float:leftでいけます。
上から順に処理していくので、今のままだとmainが左にきて、sideがその隣に配置されてしまいます。
そのためmainはfloat:rightと記述しています。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/01/05 16:42

    ありがとうございます。
    #wp-main-side
    でサイズ指定でガチガチに固めたらそれとなく上手く行きました。
    ありがとうございます。
    現在中央寄せにする方法を色々調査している最中です。

    ありがとうございました。

    キャンセル

  • 2018/01/05 17:43

    margin: 0 auto;
    で中央寄せも出来ました。

    ありがとうございました。

    キャンセル

  • 2018/01/05 17:58

    良かったです。

    キャンセル

+1

margin-left: 350px;/*コレを追加*/


の代わりに

float:right;


とすれば、期待される体裁になるかと。
ただ、CSSグリッドレイアウトで組んだ方が今風だとは思います。
https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Grid_Layout

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/01/05 15:03

    ありがとうございます。
    右に寄せるため
    margin-left: 350px;
    ではなく
    float:right;
    で正常に動作しました。

    cssグリッドレイアウトをそのうちする予定です。
    その際にお教え頂いたURLも参考にさせて頂きます。

    キャンセル

  • 2018/01/05 15:18

    と思ったけどDreamWeaver上ではうまく行っているように見えるけど
    サーバーにアップロードするとメニューが左下に行ってしまいます……

    キャンセル

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

  • ただいまの回答率 91.04%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

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

  • HTML

    7227questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • CSS

    4609questions

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

  • Dreamweaver

    103questions

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