コピペでできるサイドバーのデザインサンプル一覧[HTML/CSS]

2023年10月12日2023年10月16日

サイドバーのデザインサンプル

シンプル

サイドバー

.t8-sidebar-2 {
    width: 20%;
    background-color: #0d6efd;
}

.t8-sidebar-2 li{
    padding: 5px;
    border-left: 2px solid blue;
    list-style: none;
}

.t8-sidebar-2 a{
    padding: 3px;
    color: #fff;
}

アンダーバー

.t8-sidebar-3 {
    width: 20%;
    background-color: #0d6efd;
}

.t8-sidebar-3 li{
    padding: 5px;
    list-style: none;
}

.t8-sidebar-3 a{
    padding: 3px;
    color: #fff; 
    margin-bottom: 20px;
    border-bottom: 2px solid blue;
}

ボックス

.t8-sidebar-4 {
    width: 20%;
    background-color: #0d6efd;
}

.t8-sidebar-4 li{
    padding: 5px;
    list-style: none;   
}

.t8-sidebar-4 a{
    padding: 5px;
    color: #fff;
    border:1px solid blue;
}

タイル

<div class="t8-sidebar-5">
  <p>目次</p>
  <ul>
     <li><a href="#">Menu1</a><a href="#">Menu2</a></li>
     <li><a href="#">Menu3</a><a href="#">Menu4</a></li>
     <li><a href="#">Menu5</a><a href="#">Menu6</a></li>
  </ul>
</div>

.t8-sidebar-5 {
    width: 33%;
    height: 250px;
    background-color: #0d6efd;
}

.t8-sidebar-5 li{
    padding: 5px;
    margin-top: 20px;
    margin-bottom: 40px; 
    list-style: none;
}

.t8-sidebar-5 a{
    padding: 20px 10px;
    color: #fff;
    margin-right: 15px;
    background: blue;
}

スライド

<details class="t8-sidebar-6">
    <summary>目次</summary>
    <ul>
       <li><a href="#">Menu1</a></li>
       <li><a href="#">Menu2</a></li>
       <li><a href="#">Menu3</a></li>
       <li><a href="#">Menu4</a></li>
       <li><a href="#">Menu5</a></li>
       <li><a href="#">Menu6</a></li>
    </ul>
</details>

.t8-sidebar-6 {
    width: 50px; 
    height: 250px;
    margin-bottom: 5px;
    background: #0d6efd;
}

.t8-sidebar-6 summary {
    display: flex;
    align-items: center;
    position: relative;
    padding: .5em;
    color: #fff;
    cursor: pointer;
    font-weight: bold;
}

.t8-sidebar-6 a {
    opacity: 0;
    margin: 0;
    padding: .5em;
    color: #fff;
    transform: translateY(-10px);
    transition: transform 1s, opacity 1s;
}

.t8-sidebar-6 ul{
    padding-left: 70px;
}

.t8-sidebar-6[open] {
    width: 200px;
}

.t8-sidebar-6[open] a {
    transform: none;
    opacity: 1;
}

アコーディオン

<div class="t8-sidebar-7">
<p>目次</p>
  <details class="t8-accordion-7">
    <summary>Menu1</summary>
      <ul>
       <li><a href="#">Sub1</a></li>
       <li><a href="#">Sub2</a></li>
       <li><a href="#">Sub3</a></li>
      </ul>
  </details>
     <summary>Menu2</summary>
     <summary>Menu3</summary>
</div>

.t8-sidebar-7 {
    width: 20%;
    padding: 20px;
    background-color: #0d6efd;
}

.t8-sidebar-7 p{
    font-weight: bold;
    margin-bottom: 10px;
}
.t8-sidebar-7 li{
    padding: 3px;
}

.t8-sidebar-7 a{
    padding: 3px;
    color: #fff;
}

プロフィール

<div class="t8-sidebar-8">
        <div class="content">
            <figure class="profile-img">
                <img src="http://temp8.plat4.net/wp-content/uploads/2023/10/cuteicon.png" alt="" width="300" height="300">
            </figure>
            <p class="t8-phead-8">名前</p>
            <p class="t8-phead-8">-自己紹介-</p>
            <p class="text text-center">自己紹介を入力</p>
            <p class="t8-psocial-8">
            <i class="fab fa-twitter"></i>
            <i class="fab fa-instagram"></i>
            <i class="fab fa-facebook"></i>
            </p>
        </div>
</div>

.t8-sidebar-8 {
    width: 30%;
    background-color: #0d6efd;
}

.t8-sidebar-8 li{
    padding: 5px;
}

.t8-sidebar-8 a{
    padding: 3px;
    color: #fff;
}

.t8-phead-8 {
    font-weight: bold;
    text-align: center;
}

.t8-psocial-8 {
    text-align: center;
}
   
.profile-img {
    margin: 16px 0 0;
    text-align: center;
}

.profile-img img {
    width: 150px;
    height: auto;
    border-radius: 50%;
}

タグクラウド

<div class="t8-sidebar-9">
  <p>目次</p>
     <p>
     <a href="#">タグ1</a>
     <a href="#">タグ2</a>
     <a href="#">タグ3</a>
     <a href="#">タグ4</a>
     <a href="#">タグ5</a>
     <a href="#">タグ6</a>
     </p>
</div>

.t8-sidebar-9 {
    width: 30%;
    padding: 10px;
    background-color: #0d6efd;
}

.t8-sidebar-9 li{
    padding: 5px;
}

.t8-sidebar-9 a{
    padding: 5px;
    color: #fff;
    background: blue;
}

.t8-sidebar-9 p{
    line-height: 36px;
}

サムネイル(関連記事)

<div class="t8-sidebar-10">
　　<div class="t8-postlist-10">
　    <img src="http://temp8.plat4.net/wp-content/uploads/2023/09/mt-sample-background.jpg">　
　　　<div class="t8-sidepost-10"><p class="t8-sidetitle-10">記事タイトル1<p><br>	
　    <time class="t8-date-10" datetime="2023-02-03" aria-label="公開日">2023年2月3日</time></div>
    </div>

　　<div class="t8-postlist-10">
　    <img src="http://temp8.plat4.net/wp-content/uploads/2023/09/mt-sample-background.jpg">　
　　　<div class="t8-sidepost-10"><p class="t8-sidetitle-10">記事タイトル2<p><br>	
　    <time class="t8-date-10" datetime="2023-02-03" aria-label="公開日">2023年2月4日</time></div>
    </div>

　　<div class="t8-postlist-10">
　    <img src="http://temp8.plat4.net/wp-content/uploads/2023/09/mt-sample-background.jpg">　
　　　<div class="t8-sidepost-10"><p class="t8-sidetitle-10">記事タイトル3<p><br>	
　    <time class="t8-date-10" datetime="2023-02-03" aria-label="公開日">2023年2月5日</time></div>
    </div>
</div>

.t8-sidebar-10 {
    width: 45%;
    height: 450px;
    background-color: #0d6efd;
}

.t8-sidebar-10 li{
    padding: 5px;
}

.t8-sidebar-10 a{
    padding: 3px;
    color: #fff;
}

.t8-postlist-10 {
    display: flex;
}

.t8-postlist-10 img{
    height: 100px;
    width: 100px;
}

.t8-date-10 {
    font-size: 12px;
    position: relative;
    bottom: 30px;
    right:20px;
}

.t8-date-10::before {
    font-family: "Font Awesome 5 Free";
    content: '\f017';
    font-weight: 600;
    margin-right: 0.5em;
}

.t8-sidetitle-10 {
    font-weight: bold;
}

.t8-sidepost-10 {
    position: relative;
    right: 50px;
}

URLをコピーしました！