chevron_left

デザインパターン基礎
PREMIUM
第2回

デザインパターン基礎 -CSSのみで実装できるデザインテクニック-

2016年8月8日 60min
デザインパターン基礎 -CSSのみで実装できるデザインテクニック- play_arrow おためし受講

スライド資料

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

1 / 30

授業の概要

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

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

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

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

第2回目の授業では、前回の授業での知識を踏まえ、CSSのみで実装することができるデザインテクニックを学んでいきましょう。例として幾つかアクションボタンを作成していきます。

jquery実装においてCSSの知識は必須となりますので、しっかりと学んでいきましょう。

 

■授業のアジェンダ（予定）

・CSSがどう動いているかの復習
・効果をつける時に使用することが多いCSSの紹介
・3種類のアクションボタンの作成

こんな人にオススメ

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

担当の先生／パーソナリティ

授業で使用する教材

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

チャプター

play_arrow
自己紹介
00:57
play_arrow
授業の流れ
01:57
play_arrow
CSSがどう動いているかの復習
00:15
play_arrow
CSSとHTMLの関係性を学ぼう
03:17
play_arrow
質問：display:block;とdisplay:inline;の 違いって分かりますか？
02:49
play_arrow
display:block;の特徴を学ぼう
07:07
play_arrow
display:inline;の特徴を学ぼう
10:00
play_arrow
paddingとmarginの違いを学ぼう
01:35
play_arrow
効果をつける時に使用することが多いCSSの紹介
00:30
play_arrow
効果をつける時に使用することが多いCSSの紹介
04:11
play_arrow
3種類のアクションボタンの作成
00:31
play_arrow
触れたら色が変わるボタンを作ろう
08:46
play_arrow
触れたら色がふわっと変わるボタンを作ろう
03:57
play_arrow
触れたら回転するボタンをつくろう
07:10
play_arrow
まとめ
01:54
play_arrow
Q,センター合わせにする際に、text-align;center;とmargin:auto 0;の違いはどうなのでしょう？
02:41
play_arrow
Q,先生は、リセットCSSは何を使っていますか？自分で書いて（作って）いますか？
01:30
play_arrow
お知らせ