おためし受講中

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

「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回もあわせてご覧ください。

学生代表

  • 徳田 葵

    徳田 葵

    スクー放送部

【ノート機能】
授業内容や覚えておきたいポイントなど、ノートに自由に残せます

再生位置挿入 資料挿入
筆記アシスト
ONOFF
    【チャプター機能】
    授業内容をピンポイントでおさえながら
    ご自身のペースで進めることができます
    【前半】授業
    本日のアジェンダ
    01:20  (00:43 ~ )
    授業に必要なもの
    01:06  (02:03 ~ )
    jQueryを使ったスライダー
    00:11  (03:09 ~ )
    よく見かけるjQueryスライダー
    01:40  (03:20 ~ )
    代表的なjQueryスライダー
    01:36  (05:00 ~ )
    jquery-bgswitcher
    02:43  (06:36 ~ )
    ダウンロードした素材を定位置に入れよう
    05:46  (09:19 ~ )
    index2.htmlへコードを書き足そう
    09:32  (15:05 ~ )
    PCサイトのUIを完成させる
    01:05  (24:37 ~ )
    footer部分のCSSを記述しよう
    02:16  (25:42 ~ )
    footerの中のsectionのCSSを記述しよう
    00:55  (27:58 ~ )
    footerの中のsectionのh4のCSSを記述しよう
    01:22  (28:53 ~ )
    footerの中のsectionのliのCSSを記述しよう
    01:45  (30:15 ~ )
    footerの中のsmallのCSSを記述しよう
    04:14  (32:00 ~ )
    背景画をセンターに置くcss (前回の質問)
    04:42  (36:14 ~ )
    今回のまとめ
    02:04  (40:56 ~ )
    【後半】質疑応答
    jqueryも主流がかわるのでしょうか?
    02:56  (43:16 ~ )
    スライダーショーで表示させる画像は何枚くらいが良いでしょうか?
    01:11  (46:12 ~ )
    jqueryでも横方向のスライドができますか?
    03:00  (47:23 ~ )
    全6回授業の完成版はいただけますか?
    01:21  (50:23 ~ )
    emmetのCSSコードを使うと、ベンダープレフィックスが出ますが、現在も使われているのでしょうか?
    02:58  (51:44 ~ )
    Google AMPは流行ると思いますか?
    01:06  (54:42 ~ )
    一部でjQueryに変わる新技術がAngularJSと言われてますが先生はどのように考えていますか?
    01:19  (55:48 ~ )
    お知らせ
      (57:07 ~ )