プログラミングってなに？
Report
Kazuki SaitoFollow
May. 8, 2021•0 likes•328 views
1 likes
Be the first to like this
Show More
views
Total views
0
On Slideshare
0
From embeds
0
Number of embeds
0
プログラミングってなに？
May. 8, 2021•0 likes•328 views
1 likes
Be the first to like this
Show More
views
Total views
0
On Slideshare
0
From embeds
0
Number of embeds
0
Report
Education
私は小学生〜大学生向けに、プログラミングの無限の可能性を伝え、興味を持ってもらうことを目的としたマンツーマン個別授業を行っておりますが、この度その資料を全編無料公開いたします。各回2時間の授業を全3回に渡ってお届けしております。ご自身が受けたい、もしくはお子様に受けさせたいという方がいらっしゃいましたら、私宛にご連絡くださいませ。※日程・料金は応相談。
Kazuki SaitoFollow
プログラミングってなに？
- 0 © KAZUKI SAITO アプリを開発 ⼤学で学んだプログラミングで ⾃分⾃⾝でものづくり 自己紹介 齋藤 ⼀輝 / さいとう かずき 渋幕 中学・⾼校はテニス部 慶應 MAKEY ADK コンピュータの学科を卒業 コンピュータの基礎から プログラミングまで学ぶ 広告のお仕事 今はプログラミングはしてない
- 1 © KAZUKI SAITO Day 1 プログラミングってなに？
- 2 © KAZUKI SAITO プログラミングの「地図」と「遊び方」を伝授！ プログラミングのやり方を教える 授業の目的 プログラミングってなに？ Instagramだって作れる 遊びながら身につけよう 1 2 3 プログラミングの全体像と 何ができるものなのかを知ろう！ Webプログラミングの全体像をつかもう！ どうスキルアップしていくのがいいか イメージしよう！ テーマ ゴール
- 3 © KAZUKI SAITO プログラミングの「無限の可能性」を伝えたい 授業の内容 プログラミングってなに？ Instagramだって作れる 遊びながら身につけよう 1 2 3 • プログラミングってなに？ • プログラマーっぽいことしてみる • プログラミングの勉強法 • Webページってなに？ • Webプログラミングの全体像 • htmlとは • CSS, javascript, PHP, SQLとは • 全部を駆使するとinstagramが作れる • ブログを公開してみる • ブログを自分好みにカスタマイズしてみる • 気になったところの学び方/つまづいたときどうするか • その先の可能性 テーマ 内容 ブログ 作成 Webプログラミング プログラミング 1 2 3
- 4 © KAZUKI SAITO パソコン・アプリ関係のこと、どれくらい知ってる？ 本題に入る前に… Word / Excel メール facebook LINE TikTok Twitter YouTube Amazon Mac メモ帳 Windows フォルダ / ファイル Webサービス ツール Google 検索 / 地図 Instagram 画像加工アプリ オンライン ゲーム ZOOM ガラケー Uber Eats Netflix / Abema TV 一太郎 iMovie
- 5 © KAZUKI SAITO プログラミングってなに？
- 6 © KAZUKI SAITO プログラムが機械を動かす。 プログラムを作る = プログラミング 機械とプログラムの関係 プログラムが機械を動かす 脳が人体を動かすのと同じ プ ロ グ ラ ム 脳
- 7 © KAZUKI SAITO 身の回りは、プログラミングであふれている プログラミングの重要性 プ ロ グ ラ ム エアコン プ ロ グ ラ ム クルマ 信号機 プ ロ グ ラ ム スマホ プ ロ グ ラ ム
- 8 © KAZUKI SAITO プログラミングの重要性は、今後もっと増す 将来のプログラミング 5G 量子 コンピュータ ブロック チェーン 人工知能 ロボット 仮想通貨 クラウド VR IoT インターネット 次世代の技術は全てプログラムで動く
- 9 © KAZUKI SAITO 機械が理解できるのは 0 か 1 だけであり、プログラムの実体は01の羅列 プログラムの実体 プログラムの実体
- 10 © KAZUKI SAITO 01の羅列を、人間の言葉に翻訳したもの プログラミング言語とは if ( x > 0 ) then shutdown else restart 01101010010010 10101010100010 00100101010101 0101001000010 機械語（01の羅列） プログラミング言語 翻訳 人間が理解できる言葉 人間が理解できない言葉
- 11 © KAZUKI SAITO より使い易い言葉を求めて、たくさんの人が言語を考案した それぞれにメリット/デメリットがあるので、目的によって使い分ける プログラミング言語の種類 プログラミング言語の種類
- 12 © KAZUKI SAITO 目的によって、よく使われるプログラミング言語は異なる プログラムをチラ見せ Swift（アプリ開発用） PHP（Web開発用） （差異の一例）PHPは行末に「;」をつけるが、Swiftは不要
- 13 © KAZUKI SAITO ちょっと一息… プログラマーぽいことしてみよう
- 14 © KAZUKI SAITO ターミナルでフォルダを作成＆名前の変更をしてみよう Finder v.s. ターミナル ターミナル Finder
- 15 © KAZUKI SAITO プログラムを書く専用のアプリ（エディタ）をインストールしよう Atomの準備 Atom 「メモ帳」や「テキストエディット」のような メモ作成アプリでも構わないが こういった専用アプリの方が断然書きやすい
- 16 © KAZUKI SAITO Hello Worldと表示するプログラムを書いてみよう（Ruby言語） 初めてのプログラミング (1/2) hello.rb Atomで図の通り入力し 「hello.rb」という名前をつけて保存 → ターミナルにて「ruby hello.rb」
- 17 © KAZUKI SAITO 文字数を計算して表示するプログラムを書こう 初めてのプログラミング (2/2) count.rb Atomで図の通り入力し 「count.rb」という名前をつけて保存 → ターミナルにて「ruby count.rb」
- 18 © KAZUKI SAITO • 「ターミナル」は、コンピュータに言葉で命令を伝えられる画面 • コンピュータは、人の言葉は理解できない • ターミナルは、人の言葉を0101に変換してコンピュータに伝える • ターミナルへの入力は、「コマンド」と「引数」に分かれる • 動詞と目的語みたいな感じ（例：動かせ 箱を） • 「コマンド」はすぐに0101に変換される（実際に見てみよう！） • rubyというコマンドは、ruby言語で書かれたファイルを0101に変換してくれる • つまり、「ruby hello.rb」はすぐに「0101」に変換されてコンピュータに伝わった結果、 「hello world」と出力された なぜhello worldと表示されたのか hello.rb ターミナルでの実行結果 コマンド 引数
- 19 © KAZUKI SAITO プログラミングの勉強法
- 20 © KAZUKI SAITO 作りたいものを作れるように頑張る。その繰り返しが一番の勉強になる 勉強ではなく、挑戦 自分のWebページを 作ってみる スマホアプリを 作ってみる 人工知能を作ってみる 自分なりの挑戦の繰り返しで いつものまにかできるようになる この授業では、Webでどんなことができるかを伝えることで、 どんなWebページを作りたいかを発想する手助けをしたい
- 21 © KAZUKI SAITO Webページってなに？
- 22 © KAZUKI SAITO Webページとは、ただの文字ファイルである Webページの実体 Webページの実体
- 23 © KAZUKI SAITO まずはWebページが文字ファイルにすぎないことを実感しよう 実践！Webページを作ってみる ファイルを送るので 自由に書き換えてみよう そしてブラウザで開いてみよう
- 24 © KAZUKI SAITO 「Webページを見る」=「遠くのパソコンからファイルを取ってくる」 実験！齋藤のPC内にあるファイルを遠隔で閲覧する 齋藤のPC あなたのPC saito.html SafariでURL入力 126.40.34.191/saito.html Webページとして 見れる！
- 25 © KAZUKI SAITO 実験で使った数字はIPアドレスと呼ばれ、電話番号のように通信できる 遠くのパソコンと通信する方法 電話番号 IPアドレス 080-1234-5678 http://172.217.175.78/ 3ケタ 4ケタ 4ケタ 3ケタ未満. 3ケタ未満. 3ケタ未満. 3ケタ未満
- 26 © KAZUKI SAITO IPアドレスのままだと人間が覚えづらいので、文字に変換したのがURL IPアドレスとURLの関係 URL IPアドレス http://google.com/ http://172.217.175.78/ 人間が覚えやすい 3ケタ未満. 3ケタ未満. 3ケタ未満. 3ケタ未満 実験！GoogleにIPアドレスでアクセスしてみよう！
- 27 © KAZUKI SAITO 世界のどこかにあるが、どこにあるかは分からない。形もちょっと違う google.comのファイルが置いてあるパソコンはどこにあるか Google.com 家 index.html Safariで URL入力 Webページとして 見れる！ Googleのパソコンは実際はこういう感じ
- 28 © KAZUKI SAITO パソコンのこと。特にWebページのファイルを置いてあるパソコンのこと おまけ：サーバーとは Google.com 家 index.html Safariで URL入力 Webページとして 見れる！ Googleのパソコンは実際はこういう感じ 「サーバー」 と呼ばれる
- 29 © KAZUKI SAITO Webページを置くためのパソコンを貸してくれるサービスのこと おまけ：レンタルサーバーとは Google.com 家 index.html Safariで URL入力 Webページとして 見れる！ Googleのパソコンは実際はこういう感じ この「サーバー」を 貸してくれる人がいる
- 30 © KAZUKI SAITO 好きなように付けられるが早い者順。試しにひとつ取得してみよう URLはどうやって決まる？ 余ってるURLを調べられるサイト
- 31 © KAZUKI SAITO まとめ 初めてプログラムを書いてみた まずは身近なWebページを作れるようになるために、 Webページとはそもそも何なのか、学んだ Webページの作り方 Webページにプログラミングがどう使われるか 次回は…
- 32 © KAZUKI SAITO Day 2 Instagramだって作れる
- 33 © KAZUKI SAITO プログラミングの「無限の可能性」を伝えたい 今日の内容 プログラミングってなに？ Instagramだって作れる 遊びながら身につけよう 1 2 3 • プログラミングってなに？ • プログラマーっぽいことしてみる • プログラミングの勉強法 • Webページってなに？ • Webプログラミングの全体像 • htmlとは • CSS, javascript, PHP, SQLとは • 全部を駆使するとinstagramが作れる • ブログを公開してみる • ブログを自分好みにカスタマイズしてみる • 気になったところの学び方/つまづいたときどうするか • その先の可能性 テーマ 内容 ブログ 作成 Webプログラミング プログラミング 1 2 3 （ゴール）Webプログラミングの全体像を掴む
- 34 © KAZUKI SAITO 前回の振り返り
- 35 © KAZUKI SAITO 機械を動かす プログラム を作る = プログラミング プログラミングってなに？ プログラムが機械を動かす プ ロ グ ラ ム 脳 脳が人体を動かすのと同じ if ( x > 0 ) then shutdown else restart 01101010010 01010101010 10001000100 10101010101 01001000010 機械語 プログラミング言語 翻訳 = 復習 プログラミング言語の種類 様々な種類
- 36 © KAZUKI SAITO 作りたいものを作れるように頑張る。その繰り返しが一番の勉強になる プログラミングの勉強法 自分のWebページを 作ってみる スマホアプリを 作ってみる 人工知能を作ってみる （あくまで一例） この授業のゴール 授業で扱うか悩み中… LV. 1 LV. 2 LV. 3 復習
- 37 © KAZUKI SAITO 「Webページを見る」=「遠くのPCからファイルを取ってくる」 Webページってなに？ 齋藤PC あなたのPC saito.html SafariでURL入力 126.40.34.191/saito.html Webページとして 見れる！ Webページとは、ただの文字ファイル 復習
- 38 © KAZUKI SAITO 遠くのPCと通信するために必要なIPアドレスを、分かりやすくしたもの URLってなに？ 電話番号 IPアドレス 080-1234-5678 http://172.217.175.78/ 3ケタ 4ケタ 4ケタ 3ケタ未満. 3ケタ未満. 3ケタ未満. 3ケタ未満 携帯電話同士のやりとり PC同士のやりとり 人間が覚えやすく するために… URL http://google.com/ 復習 …ちなみに早いもの順！！
- 39 © KAZUKI SAITO Webプログラミングの全体像
- 40 © KAZUKI SAITO 様々プログラミング言語があるなか、今回はWEBプログラミングに着目 今回の焦点 プログラミング言語の種類 他より簡単で とりかかりやすい
- 41 © KAZUKI SAITO Webページは５つの要素でできている Webプログラミングの全体像 PHP, Ruby等 MySQL等 CSS javascript HTML ログイン機能の無いWebページ ログイン機能のあるWebページ Webページの5つの構成要素 データを溜めておく （データベース） ページの情報を組み替える （プログラミング） デザインに動きをつける （プログラミング） デザイン 土台 高度 単純
- 42 © KAZUKI SAITO 実践！ HTMLとは PHP, Ruby等 MySQL等 CSS javascript HTML
- 43 © KAZUKI SAITO Webページの土台となる、基本の型。そういうルール。 HTMLとは （参考）手紙の書き方 Webページの書き方 <!DOCTYPE html> <html> <head> ここに、いろいろ必要な情報を書く </head> <body> ここに、ページの本文を書く </body> </html> 実践！cocoe.workのhtmlを確認してみよう
- 44 © KAZUKI SAITO 前回のtest.htmlを使って、いくつか試してみよう 実践！htmlの基本 <!DOCTYPE html> <html> <head> ここに、いろいろ必要な情報を書く ①タイトル </head> <body> ここに、ページの本文を書く ②改行 </body> </html>
- 45 © KAZUKI SAITO 実践！カッコよくする方法 CSSとは PHP, Ruby等 MySQL等 CSS javascript HTML
- 46 © KAZUKI SAITO STEP 1 直接書く STEP 2 クラスで分かりやすくする STEP 3 階層構造 STEP 4 クラスの詳細は別ファイルにできる 実践！CSS まず、やってみせます。 その後、ファイルを送るので 自由に書き換えてみよう そしてブラウザで開いてみよう
- 47 © KAZUKI SAITO 実践！もっとカッコよくする方法 javascriptとは PHP, Ruby等 MySQL等 CSS javascript HTML
- 48 © KAZUKI SAITO 難易度が高いので「そういうものもあるんだな」くらいの理解でいいです 実践！javascript ファイルを少し書き換えてみよう そしてブラウザで開いてみよう
- 49 © KAZUKI SAITO よくあるWebページの構成 基本の３点セット CSS javascript HTML
- 50 © KAZUKI SAITO • よくあるWebページのフォルダ/ファイル構成 • index.html ←html • css（フォルダ） ←css • style.css • images （フォルダ） • aaa.jpg • bbb.jpg • ccc.png • javascript （フォルダ） ←javascript • ddd.js よくあるWebページの構造 CSS javascript HTML これまで学んだhtml、css、javascript、そして画像をそれぞれフォルダに 分けて構成されることが多い
- 51 © KAZUKI SAITO ここからが本番！ Webプログラミング：PHPとは PHP, Ruby等 MySQL等 CSS javascript HTML
- 52 © KAZUKI SAITO 例えば、同じURLを少しだけ変えて違うページを見せる ※これ以外にも、様々なことができる 見るだけ！PHPとは http://126.40.34.191/PART2/program.php?name=coco http://126.40.34.191/PART2/program.php?name=kazuki
- 53 © KAZUKI SAITO データベース：MySQLとは PHP, Ruby等 MySQL等 CSS javascript HTML
- 54 © KAZUKI SAITO 果物のデータベースを作ってみる 見るだけ！MySQL（データベース）とは 例）果物のデータベース
- 55 © KAZUKI SAITO すべてを組み合わせると… Instagramだって作れる PHP, Ruby等 MySQL等 CSS javascript HTML
- 56 © KAZUKI SAITO Html, css, javascript, php, mysqlを組み合わせることで、ユーザーが投稿 した情報を、ユーザーごとに出し分けることができる 見るだけ！すべてを組み合わせてみた例 例）お小遣いを記録するWebサイト
- 57 © KAZUKI SAITO おまけ Web制作で登場する人物紹介
- 58 © KAZUKI SAITO 登場人物 PHP, Ruby等 MySQL等 CSS javascript HTML CSS HTML 登場人物 担当領域 デザイナー フロントエンド エンジニア バックエンド エンジニア Webサイトは、３つの職種の方が共同作業して作られることが多い
- 59 © KAZUKI SAITO まとめ Webページは５つの構成要素（html, css, javascript, php, mysql） でできていることを学んだ 特に html, css, javascript の３つについて、 サンプルプログラムを自分で書き換えてみて、ちゃんと動くことを確かめた 自分のブログを作成＆カスタマイズしてみる プログラミングのレベルアップ方法を知る 次回は…
- 60 © KAZUKI SAITO Day 3 プログラミングの遊び方
- 61 © KAZUKI SAITO プログラミングの「無限の可能性」を伝えたい 今日が最終回 プログラミングってなに？ Instagramだって作れる 遊びながら身につけよう 1 2 3 • プログラミングってなに？ • プログラマーっぽいことしてみる • プログラミングの勉強法 • Webページってなに？ • Webプログラミングの全体像 • htmlとは • CSS, javascript, PHP, SQLとは • 全部を駆使するとinstagramが作れる • ブログを作成し自分好みにカスタマイズしてみる • 気になったところの学び方/つまづいたときどうするか • その先の可能性 テーマ 内容 ブログ 作成 Webプログラミング プログラミング 1 2 3 （ゴール）今後の遊び方がイメージできている
- 62 © KAZUKI SAITO これまでのおさらい
- 63 © KAZUKI SAITO 機械を動かす プログラム を作る = プログラミング プログラミングってなに？ プログラムが機械を動かす プ ロ グ ラ ム 脳 脳が人体を動かすのと同じ if ( x > 0 ) then shutdown else restart 01101010010 01010101010 10001000100 10101010101 01001000010 機械語 プログラミング言語 翻訳 = 復習 プログラミング言語の種類 様々な種類
- 64 © KAZUKI SAITO Webページは５つの要素でできている Webプログラミングの全体像 PHP, Ruby等 MySQL等 CSS javascript HTML ログイン機能の無いWebページ ログイン機能のあるWebページ Webページの5つの構成要素 データを溜めておく ページの情報を組み替える デザインに動きをつける デザイン 土台 高度 単純 復習
- 65 © KAZUKI SAITO Html, css, javascriptを、実際に触ってみた 実践 復習 htmlの書き方 <!DOCTYPE html> <html> <head> ここに、いろいろ必要な情報を書く </head> <body> ここに、ページの本文を書く </body> </html> CSSの書き方 表示結果（例）
- 66 © KAZUKI SAITO Webプログラミングの遊び方
- 67 © KAZUKI SAITO 作りたいものを作ってみる。その遊びの繰り返しが一番の勉強になる 勉強ではなく、挑戦 自分のWebページを 作ってみる スマホアプリを 作ってみる 人工知能を作ってみる 自分なりの挑戦の繰り返しで いつものまにかできるようになる 復習
- 68 © KAZUKI SAITO html, css, javascript, php, mysql だけで、Webページなら何でも作れる 自分のWebページ、つくってみたいものはある？ Google のような 検索サービス TikTok のような SNS 学校紹介のような ホームページ 雑誌のような 情報メディア Google.com Tiktok.com Rikkyojogakuin.ac.jp Mery.jp
- 69 © KAZUKI SAITO あくまで一案。むかし流行っていた「instagramの長い文章版」 例えば、自分の「ブログ」を作ってみる 例：Chikirinの日記
- 70 © KAZUKI SAITO html, css, javascript, php, mysql すべての要素を満遍なく学べる ブログの良さ Webページの種類 難易度 TikTok, instagram のようなSNS ブログ 1ページだけの シンプルなWebページ PHP, MySQLを使い 大人数のユーザーを想定 難易度が高い PHP, MySQLを使うが 基本的にはユーザー1人想定 中程度の難易度 PHP, MySQLを使わないため 簡単
- 71 © KAZUKI SAITO ブログで遊びながらレベルアップし、次に作りたいモノを作る 提案 今日、 ブログの遊び方を知る 授業後、 自分なりに遊びながら、 徐々にレベルアップ 作りたいモノを 作ってみる 1 2 3 今日と、授業後のステップ 授業はココまで 授業後は自習（ひとり遊び） Google のような 検索サービス TikTok のような SNS 学校紹介のような ホームページ 雑誌のような 情報メディア
- 72 © KAZUKI SAITO ブログを作ってみよう！
- 73 © KAZUKI SAITO Instagramのマイページだけが切り出されたWebページ、というイメージ ブログとは ブログの基本機能 画像や動画を含んだ文章（=記事）を投稿することができる 過去の投稿を一覧・検索することができる 読んだ人から、コメントを受け付けることができる
- 74 © KAZUKI SAITO ゼロから作るのは大変なので、すでに作られたモノを借りてカスタマイズ ブログの作り方 Wordpressという「ブログの土台」がある 様々な形のブログや ホームページの 土台を使わせてくれる
- 75 © KAZUKI SAITO ●●● の場所に、wordpressを用意しておきました Let s Go！ あなたのPC SafariでURL入力 http:// ●●● Wordpressを用意済 レンタルサーバー ①まずは、http://●●● にアクセスしてみよう （世界から見える所） ②次に、http:// ●●● /wp-admin/ にアクセスしてみよう （管理画面） - ユーザ名： ●●● - パスワード： ●●● やってみよう！
- 76 © KAZUKI SAITO Wordpress開発者からのお知らせが表示されたりする 管理画面の解説：ダッシュボード 最初のうちは使わないので、無視
- 77 © KAZUKI SAITO 記事を編集/投稿したり、記事に付与するタグ/カテゴリを編集できる 管理画面の解説：投稿 TikTok, instagramの投稿作成画面みたいなもの
- 78 © KAZUKI SAITO 記事に含めたい画像や動画を編集できる 管理画面の解説：メディア TikTokやinstagramでは「①画像や動画」と「②文章」はまとめて投稿するが、 ブログ（html）では「①画像や動画」をまず保存しておいて、「②文章」の中で 「リンクする」というやり方をとるため、 「①画像や動画」の編集画面は「②投稿」の画面と分かれている。
- 79 © KAZUKI SAITO 記事の投稿とは別の、特設ページを設けたい場合に使う機能 管理画面の解説：固定ページ イメージしづらいと思うので、参考ブログを見ながら解説する
- 80 © KAZUKI SAITO ブログの投稿に他人からもらったコメントを承認したり削除したりできる 管理画面の解説：コメント Instagramのコメント機能に近い
- 81 © KAZUKI SAITO ブログのデザインを変更できる 管理画面の解説：外観 今日のメインテーマはこれ。
- 82 © KAZUKI SAITO 他の人が作った便利機能を追加できる 管理画面の解説：プラグイン ポケモンの「わざマシン」みたいなモノ
- 83 © KAZUKI SAITO ひとつのブログを複数人で更新していく場合に使う 管理画面の解説：ユーザー 最初のうちは使わないので、無視
- 84 © KAZUKI SAITO 別のブログのデータを持ってくる場合などに使う 管理画面の解説：ツール 最初のうちは使わないので、無視
- 85 © KAZUKI SAITO その他の様々な設定をする場所 管理画面の解説：設定 まずはブログ名を設定してみよう
- 86 © KAZUKI SAITO やってみよう（基礎編） 1) ブログ名を変更する 2) テスト的に記事を５つほど投稿してみる 1) 文章だけ（ビジュアルモード） 2) 文章だけ（テキストモード） 3) 画像つき（ビジュアルモード） 4) 画像つき（テキストモード） 5) Youtube動画つき 6) カテゴリとタグをつけてみる 3) カテゴリ名を編集してみよう 4) テーマを変えてみよう 5) カスタマイズ機能を使ってみよう 6) ウィジェット機能を使ってみよう 7) 1度スマホで見てみよう
- 87 © KAZUKI SAITO Html, css, javascript, php, mysqlでできている このブログの実体 レンタルサーバーの中のファイル一覧 PHPファイル（中にhtmlを含む） 裏側でmysqlと連携している CSSファイル このフォルダの中にjavascriptファイルがある Wordpressの管理画面で いじれる
- 88 © KAZUKI SAITO やってみよう（ここからが本番） 1) テーマエディターのstyle.cssを少しだけいじってみよう 2) カスタマイズすべきCSS要素を知る方法（ブラウザの「検証」機能） 3) 更新するだけじゃダメ！キャッシュクリアのルーティーン 4) キャッシュとは
- 89 © KAZUKI SAITO 【原則】 Webページを見る ＝ このファイルを全て取ってくる 【課題】 毎回全部取ってくるのは大変 【「キャッシュ機能」が解決すること】 style.css等、頻繁には変わらないはずの ファイルは、一度取得したら保存しておく Webページの閲覧を高速化するために、データの一部を保存しておく機能 キャッシュとは あなたのPC SafariでURL入力 http:// ●●● レンタルサーバー style.cssを変更しても、 閲覧者側には古いstyle.cssが残っている
- 90 © KAZUKI SAITO 「この部分のデザインを変えたい、どうすればよいだろうか？」でググる これからの歩み方 挑戦の例 1) 「ある部分の文字に下線をつけたい」と思い立つ 2) 「CSS 下線」でググる →「text-decoration: underline;」と書けばいいと知る 3) 変更したい部分の「CSSクラス名」を確認する →ブラウザの「検証」機能 4) Wordpress管理画面のstyle.css編集画面の中で、 該当するCSSクラス名に関する記述を見つけ出し、 text-decorationについて追記 5) キャッシュをクリアしてうまくいくか試してみる とはいえ、 まだhtml/cssの基礎も学びきれていない…
- 91 © KAZUKI SAITO 今後のスキルアップ方法
- 92 © KAZUKI SAITO 改めてhtmlやcss、javascript等について学びたくなったら… ドットインストール 超オススメ！ 3分動画でクイックに学習できる「ドットインストール」
- 93 © KAZUKI SAITO 無料版だけで、とても勉強になる 試しに3分で「#01 はじめてのCSSを書いてみよう」を今受けてみよう まずは「はじめての●●●」 javascript ・html ・CSS
- 94 © KAZUKI SAITO バグを見つけるのに、9割の時間がかかってしまう プログラミングでつまづくポイント 考える時間 10% バグを探す時間 90% よくある時間の使い方 考える時間 80% バグを探す時間 10% 先生に聴く時間 10% オススメの時間の使い方 「なんで思うとおりにいかないんだろう？」 そう思ったら自分でバグを探そうとせず 速攻で先生に聴いてください！！！
- 95 © KAZUKI SAITO まとめ
- 96 © KAZUKI SAITO 今日のまとめ ブログでの遊び方を学んだ 今後興味が膨らんだ場合、どう学習を進めていけばいいか知った 気が向いた時に 遊びながら少しずつ Webページづくりのスキルを高めていってほしい！
- 97 © KAZUKI SAITO 「Web制作って面白い！」 と思ってもらえてたら 嬉しいです 「なんかいろいろできそう！」というワクワク感は伝わっただろうか…？ ３日間のふりかえり プログラミングってなに？ Instagramだって作れる 遊びながら身につけよう 1 2 3 Webでの遊び方 Webプログラミングの全体像 プログラミングの全体像 1 2 3 Webページを 作ってみる スマホアプリを 作ってみる 人工知能を 作ってみる 1 2 3 ア プ リ 授業の目的 ３つのテーマ 内容 これから プログラミングの「地図」と「遊び方」を伝授！ プログラミングのやり方を教える