10/22(Tue)

今日の生放送

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

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

第1回:2013年11月25日公開

120min

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

おためし受講する(5分)

コース概要

この授業では、カフェのスマホサイトをゼロから制作して、FTPソフトでレンタルサーバーでアップして公開することがゴールです。HTMLやCSSを使ったコーディングや、レスポンシブデザインを学べます。

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

担当の先生

参加したい受講生 : 1471

カテゴリー

タグ

サンプルファイル

授業で使用するファイル

※授業以外での利用は禁止します。

月額980円で、4,600本以上の授業が見放題

授業リスト

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

2013年11月25日公開

120min.

一言で言うと「スマホサイトを0から作って、FTPソフトでレンタルサーバーでアップして公開しよう」という内容です。
サンプルとしてカフェのスマホサイトですが、応用して美容院や歯科医院などにも。制作会社に依頼するまでもない規模のサイトを作れるレベルを想定しています。
ご自身のサイトや知り合いのサイトをまずは作れるように制作の基本から抑えつつ、つまづきやすいポイントや知っておくと良いコラムなど交えながら楽しく制作できるよう進めていきます。


「一度やってみたけど難しくてできなかった…」

「サイト制作って英語ばっかだし難しい…」

と思っている方、是非一度チャレンジしてみませんか?
慣れないことはたくさん出てきますが、一つ一つ解決していけばすぐにわかるようになります。
制作の楽しみを発見しましょう!

対象者:


HTMLとCSSは経験があって初心者ではないがスマホサイトを作った経験がない
FTPソフトやレンタルサーバーを借りるなど自分でやってみたいが自信がない
開発者ツールを使ったことがない

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

  • 自己紹介&アジェンダ
  • 02:52
  • 制作に入る前に
  • 05:51
  • 環境構築
  • 06:30
  • htmlファイルを制作
  • 00:48
  • ドリームウィーバー起動 新規ドキュメント制作
  • 01:01
  • 【質問】Dreamweaverが入ってない場合は?
  • 01:00
  • 【質問】ドリームウィバーCS6でも大丈夫?
  • 03:57
  • headに設定を記述する <meta> <titele>
  • 00:59
  • Dreamweaverのデータを保存する
  • 02:48
  • headタグに設定を書き込む
  • 01:50
  • metaタグのcontentの説明
  • 03:41
  • cssのlinkをペースト
  • 02:00
  • bodyに書き込む
  • 01:09
  • DLしたHTMLファイルのheaderタグを制作データのbodyの中にコピーする
  • 00:46
  • headerタグの中身の解説
  • 00:25
  • 挿入されている画像データを制作ファイルに移す
  • 00:50
  • 挿入画像のwidth設定の解説
  • 01:19
  • navタグの説明
  • 03:11
  • div class=mainをコピーして制作データにペースト
  • 01:20
  • metaの電話番号リンクの解説
  • 01:42
  • データの保存
  • 00:44
  • 現在の制作状況の解説
  • 00:48
  • 制作フォルダの中にCSSフォルダを制作
  • 01:15
  • Dreamweaverでcssファイルの制作
  • 01:33
  • Chromeのインスペクタを使いCSSを制作
  • 00:08
  • クイズ cssの書き方覚えていますか?
  • 02:04
  • 基本のcssを書く
  • 00:40
  • ・基本のcssを書くbody
  • 03:53
  • 【質問】ハイフンから始まってるプロパティって何か特別なのかな??
  • 02:36
  • ・基本のcssを書く img
  • 01:07
  • ・基本のcssを書く a
  • 01:57
  • Chromeのインスペクタを使いCSSを制作
  • 02:56
  • Chromeのインスペクタの使用方法
  • 04:57
  • Chromeインスペクタの便利な機能
  • 00:30
  • デザインを見ながらCSSをインスペクタを使って書く
  • 02:06
  • headerのcssを書く
  • 03:13
  • navのcssを書く
  • 05:35
  • 【質問】!マークでエラーが出た箇所はどうやったら消せますか?
  • 02:29
  • 【質問】完成形のhtmlファイルをインスペクタで見た場合は今の内容はどのタグ部分を選択したら見ることができますか?
  • 01:46
  • ulのcssを書く
  • 03:54
  • ・aのcssをコピー&ペーストする
  • 02:37
  • ・ulの中身のタグのcssをコピー&ペーストする
  • 01:19
  • ソーシャルメディアボタンのcssをコピー&ペーストする
  • 01:11
  • 【質問】操作の仕方で確認したいのですがインスペクタで見え方を確認しながらコードを作ってstyle.cssにコピペして保存することで作っていくということでしょうか?
  • 02:27
  • 残りのCSSを全てコピー&ペースト
  • 00:52
  • 完成したHTMLファイル、CSSファイルの解説
  • 01:31
  • ・imgのcss
  • 00:55
  • ・navのcss
  • 01:46
  • ・aのcss
  • 00:53
  • ・電話番号部分のcss
  • 02:30
  • ・footerのcss
  • 01:34
  • jsファイルや関連ファイルを紐付けてインタラクティブな動きを実現
  • 00:02
  • jsファイルフォルダを制作データのあるフォルダにコピーする
  • 01:12
  • jsファイルの内容解説
  • 02:43
  • Q:インスペクタでの変更はPCのメモリ上に反映されるだけで、ファイル(style.css)が変更されるのではないのですね
  • 01:00
  • Q:スマホサイト用を勉強する場合、どのような書籍で勉強すれば良いでしょうか?
  • 01:43
  • Q:先生が今までに手がけたスマホサイトの中から、参考にするべきものを教えていただきたいです
  • 01:53
  • Q:スマホサイトに関して高解像度対応のため画像の大きさを2倍で制作するということなのですが・・・
  • 01:50
  • Q:スマホ制作で一番気をつけないといけない事は?
  • 01:35
  • Q:スマホでしか見られないサイトのソースを見る方法はどうすればいいんでしょうか?
  • 02:20
  • Q:ネット検索は情報が沢山あって大変です。その中で正しい情報をどう探していけばいいのか、コツを教えて下さい
  • 03:56
  • 課題発表

スライド資料

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

2013年11月28日公開

120min.

一言で言うと「スマホサイトを0から作って、FTPソフトでレンタルサーバーでアップして公開しよう」という内容です。
サンプルとしてカフェのスマホサイトですが、応用して美容院や歯科医院などにも。制作会社に依頼するまでもない規模のサイトを作れるレベルを想定しています。
ご自身のサイトや知り合いのサイトをまずは作れるように制作の基本から抑えつつ、つまづきやすいポイントや知っておくと良いコラムなど交えながら楽しく制作できるよう進めていきます。


「一度やってみたけど難しくてできなかった…」

「サイト制作って英語ばっかだし難しい…」

と思っている方、是非一度チャレンジしてみませんか?
慣れないことはたくさん出てきますが、一つ一つ解決していけばすぐにわかるようになります。
制作の楽しみを発見しましょう!

対象者:


HTMLとCSSは経験があって初心者ではないがスマホサイトを作った経験がない
FTPソフトやレンタルサーバーを借りるなど自分でやってみたいが自信がない
開発者ツールを使ったことがない

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

  • 前回までのおさらい
  • 02:10
  • ・ディベロッパーツールの使い方
  • 01:50
  • ・高解像度対応のためのCSS設定
  • 02:35
  • ・Frickのための実装(javascript)
  • 02:25
  • ・viewportの設定
  • 02:20
  • ・format-detectionの設定
  • 01:40
  • ・webkit-background-sizeの設定
  • 01:00
  • レンタルサーバーを借りる
  • 01:00
  • ・レンタルサーバーのちがい
  • 01:04
  • ・ウェブサイトに合わせたレンタルサーバー
  • 02:41
  • ・初めてレンタルサーバーを借りる人がチェックすべきポイント①(ディスク容量)
  • 04:00
  • ・初めてレンタルサーバーを借りる人がチェックすべきポイント②(データベース)
  • 01:55
  • ・初めてレンタルサーバーを借りる人がチェックすべきポイント③(ファイルマネージャー)
  • 03:20
  • ・ロリポップの申し込みステップ①メールアドレスの登録
  • 04:35
  • ・ロリポップの申し込みステップ②プラン選択
  • 05:50
  • ・ロリポップの申し込みステップ③申し込み完了/確認
  • 04:42
  • FTPソフトのインストール
  • 03:43
  • ・Win&Macどちらでも使えるFilizillaをインストール
  • 05:35
  • ・FTPソフトの設定
  • 05:57
  • 1回目の授業で作ったデータをサーバーにアップし公開
  • 05:33
  • ・実際に自分のドメインにアクセスしてみる
  • 01:10
  • ・スマホからアクセスしてみる
  • 04:18
  • 【後半】質疑応答
  • 07:49
  • Q:リダイレクトループがあるようなので、ソースのチェックをしています
  • 01:33
  • Q:サーバー選定についてですが、ロリポップを今回利用したのは
  • 01:43
  • Q:AWSはどうなんでしょうか?
  • 01:32
  • Q:同じURLで、PCから見るのと、スマホから見るのとで、表示が違うサイトがありますが、どのような技術になっているのでしょうか?
  • 01:23
  • Q:先生はスクーに応募してご登壇したそうですが、なぜご登壇しようと思ったのでしょうか?
  • 02:57
  • Q:普段先生は、サイト作成時、手打ちで作りますか?
  • 03:43
  • Q:先生はBootstrapとWordPressを使ってスマホサイトを作成したことはありますか?これを使うときに大変だった事があれば教えて下さい。
  • 01:38
  • Q:今のテキストエディタみたいな物の名前は何ですか??
  • 01:18
  • Q:独学でWEBページの制作を学ばれたとのことですが、どのような方法で習得されましたか?
  • 02:44
  • Q:ほかのサイトを見る時に意識しているポイントはありますか?
  • 03:15
  • Q:先生はアイデアが枯渇したときに何かサイトを見たりしてネタを集めたりはしますか?
  • 02:50
  • Q:ライブハウスのサイト更新はCMSではなく、普通にHTMLとCSSでコーディングやっていたんですか?大変ですね。今だったら、googleカレンダーとかでスケジュールの調整ができますもんね。
  • 01:46
  • Q:スマホから見ると、よく「PC・スマホの表示切替」がありますが、どのようになっているのでしょうか
  • 04:09
  • Q:パソコンとスマホのサイトをデザインされるときどちらからデザインされますか?
  • 01:20
  • Q:既にアップしたファイルを編集した際の更新方法を教えてください。Filezillaでそのファイルを消してアップしなおせばいいですか?
  • 01:01
  • Q:今はすべてCMSで作成するのでしょうか?それはクライアントのためにですか?それとも自分で楽に更新するためですか?
  • 01:03
  • Q:よく使うフォントタイプはありますか?特にスマホ向けのサイトではどれを
  • 00:51
  • Q:先生はphpなどでのWeb開発も行いますか?Webデザインと開発の両方できる方はWebデザイナーのなかでも何割ぐらいなのでしょうか?
  • 01:42
  • Q:今更ですが・・・先生はなぜwebデザイナーを目指されたのでしょうか?
  • 01:40
  • 課題発表

スライド資料

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

2014年1月13日公開

90min.

既存サイトをレスポンシブウェブデザインとしてスマートフォン最適化を行い、レスポンシブウェブデザインのためのデザインで注意することやコーディング方法を学びます。

「PCサイトは作れるけど、スマホサイトは作ったことがなくて必要性を感じている」
「レスポンシブWebデザインでスマホ最適化を行いたいが、どうすればいいかわからない」

これらのお悩みは授業を受けることにより改善されます。

授業ではサンプル用のPCサイトやスマートフォン用サイトで使う素材を用意しますので、完成デザインを参考にしながらコーディングしていきスマートフォンサイトに最適化していく流れをハンズオンで進めていくため、実際のノウハウが身につきます。

授業で行う内容をレスポンシブサイト制作の案件に応用し、レスポンシブウェブデザインによるスマホ最適化の流れを覚えましょう。

この授業を受けると学べること:


スマートフォンに最適化したサイトを制作するノウハウが身につく
レスポンシブウェブデザインの制作方法を知れる
レスポンシブ化する際の注意するところやつまづきやすい部分がわかる

■ 授業の流れ


1.レスポンシブ化するPCサイト確認/スマートフォンサイトの完成デザイン確認
2.完成デザインを元にスマートフォンサイトをコーディング
3.完成

  • 自己紹介&アジェンダ
  • 04:44
  • 完成系の確認/ファイルのダウンロード
  • 02:04
  • index.htmlに追加の記述
  • 03:04
  • sp.cssを作成、メディアクエリの記述
  • 02:29
  • ・主要なcssから記述
  • 02:28
  • ・スマホサイズで動くか確認
  • 05:00
  • ・bodyの記述
  • 05:20
  • ・line/bottomの設定
  • 02:30
  • ・崩れた部分の微調整
  • 03:20
  • ・headerの修正
  • 06:19
  • ・サイドバー作成
  • 05:40
  • ・copyright部分の調整
  • 03:43
  • Q:HTMLのhead以外のタグを触らない制限があった場合に、sp.cssなどの外部ファイルのみで最適化することは可能ですか? 元HTMLをできるだけ改変しないという目的です。
  • 01:07
  • ・Retinaディスプレイの対応方法
  • 06:40
  • ・スマートフォンで確認
  • 00:33
  • ・ディレクトリを作成
  • 03:57
  • Q:画像サイズを二倍にするのと、解像度を二倍にするのではどちらが良いのでしょうか?
  • 01:00
  • Q:本日の授業にてスマホサイトへの最適化を行う際に%(割合指定)とpx(固定指定)を場所によって使い分けておりましたが、使い分けはどの様に方針を決めていますか
  • 02:44
  • ・2倍のpixel数の画像作成法
  • 05:06
  • Q:スマホ対応させる場合、一般的に基準サイズは
  • 01:13
  • Q:前回の授業でiPhoneをMacに繋ぐとSafariの開発の所にiPhoneが出てくると仰ってましたが、出来ないです。
  • 01:13
  • Q:スマホサイトからPCサイトに作成するケースもありますが、PCの方が簡単ですか?
  • 01:37
  • Q:スマホ用にリサイズした画像は、PC用のCSSで、画像の表示サイズの指定をすれば良いんでしょうか?
  • 02:25
  • Q:オススメのレスポンシブフレームワークなどはありますか?
  • 01:34
  • Q:メニューとメインビジュアルは重ならない理由を教えて下さい。
  • 01:25
  • Q:2倍の画像をindex.htmlで半分のwidth指定していましたが、cssで指定しても良いのでしょうか?
  • 03:12
  • Q:既存のサイトをレスポンシブ対応させる場合、どの位、時間が掛かってしまうものでしょうか?
  • 03:03
  • Q:先生がかっこいいと思うレスポンシブルデザインのサイトがあったら教えて下さい!
  • 03:37
  • 課題発表

スライド資料

プレミアム生放送

関連授業

人気の生放送授業

もっと見る

新着の生放送授業

もっと見る

アクティビティ