おためし受講中

スマホサイトコーディング入門 -スマートフォンUIの特徴とCSSコーディング-

この授業ではスマホサイトの特性と振る舞いを学び、完成予想図通りにHTMLとCSSでコーディングして完成させるまでを学んでいきます。
Googleアルゴリズムがスマホ対応サイトを優先するようになり、ますますWebサイトはスマホUIが重要になってきました。コーディングは初めてという方はもちろん、PCサイトは作ったことがあるがスマホサイトは未経験という方にオススメの授業です。

今回のアジェンダアジェンダ
・スマホUIの仕組み
・スマホUIに必要な物
・モバイルフレンドリーなUIを実現する方法

■ 事前準備

この授業はテキストエディタとブラウザ(GoogleChrome)を使用します。またHTML/CSSの基本を理解している方を対象としています。自信の無い方は、下記授業をご受講ください。

この授業では素材ファイルを使用します。事前に下記素材ファイルをダウンロードして置いて下さい。
http://behomazn.com/schoo/20150928/images.zip
 
また以下サンプルファイルも適時参考になさって下さい。

※ 授業中では0からコーディングを行っていきますので、可能な方は先生と一緒にコーディングしてみましょう。

学生代表

  • 新井 利佳

    新井 利佳

    スクー放送部

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

再生位置挿入 資料挿入
筆記アシスト
ONOFF
    【チャプター機能】
    授業内容をピンポイントでおさえながら
    ご自身のペースで進めることができます
    【前半】授業
    自己紹介&アジェンダ
    01:10  (00:14 ~ )
    1限目のコーディングの続き
    10:41  (01:24 ~ )
    スマホUIの仕組み
    00:24  (12:05 ~ )
    スマホUIの仕組み: デバイス幅について
    02:09  (12:29 ~ )
    スマホUIの仕組み: ピクセル密度について
    02:22  (14:38 ~ )
    スマホUIに必要な物
    05:33  (17:00 ~ )
    タッチパネル操作で作る
    02:04  (22:33 ~ )
    モバイルフレンドリーなUI: デザインカンプのトレース
    01:14  (24:37 ~ )
    モバイルフレンドリーなUI: ピクセルを測る
    04:09  (25:51 ~ )
    モバイルフレンドリーなUI: コーディングルールについて
    03:41  (30:00 ~ )
    モバイルフレンドリーなUI: フォントはfont-family:sans-serif;に指定する
    00:20  (33:41 ~ )
    モバイルフレンドリーなUI: class名、id名のネーミング
    00:53  (34:01 ~ )
    モバイルフレンドリーなUI: css resetについて
    01:13  (34:54 ~ )
    モバイルフレンドリーなUI: フルードイメージについて
    01:37  (36:07 ~ )
    CSSのやり方を学ぼう
    04:36  (37:44 ~ )
    【後半】質疑応答
    Q:最後の©はfont-iconは使わないのですか?
    00:24  (42:41 ~ )
    Q:footerの見出しはh2、h3ではなく、どうしてh4が望ましいのでしょうか?
    01:02  (43:05 ~ )
    Q:BEMはもう現場では必須と考えてよろしいでしょうか?
    01:12  (44:07 ~ )
    Q:viewportについて
    00:50  (45:19 ~ )
    Q:iphone6を意識してレスポンシブサイトを作る際について
    02:03  (46:09 ~ )
    Q:スマホサイトでデザインカンプpsdデータからのスライスして、コーディングでするのが支流ですか?
    02:16  (48:12 ~ )
    Q:pxを%に変換する際、先生は小数点以下桁数は何桁まで記述されていますか?
    00:51  (50:28 ~ )
    Q:jQueryのライブラリについて
    01:11  (51:19 ~ )
    Q:画像の圧縮など、携帯三社などの通信事業者が勝手に再圧縮したりすることはあるのでしょうか?
    03:40  (52:30 ~ )
    Q:縦の%指定は何を基準にすればいいでしょうか?
      (56:10 ~ )