chevron_left スマホサイトを作って学ぶ、サイト制作入門

スマホサイトを作って学ぶ、サイト制作入門

PREMIUM

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

1 / 13

授業の概要

既存サイトをレスポンシブウェブデザインとしてスマートフォン最適化を行い、レスポンシブウェブデザインのためのデザインで注意することやコーディング方法を学びます。

「PCサイトは作れるけど、スマホサイトは作ったことがなくて必要性を感じている」
「レスポンシブWebデザインでスマホ最適化を行いたいが、どうすればいいかわからない」

これらのお悩みは授業を受けることにより改善されます。

授業ではサンプル用のPCサイトやスマートフォン用サイトで使う素材を用意しますので、完成デザインを参考にしながらコーディングしていきスマートフォンサイトに最適化していく流れをハンズオンで進めていくため、実際のノウハウが身につきます。

授業で行う内容をレスポンシブサイト制作の案件に応用し、レスポンシブウェブデザインによるスマホ最適化の流れを覚えましょう。

この授業を受けると学べること:


スマートフォンに最適化したサイトを制作するノウハウが身につく
レスポンシブウェブデザインの制作方法を知れる
レスポンシブ化する際の注意するところやつまづきやすい部分がわかる

■ 授業の流れ


1.レスポンシブ化するPCサイト確認/スマートフォンサイトの完成デザイン確認
2.完成デザインを元にスマートフォンサイトをコーディング
3.完成

授業で使用する教材

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

チャプター

play_arrow
自己紹介&アジェンダ
04:44
play_arrow
完成系の確認/ファイルのダウンロード
02:04
play_arrow
index.htmlに追加の記述
03:04
play_arrow
sp.cssを作成、メディアクエリの記述
02:29
play_arrow
・主要なcssから記述
02:28
play_arrow
・スマホサイズで動くか確認
05:00
play_arrow
・bodyの記述
05:20
play_arrow
・line/bottomの設定
02:30
play_arrow
・崩れた部分の微調整
03:20
play_arrow
・headerの修正
06:19
play_arrow
・サイドバー作成
05:40
play_arrow
・copyright部分の調整
03:43
play_arrow
Q:HTMLのhead以外のタグを触らない制限があった場合に、sp.cssなどの外部ファイルのみで最適化することは可能ですか? 元HTMLをできるだけ改変しないという目的です。
01:07
play_arrow
・Retinaディスプレイの対応方法
06:40
play_arrow
・スマートフォンで確認
00:33
play_arrow
・ディレクトリを作成
03:57
play_arrow
Q:画像サイズを二倍にするのと、解像度を二倍にするのではどちらが良いのでしょうか?
01:00
play_arrow
Q:本日の授業にてスマホサイトへの最適化を行う際に%(割合指定)とpx(固定指定)を場所によって使い分けておりましたが、使い分けはどの様に方針を決めていますか
02:44
play_arrow
・2倍のpixel数の画像作成法
05:06
play_arrow
Q:スマホ対応させる場合、一般的に基準サイズは
01:13
play_arrow
Q:前回の授業でiPhoneをMacに繋ぐとSafariの開発の所にiPhoneが出てくると仰ってましたが、出来ないです。
01:13
play_arrow
Q:スマホサイトからPCサイトに作成するケースもありますが、PCの方が簡単ですか?
01:37
play_arrow
Q:スマホ用にリサイズした画像は、PC用のCSSで、画像の表示サイズの指定をすれば良いんでしょうか?
02:25
play_arrow
Q:オススメのレスポンシブフレームワークなどはありますか?
01:34
play_arrow
Q:メニューとメインビジュアルは重ならない理由を教えて下さい。
01:25
play_arrow
Q:2倍の画像をindex.htmlで半分のwidth指定していましたが、cssで指定しても良いのでしょうか?
03:12
play_arrow
Q:既存のサイトをレスポンシブ対応させる場合、どの位、時間が掛かってしまうものでしょうか?
03:03
play_arrow
Q:先生がかっこいいと思うレスポンシブルデザインのサイトがあったら教えて下さい!
03:37
play_arrow
課題発表