第01回Web講座2018

Atom, HTML

Transcript

1. ネットワークチーム 第１回 北海道科学大学 電子計算機研究部
2. INDEX ◦ ブラウザについて ◦ テキストエディタ導入 ◦ パッケージ導入 ◦ エディタについて 2
3. ブラウザについて Chrome
4. ブラウザについて コンソールや要素の検証など 開発者ツールをよく利用するため 本講座では Google Chrome を 使用します。 4
5. テキストエディタ導入 Atom
6. テキストエディタ導入 各自好みのエディターがあれば それを使ってください。 特に無ければ Atom を インストールします。 6
7. テキストエディタ導入 ◦ 「https://atom.io/」にアクセス ◦ ダウンロード、インストール 7
8. テキストエディタ導入 Atom起動画面 8
9. パッケージ導入
10. パッケージ導入 パッケージ コーディングに役立つ拡張機能のこと。 ユーザーが自由に導入できるため 自分だけの開発環境を作ることができる。 10
11. パッケージ導入 １． [Ctrl] + [,(カンマ)] でセッティングを開く 11
12. パッケージ導入 ２． 「Install」タブをクリック ３． テキストボックスに「Japanese」と入力してエンター ４． 「Japanese-menu」の をクリック ２ ３ ４ 12
13. パッケージ導入 おすすめのパッケージ ◦ Emmet tabキーで即座にタグにできる。 ※本講座必須です ◦ highlight-selected 関数,変数をダブルクリックすると一致単語を強調する。 ◦ show-ideographic-space バグに繋がる全角スペースを表示する。 ◦ bracket-matcher 対応するカッコ｛｝<>が分かりやすくなる。 ◦ color-picker カラーピッカーを表示する。 13
14. エディタについて
15. エディタについて 設定を自分好みに変えてみましょう。 「エディタ設定」と「システム設定」は全チェック推奨です。 15
16. エディタについて ショートカットキー コマンド 内容 Ctrl +↑,↓ | カーソル 位置の行を上下移動させる Ctrl + N 新規ファイルを開く Ctrl + S 上書き保存 Ctrl + F ファイル内の単語を検索 Ctrl + / 行をコメントアウト Ctrl + W 編集中ファイルを閉じる (無ければ終了) 16
17. 演習１ HTMLを書いてみよう
18. 演習１（HTML） Atomを使ってHTMLを書いてみよう １． 任意の場所に「NetTeam」フォルダを新規作成 ２．「NetTeam」フォルダを右クリックして 「Open With Atom」を選択 ３．「Ctrl + N」でファイルを新規作成 「Ctrl + S」で保存 ファイル名は「densan.html」 ４．「NetTeam」フォルダの中に 「densan.html」が作成されていることを確認する 18
19. 演習１（HTML） 確認次項 １．フォルダは作業用フォルダ ３．エンコードがUTF-8 ２．行番号が表示されている ４．コーディングがHTML ３ ２ １ ４ 19
20. 演習１（HTML） 確認次項 １．フォルダは作業用フォルダ ３．エンコードがUTF-8 ２．行番号が表示されている ４．コーディングがHTML これらを確認したら、 半角の「!」を入力して 「Tab」を押してください。 20
21. 演習１（HTML） HTMLのテンプレートができました！ 21
22. 演習１（HTML） 次に、１０行目へ飛び main と入力した後 [Tabキー] を押してください。 自動的に補完されました。 22
23. 演習１（HTML） 以下のように書き換えて、「Ctrl + S」で保存 それでは、densan.htmlを開いてみましょう 23
24. 演習１（HTML） ✓ 「densan.web」が表示された ✓ タイトルが「Netチーム活動」になった 24
25. 演習２ デベロッパーツール
26. 演習２（デベロッパーツール） デベロッパーツールを使ってみよう F12を押すと、以下のような画面が現れる。 26
27. 演習２（デベロッパーツール） ◦で囲ったところを押下する。 Dock side でレイアウトを 変更できる。 使いやすいように設定しましょう。 27
28. 演習２（デベロッパーツール） 「densan.web」を 「右クリック」→「検証」 とクリックすることで 該当するHTML要素を 確認できる。 28
29. 演習２（デベロッパーツール） console.log(“hello world!”); ↲Enter コンソールにJavaScriptを書いてみましょう 29 １．デベロッパーツールを開き「Console」タブをクリック ２．以下のJavaScriptを入力
30. 演習２（デベロッパーツール） document.getElementsByTagName(‘h1’)[0].innerHTML = (“NetTeam”); ↲Enter 30
31. 本日はここまで お疲れ様でした