6/25(Tue)

今日の生放送

HTML/CSS実践 シングルページの作成

HTML/CSS実践 シングルページの作成 〜テンプレートの作成〜

第1回:2015年4月19日公開

30min

HTML/CSS実践 シングルページの作成 〜テンプレートの作成〜

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

コース概要

この授業ではHTML/CSSを用いたWEBページの作り方が学べます。

実際に1つのWEBページを作成することで、基本的なレイアウトとコーディング方法を身につけましょう。

■ 事前準備

この授業では下記ソフトウェアを使用します。事前にインストールしておいて下さい。

GoogleChrome
https://www.google.co.jp/chrome/browser/desktop/index.html
・人気のWebブラウザです。Windows/Mac両方で利用可能で、JavaScriptの開発に便利な機能を持っています。

Sublime Text
http://www.sublimetext.com/
・人気のテキストエディタです。Windows/Mac両方で利用可能で、JavaScriptの開発に便利です。
使い慣れているエディタがあれば、そちらをご利用いただいても構いません。


またこの授業はHTML/CSSの知識を前提としています。
自信の無い方は、下記授業を受けてみてください。
HTML入門(全3回)
CSS入門(全3回)

こんな人にオススメ

HTML/CSSの基本的なコーディングを知りたい方

担当の先生

パーソナリティ

  • 未定

    未定

参加したい受講生 : 1431

カテゴリー

タグ

サンプルファイル

授業で使用するファイル
月額980円で、4,600本以上の授業が見放題

授業リスト

HTML/CSS実践 シングルページの作成 〜テンプレートの作成〜

2015年4月19日公開

30min.

この授業ではHTML/CSSを用いたWEBページの作り方が学べます。実際に1つのWEBページを作成することで、基本的なレイアウトとコーディング方法を身につけましょう。

■ 事前準備

この授業では下記ソフトウェアを使用します。事前にインストールしておいて下さい。

GoogleChrome
https://www.google.co.jp/chrome/browser/desktop/index.html
・人気のWebブラウザです。Windows/Mac両方で利用可能で、JavaScriptの開発に便利な機能を持っています。

Sublime Text
http://www.sublimetext.com/
・人気のテキストエディタです。Windows/Mac両方で利用可能で、JavaScriptの開発に便利です。
使い慣れているエディタがあれば、そちらをご利用いただいても構いません。


またこの授業はHTML/CSSの知識を前提としています。
自信の無い方は、下記コースを受けてみてください。
HTML入門(全3回)
CSS入門(全3回)

スライド資料

HTML/CSS実践 シングルページの作成 〜HTMLのコーディング〜

2015年4月19日公開

30min.

この授業ではHTML/CSSを用いたWEBページの作り方が学べます。実際に1つのWEBページを作成することで、基本的なレイアウトとコーディング方法を身につけましょう。

■ 事前準備

この授業では下記ソフトウェアを使用します。事前にインストールしておいて下さい。

GoogleChrome
https://www.google.co.jp/chrome/browser/desktop/index.html
・人気のWebブラウザです。Windows/Mac両方で利用可能で、JavaScriptの開発に便利な機能を持っています。

Sublime Text
http://www.sublimetext.com/
・人気のテキストエディタです。Windows/Mac両方で利用可能で、JavaScriptの開発に便利です。
使い慣れているエディタがあれば、そちらをご利用いただいても構いません。


またこの授業はHTML/CSSの知識を前提としています。
自信の無い方は、下記コースを受けてみてください。
HTML入門(全3回)
CSS入門(全3回)

スライド資料

HTML/CSS実践 シングルページの作成 〜CSSのコーディング〜

2015年4月19日公開

30min.

この授業ではHTML/CSSを用いたWEBページの作り方が学べます。実際に1つのWEBページを作成することで、基本的なレイアウトとコーディング方法を身につけましょう。

■ 事前準備

この授業では下記ソフトウェアを使用します。事前にインストールしておいて下さい。

GoogleChrome
https://www.google.co.jp/chrome/browser/desktop/index.html
・人気のWebブラウザです。Windows/Mac両方で利用可能で、JavaScriptの開発に便利な機能を持っています。

Sublime Text
http://www.sublimetext.com/
・人気のテキストエディタです。Windows/Mac両方で利用可能で、JavaScriptの開発に便利です。
使い慣れているエディタがあれば、そちらをご利用いただいても構いません。


またこの授業はHTML/CSSの知識を前提としています。
自信の無い方は、下記コースを受けてみてください。
HTML入門(全3回)
CSS入門(全3回)

スライド資料

HTML/CSS実践 シングルページの作成 〜パーツの作り込み〜

2015年4月19日公開

30min.

この授業ではHTML/CSSを用いたWEBページの作り方が学べます。実際に1つのWEBページを作成することで、基本的なレイアウトとコーディング方法を身につけましょう。

■ 事前準備

この授業では下記ソフトウェアを使用します。事前にインストールしておいて下さい。

GoogleChrome
https://www.google.co.jp/chrome/browser/desktop/index.html
・人気のWebブラウザです。Windows/Mac両方で利用可能で、JavaScriptの開発に便利な機能を持っています。

Sublime Text
http://www.sublimetext.com/
・人気のテキストエディタです。Windows/Mac両方で利用可能で、JavaScriptの開発に便利です。
使い慣れているエディタがあれば、そちらをご利用いただいても構いません。


またこの授業はHTML/CSSの知識を前提としています。
自信の無い方は、下記コースを受けてみてください。
HTML入門(全3回)
CSS入門(全3回)

  • 自己紹介&アジェンダ
  • 00:43
  • 仕上げ
  • 05:00
  • オススメサイトの紹介:文法チェック
  • 05:02
  • オススメサイトの紹介:画像素材
  • 02:35
  • オススメサイトの紹介:リファレンス
  • 03:10
  • Q:時によってどんどん代わって行くと思いますが、モダンブラウザの中で、Firefoxが標準対応が進んでいると聴きます。実際開発をされている方が作業時のメインブラウザとしては、実際どうなのでしょうか?
  • 02:48
  • Q:サンプルはimgタグをpタグに入れた構成でしたが、人によってdivやpに入れないでそのままのコードがあります。本来どちらが良いのでしょう。いつも迷います。
  • 00:56
  • Q:今回のシングルページのサイトを作る時に、デザインカンプ的な物は作成しましたか?
  • 00:04
  • Q:navなどのulで、私はliの中に直接aタグを入れているのですが、先生はpタグで囲われているのは何か理由がございますか?
  • 01:21
  • Q:今回シングルページでしたが、複数ページを作る場合の共通項目(meta要素、タイトル、メニューやタイトルなど)はどういった書き方をされていますか? コードをページそれぞれにコピペすると修正があったときに大変なので、phpであればincludeで読み込んだりしているのですが、htmlで良いやり方があれば教えてください。
  • 01:43
  • Q:後方互換はどの程度まで意識していますか?
  • 02:06
  • Q:サンプルファイルのcssで、 ul.photo_image li の word-wrap:break-word; って説明ありましたでしょうか?

スライド資料

プレミアム生放送

関連授業

人気の生放送授業

もっと見る

新着の生放送授業

もっと見る

アクティビティ