おためし受講中

PCサイトコーディング -下層ページのHTMLを書こう-

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

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

第4回は下層ページのHTMLの書き方を学習します。適切なHTMLタグの使い方を覚えましょう。 

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

この授業の先生

学生代表

  • 田原 彩香

    田原 彩香

    スクー放送部

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

再生位置挿入 資料挿入
筆記アシスト
ONOFF
    【チャプター機能】
    授業内容をピンポイントでおさえながら
    ご自身のペースで進めることができます
    【前半】授業
    自己紹介
    01:23  (00:14 ~ )
    今日の授業について
    00:21  (01:37 ~ )
    授業のアジェンダ
    01:35  (01:58 ~ )
    サンプルデータの説明
    01:12  (03:33 ~ )
    ヘッダーとフッターのソースを流用する
    03:37  (04:45 ~ )
    2カラムレイアウトのHTML
    00:35  (08:22 ~ )
    問題#01 A→B→C→D→Eの順番でHTMLを書いてもま以外ではありませんが、情報の重要度を考慮したいです。どういう順番で書くのが良いでしょう。
    02:21  (08:57 ~ )
    答え#01
    01:01  (11:18 ~ )
    ヒトの視線の移動
    00:36  (12:19 ~ )
    配置はCSSで指定
    03:03  (12:55 ~ )
    article, sectionの使い方
    00:43  (15:58 ~ )
    articleとsection
    02:07  (16:41 ~ )
    aside
    02:04  (18:48 ~ )
    セマンティックWeb
    06:33  (20:52 ~ )
    要素の親子関係について
    02:36  (27:25 ~ )
    問題#02 ul,liの他に、親子関係(セットである必要)のあるHTMLタグやCSS使用例を挙げてみましょう。
    05:50  (30:01 ~ )
    答え#02
    00:32  (35:51 ~ )
    dl - 定義リスト
    00:58  (36:23 ~ )
    ol - 順序リスト
    00:44  (37:21 ~ )
    position
    01:45  (38:05 ~ )
    サイドバーのナビゲーション
    03:54  (39:50 ~ )
    おまけ話
    06:32  (43:44 ~ )
    まとめ
    02:38  (50:16 ~ )
    【後半】質疑応答
    Q:mainタグは使用しないのでしょうか?
    00:52  (53:22 ~ )
    Q:デザイン上hタグがある章とない章がある場合はsection、div、sectionという感じになっても問題ないのですね。間だけdivはおかしいかと思ったのですがよいのですね。
    02:11  (54:14 ~ )
    Q:例えばFlexboxを使う時に一番大きな枠をdivとして使い、その入れ子としてarticleやsectionを使うとSEO的には問題ないでしょうか?
    01:42  (56:25 ~ )
    Q:clearfixを使う際、確かarticleなどHTML5で新しく出てきたタグには適用されなかったと思いますが、その際はdivを使う事になるでしょうか?
    01:11  (58:07 ~ )
    Q:sectionとarticle、figureとpの中のimgどちらかいつも迷います。 自己完結しているかしていないかの違いらしいですが、 どのように区別していますか? 実務でもあまりこだわらなくてもよいのでしょうか?
    01:06  (59:18 ~ )
    Q:html5なのにタグを有効利用していないサイトを更新しています。どのように改善提案すべきでしょうか
    02:25  (1:00:24 ~ )
    お知らせ
      (1:02:49 ~ )