はじめに
烏でもわかるHTML/CSSシリーズはじめました。
といっても、Qiitaに書いているわけではなく、CodePen上で連載していく予定です。
読んでいく順番は特に決めていませんが、最初はwidth編、height編あたりから読んでいただければと思います。
どういう人向け？
今まで一切、HTML/CSSの勉強をしたことがない人に向けて書いている"つもり"です。
その中でも、HTML/CSSのテキストを１冊終わらせたけど、じゃあどうやってオリジナルのページを作ればいいの？という人がメインターゲット。
コーディングについて知りたいデザイナーさんも大歓迎です。
この講座で勉強できないこと
- 命名規則
- バンバン動くおしゃれなサイトづくり
講座
現在公開している講座の一部（この記事を書いている時点での全部）です。
どうしてその講座を作成したのかを、一言程度書いておきます。
width編
widthに絶対値を指定して横スクロールを発生させる人があとを絶たないので書きました。
デザインってどうしてもビューポートを固定幅（Figmaだと1440pxくらい）でつくるし、その中に置いてあるアイテムも絶対値で●pxというふうに出てくるのですが、コーディングするときはビューポートや親要素に対する割合で考えないといけないということを繰り返しお伝えしたいです。
See the Pen 【烏でもわかるHTML/CSS】width編 by yoruokamix (@yoruokamix) on CodePen.
height編
高さというのは勝手に伸びていくものなので事情がない限り指定するなよってことが書いてあります。
See the Pen 【烏でもわかるHTML/CSS】height編 by yoruokamix (@yoruokamix) on CodePen.
box-sizing編・ボックスモデル編
このあたりは順不同です。
box-sizing:border-boxが主流だよという話と、margin,paddingの違いなんかの解説になります。
See the Pen 【烏でもわかるHTML/CSS】ボックスモデル by yoruokamix (@yoruokamix) on CodePen.
See the Pen 【烏でもわかるHTML/CSS】box-sizing by yoruokamix (@yoruokamix) on CodePen.
display編
block,inline,inline-blockの話です。
センター寄せもここに入れようかな〜と思ったのですが分離します。
See the Pen 【烏でもわかるHTML/CSS】display編 by yoruokamix (@yoruokamix) on CodePen.
もう少し続く予定
おわりに
本屋さんで売っているテキストってサンプルサイトがおしゃれなものが多いですが、そのテキストのサンプルサイトは作れるけど、どう応用すればいいかわからない！って感じのものが多いので、この講座をつくりました。装飾はその次の過程なのじゃないかなと思います。