導入

先日、Water.cssというCSSについての記事を読んだ。
そして、私でもこういった物を作ってみたいと思った。
世の中には多くのReset CSS等の標準となるCSSが存在するが、私にはそういったレベルの物は作れないのは十分知っていた。
だが、必要な分だけ書き換える程度なら可能だろうと思い開発を始めた。
各要素のborderやmargin等を書き換え、納得できるレベルになったなと思った矢先、事件は発生する。

buttonとtextareaの大きさが違うのだ。

あり得ない。
全て同じ値を与えているのだ、同じになると思っていた。
だが、現実として異なる大きさになっている…

問題となったCSS

以下が実際に問題が起きたCSSだ。

doc.css

[attr]{
	border: 0;
	display: block;
	font: inherit;
	margin: 1rem;
	max-width: calc(100% - 2rem);
	padding: 0;
}
button[attr],textarea[attr]{
	background: gainsboro;
	border-radius: 0.5rem;
	outline: none;
	padding: 1rem;
	width: 100%;
}
button[attr]:focus,textarea[attr]:focus{
	box-shadow: 0 0 0 0.1rem dimgray inset;
}
textarea[attr]{
	resize: none;
}

要素の大きさに関わる値は統一し、marginとpaddingの計2remを加味してmax-widthを与えていた。
違いと言えばtextareaに与えたrerizeだけだ。
要素の大きさには干渉しない。
その上でwidthを100%にすることで、最終的な大きさを100% - 4remにしようとしていた。
私の考え上ではそうなるはずだった。

だが、実際にはそうならなかった。
正確に言うならば、2rem分だけbuttonが小さいのである。

調べてみた

が、どう調べたものか。
｢textarea button 大きさ｣
欲しい情報が出てこない。
調べても求める答えは得られない。
Chromeの開発者ツールを使ってしまった。
スマホで作業する開発者の限界点だった。

開発者ツールで調べた結果

各種値を付けたり消したりしながら変化を見ていると、paddingが影響していることが判明した。
例えば、widthが200pxの状態でpaddingを10pxにすると、textareaのコンテンツ領域は幅200pxのままであった。
コンテンツ領域にはpaddingを含まないので当然である。
しかし、buttonのコンテンツ領域は幅180pxになっていた。
paddingを加味することでコンテンツ領域は幅200pxとなった。
つまり、コンテンツ領域にpaddingを含んでいるということだ。
コンテンツ領域はpadding等を加味して指定しないといけないことは知見としてあったが、その様な例外が存在することは知らなかった。

結論

textareaはpaddingを含まない、コンテンツ領域の大きさを指定する。
buttonはpaddingを含む大きさを指定する。
その他の要素や値は調べていないから省略。
以上。

最後に

今回、私が開発を進めたCSSはDoc.cssと名付け、Github上に公開した。
特徴としては以下が挙げられる。

一部の要素のみが対象である。
圧縮版は2kB以下と小型である。(現在1.5kB以下に到達)
ドキュメントとして読みやすい。(←私的見解)

サンプルはこちらから確認できるので、是非ともご覧頂き、感想や意見、指摘を頂きたい。