html ulタグについて。

現在wordpressでブログを書いています

ulタグなどを使ってリストを2個作りたいのですが、両方違うデザインにしたいのでそれぞれCSSを変えたいのですが、
その場合どのように指定すればいいのですか？

以下に貼ってあるコードを例としてあげると、

一番最初のリストで[CSS①]のコードを使いたいと思った時、以下の何も特定していない[HTML]コードを貼り付けた場合、
もう一つの[CSS②]コードが反応しないためにはどうすればいいですか？
わかりづらくてすみません。よろしくお願いします。

一応使いたいと思っているコードを貼っておきます

[HTML]

<ul> <li>HTML</li> <li>CSS</li> <li>Photoshop</li> <li>Illustrator</li> </ul>

[CSS①]

ul, ol {
background: #fcfcfc;/背景色/
padding: 0.5em 0.5em 0.5em 2em;/ボックス内の余白/
border: solid 3px gray;/線の種類太さ色/
}

ul li, ol li {
line-height: 1.5; /文の行高/
padding: 0.5em 0; /前後の文との余白/
}

[CSS②]

ul {
border: solid 2px #ffb03f;
padding: 0.5em 1em 0.5em 2.3em;
position: relative;
}

ul li {
line-height: 1.5;
padding: 0.5em 0;
list-style-type: none!important;/ポチ消す/
}

ul li:before {/疑似要素/
font-family: "Font Awesome 5 Free";
content: "\f00c";
position: absolute;
left : 1em; /左端からのアイコンまで/
color: #ffb03f; /アイコン色/
}

kei344

2018/02/27 06:59

質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

行動規範の内容に同意します

回答2件

ベストアンサー

HTMLにclass="..."という文字列を追加しましょう。

html
1<ul class="list1">
2  <li>HTML</li>
3  <li>CSS</li>
4  <li>Photoshop</li>
5  <li>Illustrator</li>
6</ul>
7
8<ul class="list2">
9  <li>HTML</li>
10  <li>CSS</li>
11  <li>Photoshop</li>
12  <li>Illustrator</li>
13</ul>

ここではlist1とlist2にしましたが、header-listとか、適当な名前をつければOKです。

CSSでは、ulの代わりに、.list1と.list2を使ってスタイルを書いてください。

css
1.list1 li, .list1 li {
2  line-height: 1.5; /*文の行高*/
3  padding: 0.5em 0; /*前後の文との余白*/
4}
5
6.list2 li {
7  line-height: 1.5;
8  padding: 0.5em 0;
9  list-style-type: none!important;/*ポチ消す*/
10}

このように、class="..."で名前をつけて、その名前に対してスタイルを書くことで、別々のスタイルを使えるようになります。

こちらにサンプルを用意しました。
https://codepen.io/hoo-chan/pen/yvQXwo

投稿2018/02/27 06:55

退会済みユーザー

総合スコア0

greenapp

2018/02/27 10:46

わかりやすい説明ありがとうございます cssではulの代わりに.list1を使うとのことで、実際に質問の際に例に挙げた[CSS①]で試したのですが、上手く反映しませんでした。 " ul, ol { "の部分を" .list,ol { "と書き換え、 " ul li, ol li { "の部分を".list1 li, ol li {"と書き換えました。何が問題点か教えていただきたいです

退会済みユーザー

2018/02/27 12:05 編集

「list1」は、私が勝手に名前をつけたもので、大切なのは、HTMLとの対応です。まずは、HTMLを確認してください。スタイルを変えたいところに <ul class="list1"> のように class を書きましたか？次に、CSS を確認してください。 HTML で class に指定した値（私の例では list1）を使って .list1 {...ここにスタイル} のように書きます。これで「HTML の class="list1" のスタイルは ... です」という動作になります。

行動規範の内容に同意します