おためし受講中

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

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

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

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

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

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

学生代表

  • 新井 利佳

    新井 利佳

    スクー放送部

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

再生位置挿入 資料挿入
筆記アシスト
ONOFF
    【チャプター機能】
    授業内容をピンポイントでおさえながら
    ご自身のペースで進めることができます
    質問;皆さんは切り替えタブの 実装をしたことがありますか?
    【前半】授業
    00:22  (00:13 ~ )
    本日の授業の流れ
    01:48  (00:35 ~ )
    切り替えタブの実装について
    02:31  (02:23 ~ )
    切り替えタブとは?
    03:13  (04:54 ~ )
    htmlとcssの解説
    00:22  (08:07 ~ )
    サンプルファイルのhtmlを見てみよう
    03:07  (08:29 ~ )
    Q.li要素改行しないのはなぜでしょうか?
    05:59  (11:36 ~ )
    li要素周辺の構造を学ぼう
    08:49  (17:35 ~ )
    jQueryの解説
    01:56  (26:24 ~ )
    jQueryの動き
    02:28  (28:20 ~ )
    jQueryとhtmlの関連した動き
    01:06  (30:48 ~ )
    1番目からじゃないのはなんででしょうか?
    02:29  (31:54 ~ )
    jQueryとhtmlの関連した動き(続き)
    08:36  (34:23 ~ )
    まとめ
    01:43  (42:59 ~ )
    【後半】質疑応答
    Q.今回jqueryのバージョンが1.8.3ですが、選定理由というのはあるのでしょうか?
    00:45  (46:18 ~ )
    Q.普通のアトムとかのテキストエディタでは、なかなかJQueryの関係性は分かりにくいのですが、なにかお勧めのエディタはありませんか??
    02:22  (47:03 ~ )
    Q.太田さんの質問の続きなのですが、width:100%;を三つにわけるときっちり分けられないケースがあると思うのですが、その場合は「33%、33%、34%」とプログラムしても問題ないのでしょうか?
    01:10  (51:17 ~ )
    Q.ajaxみたいに、ボタンを押されたときにサーバから記事を動的に取ってくるというのはどうなんでしょうか?
    00:56  (52:27 ~ )
    Q.お知らせやニュースを縦項目でレイアウトしたい場合は記述はガラッと変わるのでしょうか?
    01:21  (53:23 ~ )
    Q.先生の、サブライムで、おすすめなプラグインはありますか?
    01:43  (54:44 ~ )
    Q.最終回なのでお伺いしたのですが、先生が行ってたJavaScript、jqueryの勉強法を教えて頂ければと思います。
    02:03  (56:27 ~ )
    受講者の皆さんへのメッセージ
    01:15  (58:30 ~ )
    お知らせ
      (59:45 ~ )