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
第1回Web講座
Search
北海道科学大学 電子計算機研究部
May 11, 2017
Programming
0
94
第1回Web講座
Google Chrome Firefox のどちらかを用意
Atom SublimeText 他、スペック,宗教にしたがってください。
北海道科学大学 電子計算機研究部
May 11, 2017
Tweet
Share
More Decks by 北海道科学大学 電子計算機研究部
See All by 北海道科学大学 電子計算機研究部
第12回Network講座2019
densan
1
57
第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
110
Other Decks in Programming
See All in Programming
いま中途半端なSwift 6対応をするより、Default ActorやApproachable Concurrencyを有効にしてからでいいんじゃない?
yimajo
2
440
他言語経験者が Golangci-lint を最初のコーディングメンターにした話 / How Golangci-lint Became My First Coding Mentor: A Story from a Polyglot Programmer
uma31
0
200
Swift Concurrency - 状態監視の罠
objectiveaudio
2
540
After go func(): Goroutines Through a Beginner’s Eye
97vaibhav
0
410
One Enishi After Another
snoozer05
PRO
0
110
Android16 Migration Stories ~Building a Pattern for Android OS upgrades~
reoandroider
0
120
タスクの特性や不確実性に応じた最適な作業スタイルの選択(ペアプロ・モブプロ・ソロプロ)と実践 / Optimal Work Style Selection: Pair, Mob, or Solo Programming.
honyanya
3
180
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
420
アメ車でサンノゼを走ってきたよ!
s_shimotori
0
230
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
400
TFLintカスタムプラグインで始める Terraformコード品質管理
bells17
2
210
Software Architecture
hschwentner
6
2.3k
Featured
See All Featured
A better future with KSS
kneath
239
18k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
132
19k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
55
3k
Reflections from 52 weeks, 52 projects
jeffersonlam
353
21k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.5k
The Invisible Side of Design
smashingmag
302
51k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
359
30k
Mobile First: as difficult as doing things right
swwweet
225
10k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
30
2.9k
Building an army of robots
kneath
306
46k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
16
1.7k
Transcript
第1回 Web講座 present by kagawa
メニュー ブラウザの用意 演習その1 エディタ(Atom)の用意 Packageの活用 (Atom 日本語化/設定) 演習その2
コンソールや要素の検証など、開発者ツールをよく使用するため Google Chrome Firefox このどちらかは使用できるようにしておいてください。 ブラウザの用意
演習その1 ブラウザを開いてF12キー。 開発者ツールの表示し、[ コンソール ] タブをクリックします。 右上辺りに画面配置を変更するボタンがあります
chrome は 長押し
演習その1 コンソールにJava Scriptを書いてみましょう
お好きなテキストエディタを用意 各自好みのエディターがあればそれを使ってください。 特に無ければ ”Atom アトム ” をインストールします。
Atom導入 「https://atom.io」にアクセス →ダウンロード,インストールしてください
Atom起動画面
Atom重い Atomの動作が重いって人は ”SublimeText3” をオススメします 1からインストールするよりは → @Kagawa か、@inaba が配布します。
Packageのインストール Packageというプログラム群をインストールすることで、 コーディングに役立つ様々な拡張機能を使用することができます。 次のページでパッケージをインストールする手順を覚えてAtomをカスタマイズしよう 参考ページ :https://blog.codecamp.jp/atom_utility
Atom日本語化 1. 「Ctrl (コントロールキー)」+「,(カンマ)」 でセッティングを開きます。 ↑ M 、の隣
Atom日本語化 2. 左欄「+Install」をクリックして 3. テキストボックスに「Japanese-menu」 と入力して[Packages]をクリック 4. 出てきた「Japanese...」の[Install]ボタンを クリックしてインストール 3
2 4
Atomおすすめパッケージ コーディングを 超・効率化するため にパッケージを入れましょう。 Emmet – tabキーで即座にタグにできる。 ※本講座必須です
highlight-selected – 関数,変数をダブルクリックすると一致単語を強調する。 show-ideographic-space – バグに繋がる全角スペースを表示する。 bracket-matcher – 対応するカッコ{}<>が分かりやすくなる ato m- [開 発 言 語 色々 ] デフォルトで入ってる?C,C++,java...他 他…いくらでもあるので検索してバンバン入れましょう 参考ページ : https://tech-camp.in/note/1079/#i-4
Atom設定 左欄の「<>Editor」欄 をクリックし下にスクロール お好みのチェックボックスに 入れてください 全✓オススメします。
Atom設定 左欄の「System」欄 をクリックし下にスクロール お好みのチェックボックスに 入れてください 全✓オススメします。
右クリックからAtomで編集が 追加されます
Atomショートカット コマンド 内容 Ctrl +↑,↓ | カーソル 位置の行を上下移動させる Ctrl +
N 新規ファイルを開く Ctrl + S 上書き保存 Ctrl + F ファイル内の単語を検索 Ctrl + / 行をコメントアウト Ctrl + W 編集中ファイルを閉じる (無ければ終了)
演習その2 Emmetの威力を試してみましょう。 Atomで新規ファイルを作成。Ctrl + S で*作業用フォルダ*に保存。 ファイル名を「densan.html」と保存。するとhtmlを書く用意が完了する。
次ページで状態を確認してください。 *制作物を置いておく フォルダを作っておいてください。
演習その2 確認次項 1. フォルダは作業用フォルダ 2. 行番号が表示されている 3. コーディングがHTML 4. エンコードがUTF-8
を確認したなら html:5、 もしくは 半角!を打って Tabキーを押してください 1 2 3 4
演習その2 htmlのテンプレができます! あとは [Tabキー]↲ [Tabキー] densan.Web とmainに追加ください <
>も変えて、 「Ctrl + S」上書き保存。
演習その2 それでは、作業フォルダの を開いて見てみましょう タイトルが <title>になった h1見出し
HTMLが書けました
本日はここまで HTML+CSS