CSSについての基本的な考え方と使い方

2023/10/28 15:21

このQ&Aのポイント

CSSの基本的な考え方として、要素に独自のスタイルを適用するためには、idやclassといった識別子を使用します。
idは要素ごとに一意の値を持つことができ、複数の要素に同じidを設定することはできません。一方、classは複数の要素に同じクラスを設定することができます。
classとidは同じ要素に共存することができ、それぞれ異なるスタイルを適用することができます。div要素内でclassとidを組み合わせて使用することも可能です。

ベストアンサー

ＣＳＳについて教えてください。ｉｄ，ｃｌａｓｓ

2014/01/04 16:50

<body> <div class="style1" id="header"> <div id="logo"><img src="images/banner.gif" alt="見本1"/></div> <ul id="globalNav"> <li><a href="index.html">見本2</a></li> </ul> </div> <div id="contentWrapper"> <div id="content"> <div id="primary"> ※参考書に上記の様な書き出し記述があるのですが、1.まず素人考えでコンテナの様な土台となるボックスはないと考えていいですか？ 2.ｉｄがｄｉｖに包含されいくつも出てきますが，ｉｄは一つしか使用できないため慎重にって事は無いのですか？固有を確定するために便利なのですか？ 3.div classのあとｉｄが使われている様に思うのですが、ｃｌａｓｓにもｉｄは使えますか？？的外れですみません

kiokio5893
お礼率73% (141/192)

レンタルサーバ・ASP
回答数2
ありがとう数11

みんなの回答 （2）
専門家の回答

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

ベストアンサー

zacky93141
ベストアンサー率17% (47/266)

2014/01/04 18:19 回答No.2

1 コンテナというものがどういったものをさすのかイマイチよくわかりませんが、テンプレートのようなものという意味でしょうか？ページ構造という意味でのテンプレートなら、「html デザインテンプレート」等で調べたら、参考になるかもしれません。 2 idは一つしか出てこない物に使う物です。グローバルナビを1つのページに2つも表示したりはしないでしょう？そういったものにはidを使うのが一般的です。逆に例えば、「太字にして文字を赤くする」といったことを定義した場合、そのような表現は2度3度出てくる可能性があるため、classで定義します。 3 >classにもidは使えますか？？これはもしかして、<class id="～"> みたいにするということでしょうか？それはできません。そもそもclassはidと同じくオプションでつけるものです。 <div id="～" class="～"> ならできますが。

質問者

補足 2014/01/05 00:15

大分、理解できてきました。<div id="～">は分かるような気がしますが（入れ物として・・） <class="～"> の意味がもう一つ理解できません・・・出来れば教えてください

その他の回答 (1)

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

2014/01/04 18:18 回答No.1

そんな糞参考書なんて捨てちゃいなさい!!!断言します。『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』と明記してあり、HTML5ではDIVは原則使わなくなります。「Note:Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable.( http://www.w3.org/TR/html5/grouping-content.html#the-div-element )-- 他の要素がない時の最後の最後の手段としてDIVを使え!!」　また、headerは、その文書のheaderと言う意味ですから、他の文書を内包する場合、当然headerは複数回現れます。 body 　header 　　h1 　　p 　section 　　h2 　　section 　　　h3 　　　article 　　　　header 　　　　section 　　　　footer 　footer という構造はありうるはずです。　また、globalNavはともかく、logoも複数回ありうるし、contentWrapperやcontent、primaryなんて文書構造のためとは思えないですね。 <body> 　<div class="header"> 　　<h1>見出し</h1> 　　<div class="nav"> 　　　<ol> 　　　　<li><a href="index.html">見本2</a></li> 　　　</ol> 　　</div> 　</div> 　<div class="section"> 　　<h2>本文見出し</h2> 　　<div class="section"> 　　　<h3>項見出し</h3> 　　</div> 　　<div class="section"> 　　　<h3>項見出し</h3> 　　　<div class="article"> 　　　　<div class="header"></div> 　　　　<div class="section"></div> 　　　　<div class="footer"></div> 　　　</div> 　　</div> 　　<div class="aside"> 　　　本文と直接関係ない記事　　</div> 　</div> 　<div class="footer"> 　</div> </body> とHTMLを書いたほうが良いのは、誰が見ても分かる。メンテナンスが容易な事は容易に想像できます。　HTML5だと <body> 　<header> 　　<h1>見出し</h1> 　　<nav> 　　　<ol> 　　　　<li><a href="index.html">見本2</a></li> 　　　</ol> 　　</nav> 　</header> 　<section> 　　<h2>本文見出し</h2> 　　<section> 　　　<h3>項見出し</h3> 　　</section> 　　<section> 　　　<h3>項見出し</h3> 　　　<article> 　　　　<header></header> 　　　　<section></section> 　　　　<footer></footer> 　　　</article> 　　</section> 　　<aside> 　　　本文と直接関係ない記事　　</aside> 　</section> 　<footer> 　</footer> </body> になります。これが『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。』の意味です。 id、CSSでは一意セレクタになりますが、これは詳細度がとても高く[0,1,0,0]ですので、スタイルの使い回しが難しくなります。classや属性セレクタだと[0,0,1,0]です。　idは、リンクゆjavascriptのターゲットなど限定して使用するほうがHTMLもスタイルシートも楽になります。先日回答した CSSについての質問ですが、左右のサイズ - Webデザイン・CSS - 教えて！goo( http://okwave.jp/qa/q8409414.html ) 　のNo.4のHTMLとCSSをご覧になると、class名とidがそのように使用されていることが分かると思います。class="nav"ですから、複数個所を同時に指定できます。 1.まず素人考えでコンテナの様な土台となるボックスはないと考えていいですか？　その文書にheader,section,footerしかないなら、それをまとめるDIVなんていりません!! 2.ｉｄがｄｉｖに包含されいくつも出てきますが，ｉｄは一つしか使用できないため慎重にって事は無いのですか？　　idは、リンクやjavsccriptのターゲットにならないのでしたら不用、煩雑になるだけです。 3.div classのあとｉｄが使われている様に思うのですが、classにもidは使えますか？？　質問の意味が分かりません。　<div class="nav" id="siteMap"></div> 　<div class="nav" id="contentTable"></div> 　なんてのは、当然存在します。　　div.nav{詳細度0,0,1,1}で両方統一したデザインにして、一方だけ#siteMap{詳細度0,1,0,0}で上書きしてしまうことも出来ますし、div.header div.nav{}、div.section div.nav{}と登場した場所で指定することも出来ます。　⇒5 セレクタ( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/selector.html ) 　⇒6 プロパティ値とカスケーディング、継承の割り当て( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/cascade.html ) 　まず、HTMLではデザインの事は考えず、ひたすら文書構造だけを記述する。CSSはその文書構造を元にセレクタを書く!! 　が「構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )」の基本です。　私も、仕様書が普及していない当時、マニュアルや参考書書いたことありますが、仕様書の邦訳が簡単に参照できるようになってからは手を出していません。だって、そこにすべて【正確に】書かれているのですからね。仕様書を読んでないか、無知でないと書けないです。その参考書を書かれた人も仕様書ろくに読んでないのがバレバレです。 class名は、HTML5の新しい要素( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements )名が良いです。意味や用途も含めて!! 　

質問者

補足 2014/01/05 00:26

1.2.の質問につきましてはご回答により大分理解できてきました。あと理解できないのが取り囲む”” ダブルクォーテーションの意味を知りたいのですが（どうもパソコンの根幹の様ですが・・・）

関連するQ&A

cssのulタグについて質問です。
cssの初心者ですがよろしくお願いします。以下内容です。 #headerの中にulタグで float:left; display: inline; を使って横のメニューを作りました。その下に幅いっぱいの画像を入れたかったので一度 <div class="clear"></div>で区切って<div id=""></div>を使って画像を入れました。そして、更にその下に上で使ったulタグをコピーしてclassを変更して新しい横のメニューを作ったのですが２段目の１番左の画像だけマウスオーバーの画像だけが小さくなってしまいました。（横に短くなっている）画像の大きさは元の画像もマウスオーバーの画像も同じ大きさです。 cssで指定している画像の大きさも間違いありません。試しに上のメニューを<div id="header">にして <div class="clear"></div>で区切って下のメニューを<div id="gnavi">にして分けてもその画像だけが小さくなっています。 htmlはこれです <div id="header"> <ul class="yama"> <li class="logo"><a href>ロゴ</a></li> <li class="kyouiku"><a href="">教育</a></li> <li class="syoukai"><a href="">紹介</a></li> <li class="shizen"><a href="">自然</a></li> <li class="mura"><a href="">村</a></li> </ul> <div class="clear"></div> <div class="line"></div> <ul class="rei"> <li class="name"><a href="">あいうえお</a></li> <li class="abc"></li> <li class="map"><a href="">マップ</a></li> </ul> </div> <li class="name"><a href="">あいうえお</a></li>これが問題のタグです。文字が足りなかったのでcssの一部ですが /* rei */ #header ul.rei{ float:left; } #header ul.rei li{ float:left; display: inline; } で　<li class="name">　のcssですが #header ul.rei li.name { display: block; width:295px; height:51px; } #header ul.rei li.name a { display: block; background: url(../img/name.jpg) no-repeat top left; text-indent:-9999px; height:100%; width:100%; } #header ul.rei li.name a:hover { display: block; text-indent:-9999px; height:100%; width:100%; background: url(../img/name_om.jpg) no-repeat top left; } という風にしています。初心者のため使い方が間違っているところが多々あると思いますがよろしくお願いします。
- ベストアンサー
- CSS
idかclassかどっちが良いでしょうか？
A.htmlページ <div> <ul><li>A</li><li>B</li><li>C</li></ul> </div> B.htmlページ <div> <ul><li>A</li><li>B</li><li>C</li></ul> </div> の様に各ページが同じHTMLで、各ページで別画像にする場合、どの様なCSSで書いていますか？また、理想ですか？　何故そうしますか？ページ数＝各画像数がこれより多い場合や管理面も含めてご回答をお願いします。＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝パターン１ <div class="nav" id="nav1"> <ul><li>A</li><li>B</li><li>C</li></ul> </div> /* 共通CSS */ .nav{height:200px; width:600px; background:no-repeat 50% 50%;} #nav1{background-image:url(～A.jpg);}/* A.html用 */ #nav2{background-image:url(～B.jpg);}/* B.html用 */ #nav3{background-image:url(～C.jpg);}/* C.html用 */ パターン２-１ <div id="nav1"> <ul><li>A</li><li>B</li><li>C</li></ul> </div> /* 共通CSS */ #nav1,#nav2,#nav3 {height:200px; width:600px; background:no-repeat 50% 50%;} #nav1{background-image:url(～A.jpg);}/* A.html用 */ #nav2{background-image:url(～B.jpg);}/* B.html用 */ #nav3{background-image:url(～C.jpg);}/* C.html用 */ パターン２-２ #nav1/* A.html用 */ {height:200px; width:600px; background:url(～A.jpg) no-repeat 50% 50%;} #nav2/* B.html用 */ {height:200px; width:600px; background:url(～B.jpg) no-repeat 50% 50%;} #nav3/* C.html用 */ {height:200px; width:600px; background:url(～C.jpg) no-repeat 50% 50%;}
- ベストアンサー
- CSS
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> </div> <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> <div id="sidebar"> </div> </div> <div id="footerbg"> <div id="footer">Footer</div> </div> </div> </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 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"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <link rel="stylesheet" href="st.css" type="text/css"> <title>タイトル</title> </head> <body id="TOP">  <div id="page">  <div id="head"> <h1><a href="index.html">Your Sitename</a></h1> </div>  <div id="menu"> <ul> <li><a href="sample.html">SAMPLE</a> <li><a href="link.html">LINK</a> <li class="on"><a href="text_menu.html">TEXT</a> <li><a href="index.html">INDEX</a> </ul> </div>  <div id="contents"> <h2>MENU</h2> <div class="text"> <h3>SHORT STORY</h3> <ul class="sub01"> <li><a href="text.html">STORY01</a> </ul> </div> <div class="text"> <h3>LONG STORY</h3> <h4>TITLE01</h4> <ul class="sub02"> <li><a href="text.html">1</a> <li><a href="text.html">2</a> </ul> </div> <div class="text"> <h4>ILLUST01</h4> <ul class="sub02"> <li><a href="img.html"><img src="img/banner01.gif" width="31" height="31" alt="画像名"></a> <li><a href="img.html"><img src="img/banner01.gif" width="31" height="31" alt="画像名"></a> </ul> </div> <div class="pagetop"><a href="#TOP">▲Top</a></div> </div>  <div id="foot"> <ul> <li> </ul> </div> </div> </body> </html>
- ベストアンサー
- HTML
【初心者】cssの背景画像について
cssを独学で勉強中なのですが、背景画像をなぜかうまく表示させられません。やりたいことは例えば↓のページのように、背景に画像を指定してメインのコンテンツは白を背景にするというよくあるレイアウトです。 http://www.spstore.com/ bodyの背景に画像を指定、メインコンテンツ(<div id="container">)の背景として白の画像をrepeatで指定というようにしているのですが、containerの背景画像が表示されません。初歩的な質問ですみませが、「ここがおかしい」という点と、もし可能であれば「ふつうはこうする」というのがあれば教えてください。以下作りかけですがcssとhtmlです。＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ * { margin: 0; padding: 0; font-size: 15px; } body { background-image:url(../img/washi.png); background-repeat: repeat; } #header { width: 750px; height: 50px; margin-right: auto; margin-left: auto; margin-top: 10px; } #container { width: 750px; margin-right: auto; margin-left: auto; background-image:url(../img/white.gif); background-repeat: repeat; } #footer { width: 750px; margin-right: auto; margin-left: auto; } #logo { width: 300px; float: left; } #global-nav ul li { clear: both; display:inline; list-style:none; width: 450px; margin-right: auto; margin-top: auto; margin-bottom: auto; } .local-menu { width: 200px; height: 150px; margin: 0px 25px; list-style-type: none; float: left; } .local-menu ul li { list-style-type: none; } ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ <!DOCTYPE hTML PUBLIC "-//W3C//DTD XhTML 1.0 Transitional//EN"> <html> <head> <link rel="stylesheet" type="text/css" href="css/common.css" /> </head> <body> <div id="header"> <div id="logo"> <img src="img/logo.gif" /> </div> <div id="global-nav"> <ul> <li>●</li> <li>●</li> <li>●</li> </ul> </div> </div> <div id="container">  <img src="img/img_main.jpg" alt="タイトル" />  <div id="map">  </div> <div class="local-menu"> <h3>●</h3> <ul> <li>●</li> <li>●</li> <li>●</li> <li>●</li> <li>●</li> <li>●</li> <li>●</li> </ul> </div> <div class="local-menu"> <h3>●</h3> <ul> <li>●</li> <li>●</li> <li>●</li> </ul> </div> <div class="local-menu"> <h3>●</h3> <ul> <li>●</li> <li>●</li> </ul> </div> <div class="local-menu"> <h3>●</h3> <ul> <li>●</li> <li>●</li> </ul> </div> <div class="local-menu"> <h3>●</h3> <ul> <li>●</li> <li>●</li> </ul> </div> </div> <div id="footer">  </div> </body> </html>
- 締切済み
- CSS
classの中の<a>タグにidを追加
div class内のaタグにidを追加できる方法がないかを模索しておりますが、検索では直に（タグ）にidやclassを追加する方法しか出てきませんでした。もしかしたら、突拍子もないことを言っているかもしれませんが JavaScriptに詳しい方アドバイス宜しくお願い致します。 id、classを割り当てるためのメソッド attr(属性, 属性値) $(function(){ $('ul').attr('id', 'style-ul'); $('li').attr('class', 'style-li');}
- ベストアンサー
- JavaScript
htmlとcssの文章構造、これは正しいですか？
<h1>にテキストを入れることが必須で、画像の上にマウスをどこに置いてもクリックすればトップページに行く状態にしたくて下記コードを作りました。下記コードはサンプルですが、   の間でhtmlやcssの文書構造にしたがって正しく書かれているか心配です。 <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title></title> <style> #container #header { width: 900px; height: 300px; margin: 0px auto; padding: 0px; top: 0px; left: 0px; float: left; display: block; } #container #header #sample{ height: 170px; position: relative; background-color: #333; /* goo質問用で実際は入れません。画像が表示されないため代わりに。 */ } #container #header #sample h1{ position: absolute; top: 0px; left: 150px; color: #fff; font-size: 11px; font-weight: bold; line-height: 130%; /* h1内の大文字と下の小さい文字との間隔をあけるため */ } #container #header #sample h1 span{ font-size: 22px; line-height: 220%; } #container #header #sample h1 a:link, #container #header #sample h1 a:visited, #container #header #sample h1 a:hover, #container #header #sample h1 a:active{ color: #fff; /* 画像の範囲内は全てリンクさせたいので、マウスにのせたときに色を変える必要はないので変化無し */ text-decoration: none; } #container #header #navigat { width: 900px; height: 40px; float: left; margin: 0px; padding: 0px; list-style-type: none; } #container #header #navigat li { width: 225px; float: left; } </style> </head> <body> <div id="container"> <div id="header">  <div id="sample"> <h1><a href=""><span>サンプル</span><br /><span>サンプルサンプル</span><br />サンプルサンプルサンプルサンプルサンプルサンプル<br />サンプルサンプルサンプルサンプルサンプルサンプル</a></h1> <a href=""><img src="" alt="" /></a> </div>  <ul id="navigat"> <li id=""><a href="">メニュー１</a></li> <li id=""><a href="">メニュー２</a></li> <li id=""><a href="">メニュー３</a></li> <li id=""><a href="">メニュー４</a></li> </ul> </div> </div> </body> </html>
- ベストアンサー
- HTML
cssでリストを横並びのセンタリング
現在、サイトをHTMLからHTML5に移行中なのですが、リストを横並びにするところまではできたのですが、それをセンタリングするにはどうしたら良いでしょうか？さまざまなサイトを巡ってやり方を拝見したのですが、目的とするものがありませんでした。現在のHTML  <div id="header"> <h1>サイトタイトル</h1> <p class="catch"><strong>サイト説明</strong></p> <div class="opening"> <h2><img src=".jpg" alt="表示されなかった画像の説明的な" width="900" height="260"></h2> </div> <ul class="nl clearFix"> <li class="active"><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> <li><a href="#">７</a></li> </ul> <hr class="none"> </div>  現在のcss /* --- ヘッダメニュー --- */ #header ul.nl { width: 100%; /* IE 6のために幅の指定が必要 */ margin: 0 auto; padding: 0; background-color: #ffffff; /* ヘッダメニューの背景色 */ list-style-type: none; text-align: center; } /* メニュー項目 */ #header ul.nl li { width: 124px; /* 項目の幅 */ float: left; line-height: 100%; } /* 最初の項目と最後の項目 */ #header ul.nl li.first, #header ul.nl li.last { width: 125px; /* 項目の幅 */ } わかりにくいと思いますが、上のように配置したいのです。まだイマイチ理解しきれていないのですが、回答していただければと思います。 ↓HPの現状。 http://dateme.web.fc2.com/top.html
- ベストアンサー
- CSS
img画像表示を短くしたい
lemmon-slider-0.2 　win8.1 pro 下記　img　45個　記述しています。表示が長いので、短くしたい。500個の場合もあります。ひまわり美術館 http://esd827.web.fc2.com/himawari/index.html 詳細　IE11 F12開発者ツール　参照 <div id="nav"> <div class="wrap"> <div id="container"> <div class="wrap"> <div id="slider3" class="slider"> <ul> <li><img src="images/01.jpg" alt=""></li> <li><img src="images/02.jpg" alt=""></li> <li><img src="images/03.jpg" alt=""></li> ----- cut -------- <li><img src="images/43.jpg" alt=""></li> <li><img src="images/44.jpg" alt=""></li> <li><img src="images/45.jpg" alt=""></li> </ul> </div>
- 締切済み
- JavaScript
cssのclassについて
よろしくお願いします。文字の背景に画像を入れて、更には文字の左側にチェックマークを入れるようにしたいため、cssやhtmlに下記の記述をしました。【css】 div#test {list-style-position: outside; list-style-image: url(img/checkmark.gif); background-image: url(img/mark.png); color: #ff0000; font-weight: bolder; width: 800px; font-size: 1.0em; line-height: 2.0; } 【html】 <div id="test"> <ul> <li>テキスト、テキスト000テキスト</li> </ul> </div> 上記ですと、確かに背景画像も文字の左側にもチェックマークが入るのですが、下記のようにclass指定すると表示されなくなってしまいますきっとclassの表記が間違っているのだと思いますが困っておりますご指導の程よろしくお願いします。【css】 .test {list-style-position: outside; list-style-image: url(img/checkmark.gif); background-image: url(img/mark.png); color: #ff0000; font-weight: bolder; width: 800px; font-size: 1.0em; line-height: 2.0; } 【html】 <ul class="test"> <ul> <li>テキスト、テキスト000テキスト</li> </ul> また、id名は一つしか使えないがclass名は同じものを複数使えるとお聞きしますが、上記で言うと"test"を複数使えると言う事でしょうか？きっと私は<p>は</p>で閉めるように、そのあたりが良く分かっていないのかも知れません。よろしくお願いします。
- ベストアンサー
- その他（プログラミング・開発）

CSSについての基本的な考え方と使い方

ＣＳＳについて教えてください。ｉｄ，ｃｌａｓｓ