こんにちは、つしまです。
入社して1ヶ月が経ちました。楽しみにしていたGWもあっという間に終わり、時間が経つのは早いなあと感じています。
さて、前回に引き続き、Web制作を勉強するうちに学んだ、サイト構成の組み方について書いていこうと思います。
目次
今週関わったお仕事
- 撮影リスト作成
- 撮影場所下見
- POP修正
- パンフレット修正
- HP修正
学んだこと・感じたこと
HTML・CSSを何度か打ち込んでいるうちに何となくコツが分かってきた部分が出てきました。
すごく当たり前のことかもしれませんが、HTMLの要素は箱に入っているということです。
例えば<h1>や<p>など、HTMLの要素はたくさんありますが、全ての要素は箱に入っているんです。<h1>も<p>も、その他全ての要素は基本的に箱を持っていて、記述された時点で勝手にボックスと呼ばれる四角形の領域を生成し、その中に入ります。
レイアウト構成の基本的な考え方は
- <h1>や<p>などの小さい箱を全て作る。
- 小さい箱を何個か集めて<div>という大きい箱に入れる。大きな箱の外に更に大きな箱を作ることも出来て、要素をグループ化していく。
- ＜class＞を使って箱に名前をつけて、何が入っているのかすぐに分かるようにする。名前をつけることで、名指しで指定できるようになる。
- 箱の大きさや箱同士の間隔を調整したり、要素の並び順を変更する。
だと思います。
模写コーディングを初めてやったときは、ヘッダーがどうしてもセンターに寄らず、そのブロックをひとつ動かすのに5時間くらいかかりました。検索して解決しても、そもそもどこがダメだったのかわからないままで、理屈を理解できていませんでした。
でも箱のイメージを持ってから、要素をグループ化する感覚をつかめた気がします。うまくいかないときの原因が前よりわかるようになりました。
どうしたらいいのかわからなくなったときは、まず、要素を長方形に置き換えて紙に書いてみること、デザインを細かく分解して整理することが大切だなと感じました。
