• 締切済み

サイドバーの作り方

ホームページのサイドバー(サイドメニュー?)の作り方を教えてください。 一応、HTML,CSS,Javascriptはできます。 (「それくらい知っているんだったらできるだろ!!」と思う方も多いでしょうがお許しください。) ページ内はDIVタグで分類しています。

みんなの回答

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.3

どの程度HTML/CSSをご存知なのかわかりませんので、最初から説明します。 HTML(Hyper Text Markup Language)とは、ハイパー機能(リンク)可能な、文書をそれを構成する要素に分解して、それぞれの要素を(タグを使って)マークアップする言語です。 ・デザインは関係ありません。点字端末・スクリーンリーダー・検索エンジンなども  利用しますから。screenメディア(いわゆるPC用ブラウザなど)は、自前のスタイル  シートでたまたまそのように表示するだけ CSSはスタイルシートの一形式でCascading Style Sheetのことです。カスーディングという機能でとても扱いやすくなっています。 >ホームページのサイドバー(サイドメニュー?)の作り方を教えてください。  ホームページではなく、HTMLで書かれたウェブページのことだと思います。  ⇒ホームページ - Wikipedia( http://ja.wikipedia.org/wiki/%E3%83%9B%E3%83%BC%E3%83%A0%E3%83%9A%E3%83%BC%E3%82%B8 )  これは、「HTMLにおけるメニューなりナビゲーションリストを、その親コンテナブロックの左右何れかに配置したい」と言う質問だと理解します。 1) まずHTMLは文書構造しか記述しませんから、  例えば長い本文とその目次でしたら <body>  <header>   文書のヘッダ  </header>  <section>   <section>    本文   </section>   <section>    本文   </section>   <section>    本文   </section>   <div id="contentTable">    目次   </div>  </section>  <footer>   文書のフッタ  </footer> </body> ゜HTML4.01でしたら、この様な要素がないためclassを併用して文書構造をマークアップします。  ⇒DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 ) <body>  <div class="header">   文書のヘッダ  </div>  <div class="section">   <div class="section">    本文   </div>   <div class="section">    本文   </div>   <div class="section">    本文   </div>   <div id="contentTable">    目次   </div>  </div>  <div class="footer">   文書のフッタ  </div> </body> とかになるでしょう。  こうしてできたHTMLをその文書構造にしたがってスタイルシートで、screenmedua用にデザインして行きます。  この場合、本文の左におくとすると [HTML5]用でしたら section{ min-height:300px;/* 一応最低限の高さを */ position:relative;/* 位置やサイズの基準にするため */ } section section{ margin-left:20%;/* 左を20%ほど空けておく */ min-height:0:/* 子孫のsectionは解除しておく */ } section div.contentTable{ width: 20%; position:absolute;top:0;left:0;/* 絶対配置で本文の左に--右ならright */ height:100%;/* 本文高さにあわせる */ } [HTML4.01]用でしたら div.section{ min-height:300px; position:relative; } div.section div.section{ margin-left:20%; min-height:0: } div.section div.contentTable{ width: 20%; position:absolute;top:0;left:0; height:100%; } とかになります。

全文を見る
すると、全ての回答が全文表示されます。
  • tracer
  • ベストアンサー率41% (255/621)
回答No.2

サイドメニューの何について知りたいのですか? メインコンテンツdivの横に並べる方法のことですか?

全文を見る
すると、全ての回答が全文表示されます。
  • b0a0a
  • ベストアンサー率49% (156/313)
回答No.1

普通にinline-block2つ並べればいいんじゃないですかね

全文を見る
すると、全ての回答が全文表示されます。

関連するQ&A

  • ホームページのサイドバーを全ページに表示するには

    ホームページ制作(HTML、CSS)の勉強中です。 次のようなことは可能でしょうか? 同じサイドバーを全てのページに記述し、設置しております。 フレームを使わずに、1回だけサイドバーを記述するだけで、全ページに表示させる方法はあるのでしょうか?

  • 【ヤプログ】サイドバーの最新コメントの文字色を変更したい

    ヤプログのサイドバーの最新コメントの文字色を変更したいのですが変えれなくて困っています。 スキンは、HTML/CSS変更可能のピンク色を設定しています。 サイドバーの機能編集・追加ページの新規追加で以下のタグを入れてみました。 <!-- コメント:始 --> <div class="side" style="COLOR:gray;font-size:8pt;margin-bottom:10px;"> <div class="side_title" id=commentname>コメント</div> <div class="side_text" id=commentlist> <ul> <BlogComments latest="10"> <li>{$BlogCommentAuthorLink type="Url"$}<br> ⇒ <a href="{$BlogCommentEntryLink$}#comments">{$BlogCommentEntryTitle$}</a> ( {$BlogCommentDate format="%m/%d" language="jp"$} )</li> </BlogComments> </ul> </div></div> <!-- コメント:終 --> 文字色はgrayにしたいのです。 ご指摘よろしくお願いします<(_ _)>

  • FC2のHPでサイドメニューを別ファイルに

    FC2でHPを作ったのですが、メニューに新しいカテゴリを追加したりするとき 一つ一つのページを編集しなくてはならず、大変です。 自分の作業が遅いのも原因かも知れませんが、半日ほど時間がかかってしまいます。 どうにかして、HTMLでFrameタグを使わずに、サイドメニューを別ファイルから読み込む なんてことは出来ないでしょうか?(CSSとかで) もしくは、サイドメニューを簡単に管理できる方法はないでしょうか? (CSSにサイドメニューのHTMLファイルを指定して、読み込み。。。なんてことは出来ないですよね・・・)

  • IE8でサイドバーのレイアウトが崩れる場合の対処法

    CSSについての質問です。 IE8よりも古いバージョンでのみレイアウトが崩れて困っています。 簡単な抜粋ですが、以下のような感じでfloatを使ってレイアウトを作成しています。 [HTML] ---------------- <div id="main"> </div> <div id="sidebar"> </div> <div id="footer"> </div> ---------------- [CSS] ---------------- #main{ float:left; width:620px; } #sidebar{ float:right; width:300px; } #footer{ clear:both; } ---------------- IE8よりも古いバージョンでは、サイドバーが下に落ちてレイアウトが崩れてしまいます。 しかもIEの開発ツールでHTMLを確認したところ、なぜかサイドバーがメインコンテンツの中に入っていました。 ---------------- <div id="main"> <div id="sidebar"> </div> </div> ---------------- なので、全体の幅を広げても、下に落ちてしまったサイドバーは全く上がってきてくれません。 どうにか解決する方法はありませんでしょうか? 文章だと伝わりくいかもしれませんが、よろしくお願いいたします。

    • ベストアンサー
    • CSS
  • dreamweaver spry

    dreamweaverでホームページを作成中です サイドバーにspryの縮小可能なパネルを使って項目を作りました そこまではできたのですが、次のページを作ろうとしたときに、そのままHTMLタグをコピーして、CSSファイルをリンクさせても、ただの動きのないサイドバーになってしまいました 複製するにはどうしたらよいでしょうか? どなたか詳しい方よろしくお願いします

  • サイドバー用のプルダウンメニューの作成

    こんにちは。 現在、サイドバー用のプルダウンメニューを作成しようと考えています。下記のサイトのように、縦にメニューを並べるような感じです。 下記サイトはオンマウス時に横にプルダウンが表示されていますが、これを縦にプルダウンが表示されるようにするにはどのようにjavascript、html、cssを作成すればいいでしょうか?下記サイトはCSSとhtmlで作られていますが、私はjavascriptを使うつもりでいます。 どなたかご存知の方がいらっしゃりましたら、ぜひ教えてください。 http://www.stylish-style.com/csstec/ultimate/css-roll-2.html

  • HPサイドバーの作り方を教えてください。

    自分のHPにサイドバーをつけたいのですが、そもそもサイドバーの作り方自体が分かりません。 個人的に作りたいな~って思ってるのは、HTMLタグでカテゴリーのバナーを表示できて、スクロールバーが付いてる物…。 訳分かりませんね。 えっと、HTMLタグとかで表示できる様な物なんでしょうか。 ん~…。 回答、よろしくお願いします。

  • サイドバーの作り方

    サイドバーの作り方 こんにちは。 自分のホームページにサイドバーを設置したいと思います。 http://www.ceres.dti.ne.jp/~toshio/Doraemon.html 上のような「ドラえもん同好会」様のホームページみたいに、 画面を二つに分けたいのですが、 どのようにすればよいかわからないので、 教えてください。 ちなみに、サイドバーは左側、HTMLファイルでお願いします。

    • ベストアンサー
    • HTML
  • 2カラムレイアウトをサイドバーとコンテンツとで、別のファイルで作りたい。

    CSSを利用して2カラム(サイドがメニューで、中央がコンテンツ)のレイアウトを作りたいのですが、そういったレイアウトを作ろうとすると通常一つのhtmlファイルの中でメニューとコンテンツをそれぞれ<div>でくくって、CSSでそれぞれの<div>に対してレイアウトを指定することで2カラムを実現すると思います。 メニューとコンテンツで別のファイルに書いたものを、表示させたいのですが、どうすれば実現できるでしょうか? よろしくお願いします。

    • ベストアンサー
    • HTML
  • ブログのサイドバーにカウンターを貼る方法

    次のブログの状況で、サイドバーに「カウンター」と「現在閲覧中」のプラグインを設定する方法を教えて下さい。 1)同じブログサイトで、サイドバーに「閲覧数累計」と「現在閲覧中」のプラグインを貼っているブロッガーがいる。 2)面白いので自分もこのブログサイトの相談室に照会したところ、次の回答を得た。 2-1)標準ではこのプラグイン設定プログラムは提供していない。 2-2)トップページのサイドバーへ任意のHTMLタグの設定可能な「フリーエリア」プラグインを用意している。ここにHTMLタグを挿入すれば、ブログ記事のサイドバーに反映される筈。 2-3)但し、HTMLタグは多岐にわたるため、具体的な設定方法はサポート対象外。 【質問事項】この状況で「閲覧数カウンター」や「現在閲覧中」をサイドバーに表示する場合どうすれば良いか、どんなソフトがあるか、”HTMLタグを挿入する”とはどんな意味かを教えて下さい。

VPNに入れない
このQ&Aのポイント
  • 在宅勤務中にVPN接続ができない問題が発生しました。
  • エラーメッセージによると、セキュアゲートウェイからのクライアントのmtu設定が小さすぎるため、ipv6トラフィックをトンネリングすることができません。
  • ルーターの設定変更が効果がなく、VPN接続に至急対応する方法を教えていただきたいです。
回答を見る