ボックスの横にアイコンを置く

ボックスの横にアイコンを置く方法です｡少ないコードで実現できます｡完成形は以下になります｡

HTML

<div class="box">
<div class="box__window">
</div>
<ul>
<li>B</li>
<li>B</li>
<li>B</li>
</ul>
</div>

boxで囲んでいます｡画面となる灰色のボックスにコンテンツが表示されます｡ここでは空白にしています

簡単なコードです｡

SCSS

.box {
  display: flex;
  gap: 10px;
  &__window {
    width: 100%;
    height: 300px;
    background: #ccc
  }
  ul {
    li {
      background: rgb(229, 229, 229);
      width: 30px;
      height: 30px;
      border-radius: 50%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      margin-bottom: 1rem;
    }
  }
}

boxにflexを書き､その中のwindowというクラスにスタイルを割り当てています｡ここでは､widthとheight､そして､画面の色を書いています｡

ここではboxの中に､windowと､ulの2つが横並びしています｡別々にすることで､flexで横並びができます｡

liにたいした､SCSSの､

display: flex;
flex-direction: column;
align-items: center;
justify-content: center;

これは､丸の中のテキスト(B)を上下左右の中央にしています｡

CSS

.box {
  display: flex;
  gap: 10px;
}
.box__window {
  width: 100%;
  height: 300px;
  background: #ccc;
}
.box ul li {
  background: rgb(229, 229, 229);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}

書いていることはSCSSと同じです｡書き方の違いのみです｡僕はSCSSを書いています｡CSSの書き方を忘れました｡ただ､SCSSでもCSSと同じように書くこともあるので､取り組みやすいと思います｡

ちなみに､SCSSは最終的にCSSにコンパイルする必要があります｡例えば､vscodeであれば､プラグインでコンパイルできます｡

さいごに

あまり使い道はないと思いますが､こういう方法もある思って頂ければ､デザインの幅が広がりますね｡気になる方はお試しあれ｡