「自分の仕事は自分でクリエイト」をコンセプトとしたWebデザイナーのための体験型オンラインスクール。自分の力で生きていくWebデザイナーを目指します。

【仮案件】セミナーページ ワイヤーフレームからのHTML・CSSコーディング(2019.06.29)

仮案件シングルページ ワイヤーフレームからのHTML・CSSコーディング

今回の勉強会は以下の4月の勉強会の続き。

Webサイト制作 初級編・根本的なデザイン(設計)のプロセス、HTML5マークアップの考え方

ワイヤーフレームをもとにHTMLマークアップ、CSS設計、コーディングの流れで行われました。
また、メンバーからいただいた質問や提出いただいたコーディングデータを公開添削しています。

その他、

ロゴはどの要素でマークアップする?
imgタグはそのまま配置しちゃだめ?
figureタグはどこで使う?

などなど、一流どころのWebサイトのマークアップを研究したり、美しく、簡潔で効率よいCSSの書き方のレクチャーなど盛りだくさんの2時間になりました。

【第一部】質問回答・公開添削

  • 00~ 質問:imgタグ 画像をどうマークアップするか?
    ロゴはどの要素でマークアップする?
    imgタグはそのまま配置しちゃだめ?
    figureタグはどこで使う?
  • 23:10~ 公開添削:セミナーページのコーディング
    HTML・CSSのエラー修正
    floatで要素が並ばない→リセットCSSの必要性
    html bodyにheightを指定するケースと指定してはいけないケース
  • 58:35~休憩時間の雑談
    DWの環境設定 コードを入力時のインデントの話

動画 60分

参加者の声

本日のZOOM勉強会ありがとうございました。
参加させていただいて、とても良かったと感じております。
2時間ですごく内容が濃い勉強会だったと感じております。

私の下手なhtmlとcssを添削していただき、質問にお答えくださった事、また、cssの要素にclassをにを複数設定してもよい事などなど、知らなかった事をたくさん教えていただき、これが生きた授業なんだなと感動、感動の2時間でした。

また先生のreset.cssをアップしていただける事でとってもお得感が。

今日の先生の授業を受けさせていただき、楽しかった、自分から復習しようと思えました。

今回疑問に思っていたことを丁寧にご説明いただき、ロゴのマークアップについても話が展開して、SEOにも関わる重要なことだったことに、驚きましたがとても参考になりました。
コツコツ少しずつでもやらないと!と自分を鼓舞しています(苦笑)

今日の勉強会の宿題もやってみたいと思って、うずうずしています。

ご質問・ご感想をお寄せください。

今回の動画はいかがだったでしょうか?ぜひ、あなたのご感想をお待ちしております!

【会員マイページ>サポートデスク】からどうぞ!

関連記事

「自分の仕事は自分でクリエイトする」

当サイトは、Webクリエイターズオンラインスクール メンバー専用サイトです。