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
55
第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
小さなチャレンジが生んだチームの大きな変化 -私のふりかえり探求の原点
callas1900
0
530
演習問題
takenawa
0
4.9k
The Art of Note Taking
kanaya
1
130
Human-AI Interaction - Lecture 11 - Next Generation User Interfaces (4018166FNR)
signer
PRO
0
450
アウトプット0のエンジニアが半年でアウトプットしまくった話 With JAWS-UG
masakiokuda
2
300
SkimaTalk Tutorial for Students
skimatalk
0
1.8k
Dashboards - Lecture 11 - Information Visualisation (4019538FNR)
signer
PRO
1
2k
仮説の取扱説明書/User_Guide_to_a_Hypothesis
florets1
4
300
Are puppies a ranking factor?
jonoalderson
0
820
人になにかを教えるときに考えていること(2025-05版 / VRC-LT #18)
sksat
4
1k
AIC 103 - Applications of Property Valuation: Essential Slides
rmccaic
0
200
2025年度春学期 統計学 第3回 クロス集計と感度・特異度,データの可視化 (2025. 4. 24)
akiraasano
PRO
0
130
Featured
See All Featured
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.8k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Git: the NoSQL Database
bkeepers
PRO
430
65k
The Pragmatic Product Professional
lauravandoore
35
6.7k
Practical Orchestrator
shlominoach
188
11k
Docker and Python
trallard
44
3.4k
A Modern Web Designer's Workflow
chriscoyier
694
190k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Rebuilding a faster, lazier Slack
samanthasiow
82
9.1k
Fireside Chat
paigeccino
37
3.5k
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
本日はここまで お疲れ様でした