職業訓練に入って 早1ヶ月半経ちました。
最初は喜んでいました。
が、
今はモンモンとしています
。
一通りの タグ プロパティ習い終わったので 今は
完成写真を見て 習ったことを総駆使してコードを記述して課題に
取り組んでいます。答えを見て なるほどとは思いますが、
授業で習ったのは 簡単なBoxでデモンステレーションしただけなので
応用しきれない状態なんです。
例を挙げて説明すると（コーディングに興味ない人青字の部分
飛ばして読んでください）
①
HTMLの記述
<body>
<div id="MainBox">
<div id="boxA">boxA</div>
<div id="boxB">boxB</div>
<footer>フッター</footer>
</div>
</body>
</html>
CSSの記述
@charset"utf-8";
#MainBox {
background-color:yellow;
width: 800px;
}
#boxA {
background-color:red;
width: 200px;
height:300px;
}
#boxB {
background-color:orange;
width: 400px;
height:600px;
}
footer {
background-color:skyblue;
width: 800px;
height:70px;
}
ブラウザ上の見た目はこんなんです。
①
この赤い箱にオレンジ色の箱を横に並ばせたいので
CSSで floatをかけます。
②
@charset"utf-8";
#MainBox {
background-color:yellow;
width: 800px;
}
#boxA {
float:left;
background-color:red;
width: 200px;
height:300px;
opacity:0.6;
}
#boxB {
float:left;
background-color:orange;
width: 400px;
height:600px;
opacity:0.6;
}
footer {
background-color:skyblue;
width: 800px;
height:70px;
}
②
そうすると、希望通りに赤い箱の隣にオレンジ色の箱は
並べたわけですが、下にあったフッターという箱（水色）は
上に浮いてしまい、赤とオレンジ色の箱の下に潜り込んでしまいました。
赤とオレンジ色の箱を入れていた大きい黄色い箱も消えてしまっています。
赤とオレンジ色の箱にfloatをかけて宙に浮かしてしまったので、
高さが認識できなくなったので消えてしまったんです。親つぶれともいいます。
フッター（水色の箱）が浮かない（回り込まない）ように
フッターにclearをかけてみます。
③ CSSの記述
@charset"utf-8";
#MainBox {
background-color:yellow;
width: 800px;
}
#boxA {
float:left;
background-color:red;
width: 200px;
height:300px;
}
#boxB {
float: left;
background-color:orange;
width: 400px;
height:600px;
}
footer {
clear:both;
background-color:skyblue;
width: 800px;
height:70px;
}
③
フッターはうまいこと下に配置できたし、赤とオレンジの箱は並んでますが
黄色の箱は消えてます。
黄色い箱には赤い箱 オレンジ色の箱が入ってました。
赤い箱とオレンジ色の箱は兄弟要素になります。
footerにclearをかけたから良さそうなものですが、フッターは
黄色い箱にとって子要素でない。赤い箱とオレンジ色の箱にとって
兄弟要素でない。ですから、footerにｃlearかけただけでは
親要素（floatをかけた要素にとっての）は高さを認識できないんです。
それで clearfixを使います。
架空の要素を作り、架空の要素をブロックレベルと認識させ、
その要素でクリア（回り込み解除）します。
次のように記述すると、すべてがめでたいです。
④ HTMLの記述
<body>
<div id="MainBox" class="clearfix">
<div id="boxA">boxA</div>
<div id="boxB">boxB</div>
</div>
<footer>フッター</footer>
</body>
</html>
CSSの記述
@charset"utf-8";
#MainBox {
background-color:yellow;
width: 800px;
}
#boxA {
float:left;
background-color:red;
width: 200px;
height:300px;
}
#boxB {
float: left;
background-color:orange;
width: 400px;
height:600px;
}
footer {
background-color:skyblue;
width: 800px;
height:70px;
}
.clearfix::after {
content: "";
display: block;
clear:both;}
④
こういうと～っても基本的な概念をさらっとデモンストレーションしただけで
いきなり 下の課題をやらせるんです
。
もちろん解説一切なしの答えはくれますよ。
単純な箱の配置と違って 箱の中味にごっそりいろんな要素が
詰まっているのに問題と答えだけかよ
！
そこで先生に一日6時間の授業で1時間でもよいから 課題でどうやって要素を
区分けした方が効率よいかと プロパティの使い方のポイントを解説してほしいと要望しました。
すると、答えがなんと
「御容赦いただきたい！
ほかの事務仕事も抱えている！」
どうも 総合すると 先生の給料は安いみたいで副業OKらしく 休日はドーナツ屋で
アルバイトしているみたい。
課題はドーナッツもあったし、ケーキもあった、かなりのスィートマニアとみたね。
課題をやっていると日本茶飲みたくなるんです。
クラスメイトも資格試験に興味なくイラストレーターをやりたくて来ただけの人や
仕事決まってさっさと辞めていった人もいました。
今週だって四日間休みで 来週テストがあるからどこが出るか教えてほしいって
聞いたら、まだテスト作ってないだって。
それで、人それぞれ受講目的は違うのはわかりますが、志の高い生徒に
合わせて講義してください
とお願いしました。
結局のところ、私の飲み込みが悪いのと、
先生が三流なんだと思います。教える力量が足りないのでは？
だって生徒に誤り指摘されてるんだよ。クラスメイトには
元IT会社の幹部だった人や獣医さんがいて
この人たちは先生よりわかっているように見えます。
まあ、それでも仮にも先生と名のつく人なので、私よりはわかっていますから。
通信教育よりいいかなあ程度ですね。
そこしか取り柄ないですね。
わからないを抱えてモンモンとしているよりマシかなあと
放課後 残って課題を教えてもらっています。
個人的に教えるのはいいんだって。たぶん、
みんなの前で教えると自分の力量ばれてしまうからなんでは？
学生さんたち、先生に不満がある人いるかと思います。
それでも、一応先生と名のつく人なので割り切って
教えてもらうしかないです。利用するとこは利用する。
それから、自分の苦手な箇所ってあると思います。
それでも それは全体の一部なのでそこはクリア仕切れなくても
授業は進んでいくので新しい章に入ったとき集中して授業受けるしかないです。
後でわかることってあると思うので。
そんなわけで寝ても覚めてもコーディングが気になります。