chevron_left

Webデザイン入門 0から自分でコーディング!〜スマホサイト編〜

PREMIUM
第7回

Webデザイン入門 初めてのコーディング 〜細部のcssを組み立てよう!〜

2015年6月6日 60min

スライド資料

会員登録して、全てのスライドを見よう

1 / 14

授業の概要

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

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

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

本時限までで出来るサイトサンプル
http://behomazn.com/schoo/201506062/

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


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

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

■ 授業内容内容の補足

タイムラインの【後半】質疑応答で
Q:ナビが開かないのですが、どうしたら良いでしょうか? (30:05)
というご質問がありました。

原因をスクー学生のTakahiro Natsume氏が解明してくださいました。ありがとうございました。

Navの右側の開閉ボタンの左にあるSNSボタンのulが無駄に長く、余った部分がボタンの上に被さっているため、「押せな状態になっている」とご指摘いただきました。

授業中のプロパティ#snsに対する90行目の辺りの、width: 15rem;の指定を8remに変更してください。半分弱にする事によってボタンの上に重ならなくなります。なお、スライドp13に書かれているサンプルの方は修正済みです。

こんな人にオススメ

操作性に優れたスマホサイトを作りたい人・クオリティの高いサイト制作を習得したい人

授業で使用する教材

※授業以外での使用は禁止します