3月22日の勉強会報告書


3月22日勉強会報告書

勉強会内容
 floatの復習
 定義リストについての予告 次回(4月5日)の勉強会主題

floatについて(講師談)
☆floatはHPのデザインをするうえで最重要事項なのでよく理解に努めること。
☆floatを指定する場合の2つの決まり
 1.floatを指定する場合はサイズ指定が必要。 
   css上にwidth〇〇px、height〇〇px を必ず記述すること。
 2.css上でfloatを指定した場合は、html上で回り込み解除のクラス設定を
   必ず行うこと。
   そして、css上に講師から提供されている回り込み解除の公式をコピペすること。

floatの復習授業
問題1
講師が下記図を示し、これを横並びにするよう指示された。
図1
1.jpg
上記の図はhtml、css上では下記の図のように表示される。
3.jpg
css上ではbox1、box2、box3のサイズが表示されている。このbox1,box2,box3にfloat指定するにはそれぞれのboxにfloat:leftと記述する。しかし、floatを記述しただけでは不十分で、floatの解除について、html,css上にその旨を記述しなければならない。なぜならfloatは次の要素に影響を与えるから………。
それではその方法は、cssで3個のboxにfloatを指定したので、html上のbox1,box2,box3をドラッグし、選択した状態でShift,Ctrl,Alt keyを同時に押しながらEnter keyを押す。Emmet Boxが表示されるのでその中に、#wrapperとインプットしてOKボタンを押す。
html上に<div id="wrapper">と表示されるので、clear fixのクラス指定を記述する。その記述は、<div id="wrapper" class="clearfix">とする。
その後、css上に回り込み解除の公式(下図)をコピペする。

110.jpg
html、cssを上書き保存し、メニューバーの実行を使って確認する。
結果、図2が表示され、floatが完成しているのが分かる。
図2
2.jpg
その時のhtml、cssの記述は下記の図4のようになっている。
図4
4.jpg
文字が小さくて読みにくいと思われるのでクリックして文字を大きくて確認してください。
文字が小さくて読みづらいときはすべて同じ操作をしてください。
赤枠で囲んであるところが解答です。以下同じ。

問題2
次は、図1から図3になるようなfloatを指定するよう指示された。
図3
13.jpg
今回は、box1,box2にfloatを指定し、box3にはfloatを指定しない問題である。
図1のhtml、cssは下記のようになっている。
3.jpg
cssのbox1,box2にfloat:left;を記述し、box3にはfloat:left;は記述しない。
なので、htmlの回り込み解除もbox1,box2のみについて行えばよい。
html上でbox1,box2をドラッグして選択し、
上記と同じようにEmmetBoxを使用して、clearfix解除の記述をすればよい。
そして、css上に回り込み解除公式をコピペする。
記述は下図のようになる。
12.jpg
html、cssを上書き保存し、メニューバーの実行を使って
検証すれば、box1,box2が横並びになり、
float指定されなかったbox3は下に表示されているのが確認できる。
図3参照

問題3
図4が表示されhtml、cssの内容が下記の通り示された。
101.jpg

html             css
102.jpg

図4と上記のhtml、cssを起点として下記の図5となるようhtml、cssを
変化させよという問題

図5
104.jpg
上記図から考えられることは図5以外のものはすべて左寄せになっているが
図5のみは画面の中央に表示されていること。(この図では、正しく中央には
なっていないが画像の作り方が悪いだけなので中央にあると想像してください。)
box1はfloat指定なし、box2,box3にfloat指定、box4はfloat指定なし、
それぞれのboxのサイズは上記のcssから読み取ってください。
問題3が問題1,2と異なる点は問題3のみがすべてのboxをパソコン等の
中央に持ってくるというところです。この中央表示のコーディングが
追加されます。
すべてのboxを中央に表示するにはhtml上で<body>      </body>の
間にあるものをすべて一つの塊としてくくる必要があります。
その方法は、box1~box4をドラッグして選択し、EmmetBoxを利用する方法である。
EmmetBoxの中に#allwrapperとインプットし、OKボタン。
そして、中央表示するための記述は
#allwrapper{
    margin: 0 auto;
    width: 600px;
}となる。
また、box2,box3はfloat指定するのでEmmetBoxを利用し回り込み解除の
class指定を設定する。方法は上記問題2を参照すればよい。
css上に回り込み解除の公式をコピペし、html、cssを上書き保存し、
メニューバーの実行を使用して確認すれば画面中央に図5が表示されるはずである。
その時のhtml、css上は下記のとおりです。
103.jpg

3月22日が勉強会だったのに報告書が大変遅くなってしまったこと反省しています。
画像作成とブログを書いている途中で改行がうまくできなくて遅くなってしまいました。
堂園さん、藤田さん、南口さんにはいろいろ教えていただきありがとうございました。
次回からはもう少し早くできるように努力します。報告書担当者はサンキュー(三丘)





この記事へのコメント

  • 元アラコキ

    なんだか、すっきり。
    BLOG模様替えしましたね。
    seesaa側の移行デザインなんですか。
    2017年04月09日 12:18
  • nonkohan

    そうそう!シンプルイズベスト!って・・・・・嘘で~す(笑)
    カスタマイズ中です。しばらくお待ちください<(_ _)>
    2017年04月09日 17:32

この記事へのトラックバック