参考/参照この記事は、HTMLとCSSだけで箇条書きリスト(ul、ol、li)の色々な用途で使用可能なおしゃれなコーティングデザインをいくつか紹介いたします。ブログやHPで要点などをまとめる時にでも使って下さい。初心者の方でもあまり難しく考えないで済む様にHTML内にスタイルを記述しているので全て丸々コピペでOKです。:下記を読んで下さいHTMLとCSSを別々にしてサイト全体に反映させたい場合は、classを外して反映させたい要素名に変更してから<style>〜</style>の中身を切り抜いてスタイルシートに記述して下さい。(ある程度マークアップ言語のリテラシーがある方じゃないと崩れちゃうかもしれないです。一つ一つに個別でclassを付けてHTMLに記述しています。基本的に被らなそうなクラス名していますが、classが重複してしまうとスタイルが崩れる場合があるのでご注意下さい。その場合はclass="この部分"を任意のものにすれば解決します。WordPressでリストを作る方法(HTML記述コピペあり)については以下の記事からWordPressでリストを作る方法(HTML記述コピペあり)今回はWordPressで簡単にリストを作成する方法とHTMLの記述の仕方を紹介致します。リストメニュー風(横)基本的なリストまずは基本的な箇条書きリストの書き方とデザインです。下記が実際の見え方です。リスト1リスト2リスト3リスト4リスト5下記のHTML(CSS付き)をコピペして下さい。<ul><li>リスト1</li><li>リスト2</li><li>リスト3</li><li>リスト4</li><li>リスト5</li></ul>数字インデント(点)が数字に置き換わります。リスト1リスト2リスト3リスト4リスト5<ol><li>リスト1</li><li>リスト2</li><li>リスト3</li><li>リスト4</li><li>リスト5</li></ol>インデント(点)無しインデント(点)が無くなります。none;}</style>横並び横並びになります。inline;}</style>枠線ありシンプルに黒い枠線をつけただけ。枠線を二重にできます。枠線を点線にできます。/*枠の色と線のタイプを変えたい場合はここ*/}</style>背景色あり背景に色をつけれます。上下にボーダーラインができます。1.5em;}</style>簡単シンプルデザイン次にシンプルで簡単かつおしゃれなデザインの箇条書きリストです。影付きで立体的なリストボックスです。#000000;}</style>リストメニュー風(縦)縦並びに小さい見出しっぽいメニュー風のデザインです。none;}</style>リストメニュー風(横)横並びにしてボタン風に。ページ内アンカーメニューなどに適してるかも。none;}</style>以上が『【丸々コピペOK】リストのデザイン11選:HTML/CSSそのまま使用』でした。今後気が向けばどんどんいろんなデザインを追加していきます。コーティング作業やブログ運営、HP制作などに適当に使って下さい。(全部丸々コピペでいけます。...ディスカッションコメント一覧まだ、コメントがありませんコメントを残すコメントをキャンセルこの記事のトラックバックURLKEITO全くの初心者から独学のみで3ヶ月目に100万PV達成(別のブログで)。現在はその知識のみでWebディレクターとして活動中。