- みんなの回答 (2)
- 専門家の回答
みんなの回答
- ORUKA1951
- ベストアンサー率45% (5062/11036)
それは、先に紹介した仕様書見ればすぐ分かるはずです。 ul{border:solid black 40px;} ul li{font-weight:bold;} ul li{background-color:yellow;} ul+ul li{background-color:transparent;text-decoration:underline;} で、分かるようにふたつのul要素が直接隣接しているなら、 <ul> <li>テキスト1</li> <li>テキスト1</li> <li>テキスト1</li> </ul> <ul> <li>テキスト1</li> <li>テキスト1</li> <li>テキスト1</li> </ul> サンプル ★タブは_に置換してあるので戻す。 ★文字コードはShift_JIS ★Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html# ) でチェック済みのHTML4.01strict + CSS2.1です。 きちんと順を追って身につけるほうが、ずっと早く効率的に身につけられます。結果だけみてもほとんど役に立たないと思う。回りは黒くなくてよいとか、巾が違うとか・・その都度聞くわけには行かないでしょ。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> _<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> _<title>サンプル</title> _<meta name="author" content="ORUKA1951"> _<meta http-equiv="Content-Style-Type" content="text/css"> _<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > _<link rel="START" href="../index.html"> _<style type="text/css"> <!-- html,body{margin:0;padding:0;} h1,h2,h3,h4,h5,h6{margin:0;line-height:1.6em;} p{text-indent:1em;} div.header,div.section,div.footer{width:90%;min-width:630px;max-width:900px;margin:0 auto;padding:5px;} ul{border-style:solid;border-color:black;border-width:40px 100px 0 100px;width:8em;margin:0 auto;padding:50px 20px;} ul+ul{border-width:0 100px 40px 100px;} ul li{font-weight:bold;margin:5px 0;} ul li p{display:inline-block;background-color:yellow;margin:0;} ul+ul li p{background-color:transparent;text-decoration:underline;} --> _</style> </head> <body> _<div class="header"> __<h1>タイトル</h1> __<p>このページでは・・・・</p> _</div> _<div class="section"> __<h2>見出し</h2> __<p>本文はsection</p> __<ul> ___<li><p>テキスト1</p></li> ___<li><p>テキスト2</p></li> ___<li><p>テキスト3</p></li> __</ul> __<ul> ___<li><p>テキスト1</p></li> ___<li><p>テキスト2</p></li> ___<li><p>テキスト3</p></li> __</ul> _</div> _<div class="footer"> __<h2>文書情報</h2> __<dl class="documentHistry"> ___<dt id="FIRST-PUBLISHED">First Published</dt> ___<dd>2013-03-03</dd> __</dl> _</div> </body> </html>
- ORUKA1951
- ベストアンサー率45% (5062/11036)
で何をされたいか分かりませ名。 text-decoration:underline;とかbackground-color:yellow;なのか >基本的なことが分からず困っています。 きちんと、HTML、CSSを基本から順序立てて学べば難しいものではありません。 完全な理系の勉強方法になります。 結果だけは探せばいくらでもありますが・・。多分使えないでしょう。 きちんと説明すると 1) セレクタを用いて、スタイルを適用したい要素を特定して、スタイルを指定します。 2) 背景色を指定するプロパティはbackground-color:です。 アンダーラインは、text-decoralion:underlineになります。 ※セレクタの指定方法は、セレクタ( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/selector.html )にあります。 ※それぞれのプロパティは 'background-color'( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/colors.html#propdef-background-color ) 'text-decoration'( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/text.html#propdef-text-decoration ) を参照してください。 まず 1と2の間辺りからはじめるCSS講座( http://www6.plala.or.jp/go_west/beginner/css/ ) のあたりから
補足
説明不足ですいません。 リストタグ(<ul><li>)を使って、黒太字で黄色の背景を指定するCSSの書き方 もうひとつも、同じく リストタグを使って、黒太字で下に赤い線を指定するCSSの書き方 この2つが知りたいです。