おためし受講中

Webデザイン入門 初めてのコーディング 〜モバイルフレンドリーなサイトとは〜

■ Webデザイン入門 0から自分でコーディング!~スマホサイト編~(全7回)2回目

はじめてコーディングを学ぶ方から、HTML入門(全3回)を見て少しコーディングに触れた方など、コーディング初心者を対象としています。
シリーズ7回通してできるようになる事はgoogle推奨のモバイルフレンドリーな開発環境を整え、スマホサイトを完成させる事です。
なお、このシリースで制作したスマホサイトは次のシリーズでtabletやPCなどデバイズごとにデザインが切りかわるレスポンシブサイト制作実践へと続きます。
『Webデザイン入門 0から自分でコーディング! ~スマホサイト編~』第2回目は、スマホサイトに特化したhtml5の文書構造、遷移設計と操作(UX)設計を習得してGoogleモバイルフレンドリーテストにパスするサイトの制作手法を学びます。
この授業は第1回目の授業を受講している事を前提に授業が進みます。未受講の方は、あらかじめ受講されるとより理解が深まります。

授業に臨むPCに以下のご準備をお願いします。

【拡張子の表示】
拡張子とは、ファイルの種類(画像ファイル、テキストファイル、htmlファイルなどを拡張して識別します)を識別するための符号です。これが表示されていなければWebページを構成している各種ファイルの識別ができません。以下リンクを参照されて拡張子を表示しておいてください。


【使用エディターのインストール】
このコースではSublineTextというエディターを使用します。最新版はSublineText3ですがOSのバーションによってはSublineText2しかインストールできません。どちらでも構いませんので授業に使用するPCにインストールをしておいてください。

このエディタはパッケージコントロールをインストールする事により、数々の便利な拡張機能やプラグインを導入する事ができますが、このシリーズでは使用しません。パッケージコントロールやプラグインのインストールしたい場合は以下の授業を見ながら慎重に行ってください。(高度な授業になりますのでこのシリースでは不要です)

学生代表

  • 未定

    未定

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

再生位置挿入 資料挿入
筆記アシスト
ONOFF
    【チャプター機能】
    授業内容をピンポイントでおさえながら
    ご自身のペースで進めることができます
    【前半】授業
    自己紹介&アジェンダ
    03:20  (00:13 ~ )
    Googleモバイルフレンドリーテスト
    07:12  (03:33 ~ )
    モバイルフレンドリーなコーディングとは
    00:58  (10:45 ~ )
    テキストが小さすぎて読めません
    08:13  (11:43 ~ )
    リンク同士が近すぎます
    03:04  (19:56 ~ )
    モバイル用viewportが設定されていません
    06:58  (23:00 ~ )
    コンテンツの幅が画面の幅を超えています
    03:05  (29:58 ~ )
    モバイルフレンドリーテストにおいて重要なhtml
    03:21  (33:03 ~ )
    W3Cバリデーションチェックをしてみよう
    09:09  (36:24 ~ )
    【後半】質疑応答
    Q:1角とは文字1つ分とはどういうことでしょうか?
    00:50  (45:52 ~ )
    Q:文章などを書いたとき端末の幅によって改行位置が変わってしまうと思うのですが、最適化するコツはありますか?
    01:07  (46:42 ~ )
    Q:W3CはSEOに影響しますか?
    00:50  (47:49 ~ )
    Q:W3Cサーバーに上げる前にチェックできますか?
    01:01  (48:39 ~ )
    Q:W3Cでエラーした状態でWEBサイトをサーバーにアップし続けていると、どうなりますか?
    00:37  (49:40 ~ )
    Q:meta name=viewportはhead内でしたら、titleの上等どこに載せても問題ないですか?
    01:44  (50:17 ~ )
    Q:WEBデザイン勉強する上でオススメの書籍がございましたら、教えて欲しいです!
    02:59  (52:01 ~ )
    Q:META情報にも優先順位があるのでしょうか?
    00:52  (55:00 ~ )
    Q:AdobeのMuseというサイトで、コードなしで作れるサイトを作ってるんですが、こういうのはW3Cではどうなんでしょうか?
      (55:52 ~ )