chevron_left PCサイトコーディング

PCサイトコーディング

PREMIUM
第5回

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

2016年7月27日 60min

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

1 / 63

授業の概要

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

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

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

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

こんな人にオススメ

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

授業で使用する教材

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

チャプター

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