第1回Web講座

Google Chrome Firefox　のどちらかを用意
Atom SublimeText 他、スペック,宗教にしたがってください。

Transcript

1. 第１回 Web講座 present by kagawa
2. メニュー ブラウザの用意 演習その１ エディタ(Atom)の用意 Packageの活用 (Atom 日本語化/設定) 演習その２
3. コンソールや要素の検証など、開発者ツールをよく使用するため  Google Chrome  Firefox このどちらかは使用できるようにしておいてください。 ブラウザの用意
4. 演習その１  ブラウザを開いてF12キー。  開発者ツールの表示し、[ コンソール ] タブをクリックします。  右上辺りに画面配置を変更するボタンがあります  chrome は 長押し
5. 演習その１  コンソールにJava Scriptを書いてみましょう
6. お好きなテキストエディタを用意 各自好みのエディターがあればそれを使ってください。 特に無ければ ”Atom アトム ” をインストールします。
7. Atom導入  「https://atom.io」にアクセス →ダウンロード,インストールしてください
8. Atom起動画面
9. Atom重い  Atomの動作が重いって人は ”SublimeText3” をオススメします １からインストールするよりは → ＠Kagawa か、@inaba が配布します。
10. Packageのインストール Packageというプログラム群をインストールすることで、 コーディングに役立つ様々な拡張機能を使用することができます。 次のページでパッケージをインストールする手順を覚えてAtomをカスタマイズしよう 参考ページ ：https://blog.codecamp.jp/atom_utility
11. Atom日本語化 1. 「Ctrl (コントロールキー)」+「,(カンマ)」 でセッティングを開きます。 ↑ M 、の隣
12. Atom日本語化 2. 左欄「＋Install」をクリックして 3. テキストボックスに「Japanese-menu」 と入力して[Packages]をクリック 4. 出てきた「Japanese...」の[Install]ボタンを クリックしてインストール ３ ２ ４
13. Atomおすすめパッケージ  コーディングを 超・効率化するため にパッケージを入れましょう。  Emmet – tabキーで即座にタグにできる。 ※本講座必須です  highlight-selected – 関数,変数をダブルクリックすると一致単語を強調する。  show-ideographic-space – バグに繋がる全角スペースを表示する。  bracket-matcher – 対応するカッコ｛｝<>が分かりやすくなる  ato m- [開 発 言 語 色々 ] デフォルトで入ってる？Ｃ,C++,java...他 他…いくらでもあるので検索してバンバン入れましょう 参考ページ ： https://tech-camp.in/note/1079/#i-4
14. Atom設定  左欄の「＜＞Editor」欄 をクリックし下にスクロール  お好みのチェックボックスに 入れてください  全✓オススメします。
15. Atom設定  左欄の「System」欄 をクリックし下にスクロール  お好みのチェックボックスに 入れてください  全✓オススメします。  右クリックからAtomで編集が 追加されます
16. Atomショートカット コマンド 内容 Ctrl +↑,↓ | カーソル 位置の行を上下移動させる Ctrl + N 新規ファイルを開く Ctrl + S 上書き保存 Ctrl + F ファイル内の単語を検索 Ctrl + / 行をコメントアウト Ctrl + W 編集中ファイルを閉じる (無ければ終了)
17. 演習その２  Emmetの威力を試してみましょう。  Atomで新規ファイルを作成。Ctrl + S で*作業用フォルダ*に保存。  ファイル名を「densan.html」と保存。するとhtmlを書く用意が完了する。  次ページで状態を確認してください。 ＊制作物を置いておく フォルダを作っておいてください。
18. 演習その２ 確認次項 1. フォルダは作業用フォルダ 2. 行番号が表示されている 3. コーディングがHTML 4. エンコードがUTF-8 を確認したなら html:5、 もしくは 半角！を打って Tabキーを押してください １ ２ ３ ４
19. 演習その２  htmlのテンプレができます！ あとは [Tabキー]↲ [Tabキー] densan.Web とmainに追加ください  < >も変えて、  「Ctrl + S」上書き保存。
20. 演習その２  それでは、作業フォルダの を開いて見てみましょう  タイトルが <title>になった  h１見出し  HTMLが書けました
21. 本日はここまで HTML+CSS