chevron_left

スマホサイトコーディング入門
PREMIUM
第6回

スマホサイトコーディング入門 -ユーザーが操作するUIを作る:メニューなど-

2015年9月29日 90min
スマホサイトコーディング入門 -ユーザーが操作するUIを作る:メニューなど- play_arrow おためし受講

スライド資料

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

1 / 22

授業の概要

 

この授業ではスマホサイトの特性と振る舞いを学び、完成予想図通りにHTMLとCSSでコーディングして完成させるまでを学んでいきます。
Googleアルゴリズムがスマホ対応サイトを優先するようになり、ますますWebサイトはスマホUIが重要になってきました。コーディングは初めてという方はもちろん、PCサイトは作ったことがあるがスマホサイトは未経験という方にオススメの授業です。

今回のアジェンダアジェンダ
・メニュー部分のコーディング
・タップで開閉するドロワーメニューの作成

■ 事前準備

この授業はテキストエディタとブラウザ(GoogleChrome)を使用します。またHTML／CSSの基本を理解している方を対象としています。自信の無い方は、下記授業をご受講ください。

 

こんな人にオススメ

Web制作フローを学びたい方、Webコーディングを学びたい方、スマホサイトコーディングの経験がない方

担当の先生／パーソナリティ

授業で使用する教材

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

チャプター

play_arrow
自己紹介＆アジェンダ
03:03
play_arrow
スマホのメニューとは
05:00
play_arrow
メニューのhtmlを完成させる
16:12
play_arrow
メニューのcssを完成させる
37:58
play_arrow
まとめ
00:22
play_arrow
お知らせ
10:01
play_arrow
Q：{position: fixed} にすると幅がなくなる、というところをもう一度解説して頂けませんか？
02:10
play_arrow
Q：横幅のwidthで数値を指定するとき、pxと%ではどうちがうのでしょう。
02:52
play_arrow
Q：WEBの勉強で、古い物は参考にしない方がいいと言ってましたが、田中先生（他の先生）の昔の過去2013年のschoo授業は、見ても大丈夫ですか？
07:19
play_arrow
Q：なぜ幅がなくなるかをお尋ねしました。　width:100%を指定するということでしたが、{position:fixed}すとと、なぜ幅がなくなるのですか？
02:07
play_arrow
Q：スマートフォンの動作確認時に何らかのエミュレータを使用しての動作確認でも良いでしょうか？またChoromeの機能以外でオススメのエミュレータがあれば教えて頂けないでしょうか？