Htmlとcssたち。 - プログラミング奮闘記録

最近ずっとhtmlとcssとにらめっこしています。

htmlとcssに関しては、数をこなして便利な記述を体に叩き込みしかないと

痛感しています。

数こなすことで、上達も早くなります。

というとより段取りがわかるので、早くなると思います。

いきなり、記述していくのは大変です。

進めていくと必ずどこかでうまくいかない自体になります。

今なっています。www

特に各要素のサイズですね。

サイズを１つ間違えるとすべてばらばらのごちゃごちゃになるのでど偉い。

今回仕事の案件で初めてポータルサイトのコーディングを一人でやっていて思ったことを書いていきます。

基本中の基本になります。

記述してい前に考えてください。幅から画像のサイズから各要素のサイズからできるだけ多くの要素のサイズを確定させる。

※※※※しなかった場合※※※※

とりあえずのwidth="100%"やhieght="100%"など後々、デザインの修正をする際など各要素が被ったりすることがあります・・・

実際ありました。そのせいで、設定したリンクまでなぜか消えるという自体も発生。www

例えば、ここにはhoverを使い。こっちには、JavaScriptで画像を差し替える。ここには、システムが入ってくるから簡素化する。

などの多少の動きがある箇所は決めておきましょう。

※※※しなかった場合※※※

全部記述してから後で、htmlとcssの修正を行う。→　他の要素のレイアウトまで崩れる。→　修正する。→　やっと適切な記述になった。→　hoverやJavaScriptを記述。→　完了。wwww

めっちゃ時間の無駄。w

例えば、１つの場所に複数の画像を入れたい場合。

cssのbackground: url();で入れるか。<img>として入れるか。わざと複数の画像を１枚の画像として<img>として使うのかによって、cssの記述がわかります。

複数の画像が重なるときは、リンクなどを考慮して作成しましょう。

リンクがある場合は、必然的に<img>としてhtmlに記述しなければなりません。

リンクなどがない場合は、わかりやすく複数の画像を１枚の画像として処理する方法がいいと思います。

あとは、z-indexで重ねる場合は、positionが必要になるので、そうなる親要素にposition: relativeを記述しなければなりません。

relativeと追加すると、レイアウトが崩れる場合があります。

私みたいになります。w

追加で初めのうちはこれしてた方がいいかも。

borderで全体に線を入れておく。

こうすることで、重なっているところや変なレイアウトが一発でわかります。

私は、これ　＋　背景に色をつけています。

だいぶわかりやすくなります。