7月19日勉強会報告

「Brackets」の勉強をスタートしました👀

🚩Bracketsインストールの確認

🚩Brackets拡張機能のインストールの確認
ファイル→拡張機能マネージャーから入手
たくさんの拡張機能があるので便利なものは入れておく
   ・emmet ・Autoprefixer ・display shortcuts ・Beautify
の4種は最低限入れておく。
入手可能タブの右上の検索窓に「emmet」と入れて検索
→インストールボタンを押す
※インストール済タブで確認できる
※ネットで検索するとBracketsの便利な拡張機能が紹介されている

🚩Bracketsを開く方法
①ファイル→フォルダを開く
②フォルダごとBracketsの画面上までドロップ(これが簡単)
※Bracketsはフォルダ単位で開く
※ファイルの切り替えは左のサイドバーで行う
※フォルダ内のファイルを削除するとBrackets上のものも削除される

🚩新しいファイルの作成方法
①HTMLファイルを作る
ファイル→新規作成(Ctrl+N)→作業中のファイルの下に青字で「名称未設定-1」とでる
②htmlファイルに変える
右下のText ▼をクリックしてHTMLを選択する
③名前を付ける
ファイル→名前をつけて保存
保存先:brackets_lesson
ファイル名:index,html  (半角英数 .htmlは変更不可)

④cssファイルを作る
ファイル→新規作成(Ctrl+N)→作業中のファイルの下に青字で「名称未設定-2」
⑤ cssファイルに変える
右下のtext▼をクリックしてcssを選択する
⑥名前をつける
右サイドバー青字「名称未設定2」を右クリック→名前を付けて保存
保存先:brackets_lesson
ファイル名:style.css

🚩HTMLファイル(index.html) を書く
①! を入力後 Tabキーを押す(ctrl+Eではない!Tabキーだけ!ラクチン)
   無題.jpg

②bodyの中に #wrapper>header+#side+#main+footer|c と入力しtabキー
    無題2.jpg

③リセットcss
「基本構文ファイル」の定型文をコピペする
ペーストの位置はheadの中でできればタイトルの下
④cssのリンク
link + tabキー
⑤上書き保存(Ctrl+S)
※サイドバーの名前の前に・がついていたら保存できていない状態なので上書き保存する

🚩CSSファイル(style.css)を書く
① @でcharsetがでてくる→@charset"utf-8";
②上書き保存(Ctrl+S)
※サイドバーの名前の前に・がついていたら保存できていない状態なので上書き保存する   
※index.htmlファイルのheaderの上で右クリック
→クイック編集→新規ルール→style.cssでcssが編集できる
         無題3.jpg
        無題4.jpg

🚩ライブプレビューでリアルタイムに画面を見る
右側のサイドバーいちばん上のマーク雷マークを押す→ネットが開く
このライブプレビューとhtmlファイルを画面の左右に配置して作業するといいとのこと

~ちょっとブレイク豆知識~
①画面を2画面にして左右で便利に使う
キーボード右下windowsロゴマーク+矢印キー(→ ←)
②画面の文字の調整
ctrl押しながら+や-キーを連打して見やすくする
③サイドバーをかくして画面いっぱいにつかう 
表示→サイドバーを隠す
 


本日岡田さんが入会されました。
次回は8月9日です。
 よいこでした

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    バッテリー