Inner要素について。（container?wrapper?inner?)

さて、しょーごさん課題の「初級編」をほぼ終えたのですが、一点、横並びにした要素（Box)に影をつけるというのが、どうもCSSが当たっていない気がして、確認したら、やはり当たっていませんでした・・・。

drop-shadowとbox-shadow

と思ったらそんなわけはなく、単純にbox-shadowをdrop-shadowと書き間違えていただけでした・・・。

なぜそうなったかと言うと、カンプを見ると、「ドロップシャドウ」と記載があるので、drop-shadowで記述しないといけないという思い込みがあったのですが、そうではなく、Box要素に影をつけたい時は、ドロップシャドウと同じような効果をBoxにつけられる、と言う意味でbox-shadowを使わないといけなかったようです。ひとつ勉強になりました。（ググった上での自分なりの解釈です。）

ちなみに、記述の仕方は似ていますが、下記のように、box-shadowの記述にはカッコ()がつかないとか、微妙に違います。

box-shadow: 0 3px 6px #00000029;
filter: drop-shadow (0 3px 6px #00000029);

インナー要素について

ということで、無事に「初級編」を終えたのですが、その前に、マガジンの最後の方に書いてある、「コーディングはインナー要素を覚えることから始まる」という記事を読みました。

確かに、コーディングを初めて最初の頃は、marginとpaddingの使い方が全く分かっておらず、要素の幅の整え方や、画像は全画面幅、テキストは幅を揃えて中央に寄せる、という単純な事すらかなり苦戦しました。

検証ツールを使えるようになってきた今は、marginとpaddingの整え方がやっと分かってきましたが、今でもインナー要素のHTMLの記述には迷うところがあります。

そもそも、container, wrapper, innerのどれを使うべきなのかもよく分かっていません。。。

英語からくるイメージだと、wrapper（おにぎりとかを包むイメージ）よりcontainer（船に積むコンテナのイメージ）の方が大きいと感じてしまい、そのように使っているのですが、一般的にはwrapperの方がより大きいという説もあり。

ましてやinnerなんて出てきた日には、インナー？？下着？？かなｗ もっと内側に使うのか？！と混乱しまくり。。

これは、制作現場によってどのように統一されているかは違うようですので、とりあえず私の場合は、大きい方から順に、container, wrapper, innerと使い分けようかと思います。間違っていたら、後から修正します！

次は、「初級EX編」に挑戦！

さて、次は「初級EX編」に挑戦！

この「初級EX編」から、しょーごさんによる2回のレビューがつきます。そのために、サーバへのアップロードなどもすることになるので、ドキドキです。ちなみに、このブログを書くために、すでにサーバーの契約は済んでおり、ConohaWingを使用していますが、正直言って、ブログを書くための設定ですらいっぱいいっぱいで、何一つ使いこなせておりません・・・。

課題を提出する過程で、勉強したいと思います。