とーしゅのしゅーと

地方在住の会社員(社内SE)で2児の母が、サイドFIREを目指します

WEB制作勉強ぷろぐれす11

※当ブログではアフィリエイト広告を利用しています

昨日・今日はCodejumpという無料のコーディング学習サイトでサイト制作の練習を行いました。

入門編のレシピサイトのトップページの作成です。

 

昨日あらあらとHTMLファイルとCSSファイルを書いていました。

HTMLファイルは9割書けました。

今回もCSSファイルのコーディングでつまずきます。

 

前回コンテンツの横並びで苦戦しました。

今回も同様にコンテンツの横並びのところでわからなくなりました。

原因は、デザインの指定範囲がおかしいことでした。

 

クラスやIDを指定して、その箇所のみデザインを変更することができます。

さらにそのクラスやID内の要素に対しても細かく装飾することができます。

私がつまずいたのは、以下の状況でした。

 1.あるリストに”recipe”というクラスを指定。

 2.CSSで.recipe ulとして横並び設定

 3.横並びにならない…

 

正しくは、2で.recipeに対して横並び設定を行うでした。

私が設定していた状態だと、recipeクラスの中のulに対して横並び設定している状態です。

recipeクラスの中にはulがないので、どこも横並び設定されないという結果になるのだと思います。

こうやって振り返ると、自分でもどうしてそのような書き方をしていたのか不思議です。

わかっているようでわかっていないんだろうなぁ

 

サンプルコードをみて自分が書いたコードを直すだけでなく、何がおかしかったのか原因を究明すると理解が進みますね!

また初めてみるプロパティを知ると表現方法の幅が広がると感じます。

自分のペースで練習をたくさんして楽しんでいきます!

 

そんな感じです。

あらあらかしこ~

 

グループに参加しています!