Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
第01回Web講座2018
Search
北海道科学大学 電子計算機研究部
May 07, 2018
Education
0
47
第01回Web講座2018
Atom, HTML
北海道科学大学 電子計算機研究部
May 07, 2018
Tweet
Share
More Decks by 北海道科学大学 電子計算機研究部
See All by 北海道科学大学 電子計算機研究部
第12回Network講座2019
densan
1
40
第11回Network講座2019
densan
0
65
第10回Network講座2019
densan
0
34
第09回Network講座2019
densan
1
130
第08回Network講座2019
densan
0
41
第07回Network講座2019
densan
0
41
第06回Network講座2019
densan
0
49
第05回Network講座2019
densan
0
41
第04回Network講座2019
densan
0
63
Other Decks in Education
See All in Education
Switches
irocho
0
190
前期教育実習事前指導0221
naradai
0
140
AI教育の未来『おもしろい』を作れる人材の育て方 #東京AI祭
o_ob
1
1k
Railsチュートリアルの歩き方 (第7版)
yasslab
PRO
1
1M
Tangible, Embedded and Embodied Interaction - Lecture 9 - Next Generation User Interfaces (4018166FNR)
signer
PRO
0
1.2k
「ロータリーって何?」と訊かれたら:国際ロータリー 2720地区 2023-2024年度 公共イメージ部門 副委員長・ 熊本南ロータリークラブ・ 株式会社ヒデコーポレーション 代表 大津 英敬 氏
2720japanoke
0
570
2024年度春学期 統計学 第2回 統計資料の収集と読み方(授業前配付用) (2024. 4. 18)
akiraasano
PRO
0
100
Padlet opetuksessa
matleenalaakso
3
11k
論文の読み方 / How to survey
kaityo256
PRO
177
120k
Design Guidelines and Principles - Lecture 7 - Information Visualisation (4019538FNR)
signer
PRO
0
1.7k
心房細動週間ポスター(2024年3月6日)
japanstrokeassociation
0
270
week4@tcue2024
nonxxxizm
0
380
Featured
See All Featured
Become a Pro
speakerdeck
PRO
13
4.6k
BBQ
matthewcrist
80
8.8k
Fashionably flexible responsive web design (full day workshop)
malarkey
398
65k
Producing Creativity
orderedlist
PRO
338
39k
Documentation Writing (for coders)
carmenintech
60
4k
Why Our Code Smells
bkeepers
PRO
331
56k
Product Roadmaps are Hard
iamctodd
45
9.7k
GraphQLの誤解/rethinking-graphql
sonatard
55
9.3k
The Pragmatic Product Professional
lauravandoore
26
5.8k
Building Better People: How to give real-time feedback that sticks.
wjessup
356
18k
Music & Morning Musume
bryan
41
5.6k
Ruby is Unlike a Banana
tanoku
96
10k
Transcript
ネットワークチーム 第1回 北海道科学大学 電子計算機研究部
INDEX ◦ ブラウザについて ◦ テキストエディタ導入 ◦ パッケージ導入 ◦ エディタについて 2
ブラウザについて Chrome
ブラウザについて コンソールや要素の検証など 開発者ツールをよく利用するため 本講座では Google Chrome を 使用します。 4
テキストエディタ導入 Atom
テキストエディタ導入 各自好みのエディターがあれば それを使ってください。 特に無ければ Atom を インストールします。 6
テキストエディタ導入 ◦ 「https://atom.io/」にアクセス ◦ ダウンロード、インストール 7
テキストエディタ導入 Atom起動画面 8
パッケージ導入
パッケージ導入 パッケージ コーディングに役立つ拡張機能のこと。 ユーザーが自由に導入できるため 自分だけの開発環境を作ることができる。 10
パッケージ導入 1. [Ctrl] + [,(カンマ)] でセッティングを開く 11
パッケージ導入 2. 「Install」タブをクリック 3. テキストボックスに「Japanese」と入力してエンター 4. 「Japanese-menu」の をクリック 2 3
4 12
パッケージ導入 おすすめのパッケージ ◦ Emmet tabキーで即座にタグにできる。 ※本講座必須です ◦ highlight-selected 関数,変数をダブルクリックすると一致単語を強調する。 ◦
show-ideographic-space バグに繋がる全角スペースを表示する。 ◦ bracket-matcher 対応するカッコ{}<>が分かりやすくなる。 ◦ color-picker カラーピッカーを表示する。 13
エディタについて
エディタについて 設定を自分好みに変えてみましょう。 「エディタ設定」と「システム設定」は全チェック推奨です。 15
エディタについて ショートカットキー コマンド 内容 Ctrl +↑,↓ | カーソル 位置の行を上下移動させる Ctrl
+ N 新規ファイルを開く Ctrl + S 上書き保存 Ctrl + F ファイル内の単語を検索 Ctrl + / 行をコメントアウト Ctrl + W 編集中ファイルを閉じる (無ければ終了) 16
演習1 HTMLを書いてみよう
演習1(HTML) Atomを使ってHTMLを書いてみよう 1. 任意の場所に「NetTeam」フォルダを新規作成 2.「NetTeam」フォルダを右クリックして 「Open With Atom」を選択 3.「Ctrl +
N」でファイルを新規作成 「Ctrl + S」で保存 ファイル名は「densan.html」 4.「NetTeam」フォルダの中に 「densan.html」が作成されていることを確認する 18
演習1(HTML) 確認次項 1.フォルダは作業用フォルダ 3.エンコードがUTF-8 2.行番号が表示されている 4.コーディングがHTML 3 2 1 4
19
演習1(HTML) 確認次項 1.フォルダは作業用フォルダ 3.エンコードがUTF-8 2.行番号が表示されている 4.コーディングがHTML これらを確認したら、 半角の「!」を入力して 「Tab」を押してください。 20
演習1(HTML) HTMLのテンプレートができました! 21
演習1(HTML) 次に、10行目へ飛び main と入力した後 [Tabキー] を押してください。 自動的に補完されました。 22
演習1(HTML) 以下のように書き換えて、「Ctrl + S」で保存 それでは、densan.htmlを開いてみましょう 23
演習1(HTML) ✓ 「densan.web」が表示された ✓ タイトルが「Netチーム活動」になった 24
演習2 デベロッパーツール
演習2(デベロッパーツール) デベロッパーツールを使ってみよう F12を押すと、以下のような画面が現れる。 26
演習2(デベロッパーツール) ◦で囲ったところを押下する。 Dock side でレイアウトを 変更できる。 使いやすいように設定しましょう。 27
演習2(デベロッパーツール) 「densan.web」を 「右クリック」→「検証」 とクリックすることで 該当するHTML要素を 確認できる。 28
演習2(デベロッパーツール) console.log(“hello world!”); ↲Enter コンソールにJavaScriptを書いてみましょう 29 1.デベロッパーツールを開き「Console」タブをクリック 2.以下のJavaScriptを入力
演習2(デベロッパーツール) document.getElementsByTagName(‘h1’)[0].innerHTML = (“NetTeam”); ↲Enter 30
本日はここまで お疲れ様でした