おためし受講中

PCサイトコーディング -デザインを元にマークアップしよう-

このコースでは、HTMLとCSSの基本的なスキルを持った方を対象に、企業のコーポレートサイトのような簡単なPCサイトのコーディングについて全6限で学びます。

「様々なテクニックを使いこなして、かっこいいWebサイトを作れるようになりたい」という気持ちは、Web制作を行う誰もが思うことです。しかしながら、基礎があやふやだと応用がききません。まずは基本的なレイアウトをきちっと実装できるように、基礎力をしっかり身につけることが大切です。

第1回はサンプルデザインをもとにHTMLを書いていきます。

授業を通して、簡単なレイアウトのサンプルデザインを使って、実際にWebページとして完成させましょう。

この授業の先生

学生代表

  • 田原 彩香

    田原 彩香

    スクー放送部

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

再生位置挿入 資料挿入
筆記アシスト
ONOFF
    【チャプター機能】
    授業内容をピンポイントでおさえながら
    ご自身のペースで進めることができます
    【前半】授業
    自己紹介
    01:28  (00:13 ~ )
    今日のゴール
    01:30  (01:41 ~ )
    今日の授業内容
    00:50  (03:11 ~ )
    サンプルデータの説明
    01:57  (04:01 ~ )
    Marcketchの紹介
    05:03  (05:58 ~ )
    デザインを見てどうマークアップするか考えよう
    02:07  (11:01 ~ )
    基本のHTML
    02:11  (13:08 ~ )
    HTMLを書こう
    00:15  (15:19 ~ )
    HTMLを書こう - header
    01:33  (15:34 ~ )
    HTMLを書こう - main
    00:45  (17:07 ~ )
    問題#01
    05:07  (17:52 ~ )
    答え#01
    00:24  (22:59 ~ )
    h1について
    00:30  (23:23 ~ )
    キャッチコピー
    00:37  (23:53 ~ )
    Our Mission
    02:10  (24:30 ~ )
    画像のalt属性について
    03:28  (26:40 ~ )
    Topics
    03:54  (30:08 ~ )
    「もっと見る」
    00:30  (34:02 ~ )
    問題#02
    03:11  (34:32 ~ )
    答え#02
    00:18  (37:43 ~ )
    CSSだけで表現できること:例
    00:47  (38:01 ~ )
    「ページトップへ」
    01:42  (38:48 ~ )
    HTMLを書こう - footer
    00:37  (40:30 ~ )
    問題#03
    02:48  (41:07 ~ )
    答え#03
    01:38  (43:55 ~ )
    まとめ
    03:22  (45:33 ~ )
    【後半】質疑応答
    Q:最近、モダンなwebサイトだと画面一杯に大きな背景画像が現れ、グローバルnavもその画像の上にかかってるサイトをよく見かけるのですが、そういう場合はmainの中にheaderが入っているのでしょうか?
    02:22  (49:28 ~ )
    Q:日付の

    2016.06.20

    でしなくてもいいですか?
    00:58  (51:50 ~ )
    Q:ずっと企業ロゴをh1にしてました。企業ロゴはh2くらいにしておいたらいいですか?
    01:03  (52:48 ~ )
    Q:©は& c o p y ;で、今回はしない感じですか?
    01:30  (53:51 ~ )
    Q:先生はarticlやsectionは使いませんか?
    01:37  (55:21 ~ )
    Q:footerのナビゲーションがグローバルナビゲーションのメニュー、プラス下層ページのサイトマップになってる場合は、navにしてもよいのでしょうか?
    01:27  (56:58 ~ )
    お知らせ
      (58:25 ~ )