html5とcss3、 jQueryで動きのあるメニューを作りたい
- html5とcss3、 jQueryを使用して動きのあるメニューを作成します。センタリングされたcontainerクラス内にはheader、main、sub、footerのクラスが配置されます。メインメニューの項目上にマウスを置くとサブメニューが表示されます。サブメニューの幅は統一されます。jQueryの使用はオプションです。
- html5とcss3、 jQueryを使用して動きのあるメニューを作成します。メニューはcontainerクラス内にセンタリングされます。header、main、sub、footerのクラスが表示され、mainクラス内にはsidebar1、content、sidebar2のクラスが配置されます。メインメニューの項目上にマウスを置くとサブメニューが表示されます。
- html5とcss3、 jQueryを使用して動きのあるメニューを作成します。containerクラス内にセンタリングされたheader、main、sub、footerのクラスが表示されます。mainクラス内にはsidebar1、content、sidebar2のクラスが配置され、サイドメニューとコンテンツが表示されます。メインメニューの項目上にマウスを置くとサブメニューが表示されます。
- ベストアンサー
html5とcss3、 jQueryで動きのあるメ
html5とcss3、 jQueryで動きのあるメニューを作りたいと思っています。 いろんなサイトでサンプルを見て回ったのですが、僕が作りたいメニューに合うものは有りませんでした。 細かい事はもう少し自分で勉強してみますが、まずは初めが肝心ということでよろしくお願いします。 なお、tableは使わずにやりたいです。 全画面幅の80%をcontainerクラスの枠にし、センタリングします。 その内部に上から『header』『main』『sub』『footer』のクラスを配置します。 『header』クラスは、backgroundを指定し、left20%にjpeg画像のロゴを配置します。 『footer』クラスは、copylightクラスをセンターに置きます。 『sub』クラスは、画面が縦に長くなった時によくある≪ページのtopへ≫を置こうと思っています。 肝心の『main』クラスですが、この中にsidebar1クラスを幅20%で"float: left"指定、contentクラスが60%幅で"float: left"指定、残り20%がsidebar2クラスで"float: left"指定です。 sidebar1クラスの中のnavクラスで作られるメインメニューの縦に並んだ各li項目上にマウスが置かれた時に『header』クラスのjpeg画像のロゴの右側の何も無い部分にサブメニューを横に並べて表示させたいのです。 サブメニューの項目数は不定であるため、８０％÷項目数ではなく、統一した幅にしたいです。 なお、メインメニューの項目をクリックするまでは、サブメニューは固定されず、クリックした段階でそのページに飛ぶとともにサブメニューは固定されるようにしたいです。と言っても、メニュー項目上にマウスを置けば、そこのサブメニューにしたいのですが.... そもそもこういう事は可能でしょうか。 jQueryは、出来れば使いたいですが、使わなくて出来るならそれでいいです。 なお、『sub』クラスが思った表示にならないのですが、こんな事は後回しで良いです。 とにかく、よろしくお願いします。 belatero.cmbc.jp
- kichi4182
- お礼率38% (52/136)
- CSS
- 回答数7
- ありがとう数6
- みんなの回答 （7）
- 専門家の回答
質問者が選んだベストアンサー
＞それともclass名のように或る程度自由に決める事が出来るのでしょうか。 自由に決めることは出来ません。XHTML(XML)だと自由に決めることが出来ます。 これには歴史があって、 HTML自体、本来--その文書をタグを用いて、その文書を構成する要素(element)をマークアップする、言い換えれば文書構造をマークアップするものなのですが、それがデザインに流用されると言うことがされてきました。そのため・・ 『Webページはより複雑化し、限られた環境にしか適応しなくなり、相互運用性問題に悩まされることとなり、障害を持つ人々にアクセス障壁が設けられてしまう。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 )』 正しく理解されていなかったのですが、HTML4の時代から、『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』とされていました。 その当時から、すでに自由ではなく、class名やidは「文書構造を示す物」だったはずです。そうすることで、検索エンジンはどの部分がheaderであり、どの部分が節--章--項(section)であるかが理解できるはずでした。 「class名やidが文書構造を示すために使われてこなかった」という反省から、HTML5では、『文書をよりよく構造化するために、次の要素が新しく追加されました。( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements )』となり、DIVは、原則として使えなくなりました。 DIVは、文書構造を示す他に適当な要素がないときのための最後の手段として使用する---と変わりました。 そのために、私は、HTML4であっても極力HTML5の新しい要素名を、class名として使用することにしています。もちろん、その意味も含めて!!! ⇒3.1. 新しい要素( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements ) に追加すると section 原則としてh1, h2, h3, h4, h5, h6 要素を(ひとつだけ)伴う。sectionの階層とhのレベルは一致する。 <section> <h2>・・・</h2> <section> <h3>・・・</h3> <section> <h4>・・</h4> article 内部に<header><section><footer>を持つ、あるいは持つと期待される。 など・・ あなたの質問で示されている『main』『sub』をあえて使用しなかったのは、これらはそれぞれ『main』→section、『sub』→aside,ないしnavになるべき「構成要素」だと判断したからです。 ★class名は文書構造をしめすもの。その名称と意味はHTML5の新しい要素名をモデルとする。 将来HTML5が本格的に利用できるようになったとき移行が容易。 検索エンジンに正確に内容を示すことが出来る。(SEO) 自身も将来のメンテナンスが極めて楽になる。 【参考資料】 ⇒HTML5“とか”アプリ開発入門（1）：Webの3つの問題を解決する「HTML5」とは何なのか (2/2) - ＠IT( http://www.atmarkit.co.jp/ait/articles/1008/30/news106_2.html ) の【問題2】 ⇒HTML5タグリファレンス - HTML5.JP( http://www.html5.jp/tag/index.html ) 邦訳です。原文は、 ⇒HTML5( http://www.w3.org/TR/html5/ )
その他の回答 (6)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
スタイルシートです。 ややこしいセレクタは使ってありません。子孫セレクタと擬似クラス(:hover)だけです。 セレクタの書き方で詳細度が変わりますから、それを利用しています。 HTMLもCSSもシンプルで分かりやすいので、ツールを使うより早いし、後々のメンテナンスが楽です。 ★サブメニューは親メニューの近くに表示されます。 その他、下記サイトが参考になるでしょう。 ⇒ナビゲーションリストを様々にデザインしてみよう。( http://www.ichiya.com/WebService/Howto/sample/HTML/nav/navigation1.html ) で[表示]→[スタイルシート]で色々なスタイルを選択する。 ★ウェブ製作なら、開発者向けツール( https://addons.mozilla.jp/firefox/extensions/developer_tools/ )の豊富なfirefoxをお使いだと思いますが、firebugを使われると楽です。 @charset "UTF-8"; html,body{margin:0;padding:0;} header,section,footer{width:80%;min-width:640px;max-width:800px;margin:0 auto;position:relative;} header{min-height:200px;} h1,h2,h3{margin:0;line-height:1.6em;} p{line-height:1.6em;margin:0 1em;;text-indent:1em;} header h1{width:20%;margin:0;position:absolute;} header h1 img{width:100%;height:auto;} section{min-height:300px;} section section,section h2{margin:0 21%;min-width:0;width:auto;} nav ol,nav ol li{list-style:none;margin:0;padding:0;text-align:center;line-height:2em;position:relative;} nav ol li ol{display:none;} nav ol li:hover ol{display:block;} nav ol li a{display:block;width:100%;height:100%;} header nav ol{margin:5px 1% 2em 20%;font-size:0;} header nav ol li{float:left;display:inline-block;width:15%;font-size:18px;} header nav ol li ol{width:100%;margin:0;position:absolute;top:36px;left:0;} header nav ol li ol li{display:block;width:100%;} section nav,section aside{width:20%;position:absolute;top:0;height:100%;} section nav{left:0;} section aside{right:0;font-size:0.9em;} section nav ol li ol{width:100%;position:absolute;left:100%;top:0;} /* 分かりやすいように色分け */ body{background-color:gray;} header,section,footer{background-color:silver;} section section{background-color:white;} nav{background-color:rgb(255,255,160);} nav ol li{background-color:yellow;} aside{background-color:lime;} nav li a:hover{background-color:white;}
お礼
ありがとうございます。自作のサイトに適用するのは時間がかかりそうですが、焦らずじっくり理解しながらやっていこうと思います。
補足
cssとhtmlに書ける要素名（タグ名と言えば好いのでしょうか。例えば、navやheader,footer,section等）はいくつかに決められているのでしょうか。それともclass名のように或る程度自由に決める事が出来るのでしょうか。 決められているとすれば、一覧表、対応表みたいなモノは有るのでしょうか。またそれが有るとすれば日本語ですか。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
ごく簡単な例を挙げておきます。 1) 文書はHTML5の定番どおり<header><section><nav><aside><footer>の構成にしてあります。 HTML4.01にする場合は、それぞれ<div class=""></div>としてください。 2) サブメニューはマウスオーバーで下、または横に開きます。 3) 縦に並んだ各li項目上にマウスが置かれた時に『header』クラスのjpeg画像のロゴの右側に並べて表示させたいのです。 ※これは、問題です。本文が長いときはページがスクロールされた時には隠れて見えないのですからね。 個別のHTMLにスタイルを追加しましょう。 サブメニューはメインメニューの近くに表示させるほうが良いでしょう。そうすべきです。 4) ページをスクロールさせたときすべてのメインナビが使えるようにするには、fixedを使うと良いでしょう。 5) リンクして移動した先では、共通のナビに対して、スタイルを一行追加するだけです。サンプルのli.A{} ★HTMLをご覧になると分かるように、文書構造だけしか記述してありませんから、ユーザビリティもメンテナンスも楽です。 オーサリングツールでは、文章の内容を読み取って最適な要素(タグ)やclass名を示してはくれません。この部分は必ず著者が行うことになります。 またスタイルシートもHTMLの文書構造を元にセレクタを書くのですから、サンプルのようなセレクタは書いてくれません。 nav{}ナビゲーションのデザイン header nav{}header内のnav section nav{}セクション内のnav これは著者自身で指定することになります。 ★Another HTML-lint 5( http://www.htmllint.net/html-lint/htmllint.html# ) のDATA入力でチェック済み ★タブは＿に置換してあるので戻すこと。 <!doctype html> <html> <head> ＿<meta charset="utf-8"> ＿<title>サンプル</title> ＿<meta name="description" content=""> ＿<meta name="author" content="IRUKA"> ＿<!--[if IE]> ＿＿<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> ＿＿<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> ＿<![endif]-->＿<link rel="stylesheet" href="css/style.css"> ＿<link rel="stylesheet" type="text/css" media="screen" href="./styleSheet/test2.css"> <style media="screen"> <!-- /* 個別のHTMLに記述するかカテゴリーごとに外部ファイル */ header nav li.A ol{display:block;} nav ol li.A,nav ol li.A li{background-color:orange;} --> </style> </head> <body> ＿<header> ＿＿<h1><img src="./images/abc2.jpg" width="200" height="200" alt="ページタイトル"></h1> ＿＿<nav> ＿＿＿<ol> ＿＿＿＿<li><a href="/">Top</a></li> ＿＿＿＿<li class="A"><a href="/A">A</a> ＿＿＿＿＿<ol> ＿＿＿＿＿＿<li><a href="/A/1">A-1</a></li> ＿＿＿＿＿＿<li><a href="/A/2">A-2</a></li> ＿＿＿＿＿</ol> ＿＿＿＿</li> ＿＿＿＿<li class="B"><a href="/B">B</a> ＿＿＿＿＿<ol> ＿＿＿＿＿＿<li><a href="/B/1">B-1</a></li> ＿＿＿＿＿＿<li><a href="/B/2">B-2</a></li> ＿＿＿＿＿</ol> ＿＿＿＿</li> ＿＿＿＿<li class="C"><a href="/C">C</a></li> ＿＿＿＿<li><a href="/D">D</a> ＿＿＿＿＿<ol> ＿＿＿＿＿＿<li><a href="/D/1">D-1</a></li> ＿＿＿＿＿＿<li><a href="/D/2">D-2</a></li> ＿＿＿＿＿＿<li><a href="/D/2">D-3</a></li> ＿＿＿＿＿</ol> ＿＿＿＿</li> ＿＿＿＿<li class="E"><a href="/E">E</a></li> ＿＿＿</ol> ＿＿</nav> ＿</header> ＿<section> ＿＿<h2>本文</h2> ＿＿<section> ＿＿＿<h3>記事</h2> ＿＿＿<p> ＿＿＿＿全画面幅の80%をcontainerクラスの枠にし、センタリングします。 ＿＿＿</p> ＿＿＿<p> ＿＿＿＿その内部に上から『header』『main』『sub』『footer』のクラスを配置します。 ＿＿＿</p> ＿＿＿<p> ＿＿＿＿『header』クラスは、backgroundを指定し、left20%にjpeg画像のロゴを配置します。 ＿＿＿</p> ＿＿＿<p> ＿＿＿＿『footer』クラスは、copylightクラスをセンターに置きます。 ＿＿＿</p> ＿＿＿<p> ＿＿＿＿『sub』クラスは、画面が縦に長くなった時によくある≪ページのtopへ≫を置こうと思っています。 ＿＿＿</p> ＿＿＿<p> ＿＿＿＿肝心の『main』クラスですが、この中にsidebar1クラスを幅20%で"float: left"指定、contentクラスが60%幅で"float: left"指定、残り20%がsidebar2クラスで"float: left"指定です。 ＿＿＿</p> ＿＿</section> ＿＿<nav> ＿＿＿<ol> ＿＿＿＿<li><a href="/">Top</a></li> ＿＿＿＿<li class="A"><a href="/A">A</a> ＿＿＿＿＿<ol> ＿＿＿＿＿＿<li><a href="/A/1">A-1</a></li> ＿＿＿＿＿＿<li><a href="/A/2">A-2</a></li> ＿＿＿＿＿</ol> ＿＿＿＿</li> ＿＿＿＿<li class="B"><a href="/B">B</a> ＿＿＿＿＿<ol> ＿＿＿＿＿＿<li><a href="/B/1">B-1</a></li> ＿＿＿＿＿＿<li><a href="/B/2">B-2</a></li> ＿＿＿＿＿</ol> ＿＿＿＿</li> ＿＿＿＿<li class="C"><a href="/C">C</a></li> ＿＿＿＿<li><a href="/D">D</a> ＿＿＿＿＿<ol> ＿＿＿＿＿＿<li><a href="/D/1">D-1</a></li> ＿＿＿＿＿＿<li><a href="/D/2">D-2</a></li> ＿＿＿＿＿＿<li><a href="/D/2">D-3</a></li> ＿＿＿＿＿</ol> ＿＿＿＿</li> ＿＿＿＿<li class="E"><a href="/E">E</a></li> ＿＿＿</ol> ＿＿</nav> ＿＿<aside> ＿＿＿<h3>付録</h3> ＿＿＿<p>本文とは関係ない記事</p> ＿＿</aside><!-- 本文とは直接関係ない記事 --> ＿</section> ＿<footer> ＿＿<h2>文書情報</h2> ＿＿<address>copyright</address> ＿</footer> </body> </html>
- f1204-okw
- ベストアンサー率84% (16/19)
スタイルを確認する方法はおもに２つあります。 １つめは，外部 CSS ファイルを直接見るという方法です。 head 要素内にある <link rel="stylesheet"... というタグを探してください。 その要素の src 属性が見るべき css です。 ２つめは，ブラウザの開発者ツールを利用する方法です。 Firefox の Firebug などが有名です。 各要素を解析し，当てられているスタイルなどを細かく教えてくれるので重宝します。 自作の Web デザインを行なうならば持っておくべきかと思います。 横並びのメニューリストを作成する方法は，数多くのブログや How to サイトに載っています。 「メニュー 横並び」などのワードで調べてみてください。 www.expansys.jp で利用されているメニューのデザインは，とくに「メガメニュー」と言いますので，こちらも調べてみてください。 『float を使わずに修正』ですが，あまりこだわらず，float を使って修正してください。 「float を使うべきではない」というのは，float の仕様を理解しないまま使うと予期せぬデザイン崩れの原因になるから気をつけなさい，というくらいの意味です。 横並びメニューの作成にも float を使うことになるかと思います。 正しい用法・用量を守ってデザインしてみてください。
- f1204-okw
- ベストアンサー率84% (16/19)
jQuery を使って実装しました。 まず div.header 内にサブメニューを作成します。 簡単のため span 要素を使っていますが，実際には ul 要素で作成した水平リストを置くことになります。 <div class="header"> <img src="/images/logo-mark.gif" class="logo_mark" alt="ロゴ" /> <span id="nav-sub-top" style="display: none">「トップページ」のサブメニュー</span> <span id="nav-sub-business" style="display: none">「業務内容」のサブメニュー</span> ... </div> 次に，イベントを割り当てやすくするため ul#menu 内の li 要素に id を設定しておきます。 <ul class="nav" ID="menu"> <li id="nav-top"><a href="/index.htm" title="トップページ" target="_self">トップページ</a></li> <li id="nav-business"><a href="#" title="業務内容" target="_self">業務内容</a></li> ... </ul> 最後に head 要素内に下記のようなスクリプトを記述します。 jQuery の hover() メソッドを用い，サブメニューの show() メソッド，hide() メソッドを呼び出します。 （簡単のため span 要素を用いたので，$('.header ul') とすべき場所が $('.header span') となっています。） <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script> jQuery(document).ready(function($) { $('#nav-top').hover( function() { $('.header span').hide(); $('#nav-sub-top').show(); } ); $('#nav-business').hover( function() { $('.header span').hide(); $('#nav-sub-business').show(); } ); }); </script> これで「マウスを置くとサブメニューが表示される」機能は満たせると思います。 「クリックした段階でそのページに飛ぶとともにサブメニューは固定されるようにしたい」とのことですが，飛んだ先のページの HTML に直書きしてしまうのが簡単です。 ただ，このデザインは，ユーザビリティの点からあまり良いものではないかもしれません。 メインメニューとサブメニューの位置が離れているからです。 「トップページ」のリンクに対するものならまだしも，最後の「活動報告」に対してはかなり距離が生じます。 マウスを動かすのが面倒だし，マウスを動かす間に他のメニューにポインターを合わせてしまってサブメニューが書き換えられてしまうかもしれないし，そもそもサブメニューが表示されたことに気づけないかもしれません。 いろんなサイトで見たサンプルを気にいらなかったのは，それらのメインメニューとサブメニューがくっついたような位置関係にあるものしかなかったからではないかと推測します。 メインメニューとサブメニューのくっついたデザインしかないのは，おそらくそれ以外のデザインでは不便だからでしょう。 また，メインメニューとサブメニューの離れたデザインは，文書構造的にも良いものではありません。 メインメニューとサブメニューの関連がなくなるからです。 あるメニューに対するサブメニューであることを明示するには，メニューの li 要素内に ul 要素を入れ子にすべきなのです。 入れ子にすると，文書構造やユーザビリティ，そして実装の点において簡潔で優れたものとなります。 <ul class="nav" ID="menu"> <li> <a href="/index.htm" title="トップページ" target="_self">トップページ</a> <ul> <li>トップページ サブメニュー 1</li> <li>トップページ サブメニュー 2</li> ... </ul> </li> ... </ul> このような HTML の構造ならば #menu > li > ul { display: none; } #menu > li:hover > ul { display: block; } のように簡単な CSS のみでも実装できます。 ちなみに，もともとの文書構造は割ときれいだと思います。 header, nav, contents, footer の順序が素直で，CSS を無効にしても文書として成り立っているからです。 そのシンプルさを失わないような形でサブメニューの追加を検討することをおすすめいたします。
お礼
ありがとうございます。考えてみれば確かにMAINメニューとSUBメニューが離れているのって使いづらいですね。くっついて欄外に吹き出すか、メイン項目の間に挿入されるかのパターンを考えてみたのですが、 http://www.expansys.jp/ か、もしくは http://windows.microsoft.com/ja-jp/windows-8/meet をまねてみようかと思いました。 しかし、ソースを見るでＨＴＭＬは見られますが、CSSは見られないので困っています。よろしくお願いします。 なお、縦に並んでいるメニューを横に並べたり、横に並んでいた『sidebar1』『contents』『sideber2』が縦に並んでしまったのをfloatを使わずに修正するやり方も分かりません。どうかご教示下さい。よろしくお願いします。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
できません。いくらスタイルシートが強力なプレゼンテーション能力を持つといっても文書構造に逆らうデザインは出来ませんし、出来ても使い物にはなりません。(CSS2.1で出来ることはできます) ただ、スタイルシートは「HTMLがきちんとできている必要があります。」 『メモ: CSSスタイルシートを意図した通りに機能させるには、正しい文書解析木が必要です。つまり、正当なHTMLを用いるべきです。( http://jigsaw.w3.org/css-validator )』 HTML5(小文字じゃないです)なのに、なぜ<div class="header">を使うのですか!!HTML5では、厳格に 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable. Use of more appropriate elements instead of the div element leads to better accessibility for readers and easier maintainability for authors. ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［4.5 Grouping content — HTML5( http://www.w3.org/TR/2012/CR-html5-20121217/grouping-content.html#the-div-element )］より 直訳すると、「著者は他に適切な要素がない時に限り、最後最後の手段としてdiv要素を使用するよう奨励される。より適切な要素を使用することは、読者にはアクセシビリティの向上と、著者にはメンテナンス性の容易さつながる。」 とDIVの使用を避けるように強く書かれています。極論すればDIVは可能な限り使うな!! HTML5、CSS3はまだ時期尚早なので、HTML4.01として回答すると <body> <div class="header"> <h1>タイトル</h1> </div> <div class="section"> <h2>本文見出し</h2> <p>記事</p> <div class="nav"> <ol> <li><a href=""></a> <ol> <li><a href=""></a></li> </ol> </li> <li></li> <li></li> </ol> </div> </div> <div class="footer></div> </body> HTML5だと <body> <header> <h1>タイトル</h1> </header> <section"> <h2>本文見出し</h2> <p>記事</p> <nav> <ol> <li><a href=""></a> <ol> <li><a href=""></a></li> </ol> </li> <li></li> <li></li> </ol> </nav> </section> <footer></footer> </body> になります。 div.header,div.section,div.footer{min-width640～max-width:800px程度で中央配置} div.section{position:relative;} div.section div.nav{position:absolute;top:0;right:0;width:20%;} 当たりになるでしょう。 ナビゲーションにポインターをあわせると、サブメニューがsectionの上部に表示させるようにする。 なお、floatは使うべきではありません。本文中で挿絵等を自在にfloat(本来の使い方)が出来なくなります。また、HTMLを文書構造を無視してデザインのために書くことになり、デザインの変更ができなくなります。 ★問題点、ページが長くなるとサブメニューが見えない!! ★クリックではなく:hoverになる。 よって、あまり良いデザインとは思えません。 ナビゲーションをfixedで常に左右どちらかにおいておいて、ポインターが乗ればサブ項目が現れるようにするほうが良いでしょう。 スタイルシートで自由自在にデザインできるメタには、正統なHTMLをまず覚えましょう。そうしないと、何も出来ない。デザインのためにHTMLを書くことになり、使い勝手もメンテナンス性も低下します。
お礼
ありがとうございました。
補足
すみません。Adobe Dreamweaver CS5.5でテンプレートから作成したのでこのようになってしまいました。なお、現時点では、CSS検証サイトで『エラーはありません』と出ました。 http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fbelatero.cmbc.jp%2Findex.htm&profile=css3&usermedium=all&warning=1&vextwarning= DIVや、floatを出来るだけ使わないように変更しようと思うのですが、floatを消しただけだと、横に並んでいた『sidebar1』『contents』『sideber2』が縦に並んでしまいました。 DIVでは、例えば『<div class="header">』を『<header>』に変更する時にスタイルシートは『.header』を変更する必要はありますか？
- kosukejlampnet
- ベストアンサー率44% (126/282)
いろいろ書いているけど、jQueryを使わなくてはならない必要性が一切ありませんね・・・。 単純なレイアウトなんだから、HTML、CSSですることです。
お礼
ありがとうございます。jQueryとは何なのかをよく分かってなくて、でも、使用出来るならしたいなと思っていました。 もう少し勉強します。
関連するQ&A
- CSSのfloatとdivについて質問です。
CSSのfloatとdivについて質問です。 下記のようにmainの中にlocal-navigationを配置したいのですがやり方が分からないのでご教授お願いします。 現在はlocal-navigationがfooterの上に表示されて自分の意図することが出来ていません。 sidebar-leftとsideba-rightはfooter部分まで伸びていて欲しいのです。 やりたいこと： ＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿ ｜header-menu ｜ ｜＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿｜ ｜sidebar-left｜ main ｜sidebar-right ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜＿＿＿＿＿＿＿＿＿＿＿＿｜ ｜ ｜ ｜local-navigation ｜ ｜ ｜＿＿＿＿＿＿｜＿＿＿＿＿＿＿＿＿＿＿＿｜＿＿＿＿＿＿＿｜ ｜footer ｜ ｜＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿｜ 現在の状況： ＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿ ｜header-menu ｜ ｜＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿｜ ｜sidebar-left｜ main ｜sidebar-right ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜＿＿＿＿＿＿｜＿＿＿＿＿＿＿＿＿＿＿＿｜＿＿＿＿＿＿＿｜ ｜local-navigation ｜ ｜＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿｜ ｜footer ｜ ｜＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿｜ 過去の質問： 「CSSでメイン部分が80%ぐらいに表示するには？ http://okwave.jp/qa/q7728293.html 」 「CSSのbackground-imageについて http://okwave.jp/qa/q7728304.html 」
- ベストアンサー
- CSS
- CSSレイアウトの本当の正しいやり方
CSSでヘッダーとフッター付きの2カラムレイアウトを書籍のサンプルを見て行ないました。 表示は何も問題ないのですが、色々とサンプルレイアウトのサイトを見ていると「main」でleft-marginfを指定しているのはなく、floatを指定しているのが多いのですが、下記でも合っているのでしょうか。 #wrap { width: 700px; margin: 0 auto; text-align: left; } #header { color: #fff; } #menu { width: 160px; float: left; } #main { margin-left: 160px; padding: 10px; } #footer { clear: both; padding: 10px; }
- ベストアンサー
- HTML
- perlで3カラムにしたい (css)
perlでcgiのアンケートのページを作っていますが、ページの最上部をヘッダー、ページの両端にメニューや広告、中央にコンテンツを配置する3カラム（三段組み）、最下部をフッターにしたいと考えています。 ページ幅 755pxでセンタリング、両端のメニュー、コンテンツともに幅固定で、以下のようなcssファイルを作りましたが、cgiのページを見ると、cssファイルの設定がうまく反映されません。 どうすれば良いのか、ぜひ御指導、アドバイス頂けると助かります。 ｍ（＿ ＿）ｍ 当方初心者のため、もし以下のcssファイルの書き方に間違えがありましたら、ご指摘ください。 よろしくお願い致します。 ----------------------------- <HTML> <BODY> <div id="wrapper"> <div id="header"> ヘッダー部分 </div> <div id="main"> <div id="menu"> メニュー部分 </div> <div id="contents"> コンテンツ部分 </div> <div id="affiriate"> アフィリエイト部分 </div> </div> <div id="footer"> フッター部分 </div> * { margin: 0; padding: 0; } #wrapper { width: 755px; margin: 0 auto; /* 幅固定（755px）でセンタリングします。*/ } #header { width: 755px; height: 50px; } #main { width: 755px; /* 両端ブロックとコンテンツを囲んでいるセレクタです。*/ } #menu { float: left; width: 150px; /* floatに、width 指定は必須です。*/ } #contents { float: left; width: 505px; #affiliate { float: left; width: 150px; } #footer { clear: both; /* float をクリアしています。*/ width: 755px; height: 50px; } #menu ul { list-style: none; } </div> </BODY> </HTML>
- ベストアンサー
- CSS
- CSSが正確に反映されません。
４つの枠を丸で囲み、かつそれぞれの枠を等間隔で空けたいと思います 丁度以下の2つを表示した場合の、contentsとmainの間の間隔が理想的です。 しかし書いたCSSの設定が正確に反映されません。 headerとfooterもこの大きさで広げたいと思うのですが、広がりません。 また、なぜheaderは丸くならず、footerはサイズからはみ出すのでしょうか。 背景を赤に設定しているのですが、それも反映されません。 なぜこうなるのかどなたかご存知の方、ご指摘いただけると助かります。 どうかよろしくお願いします。 以下、2つのファイルは同じフォルダに保存しました。 dreamweaverのアカデミック版で作り、firefox3.6.13で表示しています。 style.css ---------------------------------------------------------- @charset "utf-8"; /* CSS Document */ <!-- * { margin:0; padding:0; } h1, h2, p { margin: 0 1em; } <!--背景の設定--> body { background-color: red; } <!--コンテンツの幅を指定--> #wrapper, #main, #header, #menu, #footer { width:1120px; } <!--角を丸くする--> #header, #menu, #contents, #footer { background-color: #66FFFF; border:2px solid #999; padding: 8px; margin-bottom:5px; -webkit-border-radius: 5px; /* Safari,Google Chrome用 */ -moz-border-radius: 5px; /* Firefox用 */ } <!----> #wrapper { margin: 0 auto; line-height: 1.5; } #main { } #header { height: 50px; } #menu { width: 160px; float: left; } #menu ul { list-style: none; margin-left: 1em; } #contents { float: right; width: 900px; } #footer { clear: both; height: 50px; text-align: center; } --> ------------------------------------------------------------------------------------ index.html ------------------------------------------------------------------------------------ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"><head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <title>勉強用</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div id="wrapper"> <div id="header"> <h1>Site Title</h1> </div> <div id="main"> <div id="menu"> <p><strong>float:left</strong></p> <ul> <li>Menu</li> <li>Menu</li> </ul> </div> <div id="contents"> <h2>Sub Title</h2> <p><strong>float:left</strong></p> <h2>Sub Title</h2> <p>text</p> </div> </div> <div id="footer"> <p>Footer</p> </div> </div> </body> </html>
- 締切済み
- CSS
- CSSでの背景色の出し方でつまりました。
独学で学んでいる初心者です。 HTML <link rel="stylesheet" href="hp.css" type="text/css"> <div id="container"> <div id="header">ヘッダー</div> <div id="main">メイン</div> <div id="sidebar">サイドバー</div> <div id="footer">フッター</div> </div> CSS #container{ width:940px; overflow:hidden; } #main{ width:620px; float:left; color:black; } #sidebar{ width:320px; float:right; background:green; } #footer{ clear:both color:red; } 簡単なものにしてみても出なかったので、 なぜ出ないのか教えていただければと思います。 ブラウザはオペラです。 サイドバーのグリーンしかつきません。 過去の似たような質問をいくつかみて overflow:hidden; や .clearfix:after { content: ""; display: block; clear: both; } を入れてみてもダメでした。 お願い致します。
- ベストアンサー
- CSS
- アメブロcss 3カラムを2カラムに変更の仕方
アメブロカスタマイズについて。 現在アメブロの3カラムをcssを編集し2カラム右メニューにしようとしているのですが、 上手く2カラム右メニューに表示出来ません。 まずサイドバー項目を右に全てずらし、左は空とし、 #sub_a{display:none;}として、 #mainの幅を拡大し2カラム左メニューは問題なく出来たのですが、 メニューを右にずらす事が出来ておりません。 感覚としては#mainは動かせているのですが、#sub_bがびくともしないような感覚です。 現在のcssは以下のようになっており、表示としては#sub_bも#mainも左に寄っており、 #sub_bの下に#mainが表示されている状態です。 具体的にどの点を修正すれば2カラム右メニューとなりますでしょうか？ #main{ float:left; width:673px; left: 0px; top: 0px; } #sub_main{ width:100%; overflow:hidden; } #sub_a{ display:none; } #sub_b{ float: right; width:200px; margin-left: 688px; top: 0px; z-index: 100; }
- 締切済み
- ブログ
- CSSでボーダーがとぎれてしまう・・
すみません・・普段は自分で調べても分からないときだけこちらで質問するのですが、今回は作業に追われておりまして・・申し訳ない気持ちですが、質問させていただきます。 CSSで・・・ header、main、menu、footer の順番でdivで囲まれたコンテンツ？があります。 headerが上でその下の左にmenu、右にmainと並べて、その境目にボーダー線を指定したいのですが、どちらに指定しても逆側が長くなってしまうとボーダーが途中で途切れてしまいます。 これをこれを常にfooterの位置まで表示する方法はありませんでしょうか？ よろしくお願いします。
- ベストアンサー
- CSS
- ＣＳＳで左右の固定について
まず、以下ＣＳＳ body { text-align:center; } <! メインのフレーム指定> #page { width:760px; margin:0 auto; text-align:left; } <! ヘッダー及び横項目指定> #header { width:100%; text-align:center; height:65px; } #header2 { width:750px; line-height:35px; background-color:#FF00FF; } <! 中央左右設定及び余白指定> .pageyohaku { margin:0 10px; } .main {width:570px; float:right; background-color:#E0FFFF;} .submenu { width:170px; float:left; background-color:#FFC0CB;} .c-both { clear:both; } <! 下記記載事項枠指定> .footer1 {width:100%; text-align:left;line-height:15px;background-color:#24CF00;clear:both;} .footer2 {width:100%; text-align:center;line-height:15px;background-color:#DCDCDC;clear:both;} <! リンク指定> .link {color:blue;} －－－－－－－－－－－－－－－－－－－－－－－－－－－ 次にｈｔｍｌ <html> <head> <link href="style.css" rel="stylesheet" type="text/css"> <title>ホームページ</title> </head> <body> <div id=page> <div id=header> <p><img border="0" src="img/logo.gif" width="730" height="65"></p> </div> <div id=header2> <p>このページはします</p> </div> <div class=pageyohaku> </div><! pageyohakuの終わり指定> <div class=main> <p>本日はようこそ</p> <p>本日はようこそ</p> <p>本日はようこそ</p> <p>本日はようこそ</p> <p>本日はようこそ</p> <p>本日はようこそ</p> <p>本日はようこそ</p> </div><! mainの終わり指定> <! サブメニュー一覧> <div class=submenu> <p>リンク</p> <p>リンク</p> <p>リンク</p> <p>リンク</p> <p>リンク</p> <p>リンク</p> </div><! submenuの終わり指定> <div class=c-both> </div><! c-bothの終わり指定> <div class=footer1> 最下層メニュー項目</p> </div><! footer1の終わり指定> <div class=footer2> <p>コピーライト</p> </div><! footer2の終わり指定> </div><! Pageの終わり指定> </body> </html> 以上のように外部指定で作成したのですが７６０Pxよりブラウザの 幅を狭くするとレイアウトが崩れてしまいます。 何が悪いのでしょう、誰か教えてください。 大きすぎると左のリンクが外へはみ出る感じになりますが とにかく幅は固定し、左右に分かれる「main」「submenu」を Pageの枠にはめてブラウザのウィンドウを小さくしても 変化しない(崩れない)レイアウトを望みます。 調べてもほとんど同じ書き方で崩れないところもあるので どこが悪いのかわかりません。 わかりやすいようにメモも付けて整理してみたのですが どなたかお願いします。
- 締切済み
- CSS
- JQueryでのloadの動作がFirefoxで動かなくて困っています
JQueryでのloadの動作がFirefoxで動かなくて困っています。 サイトのheaderとfooterを外部htmlにして、JQueryのloadで呼び出し指定のdivに出力するようにしたいのですが、IEでは上手くいきましたが、FFでは全く動きません。 $(document).ready(function(){ $("#header").load("../js/header.html #header"); $("#footer").load("../js/footer.html #footer"); });
- 締切済み
- AJAX
- CSS #containerについて
えっと、CSSについての質問です。 最近勉強をはじめたのですが、 #container を下まで伸ばすのに height: 100%; min-width: 100%; をいれても下まで伸びない現象がおきています。 最初は伸びていたのですが、 ヘッダーとフッターを横に１００％にしてから 様子がおかしくなりました。 減ったーフッターは横に全部伸ばしたくて、 コンテイナーは横は余白つけて下にのばしたいのです＞＜ どなたか原因がわかる方、対処法わかる方 いましたらお願いします＞＜ ------------------------------HTML--- <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="index3.css"> </head> <body> <div id="container"> <div id="headerbg"> <div id="header"> <h1>header</h1> </div><!-- header --> </div><!-- headerbg --> <div id="menu"> <ul> <li><a href="">めにゅー１</a></li> <li><a href="">めにゅー２</a></li> <li><a href="">めにゅー３</a></li> <li><a href="">めにゅー４</a></li> <li><a href="">めにゅー５</a></li> <li><a href="">めにゅー６</a></li> </ul> </div> <div id="main"> <div id="contents"> </div><!-- contens --> <div id="sidebar"> </div><!-- sidebar --> </div><!-- main --> <div id="footerbg"> <div id="footer">Footer</div><!-- footer --> </div><!-- footerbg --> </div><!-- container --> </body> </html> -------------------------CSS--- html { background-image: url('hana3.jpg'); background-attachment: fixed; } body { font-family: Verdana, Arial; font-size: 20px; margin: 0px; padding: 0px; } html,body,#main,#container{ height:100%; } #container { height: 100%; min-width: 100%; background-color: rgba(255,100,0,0.5); } #headerbg{ width: 100%; min-width: 100%; background-color: rgba(255,100,0,0.5); } #header { padding: 40px; width: 100%; } #menu { } #menu>ul>li { float: left; } #main { overflow: hidden; } #sidebar { } #footerbg{ background-color: rgba(255,100,0,0.5); width: 100%; min-width: 100%; } #footer { padding: 50px; width: 100%; }
- 締切済み
- CSS
お礼
大変分かり易い説明をありがとうございます。自分の勉強や認識の不足を痛感しました。 要するに、タグ名だけを書くと <doctype> <html> <head> <title></title> (<meta> 必要に応じて） (<link> 必要に応じて） </head> <body> <header> <section> <h2>・・・</h2> <section> <h3>・・・</h3> <section> <h4>・・</h4> </section> </section> </section> </header> <section> <h2>・・・</h2> <nav> <ul> <li></li> ・ ・ ・ </ul> </nav> <section> <h3>・・・</h3> <img> (他必要に応じて） <section> (他必要に応じて） <h4>・・</h4> (他必要に応じて） </section> (他必要に応じて） </section> </section> <footer> <address> (他必要に応じて）</address> </footer> </body> </html> と、こんな感じの流れで良いのでしょうか。あとはこれに肉付け・羽付けをし、コンピュータにとっても、ホームページ閲覧者にとっても分かり易いページを作っていけばよいような気がしています。 あと、表示速度の面から、scriptはhtmlの最後に記述した方が良いと書かれたサイトが存在したのですが、この辺はどう思われますか。 なお、本日通っている施設より、『施設では使わなくなった本』を１３冊ほど貰ってきました。その中にホームページ・ＣＧＩ関係も４冊ほどあるので、少しだけ古いXHTMLの本等は、教えて頂いたページと比較しながら勉強したいと思います。 ありがとうございました。