法人のお客様Schooをご利用になるには、JavaScriptの設定を有効にしてください。授業リスト関連授業コース概要この授業では、カフェのスマホサイトをゼロから制作して、FTPソフトでレンタルサーバーでアップして公開することがゴールです。HTMLやCSSを使ったコーディングや、レスポンシブデザインを学べます。342_downloads.zip※授業以外での利用は禁止します。一言で言うと「スマホサイトを0から作って、FTPソフトでレンタルサーバーでアップして公開しよう」という内容です。サンプルとしてカフェのスマホサイトですが、応用して美容院や歯科医院などにも。制作会社に依頼するまでもない規模のサイトを作れるレベルを想定しています。ご自身のサイトや知り合いのサイトをまずは作れるように制作の基本から抑えつつ、つまづきやすいポイントや知っておくと良いコラムなど交えながら楽しく制作できるよう進めていきます。「サイト制作って英語ばっかだし難しい...」と思っている方、是非一度チャレンジしてみませんか?慣れないことはたくさん出てきますが、一つ一つ解決していけばすぐにわかるようになります。a01:57Chromeのインスペクタを使いCSSを制作02:56Chromeのインスペクタの使用方法04:57Chromeインスペクタの便利な機能00:30デザインを見ながらCSSをインスペクタを使って書く02:06headerのcssを書く03:13navのcssを書く05:35【質問】!マークでエラーが出た箇所はどうやったら消せますか?02:29【質問】完成形のhtmlファイルをインスペクタで見た場合は今の内容はどのタグ部分を選択したら見ることができますか?01:46ulのcssを書く03:54・aのcssをコピー&ペーストする02:37・ulの中身のタグのcssをコピー&ペーストする01:19ソーシャルメディアボタンのcssをコピー&ペーストする01:11【質問】操作の仕方で確認したいのですがインスペクタで見え方を確認しながらコードを作ってstyle.cssにコピペして保存することで作っていくということでしょうか?02:27残りのCSSを全てコピー&ペースト00:52完成したHTMLファイル、CSSファイルの解説01:31・imgのcss00:55・navのcss01:46・aのcss00:53・電話番号部分のcss02:30・footerのcss01:34jsファイルや関連ファイルを紐付けてインタラクティブな動きを実現00:02jsファイルフォルダを制作データのあるフォルダにコピーする01:12jsファイルの内容解説02:43Q:インスペクタでの変更はPCのメモリ上に反映されるだけで、ファイル(style.css)が変更されるのではないのですね01:00Q:スマホサイト用を勉強する場合、どのような書籍で勉強すれば良いでしょうか?01:43Q:先生が今までに手がけたスマホサイトの中から、参考にするべきものを教えていただきたいです01:53Q:スマホサイトに関して高解像度対応のため画像の大きさを2倍で制作するということなのですが・・・01:50Q:スマホ制作で一番気をつけないといけない事は?01:35Q:スマホでしか見られないサイトのソースを見る方法はどうすればいいんでしょうか?02:20Q:ネット検索は情報が沢山あって大変です。一言で言うと「スマホサイトを0から作って、FTPソフトでレンタルサーバーでアップして公開しよう」という内容です。サンプルとしてカフェのスマホサイトですが、応用して美容院や歯科医院などにも。制作会社に依頼するまでもない規模のサイトを作れるレベルを想定しています。ご自身のサイトや知り合いのサイトをまずは作れるように制作の基本から抑えつつ、つまづきやすいポイントや知っておくと良いコラムなど交えながら楽しく制作できるよう進めていきます。「サイト制作って英語ばっかだし難しい...」と思っている方、是非一度チャレンジしてみませんか?慣れないことはたくさん出てきますが、一つ一つ解決していけばすぐにわかるようになります。07:49Q:リダイレクトループがあるようなので、ソースのチェックをしています01:33Q:サーバー選定についてですが、ロリポップを今回利用したのは01:43Q:AWSはどうなんでしょうか?01:32Q:同じURLで、PCから見るのと、スマホから見るのとで、表示が違うサイトがありますが、どのような技術になっているのでしょうか?01:23Q:先生はスクーに応募してご登壇したそうですが、なぜご登壇しようと思ったのでしょうか?02:57Q:普段先生は、サイト作成時、手打ちで作りますか?03:43Q:先生はBootstrapとWordPressを使ってスマホサイトを作成したことはありますか?これを使うときに大変だった事があれば教えて下さい。01:38Q:今のテキストエディタみたいな物の名前は何ですか??01:18Q:独学でWEBページの制作を学ばれたとのことですが、どのような方法で習得されましたか?02:44Q:ほかのサイトを見る時に意識しているポイントはありますか?03:15Q:先生はアイデアが枯渇したときに何かサイトを見たりしてネタを集めたりはしますか?02:50Q:ライブハウスのサイト更新はCMSではなく、普通にHTMLとCSSでコーディングやっていたんですか?大変ですね。今だったら、googleカレンダーとかでスケジュールの調整ができますもんね。01:46Q:スマホから見ると、よく「PC・スマホの表示切替」がありますが、どのようになっているのでしょうか04:09Q:パソコンとスマホのサイトをデザインされるときどちらからデザインされますか?01:20Q:既にアップしたファイルを編集した際の更新方法を教えてください。既存サイトをレスポンシブウェブデザインとしてスマートフォン最適化を行い、レスポンシブウェブデザインのためのデザインで注意することやコーディング方法を学びます。「レスポンシブWebデザインでスマホ最適化を行いたいが、どうすればいいかわからない」これらのお悩みは授業を受けることにより改善されます。授業ではサンプル用のPCサイトやスマートフォン用サイトで使う素材を用意しますので、完成デザインを参考にしながらコーディングしていきスマートフォンサイトに最適化していく流れをハンズオンで進めていくため、実際のノウハウが身につきます。授業で行う内容をレスポンシブサイト制作の案件に応用し、レスポンシブウェブデザインによるスマホ最適化の流れを覚えましょう。元HTMLをできるだけ改変しないという目的です。01:07・Retinaディスプレイの対応方法06:40・スマートフォンで確認00:33・ディレクトリを作成03:57Q:画像サイズを二倍にするのと、解像度を二倍にするのではどちらが良いのでしょうか?01:00Q:本日の授業にてスマホサイトへの最適化を行う際に%(割合指定)とpx(固定指定)を場所によって使い分けておりましたが、使い分けはどの様に方針を決めていますか02:44・2倍のpixel数の画像作成法05:06Q:スマホ対応させる場合、一般的に基準サイズは01:13Q:前回の授業でiPhoneをMacに繋ぐとSafariの開発の所にiPhoneが出てくると仰ってましたが、出来ないです。01:13Q:スマホサイトからPCサイトに作成するケースもありますが、PCの方が簡単ですか?01:37Q:スマホ用にリサイズした画像は、PC用のCSSで、画像の表示サイズの指定をすれば良いんでしょうか?02:25Q:オススメのレスポンシブフレームワークなどはありますか?01:34Q:メニューとメインビジュアルは重ならない理由を教えて下さい。閉じる資料をダウンロードするには資料パスワードの設定が必要です。資料パスワードを設定する閉じる資料のダウンロードは1日10件、1ヶ月100件までです。Reserved.スクーについてご意見をお聞かせくださいありがとうございました!いただいたご意見はスクー教務課にて確認し、今後の運営に役立てさせていただきます。個々のご意見にはご返信しておりませんので予めご了承ください。招待したあなたには2枚、招待されたお友達には1枚、録画授業が受けられる「チケット」をプレゼントします。IDで登録メールアドレスまたはパスワードが違います。ログインできない方は「よくある質問」をご確認下さい。