[PR]ネットとスマホ OCNでまとめておトク!

ホームページのサイドバー(サイドメニュー?)の作り方を教えてください。

一応、HTML,CSS,Javascriptはできます。
(「それくらい知っているんだったらできるだろ!!」と思う方も多いでしょうがお許しください。)

ページ内はDIVタグで分類しています。

このQ&Aに関連する最新のQ&A

A 回答 (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% … )

 これは、「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-html4 … )

<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%;
}

とかになります。
    • good
    • 0

サイドメニューの何について知りたいのですか?


メインコンテンツdivの横に並べる方法のことですか?
    • good
    • 0

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

    • good
    • 0

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

QCSSでborderの長さを指定、または可変にしたい。

下記のように指定していますが、これだと横幅いっぱいに下の線が表示されてしまいます。

文字なりの長さ、または指定のピクセル数にしたいのですが、どのようにしたらよいでしょうか。

h3{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

Aベストアンサー

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよければ

<h3><span>××○○</span></h3>
のようにspanで囲い、スタイルをspanに対して指定する方法もあります。

h3 span{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよけ...続きを読む

Qテーブル内の文字サイズを変更したい。

HTMLのテーブル内の文字サイズを変更したいのですが。
イマイチ上手くいかずに悩んでいます。
出来れば全体的に<TABLE></TABLE>のほうでいじれますか?
<TD>タグや<TR>タグのところでいじくるのですか?

Aベストアンサー

いろいろやり方はありますが
文字単位でサイズを変更するには
#2の方法ですね。

テーブルごとやセル(<TD>)ごとにサイズを変更するには
スタイルシート(CSS)を使用します。

テーブルごとにサイズを変更する場合
<TABLE style="font-size : 20px;">

セル(<TD>)ごとにサイズを変更する場合
<TD style="font-size : 20px;">あああ</TD>

#1の方法だとページ内の全てのセル(<TD>)に設定することになります。

スタイルシート(CSS)はこれら以外にも
いろいろな設定方法があります。

Q画像イメージの上下左右、欲しいところに好きな間隔を入れられますか?

こんにちは。タイトルの通りサイト作成で、
画像の上下左右、好きな方向に間隔を入れられるかその方法をお教えください。

参考までに、DreamWeaver(ドリームウィーバー)2004MXです。

画像とテキストの兼ね合いで、画像の右側や左側に、
ところどころで間隔が欲しいと思っています。

間隔をいじれるところといえば縦間隔、横間隔になりますが、
縦間隔なら「上」と「下」、横間隔なら「右」と「左」、
これらが一度に動いてしまうのです。
片方には確かに欲しい間隔が得られるのですが、
ほう片方に要らない間隔ができてしまい困っています。

例えば右だけに間隔が欲しい。
左だけに間隔が欲しい。

こういう場合って、何かやり方があるのでしょうか。

もともと余白込みの画像を用意するという手も講じましたが、
その場合はその場合で、その画像が他のレイアウトに流用しづらい
という弱点を生んでしまい、レイアウトごとに画像を用意しなければならないので
対症療法としてはうまくいきませんでした。

また、画像ごとにセルを用意して任意の余白を作り出す手もありましたが、
セルがあまりにも絡まりあってしまい、
かなりぐちゃぐちゃなものになるためうまくいきませんでした。

やはりもうちょっと詳しい方にお訊きしようと思いまして
質問を立てさせていただきました。
素人質問で大変申し訳ありません。
どうぞ宜しくお願いいたします。

こんにちは。タイトルの通りサイト作成で、
画像の上下左右、好きな方向に間隔を入れられるかその方法をお教えください。

参考までに、DreamWeaver(ドリームウィーバー)2004MXです。

画像とテキストの兼ね合いで、画像の右側や左側に、
ところどころで間隔が欲しいと思っています。

間隔をいじれるところといえば縦間隔、横間隔になりますが、
縦間隔なら「上」と「下」、横間隔なら「右」と「左」、
これらが一度に動いてしまうのです。
片方には確かに欲しい間隔が得られるのですが、
ほう片方...続きを読む

Aベストアンサー

HTMLの初歩です。具体的には、
-------------------------------------------
<img src="○○.gif" width="100" height="100" alt="*"
style="margin: 10px 20px 0 30px;">

上10px 右20px 下0 左30px の四方の隙間が開く。
数値は例なので適当に変更を。
-------------------------------------------

<img src="○○.gif" width="100" height="100" alt="*"
style="margin: 5px 20px;">
上下5px 右右20px の2方の隙間が開く。

Qスペースを使わず文字位置を揃える方法

素人な者で大変申し訳ありません
以下のように、複数行の文字位置を揃えるタグはどうなるのでしょうか?
(下の例は揃っていませんが・・・)

1.あ        :ABC
2.abc       :ABC
3.あいう      :ABC
4、えお       :ABC

のように、空白部にスペースを使わずに文字位置を揃える方法です
ワードなどの「tabキー」の役割をするタグなんてありますか?

ご教示の程、宜しくお願い致します

以上

Aベストアンサー

 これは、No.がある序列リストですか?あるいは、用語とその説明のようなものでしょうか?
 HTMLは、その文書構造を記述するだけですので、それにしたがってマークアップすれば良いです。
[例][用語とその説明のようなもの]のようですから定義リストでマークアップしてみましょう。
<h3>元素</h3>
<dl class="periodic table">
<dt>水素</dt>
<dd>元素記号(H)、原子量1.008、酸素と共に水をくつる。</dd>
<dt>ヘリウム</dt>
<dd>元素記号(He)、原子量4.003、不活性ガス</dd>
<dt>リチウム</dt>
<dd>元素記号(Li)、原子量6.941、リチウムイオン電池</dd>
</dl>

<h3>元素</h3>
<ol class="periodic table">
<li><span class="element">水素</span>元素記号(H)、原子量1.008、酸素と共に水をくつる。</li>
<li><span class="element">ヘリウム</span>元素記号(He)、原子量4.003、不活性ガス</li>
<li><span class="element">リチウム</span>元素記号(Li)、原子量6.941、リチウムイオン電池</li>
</ol>

これに対して、スタイルシートを次のように書いたりします。
dl.periodic.table{counter-reset: atomicNum 0;padding-left:2em;}
dl.periodic.table dt{float:left;font-weight:bold;}
dl.periodic.table dt:before{
content: counter(atomicNum) ". ";
counter-increment: atomicNum;
}
dl.periodic.table dd{margin-left:7em;}
dl.periodic.table dd:before{content:": ";}

ol.periodic.table span.element{float:left;width:7em;position:relative;font-weight:bold;}
ol.periodic.table span.element:before{content:": ";position:absolute;right:0.5em;}

★他にどのようにマークアップされていても、用語とその説明がが区別できるようにマークアップされていれば、デザインはできます。
★デザインのためにDIVやSAPNを追加しているわけではありません。
『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』ものです。デザインのために書いてしまうと、デザインのためにtableを使ったのと大差ありません。
 HTML5では、
※DIVやSPANは他に適した要素がないときのための最後の手段
※文書構造を示すため
 となります。

 これは、No.がある序列リストですか?あるいは、用語とその説明のようなものでしょうか?
 HTMLは、その文書構造を記述するだけですので、それにしたがってマークアップすれば良いです。
[例][用語とその説明のようなもの]のようですから定義リストでマークアップしてみましょう。
<h3>元素</h3>
<dl class="periodic table">
<dt>水素</dt>
<dd>元素記号(H)、原子量1.008、酸素と共に水をくつる。</dd>
<dt>ヘリウム</dt>
<dd>元素記号(He)、原子量4.003、不活性ガス</dd>
<dt>リチウム</dt>
<dd>元素記号(L...続きを読む

Q  これの意味教えて下さい。

これの意味教えて下さい。
タグの
<tr>
<td></td>
</tr>
中に入っている
意味はなんですか?

Aベストアンサー

空白(半角スペース)として使用されることが多いですが、
を使用すると改行されません。

たとえばOK WaveのOKが行末あたりに来たときに、
(1)OKとWaveの間を半角スペースとする場合
~~~OK<改行>
Wave~~~

となりますが、
(2)OKとWaveの間をとする場合
~~~<改行>
OK Wave~~~

となります。

QHPのサイドメニューをフレームなしで作成する方法

HPのサイドメニューをフレームなしで、全ページに一括して埋め込む方法ってあるのでしょうか?
1ページ1ページhtmlを編集してサイドメニューを作ると、メニューを増やしたときに全ページ編集せねばならず、メッチャメンド臭いです。
フリーソフトがあれば、ぜひ

Aベストアンサー

SSIを使う方法があります。
http://allabout.co.jp/internet/hpcreate/closeup/CU20020520A/#folder
それ以外ではCSSでfloatを使うとできるようですが、こちらはかなり難しいようですね。
http://hac-design.com/css/float.html

Qcssで「下よせ」ってどうやっていますか?

フロートのレフト、ライトはいいとして、

あるボックス要素内(A)に異なるボックス要素(B)をいれます。
この(B)を(A)の一番そこにはりつかせたい時にどうすれば
最もよいのでしょうか?

いいアイデアをご教授ください。

Aベストアンサー

こんなのはどうかな?

position: absolute;
bottom: 0px;

Qcssファイルの名称付け

html+cssでHPを作りましたが、cssの名称(○○.css)はどんなのがベターですか?

やはりindex.cssという名称でしょうか?

それとcssファイルはindex.htmlと同じ段階層に収めますか?
それともcssフォルダを別に作ってその中に入れますか?

できれば学校で習った人や専門職の人にアドバイスいただきたいです。

Aベストアンサー

他の方と同意見です。

大規模サイトを制作するときは、
・htmlを作るコーダー
・画像を作るデザイナー
・CSSを作るコーダー
の3つの作業を複数の人で分担することがあるので、
画像・cssをすべて「src」ディレクトリにまとめたりしてます。
コンテンツの数が分かりやすくなるので。

index.html(トップページ)
xxx/index.html(コンテンツ)
src/img/common/(共通画像)
src/img/コンテンツ名/(各コンテンツの画像)
src/css/(css置場)
src/js/ (js置場)

みたいな感じです。
でもディレクトリが多くなるので、大規模サイト限定です。
通常は他の方がおっしゃる方法を使ってます。

Qサイドバーの作り方

サイドバーの作り方

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

Aベストアンサー

フレームです。
フレームは問題が多く、今はほとんど使用されていない過去の手法です。(私は7年以上使ってない)
HTML フレーム 問題 - Google 検索 ( http://www.google.co.jp/search?hl=ja&source=hp&q=HTML+%E3%83%95%E3%83%AC%E3%83%BC%E3%83%A0+%E5%95%8F%E9%A1%8C+&aq=f&aqi=&aql=&oq=&gs_rfai= )
 HTML4.01だと
16 フレーム ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/frames.html#h-16.1 )

 とても問題が多くXHTML1.0で非推奨に、XHTMLでは廃止です。
★あなたがそのサイトで、左側に特定のページを表示させている状況でブックマーク(お気に入り)に指定してもだめですし、だれかにURLを教えることもできない。当然検索エンジンもだめ・・これはサイト制作者からすると致命的。もちろん、テキストブラウザや携帯端末からは無理

 きちんと各ページに目次を記述して、スタイルシートでそれらしくデザインしましょう。

フレームです。
フレームは問題が多く、今はほとんど使用されていない過去の手法です。(私は7年以上使ってない)
HTML フレーム 問題 - Google 検索 ( http://www.google.co.jp/search?hl=ja&source=hp&q=HTML+%E3%83%95%E3%83%AC%E3%83%BC%E3%83%A0+%E5%95%8F%E9%A1%8C+&aq=f&aqi=&aql=&oq=&gs_rfai= )
 HTML4.01だと
16 フレーム ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/frames.html#h-16.1 )

 とても問題が多くXHTML1.0で非推奨に、XHTMLでは廃止です。
★あなたがそのサイトで、左...続きを読む

QHTMLフォームのSELECTの幅を一定にするためには?

HTMLフォームのSELECTの幅を一定にするためにはどのようにすれば
いいのでしょうか?

CSS等で設定できるとありがたいのですが、やり方がわかりません。

Aベストアンサー

<select style="width: 200px">


人気Q&Aランキング