html/css/javascript基礎

html/css/javascript 入門TRUNK TRAINING

AGENDA・デザインについて・デザイナーの仕事と年収・ WEB ページのしくみ・ HTML 基礎・ CSS 基礎・ Javascript 基礎・作り始める前に・書いてみよう

デザインについて

デザイン ≠ アート

センスないから、デザイナーに向いてない

デザインは伝える（課題を解決する）ことデザインとアートの違いは、クライアントがいるかいないか。デザインは、クライアントがどんな課題をかかえていて、どうやってクリエイティブの力で解決するかを考え、実践すること。web ページであれば、どんな人が、どんな時に見るのかを考えてデザインする

センスは身に付けることができる1. 王道を知る2. 流行を知る3. 「共通項」や「一定のルール」を見つける

DESIGN

SKILL MIND

DESIGN

SKILL MIND

HAPPY（ FUN ）

UI/UXUser Interfase / User Experience

UI デザインは当たり前、今求められるのは UX デザインプロダクトを通してユーザーにどんな体験をさせたいか

ユーザーの体験をデザインする↓

ユーザーの時間軸を変える

UX タイムスパン

デザイナーの仕事と年収

IT 業界でデザイナーと呼ばれる人はたくさんいる・グラフィックデザイナー・ DTP デザイナー・ web デザイナー・ UX デザイナー・ UI デザイナー・コーダー・フロントエンドエンジニア

仕事内容も幅が広い・ web サイト設計、ワイヤーフレーム作成・ web ページデザイン・広告クリエイティブ作成・ html/css/javascript コーディング・プレゼン・

優秀なデザイナーの共通点・アウトプットの質が高い（コーディング、クリエイティブ）・論理的に考える力（左脳で考える）・課題を発見する力・アイデア、提案力・情報キャッチアップ・コミュニケーション

デザイナーのキャリアプラン・ディレクター・クリエイティブディレクター・プロジェクトマネージャー・グラフィックデザイナー・フロントエンドエンジニア・起業して社長

年収も幅が広い誰でもデザイナーになれる時代。年収の幅は、 250 〜 1000 万。お金が欲しいなら、フロントエンドエンジニアがオススメ。

デザイナーはめちゃめちゃ楽しい

WEB ページの仕組み

HTML 基礎

Hyper Text Markup Launguage

文書に目印をつける方法を定めた文法上の約束

ティム・バーナーズ＝リーWorld Wide Web(WWW) を考案し、ハイパーテキストシステムを実装・開発した人

WWW （ World Wide Web ）インターネット上で提供されるハイパーテキストシステム

W3C （ World Wide Web Consortium ）World Wide Web で使用される各種技術の標準化を推進する為に設立された標準化団体、非営利団体

「 CSS3 が W3C で勧告されたらしいよ」

HTML がなぜ作られたか

DOCTYPE 宣言ファイル（文章）が HTML であり次にはじまる HTML 文書（ HTML ソース）がどのバージョンを利用して、どの DTD （文書型定義）に従って記述されているかをブラウザに伝えるためのもの

HTML は複数のタグで生成されている

主要タグ①<h1> </h1><h2> </h2><h3> </h3><h4> </h4>・・・

「見出し」タグ

主要タグ②

<p> </p> 「文書」タグ

主要タグ③

<a href=“”> </a> 「リンク」タグ

主要タグ④

<br> 「改行」タグ

主要タグ⑤

<div> </div> 「ブロック」タグ

主要タグ⑥

<span> </span> 「インライン」タグ

主要タグ⑦

<img src=“” /> 「画像」タグ

主要タグ⑧

<ul><li> </li><li> </li>

</ul>

「箇条書き」タグ

主要タグ⑨

<ol><li> </li><li> </li>

</ol>

「番号付け」タグ

主要タグ⑩

<table><tr><th> </th><th> </th></tr><tr><td> </td><td> </td></tr></table>

「表組み」タグ

読みやすいブログありませんか？

マークアップの基本は文章の「論理構造」

論理構造主張（結論）・理由・事実で構成すること

HTML でできることは日々進化しているhttp://jsdo.it/akiho/ogxo/fullscreen

CSS 基礎

Cascading Style Sheet

web ページのスタイル（色、形状など）を指定するもの

CSS は style タグ内に記述される

<style>font-size:20px;color: #33a65e;

</style>

なぜ CSS が必要か？

デザインは伝えることCSS は、情報をわかりやすくユーザーに伝えるための手段

CSS でできることは日々進化しているhttp://jsdo.it/okatom33_zak/cr3U/fullscreen

Javascript 基礎

javascriptweb ページにインタラクティブな機能を追加、ウェブブラウザの機能向上のために、 1995 年に Brendan Eich が開発した言語。

javascript の歴史Javascript の標準化・ＥＣＭＡ（ European Computer Manufacture Association ） Internationalが、 ECMAScript （ ECMA-262 ）規格を策定1990 年代・ web は、 C や JAVA 主流・ Javascript は型の仕様がない、制御構造が不足しているため、エンジニアやデザイナーはJavascript を軽視していた。・ 1997 年： ECMAScript 1・ 1998 年： ECMAScript 2・ 1999 年： ECMAScript 32000 年代前半・機能が強化。 web の標準になり、ほとんどの web で使われるように・セキュリティへの考慮が不十分で、 Javascript の脆弱性をつくウイルスが出現・ 2000 年： ECMAScript 42000 年代後半・重要な技術として再認識され、急速な発展・ Ajax,Jquery の出現・ 2009 年： ECMAScript 5

javascript の歴史現在：・処理の高速化・様々なライブラリの開発が進む・サーバーサイド言語としての Javascript・ 2015 年 6月： ECMAScript 6 （ ES6 とか ES2015 って言われる）・需要： http://news.mynavi.jp/news/2015/01/08/221/・「 web がある限り残り続ける言語」と言われている・

javascript について

Javascript はオブジェクト指向プログラミング言語である

Object ??オブジェクトとは、物体を、属性 ( データ ) と操作 ( メソッド ) の集合として定義し、コンピュータで扱えるようにしたもの。「 Javascript は DOM操作である」とも言われる

DOM ??DOM （ Document Object Model ）：ページにある、 p タグとか div タグのこと

jQuery について

javascript をラクに書くためライブラリjavascriptだと数 10 行なのに、 jQueryだと数行になることもある

例えば、・クリックしたら画像が入れ替わる・マウスオーバーした要素がアニメーションのように動く・フォームの中の要素を動的に変更する・スクロール量によって見た目や数値を変更する

TOOL

つくり始める前にTool の準備

ATOM （テキストエディタ）

Chrome Developer Tool

書いてみよう

https://jsfiddle.net/

jsFiddle ( プレビュー機能つきのブラウザエディタ）

HTML を書いてみる

<h1> 見出し 1</h1><h2> 見出し 2</h2><h3> 見出し 3</h3>

<p> これは文書ですこれは文章です </p>

<div> これはブロック要素です </div>

<span> これはインライン要素です </span>

<a href=“”> これはリンクです </a>

<table><tr> <th><th>

<th></th></tr><tr><td></td><td></td>

</tr></table>

CSS を書いてみる

p{font-size:10px;color:red;

}

ul li:nth-child(3){border: 1px solid #33a65e;

}

Javascript(jQuery) を書いてみる

$(function(){

$(‘a’).click(function(){ alert(“ ”クリックしました );

});

});