CSS でリスト スタイル属性を設定する方法 (この記事を読むだけ)

CSS でリスト スタイル属性を設定する方法 (この記事を読むだけ)

リストスタイルのプロパティ

  • HTMLには、順序なしリストと順序ありリストの2種類のリストがあります。仕事では順序なしリストの方がよく使用されます。順序なしリストはulタグとliタグの組み合わせです。では、順序ありリストとは何でしょうか。 olタグとliタグの組み合わせは順序付きリストと呼ばれます。リストの基礎知識を簡単に説明します。この章では、主にリストのスタイルを設定する方法について説明します。リストが何であるかを知らない友人がいる場合は、W3schoolの公式サイトにアクセスして学習することをお勧めします。
  • よく使われるリストスタイル属性は、 list-style-typelist-style-positionlist-style-imagelist-style 4つです。ここでは、リストのよく使われる属性名について簡単に説明します。各属性値の具体的な使い方や導入については、以下で詳しく説明します。学習好きな友達は心配する必要はありません。

リストスタイルタイプ属性

  • list-style-type 属性の機能は、リストの前の箇条書きの種類を設定することです。
  • リストスタイルタイプの属性値の説明表。

プロパティ値説明する
なしリストの先頭から箇条書きを削除します。
ディスクリストの先頭の箇条書きを実線の円に設定します。
リスト ヘッダーの箇条書きを白抜きの円に設定します。
四角リストの先頭の箇条書きを実線の四角形に設定します。

属性値はなしです。

  • 次にlist-style-type属性値をnoneにしてみましょう。練習内容は以下のとおりです。class class値を.boxにして、リストの先頭の箇条書きを削除します。
  • list-style-type属性値をnoneに設定する練習をする前に、初心者が直感的に理解できるように、リストの前の箇条書きが何であるかを見てみましょう。

コードブロック

<!DOCTYPE html>
<html lang="ja">

<ヘッド>
    <メタ文字セット="UTF-8">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <meta http-equiv="X-UA-compatible" content="ie=edge">
    <title>リスト list-style-type 属性の値は none です。</title>
</head>
  
<本文>
    <ul>
        <li>成功とは他人を打ち負かすことではなく、自分自身を変えることです。 </li>
        <li>成功とは他人を打ち負かすことではなく、自分自身を変えることです。 </li>
        <li>成功とは他人を打ち負かすことではなく、自分自身を変えることです。 </li>
    </ul>
</本文>
</html>

結果プロット

箇条書きが何であるかがわかったので、まずはlist-style-type属性の値をnone設定してみましょう。

コードブロック

<!DOCTYPE html>
<html lang="ja">

<ヘッド>
    <メタ文字セット="UTF-8">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <meta http-equiv="X-UA-compatible" content="ie=edge">
    <title>リスト list-style-type 属性の値は none です。</title>
    <スタイル>
        。箱{
            リストスタイルタイプ: なし;
        }
    </スタイル>
</head>
  
<本文>
    <ul class="box">
        <li>成功とは他人を打ち負かすことではなく、自分自身を変えることです。 </li>
        <li>成功とは他人を打ち負かすことではなく、自分自身を変えることです。 </li>
        <li>成功とは他人を打ち負かすことではなく、自分自身を変えることです。 </li>
    </ul>
</本文>
</html>

結果プロット

これがわかるということは、マスターできたということですね。リストのlist-style-type属性値はnoneです。おめでとうございます。

属性値はディスク使用量です

ここでは、リストのlist-style-type属性値がdiscであることを説明します。リストのlist-style-type属性のデフォルト値はdiscです。注意深い庭師であれば、すでに発見しているでしょう。上には既成の例があるので、ここでは詳しく紹介しません。この属性値はdiscなので、スキップします。

属性値円の使用法

リストのlist-style-type属性値をcircle practice」として入力してみましょう。練習内容は次のとおりです。リストの先頭の箇条書きを白抜きの円に設定します。

コードブロック

<!DOCTYPE html>
<html lang="ja">

<ヘッド>
    <メタ文字セット="UTF-8">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <meta http-equiv="X-UA-compatible" content="ie=edge">
    <title>リストの list-style-type 属性値は円の練習です</title>
    <スタイル>
        。箱{
            リストスタイルのタイプ: 円;
        }
    </スタイル>
</head>
  
<本文>
    <ul class="box">
        <li>成功とは他人を打ち負かすことではなく、自分自身を変えることです。 </li>
        <li>成功とは他人を打ち負かすことではなく、自分自身を変えることです。 </li>
        <li>成功とは他人を打ち負かすことではなく、自分自身を変えることです。 </li>
    </ul>
</本文>
</html>

結果プロット

属性値は正方形です。

リストの先頭の箇条書きを実線の四角に設定するなど、 square練習のlist-style-type属性値を入力してみましょう。

コードブロック

<!DOCTYPE html>
<html lang="ja">

<ヘッド>
    <メタ文字セット="UTF-8">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <meta http-equiv="X-UA-compatible" content="ie=edge">
    <title>リストの list-style-type 属性値は正方形のプラクティスです</title>
    <スタイル>
        。箱{
            リストスタイルタイプ: 正方形;
        }
    </スタイル>
</head>
  
<本文>
    <ul class="box">
        <li>成功とは他人を打ち負かすことではなく、自分自身を変えることです。 </li>
        <li>成功とは他人を打ち負かすことではなく、自分自身を変えることです。 </li>
        <li>成功とは他人を打ち負かすことではなく、自分自身を変えることです。 </li>
    </ul>
</本文>
</html>

結果プロット

list-style-position プロパティ

list-style-position属性は、リストの前の箇条書きの位置を設定するために使用されます。list list-style-position属性には、 outsideinside 2 つの属性値があります。具体的な説明については、以下の属性値の説明表を参照してください。

list-style-position プロパティ値の説明表

プロパティ値説明する
リストの先頭の箇条書きを外側に設定します。
内部リストの先頭の箇条書きを内側に設定します。

属性値が範囲外です。

  • list-style-positionプロパティのoutside値を練習する前に、リストの前の箇条書きのデフォルトの位置を見てみましょう。初心者に直感的な印象を与えるために、作者はHTMLページ内のulタグとliタグにいくつかのスタイルを設定しています。
  • ulタグのスタイルは次のとおりです: width300pxピクセルに設定され、 heightさは150pxピクセル、 borderは ( 1pxピクセル、実線で表示、境界線の色は青) スタイルです。
  • ulタグ内のliタグは、次のようにスタイルを設定します: width280pxピクセル、 height30pxピクセル、 line-height高さは30pxピクセル、 borderは ( 1pxピクセル、実線で表示、境界線の色は赤)、スタイルは 1 に設定されています。
  • borderについての知識がなくても、学ぶのが好きなら、将来borderについての記事を書くことを心配する必要はありません。 borderについて学びたい場合は、W3school の公式 Web サイトにアクセスして勉強することができます。

コードブロック

<!DOCTYPE html>
<html lang="ja">

<ヘッド>
    <メタ文字セット="UTF-8">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <meta http-equiv="X-UA-compatible" content="ie=edge">
    <title>属性値の使用範囲外です</title>
    <スタイル>
        ul {
            幅: 300ピクセル;
            高さ: 150px;
            境界線: 1px実線 #00F;
        }
         ul li {
          
            幅: 280ピクセル;
            高さ: 30px;
            行の高さ: 30px;
            境界線: 1px 実線の赤;
        }
 
    </スタイル>
</head>
  
<本文>
    <ul>
        <li>成功とは他人を打ち負かすことではなく、自分自身を変えることです。 </li>
        <li>成功とは他人を打ち負かすことではなく、自分自身を変えることです。 </li>
        <li>成功とは他人を打ち負かすことではなく、自分自身を変えることです。 </li>
    </ul>
   
</本文>
</html>

結果プロット

これで、リストの前の箇条書きがデフォルトでulタグとliタグの間に配置されていることがはっきりとわかるはずです。リストの前の箇条書きのデフォルトの位置がわかったので、 list-style-position属性値をoutsideに設定する練習をしてみましょう。練習内容: HTMLページのリストの前の箇条書きを outside に設定します。

コードブロック

<!DOCTYPE html>
<html lang="ja">

<ヘッド>
    <メタ文字セット="UTF-8">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <meta http-equiv="X-UA-compatible" content="ie=edge">
    <title>属性値の使用範囲外です</title>
    <スタイル>
        ul {
            幅: 300ピクセル;
            高さ: 150px;
            境界線: 1px実線 #00F;
        }
         ul li {
          
            幅: 280ピクセル;
            高さ: 30px;
            行の高さ: 30px;
            境界線: 1px 実線の赤;
            リストスタイルの位置: 外側;
        }
 
    </スタイル>
</head>
  
<本文>
    <ul>
        <li>成功とは他人を打ち負かすことではなく、自分自身を変えることです。 </li>
        <li>成功とは他人を打ち負かすことではなく、自分自身を変えることです。 </li>
        <li>成功とは他人を打ち負かすことではなく、自分自身を変えることです。 </li>
    </ul>
   
</本文>
</html>

結果プロット

注: list-style-positionプロパティ値をoutsideに設定しても実行結果が変わらないのはなぜでしょうか? リストの前の箇条書きはデフォルトで外側にあり、リストの前の箇条書きの外側の位置はulタグとliタグの間にあるためです。

属性値は内部にあります。

  1. list-style-positionプロパティの値をoutsideに設定することで、リストの前の箇条書きの外側の位置が誰でもわかるようになります。次に、リストの前の箇条書きを inside に設定します。
  2. 実際に、 list-style-positionプロパティの値をinsideに入力して、リストの先頭の箇条書きの位置を inside に設定してみましょう。

コードブロック

<!DOCTYPE html>
<html lang="ja">

<ヘッド>
    <メタ文字セット="UTF-8">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <meta http-equiv="X-UA-compatible" content="ie=edge">
    <title>属性値は使用範囲内です</title>
    <スタイル>
        ul {
            幅: 300ピクセル;
            高さ: 150px;
            境界線: 1px実線 #00F;
        }
         ul li {
          
            幅: 280ピクセル;
            高さ: 30px;
            行の高さ: 30px;
            境界線: 1px 実線の赤;
            リストスタイルの位置: 内側;
        }
 
    </スタイル>
</head>
  
<本文>
    <ul>
        <li>成功とは他人を打ち負かすことではなく、自分自身を変えることです。 </li>
        <li>成功とは他人を打ち負かすことではなく、自分自身を変えることです。 </li>
        <li>成功とは他人を打ち負かすことではなく、自分自身を変えることです。 </li>
    </ul>
   
</本文>
</html>

結果プロット

注: list-style-position属性の値はinsideあり、リストの前の箇条書きの位置をliタグ (内側の位置) に設定します。

list-style-image プロパティ

list-style-image属性の機能は、リストの前の箇条書きを画像に設定することです。

list-style-image プロパティの説明表

属性値名説明する
URLリストの先頭の箇条書きの画像へのパスを設定します

では、 list-style-image属性の実践に入りましょう。実践内容は、リストの先頭の箇条書きを画像に置き換えることです。

コードブロック

<!DOCTYPE html>
<html lang="ja">

<ヘッド>
    <メタ文字セット="UTF-8">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <meta http-equiv="X-UA-compatible" content="ie=edge">
    <title>list-style-image 属性の使用</title>
    <スタイル>
        ul {
            幅: 300ピクセル;
            高さ: 150px;
            境界線: 1px実線 #00F;
        }
         ul li {
          
            幅: 280ピクセル;
            高さ: 30px;
            行の高さ: 30px;
            境界線: 1px 実線の赤;
            リストスタイルの画像: url(./img/001.png);
        }
 
    </スタイル>
</head>
  
<本文>
    <ul>
        <li>成功とは他人を打ち負かすことではなく、自分自身を変えることです。 </li>
        <li>成功とは他人を打ち負かすことではなく、自分自身を変えることです。 </li>
        <li>成功とは他人を打ち負かすことではなく、自分自身を変えることです。 </li>
    </ul>
   
</本文>
</html>

結果プロット

注意: 画像パスurl(./img/001.png);そうしないとレンダリングされません。画像パスは相対パスまたは絶対パスにすることができます。

リストスタイル属性

list-style属性は、( list-style-type属性、 list-style-position属性、 list-style-image属性) の短縮属性であり、( list-style-type属性、 list-style-position属性、 list-style-image属性) の機能を統合します。

list-style属性の実践に入りましょう。ここまでご覧いただいたので、この章の内容をすでにマスターできたと思います。

コードブロック

<!DOCTYPE html>
<html lang="ja">

<ヘッド>
    <メタ文字セット="UTF-8">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <meta http-equiv="X-UA-compatible" content="ie=edge">
    <title>リストスタイル属性の使用</title>
    <スタイル>
        ul {
            幅: 300ピクセル;
            高さ: 150px;
            境界線: 1px実線 #00F;
        }
         ul li {
          
            幅: 290ピクセル;
            高さ: 30px;
            行の高さ: 30px;
            境界線: 1px 実線の赤;
            リストスタイル: なし url(./img/001.png);
        }
 
    </スタイル>
</head>
  
<本文>
    <ul>
        <li>成功とは他人を打ち負かすことではなく、自分自身を変えることです。 </li>
        <li>成功とは他人を打ち負かすことではなく、自分自身を変えることです。 </li>
        <li>成功とは他人を打ち負かすことではなく、自分自身を変えることです。 </li>
    </ul>
   
</本文>
</html>

結果プロット

注: list-style属性の値は12 、または3になります。順序は問いません。理解できない場合は、例を試してください。学習するには、怠けずにどんどん試してみる必要があります。

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

<<:  光沢のある輝くウェブサイトデザインの感動的なデザイン例

>>:  bodyタグの主な属性の概要

推薦する

CSS でマウスの位置をマッピングし、マウスを動かしてページ要素を制御する (サンプル コード)

マウスの位置をマッピングしたり、ドラッグ効果を実装したりすることは、 JavaScriptで行うこと...

フロントエンドの状態管理(パート2)

目次1. 再出発1.1. ストア(司書) 1.2. 状態(書籍) 1.3. アクション(図書貸出リス...

VmWareでcentos7をインストールするときにインターネットにアクセスできない問題の解決策

Centos7 のインストール時に VmWare がインターネットにアクセスできない場合はどうすれば...

SQLシリアル番号取得コード例

この記事は主にSQLシリアル番号取得コード例を紹介します。記事ではサンプルコードを詳細に紹介しており...

MySQL レプリケーションの原理と実際のアプリケーションの詳細な説明

この記事では、例を使用して、MySQL レプリケーションの原理と実際のアプリケーションについて説明し...

JavaScript でイベントのバブリングを防ぐ方法

注意すべき点は、イベントバブリング自体の特性上、メリットだけでなくデメリットも生じるということです。...

MySQLソートにおけるCASE WHENの使用例

序文以前のプロジェクトでは、SQL の CASE WHEN ソート関数が使用されました。ではブログメ...

CentOS 8 Zabbix 4.4 インストール ガイド

Zabbix サーバー環境プラットフォームZABBIX バージョン 4.4セントOS8 MySQL ...

VPS はオフライン ダウンロード サーバーを構築します (ネットワーク ディスクの時代以降)

モチベーション学習の必要性から、海外のサーバーメーカー(どこのメーカーかは言いません)のVPSサービ...

HTMLのテーブルの内容は中央に水平と垂直に表示されます

CSSスタイルファイルで指定 #class td /*表のテキストを左右上下に揃えるように設定する*...

Dockerコンテナでユーザーを分離する方法

前回の記事「Docker コンテナの UID と GID を理解する」では、Docker コンテナ内...

CSSマスクのフルスクリーン中央揃えを実装する方法

具体的なコードは次のとおりです。 <スタイル> #トーストローダーフルスクリーン{ 高さ...

CSSのline-heightとheightの詳細な説明

最近、CSS インターフェースに取り組んでいるときに、line-height と height とい...

MySQLの文字列インターセプト関連関数の概要

この記事では、MySQL の文字列インターセプト関連の機能を紹介します。具体的な内容は以下のとおりで...

CSS3 は、跳ねるボール効果を実現する Web アニメーションを作成します。

基本的な準備この実装には、クラス名が ball である単純な div が必要です。 HTMLコード:...