chevron_left

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

PREMIUM
第3回

CSS入門 -アンカータグデザインの全て-

2015年8月31日 60min

スライド資料

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

1 / 36

授業の概要

WebサイトはHTML(文章構造)、CSS(視覚構造)、JavaScript(インタラクション)の組み合わせでできています。その中でも、Webサイトのデザインを担当するCSSを学んで行きましょう。

この授業では、W3C(Web技術の標準規格化非営利団体)で勧告となった最新情報に基づいてCSS2とCSS3を書く方法をハンズオンで1から学んでいきます。1回づつ完結していますが、シリーズを通して受講されるとCSSに対する理解が深まります。

今回はハイパーリンクを作り出すaというhtmlタグに指定するCSS手法をマスターできる授業です。aタグの振る舞いをしっかり知ってCSSデザインを自分の物にしましょう。

■ 事前準備

テキストエディタをご用意下さい。既にお使いのものが無ければ https://atom.io/がオススメです。

参考ファイル: 「webデザイナーのためのcss入門」のコード一式のURL
http://behomazn.com/schoo/css_Introduction/

こんな人にオススメ

aタグのcss指定方を一から学びたい方・htmlの要ハイパーリンクのデザインを制覇したい方・マウスオーバーインタラクションを習得したい方

授業で使用する教材

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

チャプター

play_arrow
自己紹介&アジェンダ
01:35
play_arrow
htmlタグの特別な存在a
02:32
play_arrow
htmlタグの特別な存在a: リンクについて
01:25
play_arrow
aの役割を最大限表現する
01:32
play_arrow
aの役割を最大限表現する: 【問い掛け】どうやってschoo WEB-campusの授業リストをクリックできると見破りましたか?
03:43
play_arrow
aの役割を最大限表現する: 【実践】schoo WEB-campusの授業リストを真似して作ってみよう
08:54
play_arrow
aの役割を最大限表現する: スマホでマウスオーバーしなくても「リンク先に飛べる感」を出してみる
02:14
play_arrow
aの役割を最大限表現する: 【実践】schoo WEB-campusの「受講する」ボタンを書いてみよう
12:34
play_arrow
aの役割を最大限表現する: ベンダーグラフィックスについて
02:22
play_arrow
aタグマジック
00:13
play_arrow
aタグマジック: 【実践】マウスオーバーした際のインタラクションを指定してみよう
05:37
play_arrow
aタグマジック: 【実践】トランジションを書いてみよう
04:27
play_arrow
aタグマジック: 3Dトランスフォームについて
00:56
play_arrow
Q:リセットCSSは、しない感じですか?
02:31
play_arrow
Q:同じCSS内でremやpxが混在するとよくないと聞いたことがあるのですが、CSSはremだったらrem、pxだったらpxで統一したほうがいいですか?
03:09
play_arrow
Q:colorのimportatは、なんですか?