おためし受講中

Webデザイン入門 初めてのコーディング 〜コンテンツでページを埋めていこう!①〜

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

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

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

4限目までで出来るサイトサンプル
http://behomazn.com/schoo/201505302/


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


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

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

学生代表

  • 青島 莉子

    青島 莉子

    スクー放送部

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

再生位置挿入 資料挿入
筆記アシスト
ONOFF
    【チャプター機能】
    授業内容をピンポイントでおさえながら
    ご自身のペースで進めることができます
    【前半】授業
    自己紹介&アジェンダ
    00:53  (00:13 ~ )
    プロトタイプ(見本)を確認
    01:36  (01:06 ~ )
    前回までのコーディングを確認
    01:22  (02:42 ~ )
    contactUsタグを書いていこう
    07:44  (04:04 ~ )
    textareaタグを書いていこう
    00:54  (11:48 ~ )
    inputタグを書いていこう
    05:21  (12:42 ~ )
    asaideタグを書いていこう
    02:17  (18:03 ~ )
    .accessmapタグを書いていこう
    04:20  (20:20 ~ )
    footerタグを書いていこう
    10:25  (24:40 ~ )
    gototopタグを書いていこう
    07:40  (35:05 ~ )
    【後半】質疑応答
    Q:先ほどの授業でheaderのbackgroundに#4d559fの色を指定ましたが、ブラウザ上でみると幅を狭くするとこのbackgroundで指定した色の帯の高さが何も見えない状態から段々高くなるのですが、何か意図されたのでしょうか?
    04:25  (43:51 ~ )
    Q:overflow: hidden;についてもう少し詳しく教えてほしいです。
    00:34  (48:16 ~ )
    Q:最後のrgbaをもう一度教えていただけますか?
    00:46  (48:50 ~ )
    Q:.accessmapのところ、height: 0;とpadding-bottom:60%;は何が起こってるのでしょうか? 60%は何に対しての割合でしょう?
    01:37  (49:36 ~ )
    Q:PCサイトでもPC以外(ゲーム機やテレビ等)で見るケースが増えてるのでピクセル指定はやめて、remと%指定にしたほうがよいでしょうか?
    01:09  (51:13 ~ )
    Q:gototopのところはpixelでなければならないのでしょうか?
    01:08  (52:22 ~ )
    Q:clearhackとoverflow:hiddenの使い分けはどうしたらよいのですか?
    00:44  (53:30 ~ )
    Q:widthやheightを%で指定される場合とremで指定される場合とありましたが、何か規則性があるのでしょうか?
    01:12  (54:14 ~ )
    Q:いつも色の選択に悩みます。ポイントなどはございますか?
      (55:26 ~ )