brackets使い方復習です!

次回の勉強会までに時間があるので、復習です。

①まずはフォルダを作りましょう。
bracketsはフォルダ単位で編集しますので、必ず作業用フォルダが必要です。
フォルダの作り方はわかりますか?
分からない方はこちら・・・
http://rsmay.com/online/shoumeisho2/body01-2.html

フォルダの名前を適当に付けてください。。。って言うと迷う人がいるので(笑)
testという名前のフォルダを作りましょう。


②bracketsを開いてみましょう。
bracketsのマークをクリックしてください。

brackets.jpg

③bracketsでtestフォルダを読み込ませましょう。

1.png

まずはココまで!やってみましょう!
出来ない人はnonkohanまでメールください!!!!!

7月5日勉強会報告

7月1回目の勉強会報告です。

先回からの続きで、今回は、#side、footerを完成させました。
<html編>
1.課題コピペ用のフォルダの中の手順3から、htmlの#side、footerの中に文章をコピペします。
 ①見出しは、h2タグで囲みます。
 ②中身の文章は、pタグで囲みます。
 ③メールフォームは、pにfoamとクラス指定をして、囲みます。
 ④footerの中身は、pタグで囲みます。

<CSS編>
1.それぞれデザインをかけていきます。#sideです。
 ①sideのbackgroundを濃いグレーにします。
 ②sideの文字を白にします。
 ③sideのタイトルの文字下に線を引く。
 ④sideのタイトルを真ん中にもっていく。
 ⑤sideの文字の両脇に空間をつくる。paddingで指定してください。

2.footerです。
 ①文字を真ん中にもっていきます。
以上を入力すると、以下のようになります。

 <html>
 <div id="side">
<h2>お問い合わせはこちら </h2>
<p>ご意見ご質問は下記のボタンをクリックしてメールフォームよりご送信下さい</p>
<p class="form">メールフォーム </p>
<h2>部員募集中 </h2>
<p>ただ今部員募集中です。カメラに興味のある方はぜひご参加下さい</p>
 </div>
<footer>
<p>@Tondabayashi photograph Club</p>
</footer>


<CSS>
#side{width: 180px;
height: 1000px;
background-color: #696969;
float: left;
color:#fff;
padding:10px;}
#side h2{font-weight:bold;
text-align:center;
border-bottom:1px solid #fff;}
footer{width: 980px;
height: 30px;
text-align:center;}

以上でした。

☆便利ツール情報です。
◎ボックスサイジング・・・サイトすべてにデザインをかける。bxsz+ctrl+E
CSSのなかに

*{-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;}
 
CSSの中にいれておくと、padding、margin、borderで、内容が太る分、それぞれの幅を変更しなくても
自動で、調整してくれる。

今までは、padding:0 10px;としていたとき、
width:200px;にしていたら、width:180px;と変更しなければならなかったのです。


次回からは、bracketsを導入して勉強会をします。
ダウンロードできる方は、ダウンロードしておいてください。
堂園さんの導入手順書を張り付けてます。↓↓↓

http://brackets.io/

Download Brackets 1.9
ダウンロードサイトの四角い箱をクリックしてダウンロード開始します。
あとはOKでOK!


拡張機能がすごい!これだけは入れておきましょう!

*絶対入れてください!* 

Emmet おなじみのemmetは略語で書くだけなので作業が早くなります

Autoprefixer ベンダーフレックスを自動で最新版にしてくれます
(編集→Auto Prefixer on Saveにチェックを入れる)


*お好みで入れて下さい*

Display Shotcut
Ctrl + Alt + / でショートカットキーを表示してくれます。
Bracketsだけでなくemmetも表示してくれますので慣れるまで便利かも?

Beautify タグの位置を正しく直してくれます
まれに不要なスペースが入るバグがあります。
自分で修正できる人だけ入れましょう。

Response for Brackets-original
レスポンシブデザインの開発に便利ですが、まだ開発途中です・
今後に期待!!


Sidebar Pulus サイドバーのオンオフが簡単になり、画面が広く使えます。
(ツールバー → デバッグ → 環境設定ファイルを開く→brackets.jsonに
"sidebarplus.triggermode": "mouseover" , ←カンマ大事!
を追加1行目に追加したほうが無難かも?)→表示→サイドバーを隠すにチェック

本日、岡田さんが勉強会見学に来られました。
8月の勉強会は、9日、23日の第2、4週です。
9月からは、第1週、3週に戻ります。
よろしくお願いいたします。
次回の勉強会は、7月19日です。

りかこでした。



Braketsについてちょっと予習です。

先日、サークルでお伝えしたBracketsですが、無料なのにほんとにすぐれもの!
興味を持たれた方のためにちょっとご紹介。

まず、ダウンロードはこちらhttp://brackets.io/

brackets.png


使い方の簡単な解説サイトはこちら
(5分で学べるBracketsの使い方)
howto.png

先に予習しておきたい方は、やってみてください。
私も始めたばかりなので、まだ使いこなせていません。・゚゚・(>_<;)・゚゚・。
ガンガン予習して、HELP MEです!


追伸

拡張機能も素晴らしいです。
これができるならレスポンシブデザインなんか簡単やん!って思いました(涙)



nonkohan

6月21日の報告

1.今回の課題
  
  1-1 4枚の写真(img00.jpg~imgo3.jpg)と各見出し・文章を
      それぞれ一つのグループに分けて取り込む
  1-2 各写真と各小見出し(文章含む)を左右テレコに配置する


2.紹介プログラム

  2-1 Brackets(編集用プログラム)
  2-2 CSS3(スマホ対応)
  2-3 Scratch(2020年より教科採用のビジュアルプログラミングツール)


3.連絡事項(勉強会開催予定日)

  3-1 7月 → 5日と19日 (申請書提出済)
  3-2 8月 → 9日と23日 (第2・4週に変更)


4.余録

  「Scratch」は「ドットインストール」の中に詳しく説明されているので
   興味のある方はそれを参照してください
   HTMLに使われている「JavaScript」を理解する上で役に立つと思います


                             BY    バッテリー





  


6月7日 勉強会

1.まずはこのようなデザインを作ってみよう


study6-7-NO1.png


(1)デスクトップ上に、新規ファイルを作成、ノートパッドを開き、index.htmlHTML形式として新規ファイルに保存、style.cssCSS形式にして新規ファイルに保存する。

index.htmlで !を打ち、CTRL+Eで変換、ひな形が出たら、言語をjaに変えて、リセットCSSを記載して、style.cssにリンクさせる(会員はすべて把握されていると思います)。


(2)短縮一括打ちを行うheader+#contents.cleafix>#main+#side^footer|c[CTRL+E]  

<header></header>

<div id="contents" class="cleafix">

              <div id="main"></div>              <!-- /#main -->

              <div id="side"></div>  <!-- /#side -->

</div><!-- /#contents.cleafix -->

<footer></footer>     

これでHTMLは完成です。つづいてCSSでデザインをかける必要があります。


(3)CSSでは、まず最初に@charset "UTF-8";を打ち込む。 その後、

header{}においてW100ph300bgc と短縮形を打ち込む(CTRL+Eで下記が出る)。

header{   width: 100%;height: 300px;background-color: #FF26C9;}


(4)下記も短縮形で打ち込みCTRL+Eで表示させる。 w500  h500  bgc  fl

① #main{width: 500px;height: 500px;background-color: #FFFF00;float: left;}


#side{width: 300px;height: 500px;background-color: #008C8C;float: left;}


#main#sideの両方にfloat: left;をかけたので、これはこの二つの塊でしか作用しないようにする為に、親要素の#contents"cleafix"をかけている。#contentsの中に#main#sideが詰め物として入っているので、これを中央に位置させるためには、#contentsmargin: 0 autoをかける。

しかし、margin: 0 autoをかけるには必ずサイズ指定をしなければならないので、#contentswidth: 800px; margin: 0 auto}と打つ。

ここで#contentsに高さは書かなくて良いかといえば、高さは自動的にheight: auto;が入っているのでなくても良いが、気になるなら入れてもよい(入れなくても自動的に完了済み)。


footer{ width: 100%;height: 50px;background-color: #3600D9; }


以上が今までのおさらいです。本プログの最初に表示した図が完成したでしょうか。


2.では前回の続きです。最終的には下記のイラストになるまでデザインをかけてください。


study6-7-NO2.png

(1)ここに、手順書1のよりheaderCSSを完成させましょう。

headerの背景に画像を読み込みます。(imagesフォルダの中のheader1.jpg

h1タグは24px、太字、上下に1pxの実線を引きます。

*pタグは12px

*ナビバーは14px、太字、背景に薄いグレー、リンクの下線は無し、上下に5pxpadding、ナビバーどうしがくっつかないようにmarginも指示しましょう。

hoverで背景を濃いグレー文字を白にします。


(2)上記の支持を短縮形で打ちます(CTRL+Eで全表示させる)


headerの背景に画像を読み込みます。(imagesフォルダの中のheader1.jpg

bgi+CTRL+E)  background: url(images/header1.jpg) 0 0 no-repeat;

header{width: 300px; height: 1000px;  background-color: #ff4c4d; float: left;           background: url(images/header1.jpg) no-repeat; }

[補足] 写真を入れるときはbackground: url(images/header1.jpg) no-repeat;とすべきであり、background-color:;という指示をしてはいけない。


h1タグは24px、太字、上下に1pxの実線を引きます。

header h1{fz24fwbbdt+ } (CTRL+Eで全表示させる)。

header h1{font-size: 24px;font-weight: bold;

border-top: 1px solid #000;border-bottom: 1px solid #000;}


pタグは12px

header p{fz12}CTRL+Eで全表示させる) {font-size: 12px;}  


ナビバーは14px、太字、背景に薄いグレー、リンクの下線は無し、上下に5px

header nav{fz14fwbbgc}

header nav{font-size: 14px;font-weight: bold;background-color: #DDDDDD;}


ナビバーの一塊にバックグランドカラーをつける header nav ul li{bgc}

header nav ul li{background-color: #DDDDDD;}


リンクの下線をなしにする。

header nav ul li a{tdn} header nav ul li a{text-decoration: none; }


上下に5pxpadding、ナビバーどうしがくっつかないようにmarginも指示しましょう。

display: block; の短縮形はdbです、その他は各自で考えてみてください.

header nav ul li a{text-decoration: none;padding-top: 5px;padding-bottom: 5px;

display: block;}

paddingmarginを支持する場合に絶対に忘れてはいけないことはインライン要素にはmarginpaddingは発動しない。アンカータグ(a)はインライン要素なので、ブロック要素に変える必要がある。そこでdisplay: block;という指示をheader nav ul li aに組み入れなければならない。


マウスを持って行った場合にNAVの項目のバックグラウンドカラー-や文字の色を変えるにはhoverが必要という項目が必要である。:をhoverの前に入れる。約束を忘れてはならない、

header nav ul li a:hover{background-color: #464637;color: #FFF;}



HOME WORK】今日渡した手順書2にmainを支持する説明分を記載しているので、その手順書に従ってmain を次回までに作成して下さい(写真を縦に入れてみて下さい)。


【その他 規約決定事項】 休会についての規定が決まりました。事前に1~3か月休むということを申し入れても休会として受け付けはできません。3か月までは会員は会費を支払わなければならない。3か月以上(4か月め以降の復帰予定)の場合は事前に文書(メール可)で休会届を役員に提出することで翌月からの休会会員(4か月め以降の復帰予定)として認められ翌月からの会費は支払わなくてもよい。休会が認められた会員が3か月以内に復帰する場合は過去の1~2か月分の会費を復帰の際に支払う義務が生じる。


今回のブログ担当は ショコラでした。