7/22(Mon)

今日の生放送

Webデザイン入門 0から自分でコーディング!〜スマホサイト編〜

Webデザイン入門 はじめてのコーディング 〜全7回で制作するサイトのコーディング工程確認〜

第1回:2015年5月9日公開

60min

Webデザイン入門 はじめてのコーディング 〜全7回で制作するサイトのコーディング工程確認〜

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

コース概要

この授業では0から自分でコーディングを行い、一つのスマホサイトを完成させます。

google推奨のモバイルフレンドリーな開発環境を整え、Web制作に欠かせないHTML/CSSのコーディングを学びましょう。

はじめてコーディングを学ぶ方から、HTML入門(全3回)を見て少しコーディングに触れた方など、コーディング初心者を対象としています。
シリーズ7回通してできるようになる事はgoogle推奨のモバイルフレンドリーな開発環境を整え、スマホサイトを完成させる事です。
なお、このシリースで制作したスマホサイトは次のシリーズでtabletやPCなどデバイズごとにデザインが切りかわるレスポンシブサイト制作実践へと続きます。
『Webデザイン入門 0から自分でコーディング! ~スマホサイト編~』第1回目は、Webフロントエンドの開発環境を自分のPCに作ってしまうという授業です。

授業に臨むPCに以下のご準備をお願いします。

【拡張子の表示】
拡張子とは、ファイルの種類(画像ファイル、テキストファイル、htmlファイルなどを拡張して識別します)を識別するための符号です。これが表示されていなければWebページを構成している各種ファイルの識別ができません。以下リンクを参照されて拡張子を表示しておいてください。


【使用エディターのインストール】
この授業ではSublimeTextというエディターを使用します。最新版はSublimeText3ですがOSのバーションによってはSublimeText2しかインストールできません。どちらでも構いませんので授業に使用するPCにインストールをしておいてください。

このエディタはパッケージコントロールをインストールする事により、数々の便利な拡張機能やプラグインを導入する事ができますが、このシリーズでは使用しません。パッケージコントロールやプラグインのインストールしたい場合は以下の授業を見ながら慎重に行ってください。(高度な授業になりますのでこのシリースでは不要です)

こんな人にオススメ

検索順位が上がるgoogle推奨のスマホサイトを作ってみたい方・一からスマホサイトの制作ワークフローを学びたい方

担当の先生

パーソナリティ

  • 大木 しのぶ

    大木 しのぶ

    スクー放送部

  • 江川 みどり

    江川 みどり

    スクー放送部

  • 青島 莉子

    青島 莉子

    スクー放送部

参加したい受講生 : 2911

カテゴリー

タグ

サンプルファイル

おかえり、デザインの学び場へ「The Designers Lounge」
月額980円で、4,600本以上の授業が見放題

授業リスト

Webデザイン入門 はじめてのコーディング 〜全7回で制作するサイトのコーディング工程確認〜

2015年5月9日公開

60min.

■ Webデザイン入門 0から自分でコーディング!~スマホサイト編~(全7回)1回目

はじめてコーディングを学ぶ方から、HTML入門(全3回)を見て少しコーディングに触れた方など、コーディング初心者を対象としています。
シリーズ7回通してできるようになる事はgoogle推奨のモバイルフレンドリーな開発環境を整え、スマホサイトを完成させる事です。
なお、このシリースで制作したスマホサイトは次のシリーズでtabletやPCなどデバイズごとにデザインが切りかわるレスポンシブサイト制作実践へと続きます。
『Webデザイン入門 0から自分でコーディング! ~スマホサイト編~』第1回目は、Webフロントエンドの開発環境を自分のPCに作ってしまうという授業です。

授業に臨むPCに以下のご準備をお願いします。

【拡張子の表示】
拡張子とは、ファイルの種類(画像ファイル、テキストファイル、htmlファイルなどを拡張して識別します)を識別するための符号です。これが表示されていなければWebページを構成している各種ファイルの識別ができません。以下リンクを参照されて拡張子を表示しておいてください。


【使用エディターのインストール】
このコースではSublimeTextというエディターを使用します。最新版はSublimeText3ですがOSのバーションによってはSublimeText2しかインストールできません。どちらでも構いませんので授業に使用するPCにインストールをしておいてください。

このエディタはパッケージコントロールをインストールする事により、数々の便利な拡張機能やプラグインを導入する事ができますが、このシリーズでは使用しません。パッケージコントロールやプラグインのインストールしたい場合は以下の授業を見ながら慎重に行ってください。(高度な授業になりますのでこのシリースでは不要です)

スライド資料

Webデザイン入門 初めてのコーディング 〜モバイルフレンドリーなサイトとは〜

2015年5月16日公開

60min.

■ Webデザイン入門 0から自分でコーディング!~スマホサイト編~(全7回)2回目

はじめてコーディングを学ぶ方から、HTML入門(全3回)を見て少しコーディングに触れた方など、コーディング初心者を対象としています。
シリーズ7回通してできるようになる事はgoogle推奨のモバイルフレンドリーな開発環境を整え、スマホサイトを完成させる事です。
なお、このシリースで制作したスマホサイトは次のシリーズでtabletやPCなどデバイズごとにデザインが切りかわるレスポンシブサイト制作実践へと続きます。
『Webデザイン入門 0から自分でコーディング! ~スマホサイト編~』第2回目は、スマホサイトに特化したhtml5の文書構造、遷移設計と操作(UX)設計を習得してGoogleモバイルフレンドリーテストにパスするサイトの制作手法を学びます。
この授業は第1回目の授業を受講している事を前提に授業が進みます。未受講の方は、あらかじめ受講されるとより理解が深まります。

授業に臨むPCに以下のご準備をお願いします。

【拡張子の表示】
拡張子とは、ファイルの種類(画像ファイル、テキストファイル、htmlファイルなどを拡張して識別します)を識別するための符号です。これが表示されていなければWebページを構成している各種ファイルの識別ができません。以下リンクを参照されて拡張子を表示しておいてください。


【使用エディターのインストール】
このコースではSublineTextというエディターを使用します。最新版はSublineText3ですがOSのバーションによってはSublineText2しかインストールできません。どちらでも構いませんので授業に使用するPCにインストールをしておいてください。

このエディタはパッケージコントロールをインストールする事により、数々の便利な拡張機能やプラグインを導入する事ができますが、このシリーズでは使用しません。パッケージコントロールやプラグインのインストールしたい場合は以下の授業を見ながら慎重に行ってください。(高度な授業になりますのでこのシリースでは不要です)

スライド資料

Webデザイン入門 初めてのコーディング 〜プロトタイピングを作ろう!〜

2015年5月23日公開

60min.

■ Webデザイン入門 0から自分でコーディング!~スマホサイト編~(全7回)3回目

はじめてコーディングを学ぶ方から、HTML入門(全3回)を見て少しコーディングに触れた方など、コーディング初心者を対象としています。
シリーズ7回通してできるようになる事はgoogle推奨のモバイルフレンドリーな開発環境を整え、スマホサイトを完成させる事です。
なお、このシリースで制作したスマホサイトは次のシリーズでtabletやPCなどデバイズごとにデザインが切りかわるレスポンシブサイト制作実践へと続きます。
『Webデザイン入門 0から自分でコーディング! ~スマホサイト編~』第3回目は、2015年4月21日に発表されたGoogle モバイルフレンドリーテストに合格するサイトの作り方を学びます。
この授業は第2回目の授業を受講している事を前提に授業が進みます。未受講の方は、あらかじめ受講されるとより理解が深まります。

授業に臨むPCに以下のご準備をお願いします。

【拡張子の表示】
拡張子とは、ファイルの種類(画像ファイル、テキストファイル、htmlファイルなどを拡張して識別します)を識別するための符号です。これが表示されていなければWebページを構成している各種ファイルの識別ができません。以下リンクを参照されて拡張子を表示しておいてください。


【使用エディターのインストール】
このコースではSublineTextというエディターを使用します。最新版はSublineText3ですがOSのバーションによってはSublineText2しかインストールできません。どちらでも構いませんので授業に使用するPCにインストールをしておいてください。

このエディタはパッケージコントロールをインストールする事により、数々の便利な拡張機能やプラグインを導入する事ができますが、このシリーズでは使用しません。パッケージコントロールやプラグインのインストールしたい場合は以下の授業を見ながら慎重に行ってください。(高度な授業になりますのでこのシリースでは不要です)

 

スライド資料

Webデザイン入門 初めてのコーディング 〜スケルトンを作ろう!〜

2015年5月30日公開

60min.

■ Webデザイン入門 0から自分でコーディング!~スマホサイト編~(全7回)4回目

はじめてコーディングを学ぶ方から、HTML入門(全3回)を見て少しコーディングに触れた方など、コーディング初心者を対象としています。
シリーズ7回通してできるようになる事はgoogle推奨のモバイルフレンドリーな開発環境を整え、スマホサイトを完成させる事です。
なお、このシリースで制作したスマホサイトは次のシリーズでtabletやPCなどデバイズごとにデザインが切りかわるレスポンシブサイト制作実践へと続きます。
『Webデザイン入門 0から自分でコーディング! ~スマホサイト編~』第4回目は、プロトタイピング通りにスケルトン(サイトの骨組み)をコーディングして行く手法を学びます。
この授業は第2回目の授業を受講している事を前提に授業が進みます。未受講の方は、あらかじめ受講されるとより理解が深まります。

授業に臨むPCに以下のご準備をお願いします。

4限目までで出来るサイトサンプル
http://behomazn.com/schoo/201505301/

【拡張子の表示】
拡張子とは、ファイルの種類(画像ファイル、テキストファイル、htmlファイルなどを拡張して識別します)を識別するための符号です。これが表示されていなければWebページを構成している各種ファイルの識別ができません。以下リンクを参照されて拡張子を表示しておいてください。


【使用エディターのインストール】
このコースではSublineTextというエディターを使用します。最新版はSublineText3ですがOSのバーションによってはSublineText2しかインストールできません。どちらでも構いませんので授業に使用するPCにインストールをしておいてください。

このエディタはパッケージコントロールをインストールする事により、数々の便利な拡張機能やプラグインを導入する事ができますが、このシリーズでは使用しません。パッケージコントロールやプラグインのインストールしたい場合は以下の授業を見ながら慎重に行ってください。(高度な授業になりますのでこのシリースでは不要です)

スライド資料

Webデザイン入門 初めてのコーディング 〜コンテンツでページを埋めていこう!①〜

2015年5月30日公開

60min.

■ Webデザイン入門 0から自分でコーディング!~スマホサイト編~(全7回)5回目

はじめてコーディングを学ぶ方から、HTML入門(全3回)を見て少しコーディングに触れた方など、コーディング初心者を対象としています。
シリーズ7回通してできるようになる事はgoogle推奨のモバイルフレンドリーな開発環境を整え、スマホサイトを完成させる事です。
なお、このシリースで制作したスマホサイトは次のシリーズでtabletやPCなどデバイズごとにデザインが切りかわるレスポンシブサイト制作実践へと続きます。
『Webデザイン入門 0から自分でコーディング! ~スマホサイト編~』第5回目は、完成したスケルトンにコンテンツをデザインガイドラインに沿ってcssで配置して行く手法を学びます。
この授業は第4回目の授業を受講している事を前提に授業が進みます。未受講の方は、あらかじめ受講されるとより理解が深まります。

授業に臨むPCに以下のご準備をお願いします。
 

4限目までで出来るサイトサンプル
http://behomazn.com/schoo/201505302/


【拡張子の表示】
拡張子とは、ファイルの種類(画像ファイル、テキストファイル、htmlファイルなどを拡張して識別します)を識別するための符号です。これが表示されていなければWebページを構成している各種ファイルの識別ができません。以下リンクを参照されて拡張子を表示しておいてください。


【使用エディターのインストール】
このコースではSublineTextというエディターを使用します。最新版はSublineText3ですがOSのバーションによってはSublineText2しかインストールできません。どちらでも構いませんので授業に使用するPCにインストールをしておいてください。

このエディタはパッケージコントロールをインストールする事により、数々の便利な拡張機能やプラグインを導入する事ができますが、このシリーズでは使用しません。パッケージコントロールやプラグインのインストールしたい場合は以下の授業を見ながら慎重に行ってください。(高度な授業になりますのでこのシリースでは不要です)

  • 自己紹介&アジェンダ
  • 00:53
  • プロトタイプ(見本)を確認
  • 01:36
  • 前回までのコーディングを確認
  • 01:22
  • contactUsタグを書いていこう
  • 07:44
  • textareaタグを書いていこう
  • 00:54
  • inputタグを書いていこう
  • 05:21
  • asaideタグを書いていこう
  • 02:17
  • .accessmapタグを書いていこう
  • 04:20
  • footerタグを書いていこう
  • 10:25
  • gototopタグを書いていこう
  • 07:40
  • Q:先ほどの授業でheaderのbackgroundに#4d559fの色を指定ましたが、ブラウザ上でみると幅を狭くするとこのbackgroundで指定した色の帯の高さが何も見えない状態から段々高くなるのですが、何か意図されたのでしょうか?
  • 04:25
  • Q:overflow: hidden;についてもう少し詳しく教えてほしいです。
  • 00:34
  • Q:最後のrgbaをもう一度教えていただけますか?
  • 00:46
  • Q:.accessmapのところ、height: 0;とpadding-bottom:60%;は何が起こってるのでしょうか? 60%は何に対しての割合でしょう?
  • 01:37
  • Q:PCサイトでもPC以外(ゲーム機やテレビ等)で見るケースが増えてるのでピクセル指定はやめて、remと%指定にしたほうがよいでしょうか?
  • 01:09
  • Q:gototopのところはpixelでなければならないのでしょうか?
  • 01:08
  • Q:clearhackとoverflow:hiddenの使い分けはどうしたらよいのですか?
  • 00:44
  • Q:widthやheightを%で指定される場合とremで指定される場合とありましたが、何か規則性があるのでしょうか?
  • 01:12
  • Q:いつも色の選択に悩みます。ポイントなどはございますか?

スライド資料

Webデザイン入門 初めてのコーディング 〜コンテンツでページを埋めていこう!②〜

2015年6月6日公開

60min.

■ Webデザイン入門 0から自分でコーディング!~スマホサイト編~(全7回)6回目

はじめてコーディングを学ぶ方から、HTML入門(全3回)を見て少しコーディングに触れた方など、コーディング初心者を対象としています。
シリーズ7回通してできるようになる事はgoogle推奨のモバイルフレンドリーな開発環境を整え、スマホサイトを完成させる事です。
なお、このシリースで制作したスマホサイトは次のシリーズでtabletやPCなどデバイズごとにデザインが切りかわるレスポンシブサイト制作実践へと続きます。
『Webデザイン入門 0から自分でコーディング! ~スマホサイト編~』第6回目は、骨組みのできたスケルトン状態のサイト中に各コンテンツを形を整えながら組み込んでいく手法を学びます。
この授業は第4回目の授業を受講している事を前提に授業が進みます。未受講の方は、あらかじめ受講されるとより理解が深まります。

授業に臨むPCに以下のご準備をお願いします。

本時限までで出来るサイトサンプル
http://behomazn.com/schoo/201506061/


【拡張子の表示】
拡張子とは、ファイルの種類(画像ファイル、テキストファイル、htmlファイルなどを拡張して識別します)を識別するための符号です。これが表示されていなければWebページを構成している各種ファイルの識別ができません。以下リンクを参照されて拡張子を表示しておいてください。


【使用エディターのインストール】
このコースではSublineTextというエディターを使用します。最新版はSublineText3ですがOSのバーションによってはSublineText2しかインストールできません。どちらでも構いませんので授業に使用するPCにインストールをしておいてください。

このエディタはパッケージコントロールをインストールする事により、数々の便利な拡張機能やプラグインを導入する事ができますが、このシリーズでは使用しません。パッケージコントロールやプラグインのインストールしたい場合は以下の授業を見ながら慎重に行ってください。(高度な授業になりますのでこのシリースでは不要です)

スライド資料

Webデザイン入門 初めてのコーディング 〜細部のcssを組み立てよう!〜

2015年6月6日公開

60min.

■ Webデザイン入門 0から自分でコーディング!~スマホサイト編~(全7回)7回目

はじめてコーディングを学ぶ方から、HTML入門(全3回)を見て少しコーディングに触れた方など、コーディング初心者を対象としています。
シリーズ7回通してできるようになる事はgoogle推奨のモバイルフレンドリーな開発環境を整え、スマホサイトを完成させる事です。
なお、このシリースで制作したスマホサイトは次のシリーズでtabletやPCなどデバイズごとにデザインが切りかわるレスポンシブサイト制作実践へと続きます。
『Webデザイン入門 0から自分でコーディング! ~スマホサイト編~』最終回目は、6回までで形作られたWebページを、より操作性を上げ魅力的にブラッシュアップしていく手法を学びます。
この授業は第4回目の授業を受講している事を前提に授業が進みます。未受講の方は、あらかじめ受講されるとより理解が深まります。

授業に臨むPCに以下のご準備をお願いします。

本時限までで出来るサイトサンプル
http://behomazn.com/schoo/201506062/

【拡張子の表示】
拡張子とは、ファイルの種類(画像ファイル、テキストファイル、htmlファイルなどを拡張して識別します)を識別するための符号です。これが表示されていなければWebページを構成している各種ファイルの識別ができません。以下リンクを参照されて拡張子を表示しておいてください。


【使用エディターのインストール】
このコースではSublineTextというエディターを使用します。最新版はSublineText3ですがOSのバーションによってはSublineText2しかインストールできません。どちらでも構いませんので授業に使用するPCにインストールをしておいてください。

このエディタはパッケージコントロールをインストールする事により、数々の便利な拡張機能やプラグインを導入する事ができますが、このシリーズでは使用しません。パッケージコントロールやプラグインのインストールしたい場合は以下の授業を見ながら慎重に行ってください。(高度な授業になりますのでこのシリースでは不要です)

■ 授業内容内容の補足

タイムラインの【後半】質疑応答で
Q:ナビが開かないのですが、どうしたら良いでしょうか? (30:05)
というご質問がありました。

原因をスクー学生のTakahiro Natsume氏が解明してくださいました。ありがとうございました。

Navの右側の開閉ボタンの左にあるSNSボタンのulが無駄に長く、余った部分がボタンの上に被さっているため、「押せな状態になっている」とご指摘いただきました。

授業中のプロパティ#snsに対する90行目の辺りの、width: 15rem;の指定を8remに変更してください。半分弱にする事によってボタンの上に重ならなくなります。なお、スライドp13に書かれているサンプルの方は修正済みです。

スライド資料

Webデザイン入門 初めてのコーディング 〜マルチデバイスへの対応方法〜

2015年6月13日公開

60min.

■ Webデザイン入門 0から自分でコーディング!~スマホサイト編~(全8回)8回目

はじめてコーディングを学ぶ方から、HTML入門(全3回)を見て少しコーディングに触れた方など、コーディング初心者を対象としています。
シリーズ8回通してできるようになる事はgoogle推奨のモバイルフレンドリーな開発環境を整え、スマホサイトを完成させる事です。
なお、このシリースで制作したスマホサイトは次のシリーズでtabletやPCなどデバイズごとにデザインが切りかわるレスポンシブサイト制作実践へと続きます。
前回までの授業でスマホ用のシングルページサイトが完成しました。この授業では、完成したサイトをマルチデバイス対応にして、同一htmlページのUIをデバイス毎に切り替える手法を学んでいきます。今回もcssを一緒にコーディングしていくハンズオン授業になります。同じサイトの見え方を、それぞれのデバイズに最適なUIを実現するMedia Queryという手法を使ったコーディングを学んでいきます。

授業に臨むPCに以下のご準備をお願いします。

【拡張子の表示】
拡張子とは、ファイルの種類(画像ファイル、テキストファイル、htmlファイルなどを拡張して識別します)を識別するための符号です。これが表示されていなければWebページを構成している各種ファイルの識別ができません。以下リンクを参照されて拡張子を表示しておいてください。


【使用エディターのインストール】
このコースではSublineTextというエディターを使用します。最新版はSublineText3ですがOSのバーションによってはSublineText2しかインストールできません。どちらでも構いませんので授業に使用するPCにインストールをしておいてください。

このエディタはパッケージコントロールをインストールする事により、数々の便利な拡張機能やプラグインを導入する事ができますが、このシリーズでは使用しません。パッケージコントロールやプラグインのインストールしたい場合は以下の授業を見ながら慎重に行ってください。(高度な授業になりますのでこのシリースでは不要です)

完成サイト
http://behomazn.com/schoo/20150613/

スライド資料

プレミアム生放送

関連授業

人気の生放送授業

もっと見る

新着の生放送授業

もっと見る

アクティビティ