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日です。
 よいこでした

この記事へのコメント


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