chevron_left

デザインパターン基礎

PREMIUM
第8回

デザインパターン基礎 -情報量が多い時に役立つ切り替えタブの実装-

2016年9月26日 60min

スライド資料

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

1 / 12

授業の概要

この授業では、Web制作におけるPCサイト及びスマートフォン(スマホ)サイトのデザインパターンとコーディングテクニックを学びます。

CSSのみで実装できるものからjQueryを用いて表現するものまで、Webサイトを作る上で最低限必要になってくる表現方法を抜粋して紹介していきます。

「HTMLとCSSの知識はあるけれど、レスポンシブ実装は勘でやっている」
「jQueryの実装の仕組みがいまいちよくわからない」

今まで“なんとなく”で実装していたコーディングを“確実”なものにするために、根拠のある知識をつけましょう。

最後の授業では、切り替えタブの実装を学習していきます。情報量の多いサイトではよく用いられる手法です。この実装を学習するとよりモバイルアプリケーションライクなWebサイトを作成することができます。

こんな人にオススメ

実践的に使えるデザインパターンを学びたいWebデザイナー

授業で使用する教材

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

チャプター

play_arrow
【前半】授業
00:22
play_arrow
本日の授業の流れ
01:48
play_arrow
切り替えタブの実装について
02:31
play_arrow
切り替えタブとは?
03:13
play_arrow
htmlとcssの解説
00:22
play_arrow
サンプルファイルのhtmlを見てみよう
03:07
play_arrow
Q.li要素改行しないのはなぜでしょうか?
05:59
play_arrow
li要素周辺の構造を学ぼう
08:49
play_arrow
jQueryの解説
01:56
play_arrow
jQueryの動き
02:28
play_arrow
jQueryとhtmlの関連した動き
01:06
play_arrow
1番目からじゃないのはなんででしょうか?
02:29
play_arrow
jQueryとhtmlの関連した動き(続き)
08:36
play_arrow
まとめ
01:43
play_arrow
Q.もし、タブを3つある場合は、JQueryの部分はいじる必要はないんじゃないでしょうか??<ul class=
01:19
play_arrow
Q.今回jqueryのバージョンが1.8.3ですが、選定理由というのはあるのでしょうか?
00:45
play_arrow
Q.普通のアトムとかのテキストエディタでは、なかなかJQueryの関係性は分かりにくいのですが、なにかお勧めのエディタはありませんか??
02:22
play_arrow
Q.もし、タブを3つある場合は、JQueryの部分はいじる必要はないんじゃないでしょうか??<ul class=
01:52
play_arrow
Q.太田さんの質問の続きなのですが、width:100%;を三つにわけるときっちり分けられないケースがあると思うのですが、その場合は「33%、33%、34%」とプログラムしても問題ないのでしょうか?
01:10
play_arrow
Q.ajaxみたいに、ボタンを押されたときにサーバから記事を動的に取ってくるというのはどうなんでしょうか?
00:56
play_arrow
Q.お知らせやニュースを縦項目でレイアウトしたい場合は記述はガラッと変わるのでしょうか?
01:21
play_arrow
Q.先生の、サブライムで、おすすめなプラグインはありますか?
01:43
play_arrow
Q.最終回なのでお伺いしたのですが、先生が行ってたJavaScript、jqueryの勉強法を教えて頂ければと思います。
02:03
play_arrow
受講者の皆さんへのメッセージ
01:15
play_arrow
お知らせ