■
web系な現場に回されて数ヶ月。phpで頑張るお仕事かとおもいきや、デザイナー不在でフロントエンドやらされる現場だった。
40過ぎるときついのよね新しいことさせられんの。
jsとphpはロジックだからまあいい。HTMLとcssは食わず嫌いで今まで来たもんだから、まーきつい。そもそもGUIってのが平均以下プログラマにとって敷居が高過ぎんのよ。
HTML/cssの速習方法ってないものか。
場当たり的な仕様追加と各社の妥協が繰り返されてきたクソの山にしか見えない。
とりあえず、この数日で学んだ基本と思われるものを列挙してくことにする。
ブロック要素とインライン要素
- ブロック要素とはとにかく塊だ。とにかく改行される。
- divとかpとかliとかtrとか
- divとpは改行のされかたがちと異なる。
- インライン要素は、インライン。一行のなかに入って改行されない。
- aとかimgとかspanとかtdとか
cssで小細工しない場合、ブロック要素は縦に伸びて行き、インライン要素は横に伸びていく。
素のインライン要素は単なる部品が多いので、あるていどまとまった部品を横に並べたい場合詰まる。が、
そろそろWinXP/IE7,8も死んだので、新しくて理解しやすいCSSを使ってけばいい。
display: table/table-cellとかな。
float: left/right;とか腐ってるわー。
親と子(ついでに兄弟も)を常に意識する
基本的に要素には親子関係がある。親として子に影響を与えるcssパラメータと特定の親のもとでしか意味を持たないものがある。
要素を重ねて表示したいような場合、
http://yzgwyskw.hatenablog.com/entry/2013/06/19/020658
親には position:relative;を指定し、
子には、position: absolute;を指定することで要素を重ねることが可能。
まあ大体私のような初心者が詰るのは、
- 要素を横にならべるのはどうしたらいいの？
- 要素を右寄せにするにはどうしたらいいの？
- 要素を重ねるのはどうしたらいいの？
くらいなんで、高度なことはとりあえずどうでもいい。
あと、jqueryやるときに必ず出てくる margin/padding/borderと要素の高さと幅の関係を知っておけばなんとかなる。底辺プログラマ的に。
