オプションタグ(option)で初期表示させる項目を選択できないようにする方法

オプションタグで最初に表示させる項目は、ラベルのようなもので実際には選択されないようにするための方法。

最初のoptionを使って、valueを空にし、selected disabled hiddenをoptionタグ内に入力すれば実現できる。

<select>
  <option value="" selected disabled hidden>選択肢を選ぶ</option>
  <option value="1">項目A</option>
  <option value="2">項目B</option>
  <option value="3">項目C</option>
  <option value="4">項目D</option>
  <option value="5">項目E</option>
</select>

参考:How can I set the default value for an HTML <select> element?

tbodyタグは省略可能かどうか【W3Cの和訳あり】

tbodyタグは省略可能か。結論から言うと、table要素内い表が1つしかなければ省略可能。以下詳細説明。

このtbodyタグはテーブルの本体に当たるコンテンツを囲むために使われる。特にtableタグで囲む表が複数に渡る場合、thead、tfootを追加(テーブル内のheader、footerの役割)してテーブルに関する情報を入れ、実際のテーブル本体をtbodyで囲む。

W3Cを参照すると、表が1つしかなく、thead、tfootタグを使わない場合は、tbodyタグを省略することが可能。以下W3Cの説明箇所のスクショ。

そしてなんとこのthead、tfoot、tbodyは閉じタグはオプションとなっている。下記のように開始タグのみで書くことが可能。

ということで、複数の表を1つのtable内で使わず、1つの表のみであればtbodyタグは省略可能である。

参考:The World Wide Web Consortium, 11 Tables

 

selectタグに::before ::afterなどの疑似要素を追加する方法【CSS】

結論から言うとselectタグには::beforeや::afterの疑似要素を当てることはできない。

そのためselectタグの親要素に擬似要素を指定して代用する。

<div class="search-pref">
  <select name="pref[]">
    <option>都道府県</option>
    <optgroup label="北海道・東北">
      <option value="1">北海道</option>
      <option value="2">青森県</option>
      <option value="3">岩手県</option>
      <option value="4">宮城県</option>
      <option value="5">秋田県</option>
      <option value="6">山形県</option>
      <option value="7">福島県</option>
    </optgroup>
    <optgroup label="関東">
      <option value="8">茨城県</option>
      <option value="9">栃木県</option>
      <option value="10">群馬県</option>
      <option value="11">埼玉県</option>
      <option value="12">千葉県</option>
      <option value="13">東京都</option>
      <option value="14">神奈川県</option>
    </optgroup>      
  </select>
</div>

このような構成だった場合、

.search-pref::before {
 /* スタイル */
}

このように親要素に擬似要素を付けて調整する。

参考:Pseudo elements and SELECT tag

nodebrewでnode.jsをインストールする時にxcrunでerrorが出る問題を解決

標題通り、nodebrewでnode.jsの別バージョンをインストールする時に以下のエラーが出た。

xcode-select: error: tool 'xcodebuild' requires Xcode, but active developer directory '/Library/Developer/CommandLineTools' is a command line tools instance

xcrun: error: unable to lookup item 'PlatformPath' from command line tools installation
xcrun: error: unable to lookup item 'PlatformPath' in SDK '/'

で、node.jsが正常にインストールされない。

xcodeがインストールされてない、もしくはコマンドラインツールが正常に動作していないエラーらしい。

解決方法は以下のコマンドを打ち込む

xcode-select --install
xcode-select --switch /Applications/Xcode.app