あそぶ技術

フィヨルドブートキャンプでRuby on railsの学習をしている僕の学習ブログです。

フィヨルドブートキャンプ七日目 CSSの課題の躓き

一人でCSSの課題をやっています。

CSSの課題制作を始めました。

段取りとイメージ

まずはどんな風にレイアウトしていったら良いのかをHTMLと見本画像を見比べながら描いていきました。 大枠の部分は何となくイメージはついてきたのですが、段取りがいまいち良く解っていません。

コンテンツの前のヘッダー、グローバルナビゲーション、パンくずリスト、広告バーナーの部分から進めていきました。

CSSの課題の躓き

CSSで実際に作ってみることにしました。 覚えたてのflexに挑戦しています。

最初は何とか上手く行っていたのですが、広告バーナーの部分でハマってしまいました。 top-adsのレイアウトが上手く行かないです。

やりたかったこと

  • ①バナーの上下左右、バナーとバナーの間を全て同じ感覚(1em)で空ける。
  • ②空いた場所に#eeeの色を表示させる。

結果

①は色々こねくり回して形だけは出来たのですが、②が上手く行かないです。 上下がbodyの暗い灰色になってしまいます。

上手く行かないのであっちこっち弄って足したり消したりを繰り返すんですが、上手く行かず頭がこんがらがってきます。

.top-ads のBOX .top-adsのCSS

.top-ads ul のBOX .top-ads ulのCSS

.top-ads img のBOX .top-ads imgのCSS

やったこと

  • ulのdisplayをflexにし、flex-direction: row;で横並びにする。
  • imgをブロック要素にし、widthを100%に指定し画像が親要素の幅で表示されるようにする。
  • imgのwidthをcalcで1emマイナスする。
  • マイナスした分をimgのmarginに0.5emすることでプラスし埋める。
  • ulの上下左右marginに0.5em足してimgと合わせて1emにしたい為、ulのwidthとheightからそれぞれ1emづつマイナスする
  • マイナスした分をulのmarginに0.5emすることでプラスし埋める。

失敗例

.top-adsの高さが足りないのかなと思いwidth: calc(100% + 2em);を追加。 同じ理由でimgの高さを100%で指定したり

といった感じです。

次回

次回はこれの続きか、解決できそうになかったらコンテンツ部分をやっていこうと思います。 明日は別の予定があるためローカルで参加するのは明後日になります。 以上です。