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

10/24(Wed)

今日の生放送

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

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

第1回:2016年4月10日公開

60min

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

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

コース概要

「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入門

こんな人にオススメ

WEBデザイナー(初心者)
PCサイトのコーディングを習得したい方

担当の先生

パーソナリティ

  • 新井 利佳

    新井 利佳

    スクー放送部

  • 徳田 葵

    徳田 葵

    スクー放送部

参加したい受講生 : 2093

カテゴリー

タグ

サンプルファイル

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

授業リスト

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

2016年4月10日公開

60min.

「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日公開

60min.

「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日公開

60min.

「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日公開

60min.

「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日公開

60min.

「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日公開

60min.

「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回もあわせてご覧ください。

スライド資料

プレミアム生放送

関連授業

人気の生放送授業

もっと見る

新着の生放送授業

もっと見る

アクティビティ