chevron_left PCサイトコーディング入門

PCサイトコーディング入門

PREMIUM
第6回

PCサイトコーディング入門 -スライドするヒーローイメージ-

2016年5月15日 60min

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

1 / 22

授業の概要

「PCサイトコーディング入門」ではPCサイトの特性と振る舞いを学び、デザインカンプ通りにCSSコーディングしてシングルページのPC用UIを完成させるまでを学んでいきます。難易度はターミナルのWebデザイナールート、「A-1 WebデザインのためのHTML入門」「A-2 WebデザインのためのCSS入門」をご受講済みの方、または同程度のレベルの方に合わせてあります。

第6回「スライドするヒーローイメージ」では、1〜5回で成型してきたサイトにjQueryプラグインを用いてヒーローイメージをスライドさせる手法を学びます。ここでは、通常使われる、HTMLのimgタグに設置されたヒーローイメージをスライドさせるのではなく、cssを使って背景に読み込ませた画像にjQueryを当ててスライドさせます。

■ 事前準備 この授業はテキストエディタとブラウザ(GoogleChrome)を使用します。

またHTML/CSSの基本を理解している方を対象としています。自信の無い方は、下記授業をご受講ください。

WebデザインのためのHTML入門

WebデザインのためのCSS入門

「PCサイトコーディング入門」1〜5回もあわせてご覧ください。

こんな人にオススメ

バックグランドに読み込ませた画像のスライドさせる手法を学びたい方

授業で使用する教材

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

チャプター

play_arrow
本日のアジェンダ
01:20
play_arrow
授業に必要なもの
01:06
play_arrow
jQueryを使ったスライダー
00:11
play_arrow
よく見かけるjQueryスライダー
01:40
play_arrow
代表的なjQueryスライダー
01:36
play_arrow
jquery-bgswitcher
02:43
play_arrow
ダウンロードした素材を定位置に入れよう
05:46
play_arrow
index2.htmlへコードを書き足そう
09:32
play_arrow
PCサイトのUIを完成させる
01:05
play_arrow
footer部分のCSSを記述しよう
02:16
play_arrow
footerの中のsectionのCSSを記述しよう
00:55
play_arrow
footerの中のsectionのh4のCSSを記述しよう
01:22
play_arrow
footerの中のsectionのliのCSSを記述しよう
01:45
play_arrow
footerの中のsmallのCSSを記述しよう
04:14
play_arrow
背景画をセンターに置くcss (前回の質問)
04:42
play_arrow
今回のまとめ
02:04
play_arrow
jqueryも主流がかわるのでしょうか?
02:56
play_arrow
スライダーショーで表示させる画像は何枚くらいが良いでしょうか?
01:11
play_arrow
jqueryでも横方向のスライドができますか?
03:00
play_arrow
全6回授業の完成版はいただけますか?
01:21
play_arrow
emmetのCSSコードを使うと、ベンダープレフィックスが出ますが、現在も使われているのでしょうか?
02:58
play_arrow
Google AMPは流行ると思いますか?
01:06
play_arrow
一部でjQueryに変わる新技術がAngularJSと言われてますが先生はどのように考えていますか?
01:19
play_arrow
お知らせ