おためし受講中

スマホサイトを作って学ぶ、サイト制作入門(サーバーレンタル・FTP編)

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


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

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

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

対象者:


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

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

参考サイト/予習教材

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

再生位置挿入 資料挿入
筆記アシスト
ONOFF
    【チャプター機能】
    授業内容をピンポイントでおさえながら
    ご自身のペースで進めることができます
    【前半】授業
    前回までのおさらい
    02:10  (02:15 ~ )
    ・ディベロッパーツールの使い方
    01:50  (04:25 ~ )
    ・高解像度対応のためのCSS設定
    02:35  (06:15 ~ )
    ・Frickのための実装(javascript)
    02:25  (08:50 ~ )
    ・viewportの設定
    02:20  (11:15 ~ )
    ・format-detectionの設定
    01:40  (13:35 ~ )
    ・webkit-background-sizeの設定
    01:00  (15:15 ~ )
    レンタルサーバーを借りる
    01:00  (16:15 ~ )
    ・レンタルサーバーのちがい
    01:04  (17:15 ~ )
    ・ウェブサイトに合わせたレンタルサーバー
    02:41  (18:19 ~ )
    ・初めてレンタルサーバーを借りる人がチェックすべきポイント①(ディスク容量)
    04:00  (21:00 ~ )
    ・初めてレンタルサーバーを借りる人がチェックすべきポイント②(データベース)
    01:55  (25:00 ~ )
    ・初めてレンタルサーバーを借りる人がチェックすべきポイント③(ファイルマネージャー)
    03:20  (26:55 ~ )
    ・ロリポップの申し込みステップ①メールアドレスの登録
    04:35  (30:15 ~ )
    ・ロリポップの申し込みステップ②プラン選択
    05:50  (34:50 ~ )
    ・ロリポップの申し込みステップ③申し込み完了/確認
    04:42  (40:40 ~ )
    FTPソフトのインストール
    03:43  (45:22 ~ )
    ・Win&Macどちらでも使えるFilizillaをインストール
    05:35  (49:05 ~ )
    ・FTPソフトの設定
    05:57  (54:40 ~ )
    1回目の授業で作ったデータをサーバーにアップし公開
    05:33  (1:00:37 ~ )
    ・実際に自分のドメインにアクセスしてみる
    01:10  (1:06:10 ~ )
    ・スマホからアクセスしてみる
    04:18  (1:07:20 ~ )
    Q:アップロードしたファイルをパソコンからは見られますが、スマホから見るとページを開けません。多くのリダイレクトが発生していますというエラーがでています。何か考えられる原因はありますでしょうか。
    【後半】質疑応答
    07:49  (1:11:38 ~ )
    Q:リダイレクトループがあるようなので、ソースのチェックをしています
    01:33  (1:19:27 ~ )
    Q:サーバー選定についてですが、ロリポップを今回利用したのは
    01:43  (1:21:00 ~ )
    Q:AWSはどうなんでしょうか?
    01:32  (1:22:43 ~ )
    Q:同じURLで、PCから見るのと、スマホから見るのとで、表示が違うサイトがありますが、どのような技術になっているのでしょうか?
    01:23  (1:24:15 ~ )
    Q:先生はスクーに応募してご登壇したそうですが、なぜご登壇しようと思ったのでしょうか?
    02:57  (1:25:38 ~ )
    Q:普段先生は、サイト作成時、手打ちで作りますか?
    03:43  (1:28:35 ~ )
    Q:先生はBootstrapとWordPressを使ってスマホサイトを作成したことはありますか?これを使うときに大変だった事があれば教えて下さい。
    01:38  (1:32:18 ~ )
    Q:今のテキストエディタみたいな物の名前は何ですか??
    01:18  (1:33:56 ~ )
    Q:独学でWEBページの制作を学ばれたとのことですが、どのような方法で習得されましたか?
    02:44  (1:35:14 ~ )
    Q:ほかのサイトを見る時に意識しているポイントはありますか?
    03:15  (1:37:58 ~ )
    Q:先生はアイデアが枯渇したときに何かサイトを見たりしてネタを集めたりはしますか?
    02:50  (1:41:13 ~ )
    Q:ライブハウスのサイト更新はCMSではなく、普通にHTMLとCSSでコーディングやっていたんですか?大変ですね。今だったら、googleカレンダーとかでスケジュールの調整ができますもんね。
    01:46  (1:44:03 ~ )
    Q:スマホから見ると、よく「PC・スマホの表示切替」がありますが、どのようになっているのでしょうか
    04:09  (1:45:49 ~ )
    Q:パソコンとスマホのサイトをデザインされるときどちらからデザインされますか?
    01:20  (1:49:58 ~ )
    Q:既にアップしたファイルを編集した際の更新方法を教えてください。Filezillaでそのファイルを消してアップしなおせばいいですか?
    01:01  (1:51:18 ~ )
    Q:今はすべてCMSで作成するのでしょうか?それはクライアントのためにですか?それとも自分で楽に更新するためですか?
    01:03  (1:52:19 ~ )
    Q:よく使うフォントタイプはありますか?特にスマホ向けのサイトではどれを
    00:51  (1:53:22 ~ )
    Q:先生はphpなどでのWeb開発も行いますか?Webデザインと開発の両方できる方はWebデザイナーのなかでも何割ぐらいなのでしょうか?
    01:42  (1:54:13 ~ )
    Q:今更ですが・・・先生はなぜwebデザイナーを目指されたのでしょうか?
    01:40  (1:55:55 ~ )
    課題発表
      (1:57:35 ~ )