8月9日の勉強会報告

今回は、「Brackets」の扱い方について復習しました。前回の学習(7月19日)と重なる部分が
ありますので、その部分は省略しました。前回の勉強会報告と併せてお読みください。

👤 デスクトップに作った新規のフォルダに名前を付けます。→「tonnet」
👤 フォルダを右クリックして「open as brackets object」を選び、bracketsを開きます。
🎵index.htmlとstyle.cssを作る。(前回に詳述)

🎵サイドバーに出るhtmlとcssの文字がブルーになっているのは「作業中」の目印。
a005.JPG

🎵作業中のhtmlやcssの前に「・」がつく。上書き保存すると、「・」は消えます。
WS000000.JPG

☁ htmlのbodyとbodyの間に
     header
   #main
   #side
    footer

🔑 headerの上でtabキーを押すと、
  <HEADER> </HEADER>になります。

🔑 #mainの場合、tabキーを押すと<DIV ID="MAIN"> </DIV>に変わります。
  #side,footerも同じです。

☁ css側では
   header  w980
  h100
  bgc #000(任意の背景色)

 #main  w700
  h500
  bgc #000(上に同じ)

  #side   w280
  h500
  bgc #000(上に同じ)
 
  footer W980
  h50
  bgc #000(上に同じ)

🎄 下のように4つの箱をタテに並べます。
a001.JPG

⛵ bgc(背景色)を早出しするには、#000上で右クリック→[クイック編集]
を選ぶと、下記のようにカラーピッカーが出ます。
003 .JPG

0004.JPG

🐱 タテに並ぶ4箱をヨコ並びにデザインするために、まずhtmlにwrapperで囲みます。
<DIV ID="WRAPPER">

🐱 css側のheader、#main,#sideにfl(float:left)を追加します。
 floatの流れを止めるために html側に<DIV ID="CONTENTS" CLASS="CLEARFIX">と入れます。

🚩 css側には、下の定型句を書きます。
    .clearfix:after {
   content:" ";
   display:block;
   clear:both;}

🔍その他、いろいろ
🏁 htmlとcssに関する必要な基本構文(reset, clearfixなどの定型句,4月4日勉強会で
  配布済み)は、いつでも使えるようにデスクトップにフォルダで備えておくこと。

⚽ 宿題は、wrapperでくくって、全体図を中央へ移行しておくこと。

002.JPG

⚾ bracketsは、GoogleChromeとマッチしているので、IE(インタネット・エクスプローラー)でダウンロードして使うと、不具合がでるとサンキュウ―さんが教えてくれました。

⛳ 新加入予定の岡田さんは、ご都合でお休みでした。

⁉ <HEADER> </HEADER> 等は本来、小文字ですが、対句にすると、指示タグとみなされて、ブログに反映しませんでしたので、大文字にしています。

🎾 次回は、今回の復習と完成をめざします。

                           by 元アラコキ

この記事へのコメント