おためし受講中

Webデザイン入門 はじめてのコーディング 〜全7回で制作するサイトのコーディング工程確認〜

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

はじめてコーディングを学ぶ方から、HTML入門(全3回)を見て少しコーディングに触れた方など、コーディング初心者を対象としています。
シリーズ7回通してできるようになる事はgoogle推奨のモバイルフレンドリーな開発環境を整え、スマホサイトを完成させる事です。
なお、このシリースで制作したスマホサイトは次のシリーズでtabletやPCなどデバイズごとにデザインが切りかわるレスポンシブサイト制作実践へと続きます。
『Webデザイン入門 0から自分でコーディング! ~スマホサイト編~』第1回目は、Webフロントエンドの開発環境を自分のPCに作ってしまうという授業です。

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

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


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

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

学生代表

  • 大木 しのぶ

    大木 しのぶ

    スクー放送部

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

再生位置挿入 資料挿入
筆記アシスト
ONOFF
    【チャプター機能】
    授業内容をピンポイントでおさえながら
    ご自身のペースで進めることができます
    【前半】授業
    自己紹介&アジェンダ
    02:51  (00:13 ~ )
    サイトが表示される仕組み
    03:20  (03:04 ~ )
    LAMP環境について
    01:49  (06:24 ~ )
    IPアドレスについて
    02:50  (08:13 ~ )
    IPアドレスを調べてみよう
    03:40  (11:03 ~ )
    ブラウザを通してみているサイトはHTML(+CSS)で書かれている
    05:36  (14:43 ~ )
    ファイルを軽量化するためにインデントを全て無くして圧縮してある
    03:28  (20:19 ~ )
    タグでマークアップして意味づけをする
    03:30  (23:47 ~ )
    フロントエンドのワークフロー
    10:26  (27:17 ~ )
    設計のフェーズ
    01:36  (37:43 ~ )
    サイトのページ設計を考えたり、デザインガイドラインの確認
    03:45  (39:19 ~ )
    全7回で制作するスマホサイトの確認
    02:51  (43:04 ~ )
    【後半】質疑応答
    Q:「sublime2/3」 と Atom とでは、どちらが主流でしょうか?
    02:05  (46:20 ~ )
    Q:「ifconfig」の結果で、グローバルIPアドアレスはどれでしょうか?
    01:24  (48:25 ~ )
    Q:ワイヤーフレームと遷移図・プロトタイプの違いをもう少し詳しく教えてください。またこれらは通常別々に作るものなのでしょうか?
    03:12  (49:49 ~ )
    Q:同じレスポンシブ対応のサイトでもモバイルから設計していくのと、PCから設計していくのでは、手法が全然変わってくるのでしょうか?
    00:58  (53:01 ~ )
    Q:先生のワイヤーフレームをしっかり見たいのです。機会があったらお願いします。田中
    02:00  (53:59 ~ )
    Q:Web業界では、遷移図の設計に使う定番のツールがあるのでしょうか?
      (55:59 ~ )