chevron_left

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

PREMIUM
第8回

Webデザイン入門 初めてのコーディング 〜マルチデバイスへの対応方法〜

2015年6月13日 60min

スライド資料

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

1 / 17

授業の概要

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

はじめてコーディングを学ぶ方から、HTML入門(全3回)を見て少しコーディングに触れた方など、コーディング初心者を対象としています。
シリーズ8回通してできるようになる事はgoogle推奨のモバイルフレンドリーな開発環境を整え、スマホサイトを完成させる事です。
なお、このシリースで制作したスマホサイトは次のシリーズでtabletやPCなどデバイズごとにデザインが切りかわるレスポンシブサイト制作実践へと続きます。
前回までの授業でスマホ用のシングルページサイトが完成しました。この授業では、完成したサイトをマルチデバイス対応にして、同一htmlページのUIをデバイス毎に切り替える手法を学んでいきます。今回もcssを一緒にコーディングしていくハンズオン授業になります。同じサイトの見え方を、それぞれのデバイズに最適なUIを実現するMedia Queryという手法を使ったコーディングを学んでいきます。

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

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


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

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

完成サイト
http://behomazn.com/schoo/20150613/

こんな人にオススメ

マルチデバイズ対応サイトをコーディングしたい方・Media Queryのコーディングを学びたい方

授業で使用する教材

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