1/27(Wed)
第1回:2014年3月7日公開
90min
【html+cssを挫折した全ての人に贈るシリーズ 全5回】
このシリーズは1回で完結していますが、1回から5回まで同じサイトがどんどん完成して行く形になっています。1回づつ完結した出来上がり見本付きの演習ファイルがダウンロードできます。
1)Sublimeのインストール(授業中コードを打つのに使います)
下記のURLからダウンロードしてください。
http://www.sublimetext.com/2
設定は何も必要ありません。インストールして授業が始まる時間に立ち上げられる様にだけしておけば大丈夫です。
2)解凍ツール (授業中配布する教材の解凍に使います)
授業中にダウンロードしたファイルをすぐに解凍できる様になっていれば大丈夫です。(Mac OSXの場合はダブルクリックで展開します。windows7~の場合は右クリックのコンテキストメニュー「全て展開」を選択でOK)
3)その他のバージョンのOSは、MacであればApp StoreでWinArchiver Lite.appを検索してダウンロードしインストールしておきます。
Wiondwsであれば、下記のURLよりLhaplusをダウンロードし、インストールしておきます。
http://www7a.biglobe.ne.jp/~schezo/
2014年3月7日公開
90min.
【html+cssを挫折した全ての人に贈るシリーズ 全5回】
このシリーズは1回で完結していますが、1回から5回まで同じサイトがどんどん完成して行く形になっています。1回づつ完結した出来上がり見本付きの演習ファイルがダウンロードできます。
第1回:初心者速習html+css【2カラムボックスモデル編】
初めてコーディングを学ぶ人や、本を読んだり参考サイトを見ながらコーディングしても崩れてしまってうまく行かなかった人のために、サイトの基礎工事の部分から学び、サイトの看板となるTOPページを仕上げます。
この授業を受講すると、基礎的なWeb制作におけるhtml+CSSの基礎を学ぶ事ができます。ぜひ、パソコンを用意してご参加下さい!
1)Sublimeのインストール(授業中コードを打つのに使います)
下記のURLからダウンロードしてください。
http://www.sublimetext.com/2
設定は何も必要ありません。インストールして授業が始まる時間に立ち上げられる様にだけしておけば大丈夫です。
2)解凍ツール (授業中配布する教材の解凍に使います)
授業中にダウンロードしたファイルをすぐに解凍できる様になっていれば大丈夫です。(Mac OSXの場合はダブルクリックで展開します。windows7~の場合は右クリックのコンテキストメニュー「全て展開」を選択でOK)
3)その他のバージョンのOSは、MacであればApp StoreでWinArchiver Lite.appを検索してダウンロードしインストールしておきます。
Wiondwsであれば、下記のURLよりLhaplusをダウンロードし、インストールしておきます。
http://www7a.biglobe.ne.jp/~schezo/
【スライド P14】
http://validator.w3.org/#validate_by_input
【スライド P19】
http://roadstohtml5.com/html5karuta/
【スライド P24】
https://code.google.com/p/html5shiv/
【スライド P25】
https://code.google.com/p/html5resetcss/downloads/list
【スライド P26】
https://www.google.com/fonts
【スライド P27】
https://github.com/Behomazn/schoo20140307html_css_Beginner1
スライド資料
2014年3月21日公開
90min.
【html+cssを挫折した全ての人に贈るシリーズ 全5回】
このシリーズは1回で完結していますが、1回から5回まで同じサイトがどんどん完成して行く形になっています。1回づつ完結した出来上がり見本付きの演習ファイルがダウンロードできます。
第2回:初心者速習html+css【4ページのサイトマルッと制作編】
初めてコーディングを学ぶ人や、本を読んだり参考サイトを見ながらコーディングしても崩れてしまってうまく行かなかった人のために、テンプレートからページを量産してサイトを作り上げる方法を学びます。
1回目の授業を受講していなくても、理解度が深まるように、演習ファイルを用意しています。この授業を受講して、コーディングの基礎を学んでいきましょう!
1)Sublimeのインストール(授業中コードを打つのに使います)
下記のURLからダウンロードしてください。
http://www.sublimetext.com/2
設定は何も必要ありません。インストールして授業が始まる時間に立ち上げられる様にだけしておけば大丈夫です。
2)解凍ツール (授業中配布する教材の解凍に使います)
授業中にダウンロードしたファイルをすぐに解凍できる様になっていれば大丈夫です。(Mac OSXの場合はダブルクリックで展開します。windows7~の場合は右クリックのコンテキストメニュー「全て展開」を選択でOK)
3)その他のバージョンのOSは、MacであればApp StoreでWinArchiver Lite.appを検索してダウンロードしインストールしておきます。
Wiondwsであれば、下記のURLよりLhaplusをダウンロードし、インストールしておきます。
http://www7a.biglobe.ne.jp/~schezo/
スライド資料
2014年4月13日公開
90min.
このシリーズは1回で完結していますが、 1回から5回まで同じサイトがどんどん完成して行く形になっています。
1回づつ完結した出来上がり見本付きの演習ファイルがダウンロードできます。
第3回:初心者速習html+css【同一サイトがデバイスで切り替わる!レスポンシブ編】
初めてコーディングを学ぶ人や、本を読んだり参考サイトを見ながらコーディングしても 崩れてしまってうまく行かなかった人のために、レスポンシブデザインを易しく解説して演習します。
レスポンシブデザインとは、今や無くてはならないPC、スマホ、タブレットなど、見ているデバイズによってデザインを切り変える手法です。
1)Sublimeのインストール(授業中コードを打つのに使います)
下記のURLからダウンロードしてください。
http://www.sublimetext.com/2
設定は何も必要ありません。インストールして授業が始まる時間に立ち上げられる様にだけしておけば大丈夫です。
2)解凍ツール (授業中配布する教材の解凍に使います)
授業中にダウンロードしたファイルをすぐに解凍できる様になっていれば大丈夫です。
(Mac OSXの場合はダブルクリックで展開します。windows7~の場合は右クリックのコンテキストメニュー「全て展開」を選択でOK)
3)その他のバージョンのOSは、MacであればApp StoreでWinArchiver Lite.appを検索してダウンロードしインストールしておきます。
Wiondwsであれば、下記のURLよりLhaplusをダウンロードし、インストールしておきます。
http://www7a.biglobe.ne.jp/~schezo/
スライド資料
2014年4月26日公開
90min.
このシリーズは1回で完結していますが、 1回から5回まで同じサイトがどんどん完成して行く形になっています。
1回づつ完結した出来上がり見本付きの演習ファイルがダウンロードできます。
第4回:初心者速習html+css【JQueryでTOP画像がクルクル動くようにしてみよう編】
初めてコーディングを学ぶ人や、本を読んだり参考サイトを見ながらコーディングしても崩れてしまってうまく行かなかった人のためのJQuery入門です。
今回はビルボード画像がインタラクティブに入れ替わるカルーセルの作り方を学びます。
1)Sublimeのインストール(授業中コードを打つのに使います)
下記のURLからダウンロードしてください。
http://www.sublimetext.com/2
設定は何も必要ありません。インストールして授業が始まる時間に立ち上げられる様にだけしておけば大丈夫です。
2)解凍ツール (授業中配布する教材の解凍に使います)
授業中にダウンロードしたファイルをすぐに解凍できる様になっていれば大丈夫です。
(Mac OSXの場合はダブルクリックで展開します。windows7~の場合は右クリックのコンテキストメニュー「全て展開」を選択でOK)
3)その他のバージョンのOSは、MacであればApp StoreでWinArchiver Lite.appを検索してダウンロードしインストールしておきます。
Wiondwsであれば、下記のURLよりLhaplusをダウンロードし、インストールしておきます。
http://www7a.biglobe.ne.jp/~schezo/
スライド資料
2014年4月27日公開
90min.
※録画授業を受講いただく前にご確認ください
授業内で使用するWordPressプラグインのURLが下記に変更になりました。授業中にスクー教務課が投稿しているプラグインは、現在有料のものになりますので、下記をご利用くださいませ。
▼本授業で使用するWordPressプラグイン
https://github.com/gilbitron/Nivo-Lightbox
また、授業内で配布している演習用素材のURLが開けない、という方はインターネットのセキュリティレベルを変更されるか、こちらのストレージからダウンロードしてください
▼演習用素材
http://bit.ly/13XJPtE
このシリーズは1回で完結していますが、 1回から5回まで同じサイトがどんどん完成して行く形になっています。
1回づつ完結した出来上がり見本付きの演習ファイルがダウンロードできます。
第5回:初心者速習html+css【JQueryで商品画像をポップアップさせよう編】
初めてコーディングを学ぶ人や、本を読んだり参考サイトを見ながらコーディングしても 崩れてしまってうまく行かなかった人のためのJQuery入門です。
今回は商品写真をクリックしたら大きな画像がポップアップするライトボックスの作り方を学びます。
1)Sublimeのインストール(授業中コードを打つのに使います)
下記のURLからダウンロードしてください。
http://www.sublimetext.com/2
設定は何も必要ありません。インストールして授業が始まる時間に立ち上げられる様にだけしておけば大丈夫です。
2)解凍ツール (授業中配布する教材の解凍に使います)
授業中にダウンロードしたファイルをすぐに解凍できる様になっていれば大丈夫です。
(Mac OSXの場合はダブルクリックで展開します。windows7~の場合は右クリックのコンテキストメニュー「全て展開」を選択でOK)
3)その他のバージョンのOSは、MacであればApp StoreでWinArchiver Lite.appを検索してダウンロードしインストールしておきます。
Wiondwsであれば、下記のURLよりLhaplusをダウンロードし、インストールしておきます。
http://www7a.biglobe.ne.jp/~schezo/
スライド資料