はじめに
HTML＆CSS入門講座の第十三弾として、色々な箇条書きの書き方ついて紹介します。
この記事を読むと次の疑問について知ることができます。
●箇条書きとは？
●色々な箇条書きの書き方はどうするの？
・箇条書きの基本
・箇条書きの装飾の変更
・箇条書きのマーカー表示を変更
・箇条書きまわりの余白を調整
箇条書きの内側の余白を変更する場合
箇条書きの行間の隙間を変更する場合
・複数のul、olを入れ子にする方法
●Font Awesomeのアイコンを使った箇条書き
HTML＆CSS入門講座（12）では、Font Awesomerの基本の使い方について解説してきました。
ここでは、色々な箇条書きの書き方について深堀していきます。
箇条書きとは？
箇条書きは、買い物リスト、旅行の際の持ち物リストなど文書中で一１項目ごとに区切りをつけることにより文書のメリハリを付けられるし、あなた自身の考えをまとめるにも便利な記述法と思います。
箇条書きは、Microsoft WordやGoogleドキュメントだけでなく、色々なメモアプリであるOneNote、Google Keep、Evernote、Notionなどでも利用でき、文書を構成する重要な要素となっています。
この箇条書きは、Wikipediaによると最初に使ったのが「ガイウス・ユリウス・カエサル」と言う、
共和政ローマ末期の政治家、軍人であり、文筆家で、良く知られた「賽は投げられた」(alea jacta est)、「来た、見た、勝った」(veni, vidi, vici) 、「ブルータス、お前もか (et tu, Brute?)」などの特徴的な引用句
でしられています。
また、イギリスの宰相ウィンストン・チャーチルも箇条書きをよく多用したとされています。
TwitterやFacebookなどのSNSで発信する際には、考えをまとめる意味でも箇条書きを多用した文を活用するようにしたいと思っています。
ここで紹介するのは、Web文書で利用するための箇条書きで、HTMLを使った箇条書きの方法を紹介していきます。
色々な箇条書きの書き方
箇条書きの基本
HTMLで箇条書きを作るには、ulタグ、olタグ、liタグの３つを利用し、ulタグとliタグ、olタグとliタグをペアで使うのが基本です。
<div class="yokonarabi">
<!-- 中黒のリスト -->
<ul>
<li>リスト項目１</li>
<li>リスト項目２</li>
<li>リスト項目３</li>
</ul>
<!-- 数字のリスト -->
<ol>
<li>リスト項目１</li>
<li>リスト項目２</li>
<li>リスト項目３</li>
</ol>
</div>
.yokonarabi {
display:flex;
flex-direction:row;
} 結果は次の通り。
箇条書きの装飾の変更
箇条書きの周りを線で囲む、背景色を変更する、箇条書きの文字色を変えるなどを変更してみましょう。
<div class="yokonarabi1">
<!-- 中黒のリスト -->
<ul class="list01">
<li>リスト項目１</li>
<li>リスト項目２</li>
<li>リスト項目３</li>
</ul>
<!-- 数字のリスト -->
<ol class="list02">
<li>リスト項目１</li>
<li>リスト項目２</li>
<li>リスト項目３</li>
</ol>
.yokonarabi1 {
width:30%;
}
.yokonarabi1 {
display:flex;
flex-direction:row;
justify-content:space-between;
}
/* 太さ3pxの赤の破線で囲い背景をアクアにし、文字色を赤に設定 */
.list01 {
border:3px red dashed;
background-color: aqua;
color:red;
}
/* 太さ3pxの青の二重線で囲い背景を黒にし、文字色を白に設定 */
.list02 {
border:3px blue double;
background-color:black;
color:white;
} 結果は次の通り。
箇条書きのマーカー表示を変更
箇条書きのマーカーを変更するのは、「list-style-type」を使います。
この中から、マーカーを消す場合、マーカーが白丸、二桁の数字、漢数字、いろはにほへと順の５通りを並べて表示させてみました。
<div class="yokonarabi2">
<!-- マーカなしのリスト -->
<ul class="list03">
<li>リスト項目１</li>
<li>リスト項目２</li>
<li>リスト項目３</li>
</ul>
<!-- 白丸のリスト -->
<ul class="list04">
<li>リスト項目１</li>
<li>リスト項目２</li>
<li>リスト項目３</li>
</ul>
<!-- ２桁数字のリスト -->
<ol class="list05">
<li>リスト項目１</li>
<li>リスト項目２</li>
<li>リスト項目３</li>
</ol>
<!-- 漢数字のリスト -->
<ol class="list06">
<li>リスト項目１</li>
<li>リスト項目２</li>
<li>リスト項目３</li>
</ol>
<!-- いろはにほへと順のリスト -->
<ol class="list07">
<li>リスト項目１</li>
<li>リスト項目２</li>
<li>リスト項目３</li>
</ol>
</div>
.yokonarabi2 {
width:100%;
}
.yokonarabi2 {
display:flex;
flex-direction:row;
justify-content:space-between;
}
.list03 {
list-style-type: none;
}
.list04 {
list-style-type: circle;
}
.list05 {
list-style-type: decimal-leading-zero;
}
.list06 {
list-style-type: cjk-ideographic;
}
.list07 {
list-style-type: hiragana-iroha;
} 結果は次の通り。
箇条書きまわりの余白を調整
箇条書きの内側の余白を変更する場合
箇条書きの上下余白、左右余白の調整は、「padding」を使います。
<div class="yokonarabi3">
<ul class="list08">
<li>リスト項目１</li>
<li>リスト項目２</li>
<li>リスト項目３</li>
</ul>
<ul class="list09">
<li>リスト項目１</li>
<li>リスト項目２</li>
<li>リスト項目３</li>
</ul>
</div>
<div class="yokonarabi04">
<ul class="list10">
<li>リスト項目１</li>
<li>リスト項目２</li>
<li>リスト項目３</li>
</ul>
<ul class="list11">
<li>リスト項目１</li>
<li>リスト項目２</li>
<li>リスト項目３</li>
</ul>
</div>
.yokonarabi3 {
width:40%;
}
.yokonarabi3 {
display:flex;
flex-direction:row;
justify-content:space-between;
}
.yokonarabi04 {
width:40%;
}
.yokonarabi04 {
display:flex;
flex-direction:row;
justify-content:space-between;
}
.list08 {
background-color: aqua;
padding-top:50px;
border: 2px black solid;
}
.list09 {
background-color: aqua;
padding-bottom:50px;
border: 2px black solid;
}
.list10 {
background-color: aqua;
padding-left:50px;
border: 2px black solid;
}
.list11 {
background-color: aqua;
padding-right:50px;
border: 2px black solid;
} 結果は次の通り。
箇条書きの行間の隙間を変更する場合
次に行間の間を広げたい場合は、「li」に対してpadding-top、padding-botomを設定して変更します。
また、箇条書きの文の中の行間を変更したい場合は、「line-height」を使います。
<div class="yokonarabi05">
<ul class="list12">
<li>リスト項目１</li>
<li>リスト項目２</li>
<li>リスト項目３</li>
</ul>
<ul class="list13">
<li>リスト項目１リスト項目１リスト項目１リスト項目１リスト項目１リスト項目１</li>
<li>リスト項目２リスト項目２リスト項目２</li>
<li>リスト項目３リスト項目３リスト項目３</li>
</ul>
</div>
.yokonarabi05 {
width:50%;
}
.yokonarabi05 {
display:flex;
flex-direction:row;
justify-content:space-between;
}
.list12 {
width: 30%;
height: 100%;
background-color: aqua;
border: 2px black solid;
}
.list12 li {
padding-top:10px;
padding-bottom:10px;
}
.list13 {
width: 40%;
background-color: aqua;
border: 2px black solid;
}
.list13 li{
line-height: 2;
} 結果は次の通り。
複数のul、olを入れ子にする方法
ulタグ、olタグは入れ子にすることがで、入れ子にする方は、別個にulタグ、olタグを設定できます。
<div class="yokonarabi07">
<ul>
<li>一日目
<ul>
<li>A場所見学</li>
<li>B場所見学</li>
<li>宿泊所</li>
</ul>
</li>
<li>２日目
<ul>
<li>C場所見学</li>
<li>自由行動</li>
</ul>
</li>
<li>３日目 帰宅</li>
</ul>
<ol>
<li>一日目
<ol>
<li>A場所見学</li>
<li>B場所見学</li>
<li>宿泊所</li>
</ol>
</li>
<li>２日目
<ol>
<li>C場所見学</li>
<li>自由行動</li>
</ol>
</li>
<li>３日目 帰宅</li>
</ol>
<ol>
<li>一日目
<ul>
<li>A場所見学</li>
<li>B場所見学</li>
<li>宿泊所</li>
</ul>
</li>
<li>２日目
<ol>
<li>C場所見学</li>
<li>自由行動</li>
</ol>
</li>
<li>３日目 帰宅</li>
</ol>
</div>
.yokonarabi07 {
width:60%;
}
.yokonarabi07 {
display:flex;
flex-direction:row;
justify-content:space-between;
}結果は次の通り。
Font Awesomeのアイコンを使った箇条書き
Font Awesomeには、無料で利用できるアイコンが1,600種類以上あるので、これをお利用して箇条書きをしてみたいと思います。
<div class="yokonarabi06">
<ul class="list15">
<li><span class="list14"> リスト項目１</span></li>
<li><span class="list14"> リスト項目２</span></li>
<li><span class="list14"> リスト項目３</span></li>
</ul>
<ul class="list15">
<li><span class="list16"> リスト項目１</span></li>
<li><span class="list16"> リスト項目２</span></li>
<li><span class="list16"> リスト項目３</span></li>
</ul>
<ul class="list15">
<li><span class="list17"> リスト項目１</span></li>
<li><span class="list17"> リスト項目２</span></li>
<li><span class="list17"> リスト項目３</span></li>
</ul>
<ul class="list15">
<li><span class="list18"> リスト項目１</span></li>
<li><span class="list18"> リスト項目２</span></li>
<li><span class="list18"> リスト項目３</span></li>
</ul>
<ul class="list15">
<li><span class="list19"> リスト項目１</span></li>
<li><span class="list19"> リスト項目２</span></li>
<li><span class="list19"> リスト項目３</span></li>
</ul>
.yokonarabi06 {
width:100%;
}
.yokonarabi06 {
display:flex;
flex-direction:row;
justify-content:space-between;
}
.list15 {
list-style-type: none;
}
.list14:before {
font-family: "Font Awesome 5 Free";
content: '\f0f9';
font-weight: 900;
}
.list16:before {
font-family: "Font Awesome 5 Free";
content: '\f84a';
font-weight: 900;
color:skyblue;
}
.list17:before {
font-family: "Font Awesome 5 Free";
content: '\f1e2';
font-weight: 900;
color:green;
}
.list18:before {
font-family: "Font Awesome 5 Free";
content: '\f013';
font-weight: 900;
color:blue;
}
.list19:before {
font-family: "Font Awesome 5 Free";
content: '\f6c4';
font-weight: 900;
color:red;
}結果は次の通り。
おわりに
如何だったでしょうか？
箇条書きとは？、色々な箇条書きの書き方はどうするの？、箇条書きの基本、箇条書きの装飾の変更、箇条書きのマーカー表示を変更、箇条書きまわりの余白を調整、箇条書きの内側の余白を変更する場合、箇条書きの行間の隙間を変更する場合、複数のul、olを入れ子にする方法、Font Awesomeのアイコンを使った箇条書きなどについて解説してきました。
この記事があなたにとって少しでもお役に立てればこれほど嬉しいことはありません。
以上です。
コメント