아무래도 7note입니다. js를 사용하지 않아도 개수에 맞추어 자동으로 폭이 조정되는 메뉴를 만듭니다.

부모 요소의 폭은 고정으로, 자 요소의 수가 변동해도 자 요소의 폭이 자동 조정되는 메뉴를 만드는 방법.

제작 끝난 or 어느 정도 만든 홈페이지를 수정·갱신하고 있으면, 자주 메뉴의 수가 변동하는 일이 있습니다.
나중에 추가나 삭제가 일어나면, 그 때마다 그때마다 CSS를 조정할 필요가 있어요.

· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·

CSS에서 요소 하나 하나의 너비를 자동으로 조정하는 방법

모두가 좋아하는 flexbox로 만들어 갑니다.

index.html

<ul class="menu">
  <li>あいさつ</li>
  <li>私達について</li>
  <li>あいさつ</li>
  <li>あいうえお</li>
  <li>かきくけこ</li>
</ul>

style.css

.menu {
  width: 100%;
  display: flex;
  border: solid 1px #333;
}

.menu li {
  width: 100%; /* 可能な限り最大で表示 */
  background: #fff;
  border: solid 1px #333;
  text-align: center;
}

이제 요소가 4개나 5개라도 자동으로 폭이 조정되게 됩니다.

해설

수평으로 정렬하는 방법은 flexbox를 사용합니다.display: flex; 를 지정하면 요소가 수평으로 정렬됩니다.
특징으로서 폭 가득 요소를 등분하는 성질이 있기 때문에 이것을 이용하여 자식 요소에 해당하는 <li>를 5등분으로 하거나 4등분으로 하거나 할 수 있습니다.

단지, 너무 극단적으로 수가 2개에서 8개가 되면, 디자인적으로 그다지 깨끗해지지 않을 가능성 등이 있으므로, 기본적으로는 5~7개 등, 변동해도 2개나 3개 정도 변동할 수 있는 장소에 사용하는 것이 좋다고 생각합니다.

php등에서 if문을 걸어 요소의 수가 페이지에 의해서 바뀌는 경우 등, 사용할 수 있는 개소는 좀 있을까라고 생각합니다.

CSS 그리드를 사용하는 방법

코멘트에서 CSS 그리드를 사용한 방법도 있다고 가르쳐 주셨으므로, 이쪽도 기재.

style.css

.menu {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr; /* liの数だけ1frを記載 */
  border: solid 1px #333;
}

.menu li {
  background: #fff;
  border: solid 1px #333;
  text-align: center;
  min-width: 200px;
}

이것이었던 것일까. . 평상시 별로 사용하지 않기 때문에 자신 없습니다만. . .

어머니!

~ Qiita에서 매일 게시 중!! ~
【초보자용】HTML・CSS의 조금 테크 모임