4/26(Fri)

今日の生放送

いけだ ゆうたろう

池田 祐太郎

WEBデザイナー

22歳でWeb未経験からサイトの更新を担当。 独学でホームページ制作を学ぶ。 都内企業のウェブマスター、Webデザイナー、コーダー等を経て2012年7月フリーランスのウェブデザイナー"ハイファイブクリエイト"として東京都世田谷区にて活動を開始。

池田 祐太郎

登壇している授業のカテゴリー・関連タグ

担当のコース

この授業では、カフェのスマホサイトをゼロから制作して、FTPソフトでレンタルサーバーでアップして公開することがゴールです。HTMLやCSSを使ったコーディングや、レスポンシブデザインを学べます。 どんなことを学べるか: ・カフェのスマホサイトを0から作れる ・dreamweaverの使い方をサイト制作を通して学べる ・FTPソフトのインストールと使い方を学べる ・レンタルサーバーの選び方と申し込み方法から設定までひと通り行う ・制作したHTMLファイルをFTPソフトを使ってアップロードするサイト制作の一連の流れを知れる ・デバイスに左右されにくいサイト構築のノウハウを知れる ・Chromeブラウザの開発者ツールの使い方を学び効率のよいCSSの構築方法を学べる

Webサイトを効率良く構築&デバッグする上で役立つのがデベロッパーツールです。 これができるようになると、ブラウザ上でリアルタイムに修正を確認できたり、元のファイルをいじらずに一時的な変更を適用させたり、CSSを効率よく構築できたり、JavaScript(jQuery)のデバッグをしたりとウェブサイト制作に携わるコーダーやデザイナーはもちろん、非ウェブデザイナーのサイト修正や更新をするWeb担当者など、一度覚えれば便利で手放すことができなくなるツールが満載のデベロッパーツールの使い方を一から応用まで紹介します。 この授業を受けると学べること: ・デベロッパーツールの使い方がわかる ・特定の場所のHTMLやCSSがどのように反映されているか即座に知ることができる ・今まで一つ一つなんとなく書いていたCSSがリアルタイムに反映され視覚的にわかりやすく構築できる ・ChromeやFirefoxでは問題ないのにInternetExplorerで起きていた不具合をすぐに見つけられる ・他のサイトで「この部分どうやって書いているんだろな」と思っていたところがわかるようになる(!) ・Facebookのいいねボタンなどの動的に出力されている箇所のCSS制御ができるようになる 予定している環境: Chromeデベロッパーツール ※デベロッパーツールはSafariやFireBug(Firefoxプラグイン)、InternetExplorerにも同じような機能がありますが、授業でメインとして進めていくのはChromeを使用します 対象者: ・HTML, CSSの基本を理解している ・ページ構築の時間を効率よくしたいと考えている ・デベロッパーツールは知っているが活用していない・できていない

担当の授業一覧 全5授業

非ウェブデザイナーも知っておきたいデベロッパーツールの使い方(応用編 知っておきたい機能と応用)

第2回 非ウェブデザイナーも知っておきたいデベロッパーツールの使い方(応用編 知っておきたい機能と応用)(90分)

2014年3月3日放送

Webサイトを効率良く構築&デバッグする上で役立つのがデベロッパーツールです。 これができるようになると、ブラウザ上でリアルタイムに修正を確認できたり、元のファイルをいじらずに一時的な変更を適用させたり、CSSを効率よく構築できたり、JavaScript(jQuery)のデバッグをしたりとウェブサイト制作に携わるコーダーやデザイナーはもちろん、非ウェブデザイナーのサイト修正や更新をするWeb担当者など、一度覚えれば便利で手放すことができなくなるツールが満載のデベロッパーツールの使い方を一から応用まで紹介します。 この授業を受けると学べること: ・デベロッパーツールの使い方がわかる ・特定の場所のHTMLやCSSがどのように反映されているか即座に知ることができる ・今まで一つ一つなんとなく書いていたCSSがリアルタイムに反映され視覚的にわかりやすく構築できる ・ChromeやFirefoxでは問題ないのにInternetExplorerで起きていた不具合をすぐに見つけられる ・他のサイトで「この部分どうやって書いているんだろな」と思っていたところがわかるようになる(!) ・Facebookのいいねボタンなどの動的に出力されている箇所のCSS制御ができるようになる 予定している環境: Chromeデベロッパーツール ※デベロッパーツールはSafariやFireBug(Firefoxプラグイン)、InternetExplorerにも同じような機能がありますが、授業でメインとして進めていくのはChromeを使用します 対象者: ・HTML, CSSの基本を理解している ・ページ構築の時間を効率よくしたいと考えている ・デベロッパーツールは知っているが活用していない・できていない

非ウェブデザイナーも知っておきたいデベロッパーツールの使い方(基本編 使い方と便利な機能)

第1回 非ウェブデザイナーも知っておきたいデベロッパーツールの使い方(基本編 使い方と便利な機能)(90分)

2014年2月21日放送

Webサイトを効率良く構築&デバッグする上で役立つのがデベロッパーツールです。 これができるようになると、ブラウザ上でリアルタイムに修正を確認できたり、元のファイルをいじらずに一時的な変更を適用させたり、CSSを効率よく構築できたり、JavaScript(jQuery)のデバッグをしたりとウェブサイト制作に携わるコーダーやデザイナーはもちろん、非ウェブデザイナーのサイト修正や更新をするWeb担当者など、一度覚えれば便利で手放すことができなくなるツールが満載のデベロッパーツールの使い方を一から応用まで紹介します。 この授業を受けると学べること: ・デベロッパーツールの使い方がわかる ・特定の場所のHTMLやCSSがどのように反映されているか即座に知ることができる ・今まで一つ一つなんとなく書いていたCSSがリアルタイムに反映され視覚的にわかりやすく構築できる ・ChromeやFirefoxでは問題ないのにInternetExplorerで起きていた不具合をすぐに見つけられる ・他のサイトで「この部分どうやって書いているんだろな」と思っていたところがわかるようになる(!) ・Facebookのいいねボタンなどの動的に出力されている箇所のCSS制御ができるようになる 予定している環境: Chromeデベロッパーツール ※デベロッパーツールはSafariやFireBug(Firefoxプラグイン)、InternetExplorerにも同じような機能がありますが、授業でメインとして進めていくのはChromeを使用します 対象者: ・HTML, CSSの基本を理解している ・ページ構築の時間を効率よくしたいと考えている ・デベロッパーツールは知っているが活用していない・できていない

スマホ最適化のためのデザイン・コーディング実習

第3回 スマホ最適化のためのデザイン・コーディング実習(90分)

2014年1月13日放送

既存サイトをレスポンシブウェブデザインとしてスマートフォン最適化を行い、レスポンシブウェブデザインのためのデザインで注意することやコーディング方法を学びます。 「PCサイトは作れるけど、スマホサイトは作ったことがなくて必要性を感じている」 「レスポンシブWebデザインでスマホ最適化を行いたいが、どうすればいいかわからない」 これらのお悩みは授業を受けることにより改善されます。 授業ではサンプル用のPCサイトやスマートフォン用サイトで使う素材を用意しますので、完成デザインを参考にしながらコーディングしていきスマートフォンサイトに最適化していく流れをハンズオンで進めていくため、実際のノウハウが身につきます。 授業で行う内容をレスポンシブサイト制作の案件に応用し、レスポンシブウェブデザインによるスマホ最適化の流れを覚えましょう。 この授業を受けると学べること: スマートフォンに最適化したサイトを制作するノウハウが身につく レスポンシブウェブデザインの制作方法を知れる レスポンシブ化する際の注意するところやつまづきやすい部分がわかる ■ 授業の流れ 1.レスポンシブ化するPCサイト確認/スマートフォンサイトの完成デザイン確認 2.完成デザインを元にスマートフォンサイトをコーディング 3.完成

スマホサイトを作って学ぶ、サイト制作入門(サーバーレンタル・FTP編)

第2回 スマホサイトを作って学ぶ、サイト制作入門(サーバーレンタル・FTP編)(120分)

2013年11月28日放送

一言で言うと「スマホサイトを0から作って、FTPソフトでレンタルサーバーでアップして公開しよう」という内容です。 サンプルとしてカフェのスマホサイトですが、応用して美容院や歯科医院などにも。制作会社に依頼するまでもない規模のサイトを作れるレベルを想定しています。 ご自身のサイトや知り合いのサイトをまずは作れるように制作の基本から抑えつつ、つまづきやすいポイントや知っておくと良いコラムなど交えながら楽しく制作できるよう進めていきます。 「一度やってみたけど難しくてできなかった…」 「サイト制作って英語ばっかだし難しい…」 と思っている方、是非一度チャレンジしてみませんか? 慣れないことはたくさん出てきますが、一つ一つ解決していけばすぐにわかるようになります。 制作の楽しみを発見しましょう! 対象者: HTMLとCSSは経験があって初心者ではないがスマホサイトを作った経験がない FTPソフトやレンタルサーバーを借りるなど自分でやってみたいが自信がない 開発者ツールを使ったことがない どんなことを学べるか: ・カフェのスマホサイトを0から作れる ・dreamweaverの使い方をサイト制作を通して学べる ・FTPソフトのインストールと使い方を学べる ・レンタルサーバーの選び方と申し込み方法から設定までひと通り行う ・制作したHTMLファイルをFTPソフトを使ってアップロードするサイト制作の一連の流れを知れる ・デバイスに左右されにくいサイト構築のノウハウを知れる ・Chromeブラウザの開発者ツールの使い方を学び効率のよいCSSの構築方法を学べる

スマホサイトを作って学ぶ、サイト制作入門(制作編)

第1回 スマホサイトを作って学ぶ、サイト制作入門(制作編)(120分)

2013年11月25日放送

一言で言うと「スマホサイトを0から作って、FTPソフトでレンタルサーバーでアップして公開しよう」という内容です。 サンプルとしてカフェのスマホサイトですが、応用して美容院や歯科医院などにも。制作会社に依頼するまでもない規模のサイトを作れるレベルを想定しています。 ご自身のサイトや知り合いのサイトをまずは作れるように制作の基本から抑えつつ、つまづきやすいポイントや知っておくと良いコラムなど交えながら楽しく制作できるよう進めていきます。 「一度やってみたけど難しくてできなかった…」 「サイト制作って英語ばっかだし難しい…」 と思っている方、是非一度チャレンジしてみませんか? 慣れないことはたくさん出てきますが、一つ一つ解決していけばすぐにわかるようになります。 制作の楽しみを発見しましょう! 対象者: HTMLとCSSは経験があって初心者ではないがスマホサイトを作った経験がない FTPソフトやレンタルサーバーを借りるなど自分でやってみたいが自信がない 開発者ツールを使ったことがない どんなことを学べるか: ・カフェのスマホサイトを0から作れる ・dreamweaverの使い方をサイト制作を通して学べる ・FTPソフトのインストールと使い方を学べる ・レンタルサーバーの選び方と申し込み方法から設定までひと通り行う ・制作したHTMLファイルをFTPソフトを使ってアップロードするサイト制作の一連の流れを知れる ・デバイスに左右されにくいサイト構築のノウハウを知れる ・Chromeブラウザの開発者ツールの使い方を学び効率のよいCSSの構築方法を学べる