おためし受講中

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

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


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

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

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

対象者:


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

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

参考サイト/予習教材

【ノート機能】
授業内容や覚えておきたいポイントなど、ノートに自由に残せます

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