解決済み

cssに詳しい方ご教授ください

  • すぐに回答を!
  • 質問No.7335484
  • 閲覧数53
  • ありがとう数0
  • 気になる数0
  • 回答数1
  • コメント数0

お礼率 66% (167/253)

cssは概念はなんとなーくわかるのですが、
以下のcssについて教えてください。

ul.list05 {
list-style-type: none;
margin: 8px 0 10px 0;
}
>ulの部分をlist05でspanなどで囲った部分でしょうか?

ul.list05 li {
padding-left: 0.6em;
text-indent: -1.3em;
font-size: 86%;
line-height: 140%;
}
>ulの部分をclassなどでlist05を指定したらliに反映される部分でしょうか?

ul.list05 li.list01-1 {
margin: 0 0 5px;
padding-left: 2.0em;
text-indent: -2.8em;
font-size: 86%;
line-height: 140%;
}

>ulをlist05でclassなどで指定し liはspanでlist01-1を定義すればいいのでしょうか?

初心者過ぎて質問の意味もわからないかもしれませんが、
ご教授いただけると幸いです。
よろしくお願いします。

質問者が選んだベストアンサー

  • 回答No.1

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

 質問の意味がいまひとつわかりませんので、あくまでスタイルを適用させる対象の要素の指定方法を説明します。
★基本的なことですが
1) HTMLは文書構造を記述するものです。 スタイルのためにHTMLは書きません。
2) スタイルは、HTMLを文書構造から適用させる要素を選択して指定します。

1)について
 たとえば、その部分がナビゲーションを示すのならHTMLでその文書構造を示しますが、ナビゲーションを示すための要素はHTML4.01以前はありませんでしたから、DIVとclass名を使って文書構造をマークアップします。
<div class="nav">
 <ul>
  <li><a href="../index.html">トップへ</a></li>
  <li><a href="../book">書籍</a></li>
  <li><a href="../product">製品</a></li>
 </ul>
</div>
 資料→『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』
 ※HTML5では、ナビゲーションを示す要素が追加される予定です。
  資料→HTML5 における HTML4 からの変更点/新しい要素 ( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements )
   ↑この説明も読むと良い

2) 文書構造を利用してスタイルを適用させる要素を選択肢(セレクター)を使って選択(セレクト)します。
div.nav<-- classにnavの値を持つdiv要素
div.nav ul<--- classにnavの値を持つdiv要素の子孫であるul
div.nav ul li<-- classにnavの値を持つdiv要素の子孫であるulの子孫のli
 ※半角スペースが子孫を示します。
 ※.navは、正確に言うとHTMLのclassの(空白で区切られた)値のリストのひとつにnavを持つもの
   <div class="nav sitmap">にも適用される。
div.nav>ul<--- classにnavの値を持つdiv要素の直接の子供のul
   子供ですから、孫や曾孫には適用されない。
div.nav ul li+li<-- classにnavの値を持つdiv要素の子供のulの子孫のliの次に並ぶli
   上のHTMLだと<li><a href="../book">書籍</a></li>と<li><a href="../product">製品</a></li>以降
div.nav ul li+li+li<-- classにnavの値を持つdiv要素の子供のulの子孫のliの次のliに並ぶli
   上のHTMLだと<li><a href="../product">製品</a></li>以降

div.nav ul li a<-- classにnavの値を持つdiv要素の子孫であるulの子孫の<a>

div.nav ul li a[href="/book"]<-- classにnavの値を持つdiv要素の子孫であるulの子孫の<a>のうちhref属性に/bookを持つもの
  <a href="../book">書籍</a>に適用されます。

★ホームページ作成ソフトのカテゴリで質問されていますが、ホームページ作成ソフト(Webオーサリングツール)では、
1) 文書を読み解き、構成する要素に分解して最適な要素名(タグ)を選択すること
2) HTMLの文書構造を理解して、目的の要素を特定するためにセレクタを記述する
二点は、原理的に不可能です。この二つだけは著者がするしかありません。ツールはせいぜい「綴りが間違ってないか」「閉じ忘れがないか」くらいしかできません。

★セレクタについては
 資料→セレクタ ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/selector.html )
   →セレクタ - CSS Dencitie ( http://www6.plala.or.jp/go_west/nextcss/ref/slctr/slctr.htm )
   →値の割り当て、カスケード処理、継承 ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/cascade.html#cascade )
 などをお読みください。

>ulの部分をlist05でspanなどで囲った部分でしょうか?
spanは内部に行内要素しかもてませんから、ulのようなブロック要素を囲むことはできません。

>ulの部分をclassなどでlist05を指定したらliに反映される部分でしょうか?
ulにclass名をつけた場合、その子孫要素としてしていします。
 ul.list05 li{}
 ul.list05 li+li{}2個目以降
 ul.list05 li+li+li{}3個目以降

>ulをlist05でclassなどで指定し liはspanでlist01-1を定義すればいいのでしょうか?
 そんなことしたら、後でデザインを変えるときHTMLをすべて直さなきゃならない。デザイン目的でHTMLに手を入れない!!これは大原則です。


★少し長いですが、参照先も含めてよく読んで、少しずつで良いので理解してください。HTMLもスタイルシートを書くのもとっても楽になります。
感謝経済
AIエージェント「あい」

こんにちは。AIエージェントの「あい」です。
あなたの悩みに、OKWAVE 3,500万件のQ&Aを分析して最適な回答をご提案します。

関連するQ&A
このやり方知ってる!同じこと困ったことある。経験を教えて!
このQ&Aにはまだコメントがありません。
あなたの思ったこと、知っていることをここにコメントしてみましょう。

その他の関連するQ&A、テーマをキーワードで探す

キーワードでQ&A、テーマを検索する

特集


感謝指数によるOK-チップ配布スタート!

ピックアップ

ページ先頭へ