- ベストアンサー
メニューと本文でリストのスタイルを変えたい
HTML５とＣＳＳの本を買ってきて、エディターでヘッター、メニュー、本文のレイアウトを作り、中身を作っているところです。メニューのスタイルをＣＳＳで指定したのですが、本文のリストも当然同じになります。本文のスタイルを（できたらarticleなどごとに）別に指定しようと思いましたが本にはそこまで書いてありません。ネットで調べると、ul,liをclass,idで区分するようにという記述がありましたが、navのリストはこのスタイル、このarticleはこのと指定できないのでしょうか？
- nago8
- お礼率76% (10/13)
- ホームページ作成ソフト
- 回答数3
- ありがとう数3
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
＞HTMLの世界は、400ページほどの入門書を読めば素人でもある程度のウェブサイトを作れそうですが、 いえ、それよりは、はるかに少量の仕様書などちゃんとした資料に目を通しましょう。参考書は、本来は ・仕様書を読んで解すれば済むはずのことを誤解を交えて書かれている ・ごく一部をだらだらとページ数を埋めてある 程度のもので、著者自身も仕様書を読んだ、理解したとは思えないものばかりです。ま、私も経験がありますが「仕様書を読めば正確な知識が得られるものを書きはしない」理解していないから書ける(^^) ＞その一つ踏み込むとややこしい世界と感じています。セクターやカスケーディングという言葉もよく知らずにエディターだけで作れる範囲は限られてくるのでしょう。 これは逆にテキストエディターでないと作れないのです。オーサリングツールが対応できない!! ＞ウェブ作成ソフトを使えば簡単かもしれませんが、 オーサリングツールには、読解力はありません。たとえば、あなたが、 「body直下の本文(section)内の目次リスト(ul.index)については、ページの左に縦にブロックを並べたデザインで表示して、その下位の記事(section)内の目次リスト(ul.index)については、横に並べたい」と考えたとしましょう。 タブは、＿＿に置換してあります。 <body> ＿＿<header id="top"> ＿＿＿＿<h1>見出し</h1> ＿＿</header> ＿＿<section> ＿＿＿＿<p>段落</p> ＿＿＿＿<p>段落</p> ＿＿＿＿<p>段落</p> ＿＿＿＿<section> ＿＿＿＿＿＿<p>段落</p> ＿＿＿＿＿＿<p>段落</p> ＿＿＿＿＿＿<p>段落</p> ＿＿＿＿＿＿<ul class="index"> ＿＿＿＿＿＿＿＿<li><a href="#top">Top</a></li> ＿＿＿＿＿＿＿＿<li><a href="#abstract">要約</a></li> ＿＿＿＿＿＿</ul> ＿＿＿＿</section> ＿＿＿＿<ul class="index"> ＿＿＿＿＿＿<li><a href="#top">Top</a></li> ＿＿＿＿＿＿<li><a href="#abstract">要約</a></li> ＿＿＿＿</ul> ＿＿<section> </body> この様なシンプルなHTMLに手を加えなくても、セレクタをきちんと書くと、読みやすい理解しやすいスタイルシートが書けます。 p{text-indent:1em;} ul.index,ul.index li{ display:block;list-style:none; margin:0;padding:0; line-height:1.6em; } ul.index li{width:100px;height:1.6em;border:solid red 1px;} ul.index li a{text-decoration:none;text-align:center;display:block;heigh:100%;width:100%;} /* ↑indexというclassに属するliについて */ body>section>section>ul.index li{float:left;} /* ↑bodyの直接の子供であるsectionの直接の子供であるindex-classに所属するliについて */ body>section>ul.index{position:absolute;top:10px;left:5px;width:102px;border:solid 1px gray;} body>section{position:relative;} body>section>section>ul.index,section>p{margin-left:150px;} body>section ul.index li a:hover{background-color:yellow;} body>section>section ul.index li a:hover{background-color:lime;} このような、SEOとしてもファイルサイズからもシンプルなHTMLやCSSはオーサリングツールで書くより手書でないと効率は上がりませんし、この様なセレクタはオーサリングツールでは不可能でしょう。(出来なきゃないけど効率が・・・)
その他の回答 (2)
- naokita
- ベストアンサー率57% (1008/1745)
質問者さんの構造が（navとarticleの関係）わからないので article内にnavを設定すれば重複する可能性もありますし、 詳細度（どっちが優先）の問題もあります。 -------------------------------- idやclassでも良いのですが、 HTML5では、nav要素が直接利用できるので、 nav ul{～～} nav ul li{～～} だけ設定すると、その他（article内のリスト）はデフォルトで表示されます。 article内のリストも装飾したければ、 更に、 article ul{～～} article ul li{～～} -------------------------------- idなら <nav> <ul id="g-nav"> nav ul{～～} だけで良いところを #g-nav{～～} とする事も出来る訳です。
お礼
早々のご回答ありがとうございます。 <nav>はheaderの中だけです。CSS内で、ul,liをどう区分してよいかが分からずul,liの記述のみでしたからメニューと本文が同一スタイルになるのは当然の結果でした。 入門書だけの知識では全く不足でした。早速試みてみます。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
私も随分スタイルシートの参考書を読みましたが、CSS(カスケーディングSS)のカスケーディングについて説明してあるものは皆無と言って良いでしょう。 実は、カスケーディングスタイルシートが、HTML5ではデフォルトのスタイルシートとなったのは、やはり、その「カスケーディング機能」でしょう。 HTMLが、文書構造にしたがって正しくマークアップされていると、 『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 ) デザインのために ＞ul,liをclass,idで区分する 必要はないのです。 カスケーディングスタイルシートには、スタイルを適用する要素を指定するセレクタと言う仕組みとカスケーディングという優れた機能があります。 セレクタについては、 ★--CSS2の仕様書の邦訳--5. セレクタ ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/selector.html ) ★--CSS2.1仕様書(原文)--5 Selectors ( http://www.w3.org/TR/CSS2/selector.html ) カスケーディングについては、 ★--CSS2の仕様書の邦訳--6. 値の割り当て、カスケード処理、継承 ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/cascade.html ) ★--CSS2.1仕様書(原文)--6 Assigning property values, Cascading, and Inheritance ( http://www.w3.org/TR/CSS2/cascade.html ) を読むこと。 (現在ウエブ標準はCSS2.1とみなされていますが、CSS2.1の邦訳は知りません。) (カスケーディング、特に詳細度については随分と変更があります) HTML5だと思いますが・・ header nav ul{} section nav ul{} footer nav ul{} ★HTML5は、まだ最終草案段階です。いまだに流動的です。 ★articleは、完結した記事を示します。--言い換えると内部にheader,section,footerを持つような記事のセットです。ですから、登場するとなると <article> <header> </header> <section> </section> <footer> </footer> </article>・・この場合articleで括る必要はない または、 <header> </header> <section> <section> <article> <header> </header> <section> <section> </article> </section> <section> </section> </section> <footer> </footer> などでしょうね。なお、sectionには<h1>から<h6>の見出しを持つはず。 ★スタイルを適用させる要素は、セレクタで指定します。 全称セレクタ タイプセレクタ 子孫セレクタ 要素セレクタ 子供セレクタ 隣接セレクタ 一意セレクタ クラスセレクタ 擬似クラス 擬似要素 などがあり、それぞれに詳細度が定められていています。その合計とカスケーディングによって適用される要素が決まるということです。
お礼
早々にご回答いただきありがとうございます。 HTMLの世界は、400ページほどの入門書を読めば素人でもある程度のウェブサイトを作れそうですが、一つ踏み込むとややこしい世界と感じています。セクターやカスケーディングという言葉もよく知らずにエディターだけで作れる範囲は限られてくるのでしょう。ウェブ作成ソフトを使えば簡単かもしれませんが、エディターだけで作ることにこだわってもう少し頑張ってみようと思っています。
お礼
２回も詳細なご回答をいただき誠にありがとうございます。 リストのスタイルについて教えていただく中で、ウェブサイトを作るには何をどう勉強すればよいか学んだことが大きな収穫でした。 この機会がなかったなら、エディターを使うことを放棄していたかもしれません。その意味で非常に感謝しています。