どうも7noteです。jsを使わなくても個数に合わせて自動で幅が調整されるメニューを作ります。

親要素の幅は固定で、子要素の数が変動しても子要素の幅が自動調整されるメニューの作り方。

作り終わったorある程度作ったホームぺージを修正・更新していると、よくメニューの数が変動したりすることがあります。
あとで追加や削除が起こると、その都度その都度CSSを調整する必要がでてきますよね。

・・・大変なので、1つ１つ自動調整するように書き換えていくように変えてしまいましょう。

CSSで要素1つ1つの幅を自動調整させる方法

みんな大好き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のちょいテク詰め合わせ

Macが突然壊れたので新しいMacを購入した。
現在、Webサイトを運営中でそれの更新作業を新しいMacでしようとした時に、ローカル環境で検証できないようになっていた。

具体的には、ターミナルでhttp-serverコマンドを打ってもエラーが出てくる。
新しいMacを購入してから環境構築をして無いねんから、そりゃ当然ですね。

とうことで、環境構築をすることにしましたが、ちょこちょこ詰まったので、ここに残しておきます。

主にこちらの記事を参考にさせていただきました。
https://qiita.com/standard-software/items/1afe7b64c4c644fdd9e4

とりあえずhttp-server コマンドのインストール

とにもかくにも、まずインストールを試みる

% npm install http-server -g

しかし、下記応答が。。。

zsh: command not found: npm

command not found: npmと出た時の対処

npmコマンドが使えないよ。とのことなので、以下の記事を参考にして進める。
https://qiita.com/sinmetal/items/154e81823f386279b33c

基本的には上記のリンク先通りにすればオッケー
ここでは、その過程で詰まったところを記載します。

source ~/.bash_profileコマンドで大量のエラー

.bash_profile が見当たらなかったので、下のサイトを見ながら、ホームに.bash_profile を作成。
http://banker0507.blogspot.com/2012/11/macbashprofile.html

https://qiita.com/sinmetal/items/154e81823f386279b33c
上記リンクに沿って下記コマンドを実行

% source ~/.bash_profile

すると下記のエラーが

command not found: rtf1ansiansicpg932cocoartf2513
command not found: cocoatextscaling0cocoaplatform0{fonttblf0fmodernfcharset0
command not found: colortbl
command not found: red255green255blue255
command not found: red255green255blue255
command not found: red83green83blue83
parse error near `;;'

なんだこれは？とりあえず.bash_profileの中身を見てみる

% cat .bash_profile

{\rtf1\ansi\ansicpg932\cocoartf2513
\cocoatextscaling0\cocoaplatform0{\fonttbl\f0\fmodern\fcharset0 Courier;}
{\colortbl;\red255\green255\blue255;\red255\green255\blue255;\red83\green83\blue83;}
{\*\expandedcolortbl;;\cssrgb\c100000\c100000\c100000;\cssrgb\c40000\c40000\c40000;}
\paperw11900\paperh16840\margl1440\margr1440\vieww10800\viewh8400\viewkind0
\deftab720
\pard\pardeftab720\sl380\partightenfactor0

\f0\fs26 \cf2 \cb3 \expnd0\expndtw0\kerning0

\outl0\strokewidth0 \strokec2 export PATH="/usr/local/bin:$PATH:/usr/local/sbin"\
export PATH=$HOME/.nodebrew/current/bin:$PATH
}

なぜかよくわからない文がたくさん、、、
viで中身を編集し、下記の状態にする。

% cat .bash_profile

export PATH="/usr/local/bin:$PATH:/usr/local/sbin"
export PATH=$HOME/.nodebrew/current/bin:$PATH

もう一度

% source ~/.bash_profile

無事エラーなしで解決

http-server実行でローカル環境での検証環境構築成功

その後もせこせこと参考ページを見ながらインストール等を実施し、最後に

% http-server

Starting up http-server, serving ./
Available on:
  http://127.0.0.1:8080
  http://192.168.10.7:8080
Hit CTRL-C to stop the server

http://localhost:8080/
にアクセスすると、、、、

無事、ローカルでの検証環境を構築することができました！

上記のサーバを停止したいときはcontrolキーとCを同時に押してください。

テンプレ

.c-input {
  font-size: 16px;
  width: 100%;
  height: 30px;
  border-radius: 3px;
  padding: 3px 5px;
  box-sizing: border-box;
  background-color: #fff;
      &:focus {
          outline: none;
      }
      &:invalid {
          border: solid 1px red;
      }
}

スタイリングは適当に書いたので、ユースケースに応じて設定する。

プロパティ説明

サイズ

width => 親(フォーム)要素のwidth、paddingで調整するので基本100%でいい
height => フォントのサイズとの兼ね合いで決める。フォントサイズが16pxで、余白が5px欲しかったらheightは26px、みたいな感じ

形

border-radius => inputの角を調整する

フォント

font-size => input要素のフォントサイズはp,divなどとは別のため忘れず指定する。大体input[type="text"]とか、input要素単位で指定する
font-color => input要素のフォントカラーはp,divなどとは別のため忘れず指定する

レイアウト

padding => 文字とinputの余白を調整しないと窮屈な印象になる
box-sizing => heightの値 = 縦のサイズにするため
border-boxを指定して統一しやすくする。

カラー

background-color => 背景色を指定する
outline => 外枠。:focusで付けることでフォーカス時の枠線を消す
ちなみに、スマホでタップした時の枠もtap-highlight-color:rgba(0,0,0,0); で消せる
``

ISSのローカルサーバーで、DBの内容とかは反映されてるのにCSSが適用されなかったので備忘録として残しておく

１．コントロールパネルを開いて「プログラム」をクリック

２．「Windows の機能の有効化または無効化」をクリック

３．「静的なコンテンツにチェック」を入れる

インターネット インフォメーション サービス > World Wide Web サービス > HTTP 共通機能 > 静的なコンテンツ

この手順でCSSが効くようになります