chevron_left PCサイトコーディング

PCサイトコーディング

PREMIUM
第2回

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

2016年6月28日 60min

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

1 / 60

授業の概要

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

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

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

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

こんな人にオススメ

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

授業で使用する教材

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

チャプター

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