リストスタイルのプロパティ
リストスタイルタイプ属性
|
プロパティ値 | 説明する |
---|---|
なし | リストの先頭から箇条書きを削除します。 |
ディスク | リストの先頭の箇条書きを実線の円に設定します。 |
丸 | リスト ヘッダーの箇条書きを白抜きの円に設定します。 |
四角 | リストの先頭の箇条書きを実線の四角形に設定します。 |
属性値はなしです。
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
属性には、 outside
とinside
2 つの属性値があります。具体的な説明については、以下の属性値の説明表を参照してください。
list-style-position プロパティ値の説明表
プロパティ値 | 説明する |
---|---|
外 | リストの先頭の箇条書きを外側に設定します。 |
内部 | リストの先頭の箇条書きを内側に設定します。 |
属性値が範囲外です。
list-style-position
プロパティのoutside
値を練習する前に、リストの前の箇条書きのデフォルトの位置を見てみましょう。初心者に直感的な印象を与えるために、作者はHTML
ページ内のul
タグとli
タグにいくつかのスタイルを設定しています。ul
タグのスタイルは次のとおりです: width
は300px
ピクセルに設定され、 height
さは150px
ピクセル、 border
は ( 1px
ピクセル、実線で表示、境界線の色は青) スタイルです。ul
タグ内のli
タグは、次のようにスタイルを設定します: width
は280px
ピクセル、 height
は30px
ピクセル、 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
タグの間にあるためです。
属性値は内部にあります。
list-style-position
プロパティの値をoutside
に設定することで、リストの前の箇条書きの外側の位置が誰でもわかるようになります。次に、リストの前の箇条書きを inside に設定します。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
属性の値は1
、 2
、または3
になります。順序は問いません。理解できない場合は、例を試してください。学習するには、怠けずにどんどん試してみる必要があります。
以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。
<<: 光沢のある輝くウェブサイトデザインの感動的なデザイン例
マウスの位置をマッピングしたり、ドラッグ効果を実装したりすることは、 JavaScriptで行うこと...
目次1. 再出発1.1. ストア(司書) 1.2. 状態(書籍) 1.3. アクション(図書貸出リス...
Centos7 のインストール時に VmWare がインターネットにアクセスできない場合はどうすれば...
この記事は主にSQLシリアル番号取得コード例を紹介します。記事ではサンプルコードを詳細に紹介しており...
この記事では、例を使用して、MySQL レプリケーションの原理と実際のアプリケーションについて説明し...
注意すべき点は、イベントバブリング自体の特性上、メリットだけでなくデメリットも生じるということです。...
序文以前のプロジェクトでは、SQL の CASE WHEN ソート関数が使用されました。ではブログメ...
Zabbix サーバー環境プラットフォームZABBIX バージョン 4.4セントOS8 MySQL ...
モチベーション学習の必要性から、海外のサーバーメーカー(どこのメーカーかは言いません)のVPSサービ...
CSSスタイルファイルで指定 #class td /*表のテキストを左右上下に揃えるように設定する*...
前回の記事「Docker コンテナの UID と GID を理解する」では、Docker コンテナ内...
具体的なコードは次のとおりです。 <スタイル> #トーストローダーフルスクリーン{ 高さ...
最近、CSS インターフェースに取り組んでいるときに、line-height と height とい...
この記事では、MySQL の文字列インターセプト関連の機能を紹介します。具体的な内容は以下のとおりで...
基本的な準備この実装には、クラス名が ball である単純な div が必要です。 HTMLコード:...