『箇条書きってなにか特別な書き方があるの?普通に書けばいいんでしょ?』こんにちは、AWAKOJIです。今日も薬剤師しながらプログラミングの勉強をしています。ブログを書いていて、話の内容をまとめたいとき箇条書きにする場合があります。そんなときは、迷わずHTMLの<ol>、<ul>、<li>タグを活用するようにしましょう。この記事では、箇条書きをするときに使用する<ol>、<ul>、<li>について解説します。この記事は5分ほどで読めるのでぜひご覧ください。簡単に理解できるように下手ですが漫画を書きました。普通に書いちゃダメなの?<ol>、<ul>、<li>タグ応用編まとめ漫画~箇条書きするなら<ol>、<ul>、<li>を活用せよ以上、箇条書きをするときに使用する<ol>、<ul>、<li>について簡単に漫画で説明しました。このタグを使用すれば、ブログ記事がしっかりまとめられていると認識されSEOに有利です。僕はこのことを知らずにしばらく使っていませんでした・・・ここからは文章で、<ol>、<ul>、<li>について解説します。基本から応用編までまとめたのでぜひご覧ください。箇条書きをするときに使うHTMLタグは<ol>、<ul>、<li>になります。使うときは、1<ol>と<li>、2<ul>と<li>がセットです。基本構造をご覧ください。1<ol>と<li>です。<ol><li>おはよう</li><li>こんにちは</li><li>こんばんは&lt;/li></ol>おはようこんにちはこんばんは次に、2<ul>と<li>です。<ul><li>おはよう</li><li>こんにちは</li><li>こんばんは</li></ul>おはようこんにちはこんばんは違いをわかっていただけたと思います。1は、<ol>で全体をはさみ、箇条書きの項目をそれぞれ<li>ではさみます。項目に番号がついてブラウザに表示されます。2は、<ul>で全体をはさみ、箇条書きの項目をそれぞれ<li>ではさみます。項目に番号はつかずにブラウザに表示されます。item(項目)という意味です。下のブラウザ表示は使わずに書いています。見た目は一緒ですよね?それでも、箇条書きを書くときは<ol><ul><li>を使うようにすべきです。人間にとって同じでも、コンピュータにとっては違うためです。コンピュータはBを見たとき、ただの文字の羅列だと認識します。Aを見たとき、文字が箇条書きになっていると認識します。その結果、Aの方が、内容が整理されていると判断され、googleなどの検索で、Aが上位に入るわけです。<ol>、<ul>、<li>タグ応用編ここからは応用編です。<ol>、<ul>、<li>を使っていろんな箇条書きができるようになりましょう!箇条書きの中に箇条書きul箇条書きの中にol箇条書きを書きます。<ol><li>スパゲティ</li><li>ラーメン</li><ul><li>しょうゆラーメン</li><li>とんこつラーメン</li><li>しおラーメン</li></ul><li>うどん</li></ol>スパゲティラーメンしょうゆラーメンとんこつラーメンしおラーメンうどん次に、ul箇条書きの中にol箇条書きを書きます。<ul><li>スパゲティ</li><li>ラーメン<ol><li>しょうゆラーメン</li><li>とんこつラーメン</li><li>しおラーメン</li></ol></li><li>うどん</li></ul>スパゲティラーメンしょうゆラーメンとんこつラーメンしおラーメンうどんul箇条書きの中にul箇条書きやol箇条書き、ol箇条書きの中にul箇条書きやol箇条書きを書くことができます。注意すべきなのはあくまでulタグやolタグの直下には、liタグを置くことです。箇条書きの中に箇条書きを書く場合は、liタグの中に、ulタグやolタグを入れるようにしましょう。数字ではなくアルファベットolタグで項目の前に表示されるのは数字です。数字以外のものを表示する方法があります。type=”a”>とすると小文字のアルファベットを表示させることができます。type=”a”><li>スパゲティ</li><li>ラーメン</li><li>うどん</li></ol>スパゲティラーメンうどんこのほかにも下記のものを表示できます。type=”I”>で大文字のローマ数字(I.II.III.)逆数字にするolタグを使えば、1からの数字でカウントアップされます。これを大きい数字からカウントダウンされるように示してみましょう。reversed>とすれば、カウントダウンされます。途中から数字<ol>を使って表示される数字が途中からになるようにしてみます。start=”2”>とすれば、2から表示されます。途中からの数字でカウントダウンは以下の通りです。start=”5”>とすれば、5からの数字でカウントダウンされます。ちなみにカウントダウンの場合、1の次は0,-1,-2となっていきます。数字を飛ばしたい場合は以下の通りです。value=”3”>とすることで2の表示を飛ばすことができました。先頭記号を変えるulタグのときに先頭に表示される記号を別の記号に変えたいときはCSSを書く必要があります。<ul><li>スパゲティ</li><li>ラーメン</li><li>うどん</li></ul>HTMLの表示は、基本通りです。}スパゲティラーメンうどん黒丸だったのが、円になりました。circle以外にもいろいろがあります。list-style-typeプロパティの値をnoneとすれば、なくせます。}スパゲティラーメンうどんlist-style-typeプロパティの値をsquareとすれば、四角にできます。}スパゲティラーメンうどん好きな画像を使いたい場合はlist-style-imageプロパティを使います。}スパゲティラーメンうどんlist-style-positionプロパティの値をinsideにするか、outsideにするかで、先頭の記号の位置を少し変えることができます。}スパゲティラーメンうどん微妙な違いですが、insideなら少し内側、outsideなら少し外側にずらすことができます。初期値はoutsideになっています。設定しなくても外側になっているということです。まとめこの記事をまとめます。type=”a”)ulの記号を変えることができる(listy-style-type)画像にすることもできる(list-style-image)位置を変えることもできる(list-style-position)箇条書き一つとっても、HTML&CSSは奥が深いですね。こだわり過ぎて、箇条書きの表示に時間がとられるもの問題です。