おためし受講中

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

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/

学生代表

  • 田原 彩香

    田原 彩香

    スクー放送部

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

再生位置挿入 資料挿入
筆記アシスト
ONOFF
    【チャプター機能】
    授業内容をピンポイントでおさえながら
    ご自身のペースで進めることができます
    【前半】授業
    自己紹介&アジェンダ
    01:35  (00:14 ~ )
    htmlタグの特別な存在a
    02:32  (01:49 ~ )
    htmlタグの特別な存在a: リンクについて
    01:25  (04:21 ~ )
    aの役割を最大限表現する
    01:32  (05:46 ~ )
    aの役割を最大限表現する: 【問い掛け】どうやってschoo WEB-campusの授業リストをクリックできると見破りましたか?
    03:43  (07:18 ~ )
    aの役割を最大限表現する: 【実践】schoo WEB-campusの授業リストを真似して作ってみよう
    08:54  (11:01 ~ )
    aの役割を最大限表現する: スマホでマウスオーバーしなくても「リンク先に飛べる感」を出してみる
    02:14  (19:55 ~ )
    aの役割を最大限表現する: 【実践】schoo WEB-campusの「受講する」ボタンを書いてみよう
    12:34  (22:09 ~ )
    aの役割を最大限表現する: ベンダーグラフィックスについて
    02:22  (34:43 ~ )
    aタグマジック
    00:13  (37:05 ~ )
    aタグマジック: 【実践】マウスオーバーした際のインタラクションを指定してみよう
    05:37  (37:18 ~ )
    aタグマジック: 【実践】トランジションを書いてみよう
    04:27  (42:55 ~ )
    aタグマジック: 3Dトランスフォームについて
    00:56  (47:22 ~ )
    【後半】質疑応答
    Q:リセットCSSは、しない感じですか?
    02:31  (48:38 ~ )
    Q:同じCSS内でremやpxが混在するとよくないと聞いたことがあるのですが、CSSはremだったらrem、pxだったらpxで統一したほうがいいですか?
    03:09  (51:09 ~ )
    Q:colorのimportatは、なんですか?
      (54:18 ~ )