アイデアを形にする ②HTML/CSSから始めるWeb技術の基礎

株式会社Dive into Code
代表取締役創始者 CEO 野呂浩良
Tel 03-5459-1808
info@diveintocode.jp
https://diveintocode.jp/
アイデアを形にする
- ②HTML/CSSから始めるWeb技術の基礎 -
スタートアップスキルカレッジ第３弾

2Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved.
この講座を受けると出来ること
アイデアを形にするためのプロダクトの設計の概要ができ、開発
相談や自力開発に踏み出せるようになる。

● 自己紹介
● 全体概要
● Webを支える技術の全体像
● HTML/CSS
● プログラミング vs. HTML/CSS
● 非エンジニア起業家が最低限持つべき知識
● 実践的HTML/CSS講座
● まとめ
● 質疑応答
● Appendix
構成

自己紹介
野呂浩良（のろ　ひろよし） MBAエンジニア講師。元非エンジニ
ア。29歳ではじめてプログラミングを経験。
1980年誕生
2003年東京農業大学農学部農学科（学士）卒業
「昆虫生態学研究室」
2003年株式会社すみや「接客販売」
2006年株式会社リクルート「法人営業」
2009年株式会社ワークスアプリケーションズ「コンサル」
2013年株式会社プロスタンダード「研修講師」
2014年グロービス経営大学院大学経営管理科（修士）卒業
2015年株式会社Dive into Code　創業
キャリアの軸は、未経験分野への挑戦

自己紹介
就職に強いプログラミングスクール DIVE INTO CODE。ビジョン
「テクノロジー教育のエコシステムを構築する」
フルタイム就業
正社員 / フリーランス
実課題を元にした研究
リモートワークで
アルバイト / 副業
政府と組み
地方＆海外IT人材育成
卒業後も学び続ける
永続勉強会
スクールで本気で学習
プログラミング初体験

日本全国 3,000人 + 海外（ベトナム、ルワンダ）でセミナー開催。
RubyWorld Conference 2016 登壇。
自己紹介
Ruby経験ゼロから 3年で 3,000人に直接講義

自己紹介
エンジニア育成事業だけでなく、起業家や新規事業担当者がテク
ノロジーを駆使出来るようになるための支援も行う。
https://hodai.globis.co.jp/courses/57a7e865

お一人 3分ほどでご紹介ください
1. お名前
2. お仕事内容
3. この講座に参加した目的
4. 形にしたいビジネスアイデア
自己紹介
同じテーマに興味をもつ人たちとの出会いはその後もご縁が続く
ことが多い。お互いに自己紹介をしませんか？

Webを支える技術の全体像
様々なシステム（アプリケーション）が世の中には存在する。本講
座では Web 上で動作するものを対象として学ぶ。
Webアプリケーションスマホアプリ VR
Webページアプリ
サーバと
通信
サーバと
通信
サーバと
通信

事例：世界的に有名なスタートアップのWebアプリケーション
AirBnB GitHub クックパッド
https://www.airbnb.jp/ https://www.airbnb.jp/ https://cookpad.com/
民泊検索・予約ソーシャルコーディングレシピ共有

インターネット
Webの世界は、Webブラウザを通して利用する。通信先のコン
ピュータから送信されたファイルを読み込み画面が表示される。
リクエスト
GET, POST …
レスポンス
HTML, images …
URL
Webブラウザ HTTP通信サーバ

開発するための主要な役割分担。デザイナー、フロントエンド、
バックエンドはおさえておこう。兼任はかなり難しい。
デザインコーディングプログラミング
デザイナー
PhotoShop, Illustrator
フロントエンド・エンジニア
HTML, CSS, JavaScript
バックエンド・エンジニア
Ruby（Python, Java）
ヘッダー
フッター
サイ
ド
バー
ページごとの内容
メインビジュアル
ヘッダー
フッター
サ
イ
ド
バ
ー
ページごとの
内容
<html>
<head>
</hed>
<body>
・・・
</body>
</html>
head {
}
div {
}
class BlogsConroller
def index
@blogs = Blog.all
end
end
開発環境構築

HTML/CSS
HTMLとCSSは実現したいデザインをWebブラウザ上で表現するた
めの記法。まずワイアフレームありきで実装をすべきもの。
ヘッダー
フッター
サイド
バー
ページごとの内容
ワイアフレーム HTML/CSS
<html>
<head>
</hed>
<body>
・・・
</body>
</html>
head {
}
div {
}
見た目の装飾をする
ために使う
構造を表すために印
をつける

HTML/CSS
すべてのWebページの HTML/CSS はすべて見ることができる。
Chrome > 検証からソースコードを見てみよう。
Webページ例 HTML/CSS
http://www.kansai-u.ac.jp/umeda/event-seminar/startup
/-htmlcssweb.html

HTML/CSS
HTMLの基本構造
html, head, body は必須タグのため暗記しよう。
① HTMLのバージョンを示す
② HTML文書であることを示す
③ ブラウザに表示される内容を示す
④ 表示されない内容を指定

HTML/CSS
HTMLの基本構文
開始タグと終了タグはワンセット。毎回確認しよう。

index.html
HTML/CSS
CSSの基本構造
HTML内にCSSの読込みリンクを記述して使うことが多い。
style.css
読込み
装飾

HTML/CSS
CSSの基本構文
セレクタで対象のHTMLタグを選択、プロパティで装飾を指定。

プログラミング vs. HTML/CSS
インターネット
ただのWebページをつくるのか、プログラムやDBつきのWebアプリ
ケーションをつくるのか、目的に応じて判断が必要。
リクエスト
GET, POST …
レスポンス
HTML, images …
URL
Webブラウザ HTTP通信サーバ
HTML/CSSのみ
プログラム
DBつき
DB

HTML/CSSは Web 上では必須。Webアプリケーションを開発する
ためには更に開発言語やDBの知識が求められる。
プログラミング vs. HTML/CSS
バックエンド・エンジニア
Ruby（Python, Java）
ヘッダー
フッター
サ
イ
ド
バ
ー
ページごとの
内容
<html>
<head>
</hed>
<body>
・・・
</body>
</html>
head {
}
div {
}
class BlogsConroller
def index
@blogs = Blog.all
end
end
開発環境構築
HTML/CSSのみプログラム DBつき
ヘッダー
フッター
サ
イ
ド
バ
ー
ページごとの
内容
<html>
<head>
</hed>
<body>
・・・
</body>
</html>
head {
}
div {
}

非エンジニア起業家が最低限持つべき知識
目的に応じて持つべき知識は大きく変わる。「Why? How? What?」
を明確にしてから取り掛かろう。
目的オススメの手段持つべき知識
・会社のホームページをつくりた
い
・新商品の宣伝用ページをつくり
たい
ペライチ（無料）
WordPress（無料）※
・ツールの使い方 / 操作方法
※HTML/CSS。環境構築や操作方法
を覚えるには 100時間はかかる。
・アンケートや申し込みを受け付
けたい
Googleフォーム（無料）・ツールの使い方 / 操作方法
・会員登録するWebアプリケー
ションをつくりたい
自力でスクラッチ※
本業エンジニアに発注
・HTML/CSS, プログラミング, DBMS
※自力開発ができるようになるには
300時間はかかる。
・ECサイトをつくりたい本業エンジニアに発注・HTML/CSS, プログラミング, DBMS

あなたがつくりたいものは、どのような手段で実現するのが良さそ
うですか？
お一人 5分ほどでつくりたいもの、実現するための手段、難し
そうなこと/わからないこと、をシェアしてください。
1. つくりたいもの
2. 実現するための手段
3. 難しそうなこと/わからないこと

チーム発表
難しそうなこと/わからないこと

実践的HTML/CSS講座
DIVE INTO CODE のオリジナル教材より HTML/CSS 基礎を特別
にご提供。手を動かしながら理解を進めよう。
https://diver.diveintocode.jp/web_texts

振り返り
チーム発表・講評
よかったことわるかったこと

・HTMLとCSSは実現したいデザインをWebブラウザ上で表現するための記法。
まずワイアフレームありきで実装をすべきもの。
・すべてのWebページの HTML/CSS はすべて見ることができる。Chrome > 検
証からソースコードを見てみよう。
・ただのWebページをつくるのか、プログラムやDBつきのWebアプリケーションを
つくるのか、目的に応じて判断が必要。
・目的に応じて持つべき知識は大きく変わる。「Why? How? What?」を明確にして
から取り掛かろう。
まとめ
Webの世界は、Webブラウザを通して利用する。通信先のコン
ピュータから送信されたファイルを読み込み画面が表示される。

質疑応答
なんでもご質問ください。 ^ ^

Appendix
「ゼロから稼げるエンジニアになる3つのステップ」
RubyWorld Conference 2016 講演資料と動画を公開中！
https://youtu.be/bZ4Y1lNbI1o
http://2016.rubyworld-conf.org/files/program/B-3.pdf資料
動画

Appendix
サイモンシネック: 優れたリーダーはどうやって行動を促すか。
Golden Circle「Why? How? What? 」
https://www.ted.com/talks/simon_sinek_how_great_leaders_inspire_action?language=ja

アイデアを形にする ②HTML/CSSから始めるWeb技術の基礎

Recommended

Recommended

More Related Content

What's hot

What's hot (8)

Similar to アイデアを形にする ②HTML/CSSから始めるWeb技術の基礎

Similar to アイデアを形にする ②HTML/CSSから始めるWeb技術の基礎 (20)

More from DIVE INTO CODE Corp.

More from DIVE INTO CODE Corp. (20)

Recently uploaded

Recently uploaded (20)

アイデアを形にする ②HTML/CSSから始めるWeb技術の基礎