導入
先日、Water.cssというCSSについての記事を読んだ。
そして、私でもこういった物を作ってみたいと思った。
世の中には多くのReset CSS等の標準となるCSSが存在するが、私にはそういったレベルの物は作れないのは十分知っていた。
だが、必要な分だけ書き換える程度なら可能だろうと思い開発を始めた。
各要素のborderやmargin等を書き換え、納得できるレベルになったなと思った矢先、事件は発生する。
buttonとtextareaの大きさが違うのだ。
あり得ない。
全て同じ値を与えているのだ、同じになると思っていた。
だが、現実として異なる大きさになっている…
問題となったCSS
以下が実際に問題が起きた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以下に到達)
- ドキュメントとして読みやすい。(←私的見解)
サンプルはこちらから確認できるので、是非ともご覧頂き、感想や意見、指摘を頂きたい。