#80日目　TechAcademy「はじめての副業コース」

提出したい最終課題

昨日に続きPerfectPixelで、重ね合わせてズレている所を修正します。

本日修正の場所は、かなり難しかったです。

「文字列と画像」が横並びで、それが3セット縦に並びます。

これが単純に縦に並ぶなら、それほど大変ではないのですが、

「文字列‐画像」
「画像‐文字列」
「文字列‐画像」

と文字列と画像の左右位置が交互になります。

そのため、1セット目の文字列を少し右に寄せようとして、margin-leftをCSSでコーディングすると、2セット目の文字列は右寄りになり過ぎてしまうという現象が起こります。

3セット目は1セット目と同じく「文字列-画像」の順番なので、OKです。

ここは本当に試行錯誤しました。

まず、文字列と画像の境界をきちんと画面横幅の真ん中になるようにそれぞれの幅を設定してみました。

そして、paddingを調整してみたのですが、これもうまくいきません・・

最終的には2セット目の画像と文字列にクラス名を追加し、それをCSSで上書きする形にして、何とかできました。

しかし、もっとスマートな方法がありそうです。

が、私のような初心者は試行錯誤しながら、例え醜いコーディングでも試してみる事が大切な気はします。

今日は時間をかけた割には進みませんでした・・