当授業は録画授業のみの公開となります。※5月18日(火)までの30日間無料で受講いただけますのでご活用くださいませ。(2016/04/18 11:00)

PCサイトコーディング入門

  • このエントリーをはてなブックマークに追加
PCサイトコーディング入門 -スマホサイトUIとの違い-
第1回:2016年4月10日公開 01:00:00

PCサイトコーディング入門 -スマホサイトUIとの違い-

受講する

「PCサイトコーディング入門」ではPCサイトの特性と振る舞いを学び、デザインカンプ通りにCSSコーディングしてシングルページのPC用UIを完成させるまでを学びます。難易度はターミナルのWebデザイナールート、「A-1 WebデザインのためのHTML入門」(https://schoo.jp/course/276)「A-2 WebデザインのためのCSS入門」(https://schoo.jp/course/285)をご受講済みの方、または同程度のレベルの方に合わせてあります。

■ 事前準備 この授業はテキストエディタとブラウザ(GoogleChrome)を使用します。

またHTML/CSSの基本を理解している方を対象としています。自信の無い方は、下記授業をご受講ください。

WebデザインのためのHTML入門

WebデザインのためのCSS入門

授業一覧
PCサイトコーディング入門 -スマホサイトUIとの違い-
2016年4月10日公開
01:00:00

「PCサイトコーディング入門」ではPCサイトの特性と振る舞いを学び、デザインカンプ通りにCSSコーディングしてシングルページのPC用UIを完成させるまでを学んでいきます。難易度はターミナルのWebデザイナールート、「A-1 WebデザインのためのHTML入門」「A-2 WebデザインのためのCSS入門」をご受講済みの方、または同程度のレベルの方に合わせてあります。

第1回「スマホサイトUIとの違い」では、「A-3 スマホサイトコーディング入門」未受講の方にも理解が深まるよう、スマホやタブレットなどのタッチデバイスに最適化したサイトとPCサイトのコーディングの違いをしっかり学びましょう。

■ 事前準備 この授業はテキストエディタとブラウザ(GoogleChrome)を使用します。

またHTML/CSSの基本を理解している方を対象としています。自信の無い方は、下記授業をご受講ください。

WebデザインのためのHTML入門

WebデザインのためのCSS入門

PCサイトコーディング入門 -第一階層のタグの成型-
2016年4月17日公開
01:00:00

「PCサイトコーディング入門」ではPCサイトの特性と振る舞いを学び、デザインカンプ通りにCSSコーディングしてシングルページのPC用UIを完成させるまでを学んでいきます。難易度はターミナルのWebデザイナールート、「A-1 WebデザインのためのHTML入門」「A-2 WebデザインのためのCSS入門」をご受講済みの方、または同程度のレベルの方に合わせてあります。

第2回「第一階層のタグの成型」では、PCサイトのUIをcssで形作る上で必要なツールや仕掛けを知り、第一階層のhtmlタグをしっかり形作ってサイトの外郭を作る手法を学びましょう。

■ 事前準備 この授業はテキストエディタとブラウザ(GoogleChrome)を使用します。

またHTML/CSSの基本を理解している方を対象としています。自信の無い方は、下記授業をご受講ください。

WebデザインのためのHTML入門

WebデザインのためのCSS入門

「PCサイトコーディング入門」第1回もあわせてご覧ください。

PCサイトコーディング入門 -ファーストビューのUI-
2016年4月24日公開
01:00:00

「PCサイトコーディング入門」ではPCサイトの特性と振る舞いを学び、デザインカンプ通りにCSSコーディングしてシングルページのPC用UIを完成させるまでを学んでいきます。難易度はターミナルのWebデザイナールート、「A-1 WebデザインのためのHTML入門」「A-2 WebデザインのためのCSS入門」をご受講済みの方、または同程度のレベルの方に合わせてあります。

第3回「ファーストビューのUI」では、サイトに着地し、スクロールする前に見えている画面のUIをcssでコーディングする手法を学びます。

■ 事前準備 この授業はテキストエディタとブラウザ(GoogleChrome)を使用します。

またHTML/CSSの基本を理解している方を対象としています。自信の無い方は、下記授業をご受講ください。

WebデザインのためのHTML入門

WebデザインのためのCSS入門

「PCサイトコーディング入門」第1〜2回もあわせてご覧ください。

PCサイトコーディング入門 -メインコンテンツのUI-
2016年5月1日公開
01:00:00

「PCサイトコーディング入門」ではPCサイトの特性と振る舞いを学び、デザインカンプ通りにCSSコーディングしてシングルページのPC用UIを完成させるまでを学んでいきます。難易度はターミナルのWebデザイナールート、「A-1 WebデザインのためのHTML入門」「A-2 WebデザインのためのCSS入門」をご受講済みの方、または同程度のレベルの方に合わせてあります。

 

第4回「メインコンテンツのUI」では、サイトのメインコンテンツ部分のUIのcssコーディング手法を学んでいきます。

■ 事前準備 この授業はテキストエディタとブラウザ(GoogleChrome)を使用します。

またHTML/CSSの基本を理解している方を対象としています。自信の無い方は、下記授業をご受講ください。

WebデザインのためのHTML入門

WebデザインのためのCSS入門

「PCサイトコーディング入門」1〜3回もあわせてご覧ください。

  • 自己紹介
  • 00:24
  • 本日のアジェンダ
  • 00:43
  • 授業に必要なもの
  • 01:49
  • メインコンテンツを固定幅に
  • 00:05
  • 上に戻るボタンを完成させる
  • 09:00
  • Page Rulerで測ってみよう
  • 01:08
  • メインコンテンツが固定幅でどんなブラウザ幅でもセンターに来るようなcssを書こう
  • 03:19
  • mainの子要素を指定していこう
  • 02:33
  • articleの子要素を指定しよう
  • 03:06
  • 横並びのコンテンツ
  • 00:46
  • sectionを横に3つ並べよう
  • 07:15
  • section傘下の子要素にスタイルを当てよう
  • 03:44
  • フォーム部分のコーディング
  • 01:07
  • フォーム部分を目立たせるために背景色を指定
  • 02:12
  • フォームのイントロのスタイルを指定する
  • 02:07
  • formの中の表組みを指定する
  • 06:48
  • Q:h3がfigureの下になります
  • 01:41
  • Q:業務で色の指定をする際はどの形式をよく使いますか?#fff/rgbなどいろいろあるかと思います。
  • 01:03
  • Q:先ほどのsectionに擬似クラスlast-childは使えないでしょうか?
  • 01:48
  • 続き:formの中の表組みを指定する
  • 01:00
  • form内の各入力エリアのスタイルを指定
  • 04:00
  • Q:スマホサイトのCSSと、PCサイトのCSSで、最も大きな違いは何でしょうか。
  • 01:13
  • Q:単位px,pt,remなどは揃えた方がよいですか?
  • 01:23
  • Q:どういった要素にどの単位を使うのがいいのか、先生ご自身のルールがあったら教えてください。
  • 01:33
  • お知らせ
PCサイトコーディング入門 -googleマップをサイトの全幅にする-
2016年5月8日公開
01:00:00

「PCサイトコーディング入門」ではPCサイトの特性と振る舞いを学び、デザインカンプ通りにCSSコーディングしてシングルページのPC用UIを完成させるまでを学んでいきます。難易度はターミナルのWebデザイナールート、「A-1 WebデザインのためのHTML入門」「A-2 WebデザインのためのCSS入門」をご受講済みの方、または同程度のレベルの方に合わせてあります。

第5回「googleマップの全幅コーディング」では、googleマップで吐き出させれるiframeのhtmlタグをサイト全幅に設置し、リキッドデザインにするcssコーディング手法を学びます。

■ 事前準備 この授業はテキストエディタとブラウザ(GoogleChrome)を使用します。

またHTML/CSSの基本を理解している方を対象としています。自信の無い方は、下記授業をご受講ください。

WebデザインのためのHTML入門

WebデザインのためのCSS入門

「PCサイトコーディング入門」1〜4回もあわせてご覧ください。

PCサイトコーディング入門 -スライドするヒーローイメージ-
2016年5月15日公開
01:00:00

「PCサイトコーディング入門」ではPCサイトの特性と振る舞いを学び、デザインカンプ通りにCSSコーディングしてシングルページのPC用UIを完成させるまでを学んでいきます。難易度はターミナルのWebデザイナールート、「A-1 WebデザインのためのHTML入門」「A-2 WebデザインのためのCSS入門」をご受講済みの方、または同程度のレベルの方に合わせてあります。

第6回「スライドするヒーローイメージ」では、1〜5回で成型してきたサイトにjQueryプラグインを用いてヒーローイメージをスライドさせる手法を学びます。ここでは、通常使われる、HTMLのimgタグに設置されたヒーローイメージをスライドさせるのではなく、cssを使って背景に読み込ませた画像にjQueryを当ててスライドさせます。

■ 事前準備 この授業はテキストエディタとブラウザ(GoogleChrome)を使用します。

またHTML/CSSの基本を理解している方を対象としています。自信の無い方は、下記授業をご受講ください。

WebデザインのためのHTML入門

WebデザインのためのCSS入門

「PCサイトコーディング入門」1〜5回もあわせてご覧ください。

こんな人にオススメ
WEBデザイナー(初心者)

PCサイトのコーディングを習得したい方

タグ
担当の先生
受講生代表
  • 新井 利佳

    新井 利佳

    スクー放送部

  • 徳田 葵

    徳田 葵

    スクー放送部

この授業を受けたい(1760人)
その他 1680人

受けたい授業ランキング

もっと見る

新着の生放送授業

もっと見る

関連授業

生放送授業への参加は無料です
Schooの会員登録および生放送授業への参加は無料です。生放送授業では先生に質問したり他のユーザーと一緒に楽しく学ぶことができます。
×