2020-10-21

CSS：画面にぴったり収まる碁盤の目を作りたい

CSS HTML

こういうものを作りたい：

画面にぴったり収まってほしい（background-sizeのcontainみたいな）
画面が横長なら縦の余白がゼロ、縦長なら横の余白がゼロ
画面リサイズに応じてこちらもサイズが変わる

作ったもの：

See the Pen
Square grid by Yu Watanabe (@yuw27b)
on CodePen.

まず碁盤の目を作る

とりあえず200px四方の3×3マスで。

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
<!--省略-->
  <div class="item">9</div>
</div>

.container {
  display: grid;
  grid-template-columns: repeat(3, 200px);
  grid-template-rows: repeat(3, 200px);
  align-content: center;
  justify-content: center;
}
.item {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
.item:nth-child(odd) {
  background-color: pink;
}
.item:nth-child(even) {
  background-color: seagreen;
}

gridを画面いっぱいにする

.container {
  display: grid;
  grid-template-columns: repeat(3, min(calc(100vh/3), calc(100vw/3)));
  grid-template-rows: repeat(3, min(calc(100vh/3), calc(100vw/3)));
  align-content: center;
  justify-content: center;
}

3重括弧で読みにくいですが、画面幅の1/3と画面高さの1/3のうち、短いほうをマスの辺の長さにしています。
これで画面をリサイズしても、縦長でも横長でも、画面に収まる最大サイズの正方形になります。

マスの数をHTML側に書いておきたい

<div class="container" style="{--items: 5}">
  <div class="item">1</div>
  <div class="item">2</div>
<!--略-->
  <div class="item">25</div>
</div>

.container {
  display: grid;
  grid-template-columns: repeat(var(--items), min(calc(100vh/var(--items)), calc(100vw/var(--items))));
  grid-template-rows: repeat(var(--items), min(calc(100vh/var(--items)), calc(100vw/var(--items))));
  align-content: center;
  justify-content: center;
}

数が変わってもHTMLだけ変更すればOK。
※CSSの変数はIE以外であれば問題なく使えます：Can I use... Support tables for HTML5, CSS3, etc

Sassで書く場合

.container {
  display: grid;
  grid-template-columns: repeat(var(--items), unquote("min(calc(100vh/var(--items)), calc(100vw/var(--items)))"));
  grid-template-rows: repeat(var(--items), unquote("min(calc(100vh/var(--items)), calc(100vw/var(--items)))"));
  align-content: center;
  justify-content: center;
}

そのままでは、min()を、CSSの関数ではなくSassの関数と認識してしまうため、unquote("")で囲みます。

数年前だったら、JavaScriptでウィンドウのリサイズイベントを監視して、マス目のサイズを変更していたところですが、CSSに変数や比較関数などが実装されて、CSSのみでやりたいことができてしまいました。
括弧だらけでコードが読みにくいので、適宜コメントなども入れておくと良さそうです。

2020-08-18

MySQL：外部キー制約のあるカラムを削除する

いつもカラムが消せない！って調べることになるのでメモ。

FOREIGN KEYが設定されたカラムを削除しようとするとエラーが出る。

ERROR 1217 (23000): Cannot delete or update a parent row: a foreign key constraint fails

まずFOREIGN KEY を削除する必要があるが、削除するためにはそのキーのシンボル値を知る必要がある。

シンボル値の確認

SHOW CREATE TABLE table_name

レスポンス：

CONSTRAINT `table_name_ibfk_1` FOREIGN KEY (column_name)...

FOREIGN KEY削除

ALTER TABLE table_name DROP FOREIGN KEY table_name_ibfk_1

カラム削除

ALTER TABLE table_name DROP COLUMN yyyy

2020-08-09

Code Climateのテストカバレッジが「？」になった

GitHubに、Code Climateのテストカバレッジのバッジを貼り付けていたのですが、気付いたら「？」になっていました。

この部分：
f:id:yuw27b:20200906222114p:plain
（「？」の状態をスクショし忘れてしまったけど、左のMaintenabilityは表示されてて、テストカバレッジだけ「？」に）

CircleCIでビルドするときに、テスト実行→カバレッジのデータをCodeClimateに送信するようにしているのですが、いつからかカバレッジのデータが取得できなくなっていたようです。

しばらく更新も何もしていないライブラリのリポジトリだったので、仕方ないのかな、でも更新する予定もないしな、などと考えていましたが、
ふと思い立って、CircleCIで最新のBuildプロセスを再実行したら表示されるようになりました。

f:id:yuw27b:20200906223058j:plain
Pipelines -> Rerun workflow from start というボタンを押すだけ。

2020-08-03

HTMLのprogress要素を使ってプログレスバーを表示する

CSS HTML

HTMLにはprogress要素があり、HTMLのみでブラウザ上にプログレスバーを表示することができます。

2020年7月時点では、どのブラウザでも問題なく利用できそうです。
ブラウザ対応状況：https://caniuse.com/#feat=progress
WHATWG仕様（Living Standard）：
https://html.spec.whatwg.org/multipage/form-elements.html#the-progress-element

デフォルトでどんなふうにレンダリングされるかは、ブラウザにより異なります。
以下のようなシンプルなHTMLでは、

<progress value="30" max="100">30%</progress>

このように表示されます：
30%

※タグの間のテキスト（「30%」）は、ブラウザが非対応の場合に表示されます。videoタグなどと同じですね。

CSSでの見た目の変更もある程度可能です。幅・高さ・色が変えられるので、十分実用できそうです。（ベンダープレフィックスは必要ですが。）

progress {
  width: 200px;
  height: 30px;
  background-color: orange;
}

progress::-webkit-progress-bar {
  background-color: orange;
}

progress::-webkit-progress-value {
  background-color: violet;
}

progress::-moz-progress-bar {
  background-color: violet;
}

progress::-ms-fill {
  background-color: violet;
}

以下を追加すれば角丸になります。

progress {
  width: 200px;
  height: 30px;
  border-radius: 15px;
}

progress::-webkit-progress-bar {
   border-radius: 15px;
}

progress::-webkit-progress-value {
   border-radius: 15px;
}

progress::-moz-progress-bar {
   border-radius: 15px;
}

progress::-ms-fill {
   border-radius: 15px;
}

各ブラウザでのレンダリング結果：
f:id:yuw27b:20200803220432j:plain
Firefoxの角丸は若干ぼやっとしているような。

角丸にborderを追加するとずれてしまうので、枠線をつけたい場合はbox-shadowのspreadを使うのが良さそうです。

2020-07-23

CSSでコンテンツのトグル表示を実装する

CSS

チェックボックスを使ってます。
JavaScriptを使ったほうが表現力は高いですが、他にJS使う予定もないしとりあえず隠せればいいか…みたいなページでたまにやるやつです。

See the Pen
Toggle content by CSS by Yu Watanabe (@yuw27b)
on CodePen.

補足みたいなちょっとした文章とか、テーブル内のコンテンツが長すぎたら隠す、みたいな場合に使う。

アニメーションとか、アクセシビリティの考慮（aria属性の追加）とかは難しいので、お手軽に済ませちゃいけないコンテンツの場合はやっぱりJSです。

yuw27b’s blog

技術メモと雑記