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
53
第01回Web講座2018
Atom, HTML
北海道科学大学 電子計算機研究部
May 07, 2018
Tweet
Share
More Decks by 北海道科学大学 電子計算機研究部
See All by 北海道科学大学 電子計算機研究部
第12回Network講座2019
densan
1
56
第11回Network講座2019
densan
0
70
第10回Network講座2019
densan
0
46
第09回Network講座2019
densan
1
160
第08回Network講座2019
densan
0
49
第07回Network講座2019
densan
0
46
第06回Network講座2019
densan
0
71
第05回Network講座2019
densan
0
51
第04回Network講座2019
densan
0
100
Other Decks in Education
See All in Education
推しのコミュニティはなんぼあってもいい / Let's join a lot of communities.
kaga
2
1.8k
OJTに夢を見すぎていませんか? ロールプレイ研修の試行錯誤/tryanderror-in-roleplaying-training
takipone
1
180
2025年度春学期 統計学 第12回 分布の平均を推測する ー 区間推定 (2025. 6. 26)
akiraasano
PRO
0
140
20250625_なんでもCopilot 一年の振り返り
ponponmikankan
0
280
America and the World
oripsolob
0
520
JPCERTから始まる草の根活動~セキュリティ文化醸成のためのアクション~
masakiokuda
0
200
日本の教育の未来 を考える テクノロジーは教育をどのように変えるのか
kzkmaeda
1
220
AIC 103 - Applications of Property Valuation: Essential Slides
rmccaic
0
280
万博非公式マップとFOSS4G
barsaka2
0
630
技術文章を書くための執筆技術と実践法(パラグラフライティング)
hisashiishihara
19
6.6k
2025年度春学期 統計学 第14回 分布についての仮説を検証する ー 仮説検定(1) (2025. 7. 10)
akiraasano
PRO
0
120
CHARMS-HP-Banner
weltraumreisende
0
380
Featured
See All Featured
Unsuck your backbone
ammeep
671
58k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Visualization
eitanlees
146
16k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
RailsConf 2023
tenderlove
30
1.2k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
47
9.6k
For a Future-Friendly Web
brad_frost
179
9.8k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
850
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Statistics for Hackers
jakevdp
799
220k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
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
本日はここまで お疲れ様でした