HTMLとCSSとコンポーネント

Transcript

1. HTMLとCSSとコンポーネント らり
2. HTMLって何 HyperText Markup Language よくプログラミング言語じゃねぇ！ってネタにされるやつ WHATWGが仕様をまとめている
3. CSSって何 Cascading Style Sheets HTML や XML の要素をどのように修飾（表示）するかを指示する仕様の一つ W3Cが取りまとめている
4. 何の話をするのか HTMLとCSSを扱うに当たって、気を付けるべき点や、概念の話をします タグとかプロパティは片っ端から覚えてください
5. HTMLとは ウェブページの基本レイアウトに従ってウェブページのコンテンツを記述し定義するもの ブラウザのレンダリングエンジンや、その他諸々の理由により見た目が違うのは、HTML タグはあくまで要素であるため、デザインとは一切関係ない そのため、見た目をそろえるためにreset.cssが必要になったりする https://developer.mozilla.org/ja/docs/Web/HTML
6. CSSとは 要素が画面上でどのように表現されるのかを定義したもの そのため、HTMLは要素の定義、CSSは表現内容と切り分けることで、デザインを付け やすかったりする https://developer.mozilla.org/ja/docs/Web/CSS
7. よく出る話 onClickを使う時、buttonタグ使うより、aタグで統一してしまえばいいのでは? input(type=button)とbuttonタグの違いは? => HTMLとCSSのどちらも知ってないときっぱり答えられない問題
8. 簡単な解説 buttonはボタンタグ、aはアンカータグで、URLのハイパーリンクを作成するという意味が ある input(type=button)とbuttonタグは、仕様は全く同じだが、インライン要素とブロック要素 という点や、inputは終了タグが無いがbuttonタグはあるため、文字や画像を入れやすい といったデザインを当てる際に大きく違う点がある あとはフォーカスが当たるか、そもそもの仕様と合ってないなどある
9. 素で書きたくないよね PugやSCSSなど、トランスパイルを行うことでHTMLやCSSに変換出来るものがある ただ、これらはあくまで素で書かない方法の手段でしかないため、例えばフレームワーク を用いた時に本当に導入すべきかを検討する必要がある Pugだと2~3年前に開発が終わっており、もう使わない方がよかったりする
10. コンポーネントの話 再利用可能なカスタム要素を作成し、その機能を他のコードから分離してウェブアプリ ケーションで利用できるようにします ただ、どの粒度で分けていいか分からない => スタイルガイドを元に組みましょうね～ => どれに乗っ取れば書きやすいんだ? https://bradfrost.com/blog/post/atomic-web-design/ https://developer.mozilla.org/ja/docs/Web/API/Web_components
11. コンポーネントの話 アトミックデザインであれば、最小単位はAtomといい、それ以上に分解出来ないぐらい まで分けたパーツの1つである 受け取り方によるが、大体はHTMLタグと同じような物を作るという考え方がある ここでいう同じような物とは、1つのHTMLタグを見た目、機能を使いやすいように置き換 えたものである https://spice-factory.co.jp/web/about-atmicdesign/
12. コンポーネントの話 例えばボタンコンポーネントを作るとする 内容としては、ポストするためのモーダルが表示されるものである
13. コンポーネントの話 ここでアトミックデザイン通りの考え方の一例を出すと Atomに当たる部分は、青背景のボタン枠のデザインだけである ここで、このコンポーネントの名前をAとする 文字はspanで囲って装飾することが想定されるため、違うタグを使うことから、また別の コンポーネントを用意して、組み合わせる ここで、このコンポーネントの名前をBとする A B
14. コンポーネントの話 Aだけを考えるなら、使用するのはボタンタグ1つだけになるはずである また、「モーダルを開く」というロジックはボタンタグとは関係ない そのため、ここで作るコンポーネントには、onclickに入れる関数を引数に持たせること で、ボタンタグとほぼ同じ挙動にさせることが出来る
15. コンポーネントの話 次にデザイン面から考える Aのデザインは分解すると、大まかに「角が丸」「大きさ」「色」に分解出来る ここで、デザイン上ボタンは角が丸であることが確定している想定で、Aのコンポーネント には角が丸になるCSSを書いておく ただ、大きさや色はボタンによって変わるため、Aのコンポーネントに引数として書くかは 考える必要がある(分解出来ているため)
16. コンポーネントの話 また、今回はデザインには無いが、disableがついた時やhoverした時、クリック時のアニ メーションが含まれた際、ロジックが関わってくるのであれば分けた方がよかったりする これはボタンのコンポーネントではなく、ボタンを目立たせるための装飾とロジックが一 緒になっているため、HTMLタグのくくりからは外れる可能性があり、一緒になっていると コンポーネントの粒度としても使いまわしにくいものになったりする
17. コンポーネントの話 ここで、タグがinput(type=button)のインライン要素か、buttonのブロック要素かでスタイ ルの当て方が変わってくる そのため、どちらを使うにしても、コンポーネント内のタグの要素を変更しない方がぱっと 見で使いやすく、HTMLのタグのように使える
18. 課題 • 以下の内容を理由つきでコンポーネントを分けてください ◦ フォントサイズ ◦ 色 ◦ 大きさ ◦ 形 ◦ 画像の有無 ◦ 画像のサイズ ◦ テキスト ◦ line-heightや太さ ◦ 複数行のテキスト ◦ disable ◦ clickの動作 ◦ 日/英の切り替え