HTMLとCSSとコンポーネント

HTMLとCSSとコンポーネントらり

HTMLって何 HyperText Markup Language よくプログラミング言語じゃねぇ！ってネタにされるやつ WHATWGが仕様をまとめている

CSSって何 Cascading Style Sheets HTML や XML の要素をどのように修飾（表示）するかを指示する仕様の一つ W3Cが取りまとめている

何の話をするのか HTMLとCSSを扱うに当たって、気を付けるべき点や、概念の話をしますタグとかプロパティは片っ端から覚えてください

HTMLとはウェブページの基本レイアウトに従ってウェブページのコンテンツを記述し定義するものブラウザのレンダリングエンジンや、その他諸々の理由により見た目が違うのは、HTML タグはあくまで要素であるため、デザインとは一切関係ないそのため、見た目をそろえるためにreset.cssが必要になったりする https://developer.mozilla.org/ja/docs/Web/HTML

CSSとは要素が画面上でどのように表現されるのかを定義したものそのため、HTMLは要素の定義、CSSは表現内容と切り分けることで、デザインを付けやすかったりする https://developer.mozilla.org/ja/docs/Web/CSS

よく出る話 onClickを使う時、buttonタグ使うより、aタグで統一してしまえばいいのでは? input(type=button)とbuttonタグの違いは? => HTMLとCSSのどちらも知ってないときっぱり答えられない問題

簡単な解説 buttonはボタンタグ、aはアンカータグで、URLのハイパーリンクを作成するという意味がある input(type=button)とbuttonタグは、仕様は全く同じだが、インライン要素とブロック要素という点や、inputは終了タグが無いがbuttonタグはあるため、文字や画像を入れやすいといったデザインを当てる際に大きく違う点があるあとはフォーカスが当たるか、そもそもの仕様と合ってないなどある

素で書きたくないよね PugやSCSSなど、トランスパイルを行うことでHTMLやCSSに変換出来るものがあるただ、これらはあくまで素で書かない方法の手段でしかないため、例えばフレームワークを用いた時に本当に導入すべきかを検討する必要がある Pugだと2~3年前に開発が終わっており、もう使わない方がよかったりする

コンポーネントの話再利用可能なカスタム要素を作成し、その機能を他のコードから分離してウェブアプリケーションで利用できるようにしますただ、どの粒度で分けていいか分からない => スタイルガイドを元に組みましょうね～ => どれに乗っ取れば書きやすいんだ? https://bradfrost.com/blog/post/atomic-web-design/ https://developer.mozilla.org/ja/docs/Web/API/Web_components

コンポーネントの話アトミックデザインであれば、最小単位はAtomといい、それ以上に分解出来ないぐらいまで分けたパーツの1つである受け取り方によるが、大体はHTMLタグと同じような物を作るという考え方があるここでいう同じような物とは、1つのHTMLタグを見た目、機能を使いやすいように置き換えたものである https://spice-factory.co.jp/web/about-atmicdesign/

コンポーネントの話例えばボタンコンポーネントを作るとする内容としては、ポストするためのモーダルが表示されるものである

コンポーネントの話ここでアトミックデザイン通りの考え方の一例を出すと Atomに当たる部分は、青背景のボタン枠のデザインだけであるここで、このコンポーネントの名前をAとする文字はspanで囲って装飾することが想定されるため、違うタグを使うことから、また別のコンポーネントを用意して、組み合わせるここで、このコンポーネントの名前をBとする A B

コンポーネントの話 Aだけを考えるなら、使用するのはボタンタグ1つだけになるはずであるまた、「モーダルを開く」というロジックはボタンタグとは関係ないそのため、ここで作るコンポーネントには、onclickに入れる関数を引数に持たせることで、ボタンタグとほぼ同じ挙動にさせることが出来る

コンポーネントの話次にデザイン面から考える Aのデザインは分解すると、大まかに「角が丸」「大きさ」「色」に分解出来るここで、デザイン上ボタンは角が丸であることが確定している想定で、Aのコンポーネントには角が丸になるCSSを書いておくただ、大きさや色はボタンによって変わるため、Aのコンポーネントに引数として書くかは考える必要がある(分解出来ているため)

コンポーネントの話また、今回はデザインには無いが、disableがついた時やhoverした時、クリック時のアニメーションが含まれた際、ロジックが関わってくるのであれば分けた方がよかったりするこれはボタンのコンポーネントではなく、ボタンを目立たせるための装飾とロジックが一緒になっているため、HTMLタグのくくりからは外れる可能性があり、一緒になっているとコンポーネントの粒度としても使いまわしにくいものになったりする

コンポーネントの話ここで、タグがinput(type=button)のインライン要素か、buttonのブロック要素かでスタイルの当て方が変わってくるそのため、どちらを使うにしても、コンポーネント内のタグの要素を変更しない方がぱっと見で使いやすく、HTMLのタグのように使える

課題 • 以下の内容を理由つきでコンポーネントを分けてください ◦ フォントサイズ ◦ 色 ◦ 大きさ ◦
形 ◦ 画像の有無 ◦ 画像のサイズ ◦ テキスト ◦ line-heightや太さ ◦ 複数行のテキスト ◦ disable ◦ clickの動作 ◦ 日/英の切り替え

HTMLとCSSとコンポーネント

HTMLとCSSとコンポーネント

akatsuki1910

More Decks by akatsuki1910

Featured

Transcript