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
2025.05.10 技術書とVoicyとわたし #RPALT
kaitou
1
230
JOAI2025講評 / joai2025-review
upura
0
180
2025年度春学期 統計学 第4回 データを「分布」で見る (2025. 5. 1)
akiraasano
PRO
0
110
Gamified Interventions for Composting Behavior: A Case Study Using the Gamiflow Framework in a Workplace Setting
ezefranca
1
140
Pythonパッケージ管理 [uv] 完全入門
mickey_kubo
20
15k
Pydantic(AI)とJSONの詳細解説
mickey_kubo
0
130
2025年度春学期 統計学 第6回 データの関係を知る(1)ー相関関係 (2025. 5. 15)
akiraasano
PRO
0
100
小さなチャレンジが生んだチームの大きな変化 -私のふりかえり探求の原点
callas1900
0
560
SkimaTalk Teacher Guidelines Summary
skimatalk
0
800k
Virtual and Augmented Reality - Lecture 8 - Next Generation User Interfaces (4018166FNR)
signer
PRO
0
1.7k
今も熱いもの!魂を揺さぶる戦士の儀式:マオリ族のハカ
shubox
0
210
データ分析
takenawa
0
7.4k
Featured
See All Featured
Visualization
eitanlees
146
16k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Docker and Python
trallard
45
3.5k
It's Worth the Effort
3n
185
28k
Designing for Performance
lara
610
69k
Writing Fast Ruby
sferik
628
62k
Balancing Empowerment & Direction
lara
1
440
Scaling GitHub
holman
460
140k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
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
本日はここまで お疲れ様でした