まとめ箇条書き表リスト コピペで使えるHTML+CSS

2021.01.17
スポンサーリンク

ブログなどの文末によくある要点をまとめた箇条書きを、順不同リスト<ul>、<li>を使って作成します。

スポンサーリンク

順不同リストの黒板風デザイン

黒板の色は#003333、木枠の色を#996600、チョークの色を#f3f3f3としました。

  • デザインのまとめ
    • HTMLはマークアップ言語
    • CSSによってデザインを実現
    • JavaScriptは最終手段
 
スタイルシートで記述
<ul id="black-boad">
  <li><span>デザインのまとめ</span>
    <ul>
      <li>HTMLはマークアップ言語</li>
      <li>CSSによってデザインを実現</li>
      <li>JavaScriptは最終手段</li>
    </ul>
  </li>
</ul>
#black-boad{
  text-align:center;
  border:4px solid #996600;
  background-color:#003333;
  color:#f3f3f3;
  max-width:400px;
  padding:20px;
  margin:10px;
}
#black-boad > li{ /* black-boad の直接の子であるliにのみ適用する。孫のliには影響しない*/
  list-style-type:none;
}
#black-boad > li > span{
  list-style-type:none; /* 黒板のタイトルについて、リストマーカーである〇を表示しない */
  padding:0px 10px;
  border-bottom:3px dashed #f3f3f3;
}
#black-boad > li > ul{
  margin-left: 10px;
  margin-top:20px;
  text-align:left;
}

#black-boad > li > ul > li{
  list-style-type:disc;  /* 塗りつぶしの●に変更する　■は square */
  margin-top:5px;
  
}

明るい白と青のまとめ

  • デザインのまとめ
    • HTMLはマークアップ言語
    • CSSによってデザインを実現
    • JavaScriptは最終手段

 

スタイルシートで記述
<ul id="white-blue-boad">
  <li><span>デザインのまとめ</span>
    <ul>
      <li>HTMLはマークアップ言語</li>
      <li>CSSによってデザインを実現</li>
      <li>JavaScriptは最終手段</li>
    </ul>
  </li>
</ul>
#white-blue-boad{ 
  text-align:center; 
  border:3px dashed #3C8DFF;
  border-radius:15px; 
  background-color:#ffffff;
  color:#3C8DFF;
  max-width:400px;
  padding:20px;
  margin:10px;
}
#white-blue-boad > li{ /* white-blue-boad の直接の子であるliにのみ適用する。孫のliには影響しない*/
 list-style-type:none;
} 
#white-blue-boad > li > span{ 
  list-style-type:none; /* タイトルについて、リストマーカーである〇を表示しない */ padding:0px 10px; 
  border-bottom:1px solid #3C8DFF;
} 
#white-blue-boad > li > ul{ 
  margin-left: 20px; 
  margin-top:20px;
  text-align:left;
}
#white-blue-boad > li > ul > li{
 list-style-type:decimal; /* 数字のマーカーを表示 */ 
 margin-top:5px;
}

より複雑なデザイン

  • シェイクスピア作品
    • ロミオとジュリエット
    • じゃじゃ馬ならし
    • ジュリアス・シーザー

 

スタイルシートで記述
<ul id="more-design-boad">
  <li><span class="title-span">シェイクスピア作品</span>
    <ul>
      <li>ロミオとジュリエット</li>
      <li>じゃじゃ馬ならし</li>
      <li>ジュリアス・シーザー</li>
    </ul>
  </li>
</ul>
#more-design-boad{ 
  position:relative;
  text-align:center; 
  border:3px solid #3C8DFF;
  color:#3C8DFF;
  max-width:400px;
  padding:0px 20px 0px 0px;
  margin:20px 5px 5px 5px;
}
#more-design-boad  > li{ /* more-design-boad の直接の子であるliにのみ適用する。孫のliには影響しない  　ここでデザインを設定すると子に影響してしまうため、marginのみ設定する */
  margin:0px;
  list-style-type:none; /* タイトルについて〇をつけない */
} 

#more-design-boad  > li::after{ /* 右下の■を表示します */
  position: absolute;
  bottom:10px;
  right:10px;
  content:"";
  border:10px solid #3C8DFF;
} 

#more-design-boad  > li > span.title-span{ 
  padding:0px 10px; 
  position:absolute;
  background-color: #3C8DFF;
  top:-15px;
  left:15px;
  color:#ffffff;
} 
 
#more-design-boad  > li > ul{ 
  margin-left: 35px; 
  margin-top:20px;
 text-align:left;
} 
  
#more-design-boad  > li > ul > li{
 list-style-type:decimal; /* 連番は decimal */ 
 margin-top:5px;
}

関連するCSSデザイン

border-radius 角を丸くする コピペで使えるHTML+CSS
CSSのプロパティborder-radiusはborderの角に丸みを持たせます。border-radiusを見出しやテーブル、divボックスなどに活用すれば見やすくて可愛らしいデザインを実現することができるようになります。
programming-cafe.com
divを使ったボックスのデザイン コピペで使えるHTML+CSS
divを使って様々なデザインのコンテンツボックスをCSSで実現します。角の丸いボックス、見出しだけが角丸のボックス。少し斜めにした見出し。入り込む見出し、アイコンが追加された見出し等、見やすく洗練されたデザインボックスを紹介します。
programming-cafe.com

関連するCSSプロパティ

position 配置方法 コピペで使えるHTML+CSS
CSSのpositionについて相対的配置のrelativeと絶対的配置のabsoluteの関係、topやleftがどのように影響するかを具体例を挙げて解説します。absoluteをマスターすれば自由自在なレイアウトが可能になります。
programming-cafe.com
::before と ::after 疑似要素 要素の前後に挿入 コピペで使えるHTML+CSS
要素の前に表示する::beforeセレクター、要素のあとに表示する::afterセレクター。どのような仕組みか。どのように使用するかを具体例とともに解説。
programming-cafe.com
border 枠線の表示 コピペで使えるHTML+CSS
CSSで要素の枠線を引くborderプロパティの説明、solidからhidde,outsetまで全てを網羅した解説を掲載。borderの高さは調整できるのか? ::beforeセレクターとの違いも説明。
programming-cafe.com
スポンサーリンク