リスト《ul・ol・li》のスタイルを編集・指定する方法|6つの疑似クラス、疑似要素で解決

HTML&CSS

リスト《ul・ol・li》とは

リストを作成するために必要なセレクタは以下の通りです。

  • ul
  • ol
  • li

基本的には上記のセレクタの組み合わせでリストを作成していきます。

中点「・」のリストを作りたい方は、

<ul>
    <li>文字</li>
    <li>文字</li>
    <li>文字</li>
    <li>文字</li>
    <li>文字</li>
</ul>

番号「1.2.3…」のリストを作りたい方は、

<ol>
    <li>文字</li>
    <li>文字</li>
    <li>文字</li>
    <li>文字</li>
    <li>文字</li>
</ol>

上記のように記載します。

リストの編集に便利な疑似クラス・疑似要素

リストのコーティング作業を行う上で欠かせないのは疑似クラス・疑似要素です。

そこで、様々なパターンを想定した上で、リストのカスタマイズでよく利用する疑似クラス・疑似要素をサンプルと共に紹介していこうと思います。

:first-child

疑似クラス《:first-child》は、始めの要素にスタイルを適用します。

リストの場合は、一つ目の《li》にスタイルが適用されます。

以下、画像は例です。

以下は画像のソースコードです。

.sample li:first-child{
	color:red;
}

:last-child

疑似クラス《:last-child》は、最後の要素にスタイルを適用します。

リストの場合は、最後の《li》にスタイルが適用されます。

以下、画像は例です。

以下は画像のソースコードです。

.sample li:last-child {
	color:green;
}

:nth-child(n)

疑似クラス《:nth-child(n)》は、始めの要素から数えて(n)番目にスタイルを適用します。

ただし、この間に存在する子要素もカウントに含まれます。

例えば、

  • (n)の中に「3」を入れると、三番目を指定
  • (n)の中に「3n」を入れると、偶数目を指定(子要素を含む)
  • (n)の中に「3n-1」を入れると、奇数目を指定(子要素を含む)

以下、画像は例です。

以下は画像のソースコードです。

.sample li:nth-child(3n) {
	color:blue;
}

:nth-of-type(n)

疑似クラス《:nth-of-type(n)》は、始めの要素から数えて(n)番目にスタイルを適用します。

前項の《:nth-child(n)》とは異なり、この間に存在する子要素をカウントに含みません。

例えば、

  • (n)の中に「3」を入れると、三番目を指定
  • (n)の中に「3n」を入れると、偶数目を指定
  • (n)の中に「3n-1」を入れると、奇数目を指定

以下、画像は例です。

以下は画像のソースコードです。

.sample li:nth-of-type(3n) {
	color:red;
}

::before

疑似要素《::before》は、要素の直前にスタイルを適用します。

リスト《li》を指定した場合は、各《li》の直前にスタイルが適用されます。

以下は画像のソースコードです。

.sample li{
	list-style:none;
}
.sample li::before {
        content: "»";
	color: red;
}

::after

疑似要素《::after》は、要素の直後にスタイルを適用します。

リスト《li》を指定した場合は、各《li》の直後にスタイルが適用されます。

以下は画像のソースコードです。

.sample li{
	list-style:none;
}
.sample li::after {
	content: "<";
	color: green;
}

リストのクイズ!基本をマスターしよう!

リスト《ul・ol・li》をカスタマイズしてみよう!

以下に該当する疑似クラスは何か?

以下に該当する疑似クラスは何か?

以下のリストのように小なり符号「<」を文字の直後に付けた。

以下に該当する疑似要素は何か?

以下に該当する疑似クラスは何か?

以下に該当する疑似クラスは何か?

以下のリストのように符号「»」を文字の直前に付けた。

以下に該当する疑似要素は何か?

Your score is

リストを編集・指定してみよう!

リストを編集する際には部分的なカスタマイズを必要とする場合があります。

例えば、

  • 最後のリストだけ下線を引きたくない
  • アイコンを何番目に配置したい

等の様々なリストのアイデアを解決に導いてくれるのが「疑似要素」と「疑似クラス」です。

もしも、特殊なカスタマイズをリストに施したいとお考えの方は紹介した方法を用いてカスタマイズを行ってみてはいかがでしょうか。

HTML&CSS
国内シェアNo.1「エックスサーバー
Word Press初心者向けのサーバーでホームページ・ブログが初めての方でも簡単に始めることができます。また、毎日、自動でバックアップをサーバーに保存してくれる他、昔からあるサーバーなので情報量が多く、トラブルになっても検索して自分で解決することができます。

1. WordPress簡単インストール
2. 毎日、自動バックアップ
3. 手動バックアップ可
4. 無料で復旧可能(14日)
5. 複数のドメイン運用可
6. 基本プランでも大容量
7. 手厚いサポート

迷ったらエックスサーバーにすれば大丈夫。
低コストから成長「カラフルボックス
低コストからホームページ・ブログを始められるサーバーです。サイトの成長に合わせてプランを変更することで高性能なサーバーへ徐々に切り替えることもできます。ホームページとサーバーが一緒に成長でき、低コストながら初心者の方向けの機能も豊富です。かんたん操作のコンパネによって初めての方でも簡単に始めることができます。

1. 低コストから始められる
2. かんたん操作のコンパネ
3. 自動バックアップ(14日)
4. マルウェア・改ざんを防止
5. サーバーは超高速
6. 充実したサポート

お試し運用ならカラフルボックス。
ぜろぶろぐ

コメント

タイトルとURLをコピーしました