ViewsTweetCheckPocketHTMLでは便利なリストタグがあります。何かを箇条書きで説明する場合や、手順を説明する際に使えて非常に便利です。ついて、紹介いたします。これからHTMLを勉強する予定の方は、ぜひ活用してみてください!スポンサーリンク目次1.HTMLリストの使い方とカスタマイズ方法1.並列リスト2.順序付きリスト3.定義リスト2.HTMLリストをCSSで装飾する1.リストマーク(ul)を変更する2.リストマーク(・)を消す方法3.リストマーク(ol)を変更する2.HTMLリストのデザイン参考ページ3選3.HTMLの勉強におすすめの本1.いちばんやさしいHTML5&CSS3の教本2.作りながら学ぶHTML/CSSデザインの教科書1.HTMLリストの使い方とカスタマイズ方法ここでは、HTMLリストの内容と簡単なカスタマイズ方法について紹介します。item)要素で示します。並列リストを作る際は簡単で、<ul>を始め</ul>で閉じます。リスト化したい各項目を<li>、</li>で囲みます。これにより、●から始まるリストが完成します。何かを箇条書きで説明したい場合に使えるリストです。<ul></ul>タグで囲まれた中に、さらに<ul></ul>タグを加えることで、二段の並列リストが作れます。使えば、順序付きのリストを作成することができます。<ol>で始めて</ol>で閉じて、リスト化したい項目を<li></li>で囲みます。これにより、1、2、3、というように順序付きのリストが作成できます。手順を説明する時などに使えるリストタグです。<ul></ul>タグの中に<ol></ol>を組み合わせることで、●のテーマに沿った、順序付きリストを作成できます。いくつか連続で手順の説明などがある場合におすすめの方法です。使えば、定義リストのような形で表示できます。<dl>で始め、</dl>で閉じます。リスト化したい各項目を<dt></dt>で囲みます。これにより、辞書のような定義リストを作れます。何か用語の説明などをしたい時に便利な便利なリストタグです。2.HTMLリストをCSSで装飾するHTMLリストは、ウェブサイトの情報を見やすく整理することを目的として利用するHTMLタグです。HTMLタグで記述するだけでも十分にその機能を果たしますが、デザイン性を考慮するならば、やはりCSSでの装飾はかかせません。参考にしつつ試してみてください。1.リストマーク(ul)を変更するulのリストマークはデフォルトでは黒丸となっています。CSSプロパティ「list-style-type」を使うことで別のマークに変更することができます。circle;}リストマーク(ul)の種類disc:黒丸(デフォルト)circle:白丸square:黒四角リストマークに画像を使用するリストマークは「list-style-image」で画像を設定することができます。オリジナルアイコンなどを適用することで大幅にデザイン性の幅が広がります。url(“../img/sample_img.png”);}2.リストマーク(・)を消す方法そもそもリストマークを消したい場合には「list-style-type」にnoneの値を入れます。none;}上記の記述をするとリスト化はされたままマークだけが消去されます。olの場合も同様の記述で消すことができます。リストマークが消えない時は「list-style-type」の値にnoneを設定してもリストマークが消えないことがあります。考えられるのはリストマークに背景画像が設定されているケースです。none;}上記のように背景画像を消す記述をしてみてください。リストマークが消えたか更新を押して確かめてみましょう。3.リストマーク(ol)を変更するolのリストマークも「list-style-type」で変更することができます。デフォルトの値にはdecimalが入れられています。decimal-leading-zero;}上記のように記述すると「01,02,03」という感じに二桁の数字表記になります。リストが10個以上連なる時に使うと見やすくなるでしょう。olリストで使える値ulのリストマークは三種類しかありませでしたが、olのリストマークはバリエーションが豊富です。olリストで使える値decimal:ただの数字(1,2,3)decimal-leading-zero:二桁の数字(01,02,03)lower-roman:小文字のローマ数字(i,ii,iii)upper-roman:大文字のローマ数字(I,II,III)cjk-ideographic:漢数字(一,ニ,三)lower-latin:小文字のアルファベット(a,b,c)upper-latin:大文字のアルファベット(A,B,C)hiragana:ひらがな(あ,い,う)katakana:カタカナ(ア,イ,ウ)hiragana-iroha:いろはにほへと(い,ろ,は)katakana-iroha:イロハニホヘト(イ,ロ,ハ)lower-greek:ギリシャ文字(α,β,γ)順序付けに使われる一般的なものもあれば、ちょっとマニアックなものまで幅広いマークが用意されています。ウェブサイトの趣向に合わせて変えてみるのも面白いかもしれません。2.HTMLリストのデザイン参考ページ3選HTMLリストのデザインはリストマークを変更するだけではありません。リスト全体を装飾することでずっとオシャレなデザインにすることもできるんです。全てのデザインを自分でやるのは大変ですから、サンプルを載せているページからコードをお借りして自分でアレンジする手法がおすすめです。デザインに悩んだ時に使わせてもらうことが多いサイトです。皆さんもぜひ参考にしてみてください。1おしゃれなリストデザイン8選グラデーションを使用したオシャレなリストやスタイリッシュなモノクロリストなど。目を引くようなデザインのコードを紹介しているページです。HTMLコードとCSSコードが見やすいように分けられているので参考にしやすいです。見やすくなるようにリストに区切り線をつけたものや付箋紙風のコードを紹介しているページです。COPYボタンを押すだけでクリップボードにコピーされるので楽ちんです!https://copypet.jp/326/3リストのデザインを装飾するCSSサンプル!HTMLの書き方もチェック柄や水玉模様のリストデザインのコードを紹介しています。画像を使わずにCSSだけでここまでのデザインを実現できてしまうんですね。CSSコードを表示ボタンを押すとコードが表示されます。https://benri-no1.com/list/3.HTMLの勉強におすすめの本ここでは、HTMLを勉強する際におすすめの本について紹介いたします。