おためし受講中

PCサイトコーディング入門 -メインコンテンツのUI-

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

学生代表

  • 徳田 葵

    徳田 葵

    スクー放送部

【ノート機能】
授業内容や覚えておきたいポイントなど、ノートに自由に残せます

再生位置挿入 資料挿入
筆記アシスト
ONOFF
    【チャプター機能】
    授業内容をピンポイントでおさえながら
    ご自身のペースで進めることができます
    【前半】授業
    自己紹介
    00:24  (00:14 ~ )
    本日のアジェンダ
    00:43  (00:38 ~ )
    授業に必要なもの
    01:49  (01:21 ~ )
    メインコンテンツを固定幅に
    00:05  (03:10 ~ )
    上に戻るボタンを完成させる
    09:00  (03:15 ~ )
    Page Rulerで測ってみよう
    01:08  (12:15 ~ )
    メインコンテンツが固定幅でどんなブラウザ幅でもセンターに来るようなcssを書こう
    03:19  (13:23 ~ )
    mainの子要素を指定していこう
    02:33  (16:42 ~ )
    articleの子要素を指定しよう
    03:06  (19:15 ~ )
    横並びのコンテンツ
    00:46  (22:21 ~ )
    sectionを横に3つ並べよう
    07:15  (23:07 ~ )
    section傘下の子要素にスタイルを当てよう
    03:44  (30:22 ~ )
    フォーム部分のコーディング
    01:07  (34:06 ~ )
    フォーム部分を目立たせるために背景色を指定
    02:12  (35:13 ~ )
    フォームのイントロのスタイルを指定する
    02:07  (37:25 ~ )
    formの中の表組みを指定する
    06:48  (39:32 ~ )
    【後半】質疑応答
    Q:h3がfigureの下になります
    01:41  (46:29 ~ )
    Q:業務で色の指定をする際はどの形式をよく使いますか?#fff/rgbなどいろいろあるかと思います。
    01:03  (48:10 ~ )
    Q:先ほどのsectionに擬似クラスlast-childは使えないでしょうか?
    01:48  (49:13 ~ )
    続き:formの中の表組みを指定する
    01:00  (51:01 ~ )
    form内の各入力エリアのスタイルを指定
    04:00  (52:01 ~ )
    Q:スマホサイトのCSSと、PCサイトのCSSで、最も大きな違いは何でしょうか。
    01:13  (56:01 ~ )
    Q:単位px,pt,remなどは揃えた方がよいですか?
    01:23  (57:14 ~ )
    Q:どういった要素にどの単位を使うのがいいのか、先生ご自身のルールがあったら教えてください。
    01:33  (58:37 ~ )
    お知らせ
      (1:00:10 ~ )