サイドバーの作成方法

目次

EXCEL

Program

その他

ここをメインのコンテンツとして使用します。

<div class="test">
   <div class="side">
      <p>目次</p>
      <p>EXCEL</p>
      <p>Program</p>
      <p>その他</p>
   </div>

   <div class="content">
      <p>ここをメインのコンテンツとして使用します。</p>
   </div>
</div>
.test{
    display: flex;
}
.content{
    width: 80%;
    padding-left: 10%;
    background-color: rgb(252, 160, 98);
    order: 2;
    }
    
.side{
    width: 20%;
    background-color: rgb(210, 218, 171);
    text-align: center;
    order: 1;
}

HTML側


まずサイドバー、メインコンテンツともに含めた要素を作成します。
上の例ではtestというクラスをつけています。
そしてサイドバーになる、メインのコンテンツにそれぞれ要素を付けます。
上の例ではサイドバーになる要素にside、メインコンテンツになる要素にcontentというクラスをつけて完了です。

CSS側


まずサイドバー、メインコンテンツともに含んだ要素にdisplay:flexと記入します。
次にサイドバー、メインコンテンツともにorderプロパティを追加します。
orderプロパティは設定した数字の小さいものから順に左から並ばせることができます。