CSS について深い知識はないけどこれだけ知ってれば何とかなるでしょ、的な雑記帳

CSS が苦手です。border とか margin とかちょろちょろっと触るだけならできますけど、最近の新しいやつはほとんど知りません。とはいえフロントエンド畑にいると、CSS フレームワークを使わずに自力で CSS 書いて見た目を調整する事とか、ありますよね（管理画面系とか）。

CSS について深い知識はないけどこれだけ知ってれば何とかなるでしょ、的な雑記帳としてメモを残しておこうと思います。

Layout

flex で水平/垂直方向の配置

justify-content	align-items	プレビュー	Playground
flex-start	center		liveweave
center	center		liveweave
flex-end	center		liveweave
flex-start	flex-start		liveweave
flex-start	flex-end		liveweave

TL;DR

• flex-direction: row で　１行にコンテンツ配置
• justify-content で水平方向の指定
• align-items で垂直方向の指定

<div>
  <p></p>
  <p></p>
  <span></span>
  <input placeholder="input"/>
  <button>button</button>
</div>

/* コンテナ */
div {
  display: flex;
  flex-direction: row;
  /* justify-content: flex-start | center | flex-end; */
  /* align-items: flex-start | center | flex-end; */
}

/* 子要素間の左右マージン */
/* `*` が遅いらしいので実際使う時は button,p などに変更 */
div > * {
  margin: 0 0.3em;
}

横並びグリッドレイアウト

TL;DR

• grid-template-columns: repeat(3, 30%)　で 30 %幅の列を 3 個作る
• grid-template-columns: 100px 90px 80px とすれば列ごと個別の幅指定も可
• grid-template-rows とすれば列でなく行で同じ事ができる

<div>
  <article><img src="https://picsum.photos/id/237/200/300"/></article>
  <article><img src="https://picsum.photos/id/1025/200/300"/></article>
  <article><img src="https://picsum.photos/id/1062/200/300"/></article>
</div>

div {
  display: grid;
  grid-template-columns: repeat(3, 30%);
  grid-gap: 3%;
}

Utility

ブロック要素をドラッグ＆ドロップでリサイズ可能に

TL;DR

• resize でリサイズ可能になる

  <header>
    <div>contents</div>
    <div>contents</div>
    <div class="resizable-h">resizable-h</div>
  </header>
  
  <nav class="resizable-v">resizable-v</nav>

.resizable-h {
  min-width: 10em;
  overflow: hidden; /* これがないとリサイズ効かない */
  resize: horizontal; /* 横方向のリサイズ */
  background: #516f8d;
}

.resizable-v {
  min-height: 10em;
  overflow: hidden; /* これがないとリサイズ効かない */
  resize: vertical; /* 縦方向のリサイズ */
  background: #516f8d;
}

dl>ddの空要素にハイフンをデフォルト表示

TL;DR

• dd:empty で空要素の判定ができる

<dl>
  <dt>Artist</dt>
  <dd>Queen</dd>
  <dt>Title</dt>
  <dd>Made in Heaven</dd>
  <dt>Release date</dt>
  <dd></dd> <!-- 空要素 -->
  <dt>Review</dt>
  <dd>this is the best Album</dd>
</dl>

dd:empty::before {
  content: '-';
}

フォーカスした時にバリデーションエラー表示

TL;DR

• focus-within を使えば div タグに「子要素がフォーカスを持っている時」の CSS を書ける
• focus-visible でフォーカスリングを消す
• caret-color でキャレットの色を変更

<!-- FontAwesome 使用 -->
<div>
  <i class="fa fa-user"></i>
  <input type="text">
</div>

input {
  caret-color: red;
}

/* 子要素がフォーカスを持つ時に適用される CSS */
div:focus-within i {
  color: #f56161;
}
div:focus-within input {
  border: 1px solid #f56161;
}

/* 影つけて強調 */
input:focus {
  box-shadow: 2px 2px 2px 0 #f56161;
}

/* フォーカスリングを消す */
input:focus-visible {
  outline: none;
}

ライブラリ使わないフワッと出るダイアログ

TL;DR

• <dialog> 設置
• document.getElementById("id").showModal() でダイアログオープン
• CSS で transition を使えばフワッと感を出せる

<dialog id="dialog">
  <!-- form がないとボタンが反応しないので必須 -->
  <form method="dialog">
    <p>これ便利じゃないですか?</p>
    
    <!-- button の value が dialog.returnValue になる -->
    <button value="yes">yes</button>
    <button value="no">no</button>
  </form>
</dialog>

<button id="trigger">Open dialog</button>

const $trigger = document.getElementById("trigger");
const $dialog = document.getElementById("dialog");

$trigger.addEventListener("click", () => {
  $dialog.showModal();
});

$dialog.addEventListener("close", () => {
  $result.value = $dialog.returnValue;
});

dialog {
  /* opacity 効かせるために display 必須 */
  display: block;
  opacity: 0;
}

dialog[open] {
  /* 2秒間かけて opacity を 0 > 1 に変化させる（フワッ） */
  opacity: 1;
  transition-property: opacity;
  transition-duration: 2s;
  transition-timing-function: ease;
}