12/16(Sun)

今日の生放送

PCサイトコーディング

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

第1回:2016年6月22日公開

60min

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

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

コース概要

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

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

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

こんな人にオススメ

WEBデザイナー(中級)
HTML、CSSの基本を学んだので実際にWebサイトを制作したいと考えているWebデザイナー

担当の先生

パーソナリティ

  • 田原 彩香

    田原 彩香

    スクー放送部

  • 江川 みどり

    江川 みどり

    スクー放送部

参加したい受講生 : 1991

カテゴリー

タグ

サンプルファイル

授業で使用するファイル

※授業中に使用されている画像データは著作権の関係により本ファイルに入っておりません

※授業以外での利用は禁止します。

今なら初月無料ですべての授業が見放題!
今すぐ無料でおためし

授業リスト

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

2016年6月22日公開

60min.

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

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

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

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

  • 自己紹介
  • 01:28
  • 今日のゴール
  • 01:30
  • 今日の授業内容
  • 00:50
  • サンプルデータの説明
  • 01:57
  • Marcketchの紹介
  • 05:03
  • デザインを見てどうマークアップするか考えよう
  • 02:07
  • 基本のHTML
  • 02:11
  • HTMLを書こう
  • 00:15
  • HTMLを書こう - header
  • 01:33
  • HTMLを書こう - main
  • 00:45
  • 問題#01
  • 05:07
  • 答え#01
  • 00:24
  • h1について
  • 00:30
  • キャッチコピー
  • 00:37
  • Our Mission
  • 02:10
  • 画像のalt属性について
  • 03:28
  • Topics
  • 03:54
  • 「もっと見る」
  • 00:30
  • 問題#02
  • 03:11
  • 答え#02
  • 00:18
  • CSSだけで表現できること:例
  • 00:47
  • 「ページトップへ」
  • 01:42
  • HTMLを書こう - footer
  • 00:37
  • 問題#03
  • 02:48
  • 答え#03
  • 01:38
  • まとめ
  • 03:22
  • Q:最近、モダンなwebサイトだと画面一杯に大きな背景画像が現れ、グローバルnavもその画像の上にかかってるサイトをよく見かけるのですが、そういう場合はmainの中にheaderが入っているのでしょうか?
  • 02:22
  • Q:日付の<p>2016.06.20</p>は<time></time>でしなくてもいいですか?
  • 00:58
  • Q:ずっと企業ロゴをh1にしてました。企業ロゴはh2くらいにしておいたらいいですか?
  • 01:03
  • Q:©は& c o p y ;で、今回はしない感じですか?
  • 01:30
  • Q:先生はarticlやsectionは使いませんか?
  • 01:37
  • Q:footerのナビゲーションがグローバルナビゲーションのメニュー、プラス下層ページのサイトマップになってる場合は、navにしてもよいのでしょうか?
  • 01:27
  • お知らせ

スライド資料

PCサイトコーディング -CSSで大まかなレイアウトを整えよう-

2016年6月28日公開

60min.

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

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

第2回はCSSを記述して、レイアウトを整えていきます。 

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

  • 自己紹介
  • 01:14
  • 今日の授業のゴール
  • 00:43
  • 今日の授業内容
  • 01:16
  • サンプルデータの説明
  • 01:03
  • HTMLとCSS
  • 01:28
  • reset.css
  • 01:37
  • CSSファイルの作成とHTMLのリンク
  • 02:44
  • レイアウトを制御する
  • 00:05
  • コンテンツをブラウザ画面の中央に表示する
  • 01:39
  • headerのレイアウト
  • 00:30
  • ナビゲーションを横に並べる
  • 00:31
  • 問題#01 CSSの記述が間違っているわけではなさそうなのに、レイアウトがずれる。具体的にどうずれているのか確認する簡単で手軽な方法があります。考えてみてください!
  • 02:43
  • 答え#01
  • 02:51
  • 画像の表示を制御する
  • 00:06
  • mainのレイアウト
  • 00:17
  • 背景に画像を表示する
  • 01:23
  • テキストの画像回り込み
  • 00:41
  • 画像の表示サイズを指定する
  • 01:33
  • CSSで画像をトリミングする
  • 00:25
  • CSSで表示サイズを指定
  • 01:37
  • object-fitで指定できる値
  • 02:58
  • クリックしやすいリストやボタン
  • 00:06
  • 問題#02 ユーザーがクリックしやすいリストにするために、CSSをどう書くとよいでしょうか。
  • 02:39
  • 答え#02
  • 01:13
  • 記事の見出しをクリックしやすくする
  • 00:49
  • Marketchで要素のサイズ確認
  • 03:24
  • CSSでボタンを作る
  • 01:12
  • 問題#03 「ページトップへ」のボタンに使われている上向き矢印、どのように実装するのが良いでしょうか
  • 04:34
  • 答え#03
  • 06:16
  • フッター
  • 00:05
  • footerのレイアウト
  • 02:18
  • まとめ
  • 01:44
  • Q:画像をCSSで縮小するメリットってなんですか?
  • 01:40
  • Q:CSSを書く時に何か工夫している事とかありますでしょうか?書き方の順番とかどうしたら見やすくなるかいつも迷います。
  • 02:14
  • Q:CSSのセレクタ(margin・width等)ですが、書く順番は決まっているのでしょうか?他のソースを見るとセレクタの順番がバラバラの場合もありますが、先生は書く順番に拘りや決まりがありますか?
  • 01:29
  • Q:WEBサイトは1からコーディングするのが一般的だと思いますが、CSSフレームワークなどを使った方がいいですか?作業が楽みたいですが。
  • 01:46
  • Q:ul li のwidth は、%にして、小数点以下3桁くらいを切り捨ててではいけませんか。
  • 01:39
  • お知らせ

スライド資料

PCサイトコーディング -CSSを調整してトップページを仕上げる-

2016年7月5日公開

60min.

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

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

第3回はCSSを微調整してトップページを完成させます。 

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

  • 自己紹介
  • 00:51
  • 今日の授業のゴール
  • 00:43
  • 今日の授業内容
  • 01:18
  • サンプルデータの説明
  • 00:53
  • 横並びのナビゲーション
  • 00:27
  • float: left;
  • 03:26
  • ナビゲーションの高さの指定
  • 00:28
  • 問題#01 ulの高さが70pxで、liは67pxになっています。なぜ3px少ないのでしょうか。
  • 02:53
  • 答え#01
  • 02:57
  • footerナビがなんかおかしい、、、
  • 02:47
  • CSSだけでhover時の色や見た目を変える
  • 00:13
  • 下線
  • 00:28
  • 透過
  • 00:22
  • 色を変える
  • 00:35
  • おまけ知識
  • 02:20
  • 2行以上のテキストを縦方向にセンタリングさせる
  • 00:09
  • テキストが1行なら、、、
  • 00:42
  • テキストが1行以上になると、、、
  • 00:43
  • そこで、CSSをこう書く!
  • 00:50
  • 算数のお時間
  • 02:02
  • AtomでCSSを見てみた
  • 00:42
  • 問題#02 h1には背景写真を表示させるのに、背景色も指定しています。なぜでしょう?
  • 04:22
  • 答え#02
  • 01:09
  • 画像に回り込ませたテキストの余白を制御する
  • 02:07
  • リスト - 指定業だけ、他の行と設定を変える
  • 00:09
  • Topicsのレイアウト
  • 01:01
  • 問題#03 余白をつけるためにliの右側にmarginをつけたらレイアウトが崩れました。なぜでしょう?
  • 04:49
  • 答え#03
  • 02:11
  • 今回作ったものの確認
  • 01:59
  • おまけ知識
  • 01:42
  • まとめ
  • 01:34
  • Q:画像についてですが、スマホで撮ったのをそのままimgタグで挿入したらドカンと大きくなります。どうすればよいでしょう
  • 01:02
  • Q:昔は、HTML・CSS・JavaScriptを使ってホームページ作成を主流でしたが、今は、CMSが主流。なぜCSSを使うメリットはありますか?
  • 01:55
  • Q:HTML5、CSS3に対応していないブラウザへの対応はどのようにされていますか?
  • 00:57
  • Q:ブラウザは基本的には最新版でチェックしてますか?
  • 01:38
  • Q:資料30ページのおまけ知識ですが、自然なhoverに見せるには、元の色より薄目にするのがよいのでしょうか?
  • 01:26
  • Q:画像を、均等に、3個横並びにする時に、width:やmarginを%で指定するよりも、先ほどの、nth-childでするのが一般的ですか?
  • 02:06
  • Q:1限目の授業でサンプルファイル、Marketchフォルダの中に、3BDFCなんちゃら〜フォルダがあります。これは画像を表すフォルダですか?
  • 00:50
  • Q:先生は画像作成やら編集にどんなソフトをお使いですか
  • 02:17
  • お知らせ

スライド資料

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

2016年7月20日公開

60min.

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

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

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

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

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

スライド資料

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

2016年7月27日公開

60min.

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

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

第5回は下層ページのCSSの書き方を学習します。レイアウトによってどんなCSSを使えば良いかを覚えましょう。

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

  • 自己紹介
  • 01:19
  • 授業のアジェンダ
  • 00:47
  • サンプルデータの説明
  • 01:00
  • floatを使った2カラムレイアウト
  • 03:13
  • 回り込みのおさらい
  • 01:32
  • 問題#01 この方法以外にも回り込みを解除する方法があります。それはどんな方法でしょうか?
  • 03:20
  • 答え#01
  • 03:31
  • サイドバーのCSS
  • 00:58
  • 右端の矢印マーク
  • 01:38
  • 各リストの下線
  • 01:17
  • マウスオーバーで背景色が変わる
  • 03:30
  • メインコンテンツのCSS
  • 00:09
  • object-fitおさらい
  • 04:30
  • idやclassの命名ルール
  • 00:34
  • 問題#02 この命名の仕方だと問題がありそうです。それはどんな問題でしょうか。そしてどういう命名が適切でしょうか。
  • 02:28
  • 答え#02
  • 02:44
  • リストを細かく制御するCSS
  • 01:07
  • nth-child
  • 02:10
  • last-child
  • 00:28
  • 問題#03 以下のように一番下のリストだけ点線が表示されないようにするには、CSSをどう書けばよいでしょうか。
  • 05:22
  • 答え#03
  • 02:12
  • まとめ
  • 01:57
  • Q:スマホとかであるんですが、長くタップしても写真を保存出来ないのってCSSですか?それともJSですか?
  • 00:53
  • Q:last-childはIEだと9からなので、対象ブラウザ8以下だと、対象のliにクラス名付けて対応するしかないか・・。
  • 01:49
  • Q:案件にもよると思いますが、pcのブラウザチェックは、Internet Explorer・firefox・Google Chromeはどのバージョンから行うのが主流でしょうか?IE6~8はまだ案件で来る事もあるでしょうか?
  • 01:39
  • Q:今回の、教材のサイト幅は何で1000pxにしたのですか?
  • 01:13
  • Q:先生がATOMに入れてる、おすすめなPluginなどありますか?
  • 01:56
  • Q:先生はワードプレスの授業も予定ありますか?
  • 00:41
  • Q:ATOMのemmetしか入れてないですが、アップデートしたら動かなくなりました
  • 01:32
  • お知らせ

スライド資料

PCサイトコーディング -お問い合わせフォームの作成-

2016年8月3日公開

60min.

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

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

第6回はお問い合わせフォームを作成します。入力しやすいお問い合わせフォームのためのHTMLとCSSの書き方を覚えましょう。

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

  • 自己紹介
  • 00:56
  • 授業のアジェンダ
  • 01:06
  • サンプルデータの説明
  • 01:06
  • フォームのHTMLの書き方
  • 00:13
  • 入力欄の種類
  • 03:22
  • dlでマークアップする
  • 00:53
  • 問題#01 なぜ、tableタグではなく、dlタグを使うと良いのでしょうか?
  • 04:47
  • 答え#01
  • 03:36
  • input要素の書き方
  • 08:52
  • 使いやすいお問い合わせフォームにするためのCSS
  • 00:14
  • focus, error
  • 00:53
  • selectのカスタマイズ
  • 01:45
  • 必須項目
  • 01:22
  • ボタン
  • 00:15
  • 問題#02 最近では、リセットボタンを配置しないお問い合わせページが主流です。それはなぜでしょうか?
  • 02:50
  • 答え#02
  • 01:18
  • お問い合わせページにはおもてなし心をドボドボ注ぎ込もう!
  • 00:30
  • 広告とか入れない
  • 00:43
  • 不必要な項目を作らない
  • 01:19
  • 「フリガナ」でなく「ふりがな」にしよう
  • 01:37
  • 住所欄は半角/全角OKに
  • 02:14
  • 問題#03 クレジットカードや生命保険の加入申し込みページは信じられないほど項目がたくさんあります。この授業で学んだこととは真逆のことをやっているのに、なぜ利用が伸びているのでしょうか。
  • 03:08
  • 答え#03
  • 03:52
  • 状況に応じた使い方をしよう
  • 00:49
  • まとめ
  • 01:26
  • 全6回で学んだことまとめ
  • 02:55
  • Q:フォームのメソッドですが、昔はCGI で作成されるのが、主流だったと思いますが、今はphpで作成するのが主流でしょうか?Webデザイナーでもデータベースを自作出来た方がよいでしょうか?
  • 02:00
  • Q:セキュリティは何処まで対応するのでしょうか? 安心して、商用や個人サイトでも使えるレベルでしょうか。 組み込むセキュリティの種類を教えてください。
  • 02:04
  • Q:モバイルフレンドリーを考えた時に、フォームでの電話番号や郵便番号の入力欄は、どのようにするのが一般的ですか?また、Googleフォームなどをカスタマイズして利用してる方は多いですか?
  • 01:56
  • 先生からのメッセージ
  • 01:34
  • お知らせ

スライド資料

プレミアム生放送

関連授業

人気の生放送授業

もっと見る

新着の生放送授業

もっと見る

アクティビティ