AlphabetBootCamp 第1回勉強スライド
•Download as PPTX, PDF•
0 likes•450 views
ABC(2期)第1回で使ったスライドです。 名古屋で開催している勉強会で、 未経験・初心者を対象にWebについての勉強会を行っています。
Recommended
More Related Content
What's hot
What's hot (20)
Similar to AlphabetBootCamp 第1回勉強スライド
Similar to AlphabetBootCamp 第1回勉強スライド (20)
Recently uploaded
Recently uploaded (16)
AlphabetBootCamp 第1回勉強スライド
- 2. アジェンダ 1. ABCとは 2. 対象範囲 3. なにができるようになるの？ 4. スケジュール 5. HTMLとは？ 6. 課題 7. 参考サイトの紹介 8. 質問・アンケート
- 4. ABCとは 未経験者・初心者にむけて、 Webを中心としたプログラミングの勉強会 現役のプログラマが教えます。 お金も一切必要ありません。 テキスト代とかも不要です。 パソコンだけ持ってきてね。
- 5. なにができるようになるの？ • ブログ作ったり • 日頃の業務の仕組みをより理解したり • 趣味でプログラミングをやってみたり • 論理的にものごとをかんがえたり • 就職に役立ったり するかも。
- 7. 本当に難しいの？ 本当はむずかしくない。 一つずつ整理・理解していけば、 むずかしくない。 とくにWeb周辺は、比較的簡単で、 ３～６ヶ月あればマスター可能！ （みっちりやれば、１ヵ月でも！！）
- 11. 準備 はじめる、その前に。
- 14. そもそもWebって？
- 15. “World Wide Web（ワールド ワイド ウ ェブ、略名：WWW[1]）とは、インター ネット上で提供されるハイパーテキスト システム。” Webってなに？ [1]Wikipediaより引用 https://ja.wikipedia.org/wiki/World_Wide_Web
- 18. 全体像 まずは全体像を！
- 20. HTML 画面をつくってみよう！
- 28. Pタグ – 段落 意味 段落 タグ p <p>段落を意味します。</p>
- 30. 表（テーブル） 意味 表 タグ table <table border> <thead> <tr> <td>ヘッダー１</td> <td>ヘッダー２</td> </tr> </thead> <tbody> <tr> <td>値１</td> <td>値２</td> </tr> </tbody> </table>
- 31. リスト 意味 list タグ ol, ul <ol> <li>りんご</li> <li>ばなな</li> <li>みかん</li> </ol> <ul> <li>りんご</li> <li>ばなな</li> <li>みかん</li> </ul> 順序付きリスト 順序なしリスト
- 32. 画像の表示 意味 画像の表示 タグ image <img src=“./cat.jpg”>
- 33. タグの種類 タグにはそれぞれ種類があります。 タグの意味を知るとわかりやすい！ タグ 意味 役割 p Paragrah 段落 img Image 画像 table Table 表 br Break Line 改行 h1 headline 見出し ol,ul order list, Unordered List リスト
- 34. CSS 見栄えをよくしてみよう！
- 36. CSSの基本 基本 セレクタ { プロパティ: 値 } h1 { color: orange; } Exampl e. セレクタ：h1タグ(見出し）の、 プロパティ：color(文字の色）を、 値：Orangeに変更する という意味に。
- 37. CSSを読み込む３つの方法 1. HTML内の<style>タグ内に記載 2. 外部ファイルとして作成して読み込み 3. タグに直接書く。 ⇒ 2.外部ファイルとして作成を推奨！ ※ スライド内では３．の方法で行うことがあります。
- 42. 文字の色を変えてみよう。 意味 文字の色を変更する。 プロパティ color h1 { color: skyblue; } サンプルコード 実行例
- 43. 背景色を変えてみよう。 意味 背景の色を変更する。 プロパティ background-color body { background-color: skyblue; } サンプルコード 実行例
- 44. 文字の大きさを変えてみよう。 意味 文字の大きさを変更する。 プロパティ font-size h1 { font-size: 32px; } サンプルコード 実行例
- 45. 文字の位置を変えてみよう。 意味 文字の位置を変更する。 プロパティ text-align h1 { text-align: center; } サンプルコード 実行例
- 46. ほかにも ほかにもたくさん！ プロパティ 意味 font-weight 文字の太さ width 幅 height 高さ border 枠線 font-family フォントの変更 margin マージン padding パディング
- 48. 課題 挑戦してみよう！