chevron_left PCサイトコーディング

PCサイトコーディング

PREMIUM
第3回

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

2016年7月5日 60min

会員登録して、全てのスライドを見よう

1 / 67

授業の概要

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

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

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

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

こんな人にオススメ

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

授業で使用する教材

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

チャプター

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