第1回「初めてのWebとGit」

Transcript

1. 第1回イベント Speakers Taisei Goto (Frontend Lead) Saurabh Sharma (Chapter Lead) 初めてのWebとGit
2. 本日の流れ 目次 Part I：Webデザイン Part II：ソースコード管理 ・Webについて ・Gitとは ・HTML ・Github ・CSS ・Github Pages
3. 本日の目的 今日やること ・自分のWebページを作って、オンライン上で公開する
4. Web 本来の意味：クモの巣のような網状のもの 今回のWebは、World Wide Webのことを指す インターネットを利用して提供されるハイパーテキスト システム Webについて
5. Webのレイヤー HTML,CSS, JavaScriptの役割 HTML 構成 CSS 見た目 動き JavaScrip t
6. HTML HyperText Markup Languageの略 Webページの構成を決めるために用いられる 見出し・画像・文章・などなど What’s HTML
7. What’s CSS Cascading Style Sheets の略 HTMLで表現する要素を、どのように装飾するか決める役割 → Webページの見栄えを決める CSS
8. ブラウザ内で動くプログラミング言語 アニメーションや、情報のやりとりなどを実装するために用いられる Webページの動きの部分を作る役割 ※ Javaは全く別のプログラミング言語 JavaScript What’s JavaScript
9. ・code.visualstudio.com/download からVisual Studio Codeをインストール ・以下の拡張機能をインストール → HTML Preview / Live Server *どちらでもOK 事前準備 VSCodeのインストール
10. HTML
11. HTMLタグ <p>文章</p> 作ってみよう！ 開始タグ 終了タグ
12. HTMLタグのまとまり <div> <p>文章1</p> <p>文章2</p> </div> 作ってみよう！ タグをまとめる
13. HTMLの構造 <html> <head> </head> <body> </body> </html> 作ってみよう！ 可視化されない 可視化される HTMLだよ、という宣言
14. titleタグ <html> <head> <title>ページのタイトル</title> </head> <body> </body> </html> 作ってみよう！
15. hタグ（見出し） <html> <head> <title>ページのタイトル</title> </head> <body> <h1>見出し1</h1> </body> </html> 作ってみよう！
16. hタグ（見出し） … <body> <h1>見出し1</h1> <h2>見出し2</h2> <h3>見出し3</h3> <h4>見出し4</h4> <h5>見出し5</h5> <h6>見出し6</h6> </body> … 作ってみよう
17. pタグ（段落） … <body> <h1>GDSCについて</h1> <p>GDSCは、Googleのテクノロジーに関心のある学生向けの コミュニティです。</p> </body> … 作ってみよう
18. ulとliタグ（リスト） … <body> <ul> <li>アイテム１</li> <li>アイテム２</li> </ul> </body> … 作ってみよう
19. olとliタグ（リスト） … <body> <ol> <li>アイテム１</li> <li>アイテム２</li> </ol> </body> … 作ってみよう
20. divタグ（ボックス） … <div> <p>文章1</p> <p>文章2</p> </div> … 作ってみよう
21. インライン要素 … <p>子要素はインライン要素のみになる。<s>取り消し線</s>、<b>太字 </b> <u>下線</u>などがある。</p> … 作ってみよう
22. タグの属性 … <img src=”image.png” alt=”代替テキスト”></img> … 作ってみよう 属性名 属性値 属性
23. CSS
24. CSSの構造 CSSとは p { color: red; } セレクター プロパティ 値
25. タグ名 CSSセレクター CSSとは p クラス名 .class id名 #id
26. <head> <style> h1 { color: blue; } </style> </head> <body> <h1>見出し</h1> </body> インラインCSS 作ってみよう
27. <head> <link rel=”stylesheet” href=”style.css”></link> </head> <body> <h1>見出し</h1> <p class=”ichiban”></p> <p id=”niban”></p> </body> 外部CSSファイル 作ってみよう h1 { color: blue; } .ichiban { font-size: 14px; } #niban { font-size: 20px; } HTML CSS
28. ボックスモデル CSSとは テキスト マージン パディング
29. ボックスモデル 作ってみよう <body> <div class=”container”> <p class=”ichiban”>文章</p> <p class=”niban”>文章</p> </div> </body> .container { background-color: blue; padding: 10px; } .ichiban { padding: 10px; background-color: red; } .niban { margin: 10px; background-color: yellow; }
30. Webページを作ってみよう！
31. Gitとは Gitは、プログラムのソースコードなどの変更履歴を記録 ・追跡するための分散型バージョン管理システムである Gitの特徴 ・古いバージョンに簡単に戻せる ・新旧のファイルを一元管理できる ・編集した履歴を複数人で共有できる ・複数人で修正した部分を一つに統合できる
32. Githubの初期設定 やってみよう 1. github.comにアクセスし、アカウントを作成する 2. https://git-scm.com/downloads からgitをダウンロードし、インストールする 3. ターミナル(cmdやpowershell)上で以下のコマンドを実行する $ git config --global user.name “名前” $ git config --global user.email “メールアドレス”
33. Githubの基本操作 やってみよう - helpコマンド $ git help ワークスペース作成 $ git init $ git clone https://github.com/gdsc-nitk/gdsc-nitk.github.io.git
34. Githubの基本操作 やってみよう - ブランチ B変更 A変更 マージ
35. Github Pagesで自分のWebサイトを公開しよう！