chevron_left

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

PREMIUM

スライド資料

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

1 / 18

授業の概要

一言で言うと「スマホサイトを0から作って、FTPソフトでレンタルサーバーでアップして公開しよう」という内容です。
サンプルとしてカフェのスマホサイトですが、応用して美容院や歯科医院などにも。制作会社に依頼するまでもない規模のサイトを作れるレベルを想定しています。
ご自身のサイトや知り合いのサイトをまずは作れるように制作の基本から抑えつつ、つまづきやすいポイントや知っておくと良いコラムなど交えながら楽しく制作できるよう進めていきます。


「一度やってみたけど難しくてできなかった…」

「サイト制作って英語ばっかだし難しい…」

と思っている方、是非一度チャレンジしてみませんか?
慣れないことはたくさん出てきますが、一つ一つ解決していけばすぐにわかるようになります。
制作の楽しみを発見しましょう!

対象者:


HTMLとCSSは経験があって初心者ではないがスマホサイトを作った経験がない
FTPソフトやレンタルサーバーを借りるなど自分でやってみたいが自信がない
開発者ツールを使ったことがない

どんなことを学べるか:
・カフェのスマホサイトを0から作れる
・dreamweaverの使い方をサイト制作を通して学べる
・FTPソフトのインストールと使い方を学べる
・レンタルサーバーの選び方と申し込み方法から設定までひと通り行う
・制作したHTMLファイルをFTPソフトを使ってアップロードするサイト制作の一連の流れを知れる
・デバイスに左右されにくいサイト構築のノウハウを知れる
・Chromeブラウザの開発者ツールの使い方を学び効率のよいCSSの構築方法を学べる

チャプター

play_arrow
自己紹介&アジェンダ
02:52
play_arrow
制作に入る前に
05:51
play_arrow
環境構築
06:30
play_arrow
htmlファイルを制作
00:48
play_arrow
ドリームウィーバー起動 新規ドキュメント制作
01:01
play_arrow
【質問】Dreamweaverが入ってない場合は?
01:00
play_arrow
【質問】ドリームウィバーCS6でも大丈夫?
03:57
play_arrow
headに設定を記述する <meta> <titele>
00:59
play_arrow
Dreamweaverのデータを保存する
02:48
play_arrow
headタグに設定を書き込む
01:50
play_arrow
metaタグのcontentの説明
03:41
play_arrow
cssのlinkをペースト
02:00
play_arrow
bodyに書き込む
01:09
play_arrow
DLしたHTMLファイルのheaderタグを制作データのbodyの中にコピーする
00:46
play_arrow
headerタグの中身の解説
00:25
play_arrow
挿入されている画像データを制作ファイルに移す
00:50
play_arrow
挿入画像のwidth設定の解説
01:19
play_arrow
navタグの説明
03:11
play_arrow
div class=mainをコピーして制作データにペースト
01:20
play_arrow
metaの電話番号リンクの解説
01:42
play_arrow
データの保存
00:44
play_arrow
現在の制作状況の解説
00:48
play_arrow
制作フォルダの中にCSSフォルダを制作
01:15
play_arrow
Dreamweaverでcssファイルの制作
01:33
play_arrow
Chromeのインスペクタを使いCSSを制作
00:08
play_arrow
クイズ cssの書き方覚えていますか?
02:04
play_arrow
基本のcssを書く
00:40
play_arrow
・基本のcssを書くbody
03:53
play_arrow
【質問】ハイフンから始まってるプロパティって何か特別なのかな??
02:36
play_arrow
・基本のcssを書く img
01:07
play_arrow
・基本のcssを書く a
01:57
play_arrow
Chromeのインスペクタを使いCSSを制作
02:56
play_arrow
Chromeのインスペクタの使用方法
04:57
play_arrow
Chromeインスペクタの便利な機能
00:30
play_arrow
デザインを見ながらCSSをインスペクタを使って書く
02:06
play_arrow
headerのcssを書く
03:13
play_arrow
navのcssを書く
05:35
play_arrow
【質問】!マークでエラーが出た箇所はどうやったら消せますか?
02:29
play_arrow
【質問】完成形のhtmlファイルをインスペクタで見た場合は今の内容はどのタグ部分を選択したら見ることができますか?
01:46
play_arrow
ulのcssを書く
03:54
play_arrow
・aのcssをコピー&ペーストする
02:37
play_arrow
・ulの中身のタグのcssをコピー&ペーストする
01:19
play_arrow
ソーシャルメディアボタンのcssをコピー&ペーストする
01:11
play_arrow
【質問】操作の仕方で確認したいのですがインスペクタで見え方を確認しながらコードを作ってstyle.cssにコピペして保存することで作っていくということでしょうか?
02:27
play_arrow
残りのCSSを全てコピー&ペースト
00:52
play_arrow
完成したHTMLファイル、CSSファイルの解説
01:31
play_arrow
・imgのcss
00:55
play_arrow
・navのcss
01:46
play_arrow
・aのcss
00:53
play_arrow
・電話番号部分のcss
02:30
play_arrow
・footerのcss
01:34
play_arrow
jsファイルや関連ファイルを紐付けてインタラクティブな動きを実現
00:02
play_arrow
jsファイルフォルダを制作データのあるフォルダにコピーする
01:12
play_arrow
jsファイルの内容解説
02:43
play_arrow
Q:インスペクタでの変更はPCのメモリ上に反映されるだけで、ファイル(style.css)が変更されるのではないのですね
01:00
play_arrow
Q:スマホサイト用を勉強する場合、どのような書籍で勉強すれば良いでしょうか?
01:43
play_arrow
Q:先生が今までに手がけたスマホサイトの中から、参考にするべきものを教えていただきたいです
01:53
play_arrow
Q:スマホサイトに関して高解像度対応のため画像の大きさを2倍で制作するということなのですが・・・
01:50
play_arrow
Q:スマホ制作で一番気をつけないといけない事は?
01:35
play_arrow
Q:スマホでしか見られないサイトのソースを見る方法はどうすればいいんでしょうか?
02:20
play_arrow
Q:ネット検索は情報が沢山あって大変です。その中で正しい情報をどう探していけばいいのか、コツを教えて下さい
03:56
play_arrow
課題発表