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

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

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

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

スタイルシートで記述

<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;
  
}

明るい白と青のまとめ

スタイルシートで記述

<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