締切済み

サイドバーの作り方

2013/02/02 18:56

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

tomoyan412
お礼率14% (1/7)

CSS
回答数3
ありがとう数0

回答全件

どの程度HTML/CSSをご存知なのかわかりませんので、最初から説明し…

2013/02/03 14:23

サイドメニューの何について知りたいのですか？メインコンテンツdivの…

2013/02/02 22:27

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

2013/02/02 20:31

みんなの回答 （3）
専門家の回答

みんなの回答

ORUKA1951
ベストアンサー率45% (5062/11036)

2013/02/03 14:23 回答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)

2013/02/02 22:27 回答No.2

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

全文を見る

ログインすると、全ての回答が全文表示されます。

b0a0a
ベストアンサー率49% (156/313)

2013/02/02 20:31 回答No.1

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

全文を見る

ログインすると、全ての回答が全文表示されます。

関連するQ&A

ホームページのサイドバーを全ページに表示するには
ホームページ制作（HTML、CSS）の勉強中です。次のようなことは可能でしょうか？同じサイドバーを全てのページに記述し、設置しております。フレームを使わずに、1回だけサイドバーを記述するだけで、全ページに表示させる方法はあるのでしょうか？
- ベストアンサー
- その他（インターネット・Webサービス）
【ヤプログ】サイドバーの最新コメントの文字色を変更したい
ヤプログのサイドバーの最新コメントの文字色を変更したいのですが変えれなくて困っています。スキンは、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ファイルを指定して、読み込み。。。なんてことは出来ないですよね・・・)
- ベストアンサー
- その他（インターネット・Webサービス）
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
- ベストアンサー
- JavaScript
HPサイドバーの作り方を教えてください。
自分のHPにサイドバーをつけたいのですが、そもそもサイドバーの作り方自体が分かりません。個人的に作りたいな～って思ってるのは、HTMLタグでカテゴリーのバナーを表示できて、スクロールバーが付いてる物…。訳分かりませんね。えっと、HTMLタグとかで表示できる様な物なんでしょうか。ん～…。回答、よろしくお願いします。
- ベストアンサー
- ブログ
サイドバーの作り方
サイドバーの作り方こんにちは。自分のホームページにサイドバーを設置したいと思います。 http://www.ceres.dti.ne.jp/~toshio/Doraemon.html 上のような「ドラえもん同好会」様のホームページみたいに、画面を二つに分けたいのですが、どのようにすればよいかわからないので、教えてください。ちなみに、サイドバーは左側、HTMLファイルでお願いします。
- ベストアンサー
- HTML
２カラムレイアウトをサイドバーとコンテンツとで、別のファイルで作りたい。
CSSを利用して２カラム（サイドがメニューで、中央がコンテンツ）のレイアウトを作りたいのですが、そういったレイアウトを作ろうとすると通常一つのhtmlファイルの中でメニューとコンテンツをそれぞれ<div>でくくって、CSSでそれぞれの<div>に対してレイアウトを指定することで２カラムを実現すると思います。メニューとコンテンツで別のファイルに書いたものを、表示させたいのですが、どうすれば実現できるでしょうか？よろしくお願いします。
- ベストアンサー
- HTML
ブログのサイドバーにカウンターを貼る方法
次のブログの状況で、サイドバーに「カウンター」と「現在閲覧中」のプラグインを設定する方法を教えて下さい。１）同じブログサイトで、サイドバーに「閲覧数累計」と「現在閲覧中」のプラグインを貼っているブロッガーがいる。２）面白いので自分もこのブログサイトの相談室に照会したところ、次の回答を得た。 2-1)標準ではこのプラグイン設定プログラムは提供していない。 2-2)トップページのサイドバーへ任意のHTMLタグの設定可能な「フリーエリア」プラグインを用意している。ここにHTMLタグを挿入すれば、ブログ記事のサイドバーに反映される筈。 2-3)但し、HTMLタグは多岐にわたるため、具体的な設定方法はサポート対象外。【質問事項】この状況で「閲覧数カウンター」や「現在閲覧中」をサイドバーに表示する場合どうすれば良いか、どんなソフトがあるか、”HTMLタグを挿入する”とはどんな意味かを教えて下さい。
- ベストアンサー
- ブログ