コニファ・ロゴ

csstest:CSS svgアイコンを使ったシンプルで見やすいナビゲーションサイドバー

svgアイコンを使ったシンプルで見やすいCSSナビゲーションサイドバーです。svgアイコンはインラインに記述されているので、外部のフォントなどを読み込む必要はなく、簡単に設置できます。

htmlソース

<div class="container2">
   <div class="sidebar">
      <div class="opt">
         <svg style="width:24px;height:24px" viewBox="0 0 24 24">
           <path d="M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z" />
         </svg>
         <div class="opt--text">Home</div>
      </div>     
      <div class="opt">
         <svg style="width:24px;height:24px" viewBox="0 0 24 24">
            <path d="M13,9H18.5L13,3.5V9M6,2H14L20,8V20A2,2 0 0,1 18,22H6C4.89,22 4,21.1 4,20V4C4,2.89 4.89,2 6,2M15,18V16H6V18H15M18,14V12H6V14H18Z" />
         </svg>
         <div class="opt--text">Docs</div>
      </div>     
      <div class="opt">
         <svg style="width:24px;height:24px" viewBox="0 0 24 24">
            <path  d="M6,17C6,15 10,13.9 12,13.9C14,13.9 18,15 18,17V18H6M15,9A3,3 0 0,1 12,12A3,3 0 0,1 9,9A3,3 0 0,1 12,6A3,3 0 0,1 15,9M3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5A2,2 0 0,0 19,3H5C3.89,3 3,3.9 3,5Z" />
         </svg>
         <div class="opt--text">Contact</div>
      </div>     
      <div class="opt">
         <svg style="width:24px;height:24px" viewBox="0 0 24 24">
            <path  d="M13,9H11V7H13M13,17H11V11H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z" />
         </svg>
         <div class="opt--text">About</div>
      </div>      
      <div class="opt">
         <svg style="width:24px;height:24px" viewBox="0 0 24 24">
            <path d="M5,20H19V18H5M19,9H15V3H9V9H5L12,16L19,9Z" />
         </svg>
         <div class="opt--text">Download</div>
      </div>
   </div>
</div>

 

htmlソース

.container2 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 190px;
    margin:30px auto;
}
.sidebar {
    background-color: #ecf0f1;
    box-shadow: 0 0 6px 4px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    overflow: hidden;
}
.opt {
    display: flex;
    justify-content: flex-start;
    padding: 1rem;
    cursor: pointer;
    background-color: #eee;
    color: #535353;
    transition: .2s;
}
.opt:hover {
    background-color: #535353;
    color: white;
}
.opt:active {
    background-color: #333;
}
.opt svg {
    fill: currentColor;
    margin-right: 8px;
}
.opt--text {
    color: inherit;
    text-transform: uppercase;
    font-weight: 300;
    -moz-user-select: none;
    user-select: none;
}

 

 

 

戻るボタン