LIVE
ON AIR

21:15 - 22:15

C#実践 -UWPアプリケーションとXAML入門②- 生放送中

挫折した人のための、初心者速習html+css【2カラムボックスモデル編】

【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/

詳細を開く
挫折した人のための、初心者速習html+css【2カラムボックスモデル編】
2014年3月7日公開
01:30:00
  • 自己紹介&アジェンダ
  • 04:12
  • htmlとcssの簡単なお話
  • 01:26
  • 本をwebであらわすと?
  • 03:40
  • webページの組み立て方 html編①
  • 01:37
  • はさまないとどうなる
  • 04:16
  • webページの組み立て方 html編②
  • 01:45
  • webページの組み立て方 css編①
  • 03:21
  • body内の組み立て方html編③
  • 01:38
  • body内の組み立て方html編④
  • 04:40
  • webページの組み立て方 css編②
  • 07:43
  • 早速書いてみよう!
  • 03:20
  • セリフを挿入してみる
  • 02:18
  • cssのリンク設定を書き込む
  • 03:50
  • ブラウザで確認してみる
  • 02:59
  • asideのcssに追加してみる
  • 03:01
  • footerのcssをチェックしてみる
  • 03:22
  • W3Cでコードのチェックをしてエラーをみる
  • 03:17
  • header.txtの内容をコピー&ペーストする
  • 03:12
  • articleのコンテンツを制作する
  • 04:18
  • floatするナビの組み立て方
  • 03:46
  • Q:先生の過去3回の授業と今シリーズの全5回の授業を電子書籍化に!
  • 01:03
  • Q:タグ打ちをする時にsublimeやドリームウィーバーなどありますが、作っているwebサイトを見ながらするのに、他に便利なテキストエディタなど、ありますか?
  • 02:34
  • Q:ブラウザ間の見え方の標準化のファイルは更新が多いそうですが、いちいちダウンロードしないと使えないものなんでしょうか?
  • 01:23
  • Q:floatの時のoverflow:hiddenの件について
  • 00:35
  • Q:ナビゲーションバーはnav中で、ulタグを書けばいいのですか?
  • 02:50
  • Q:sublimeの使い方はどこで勉強すればいいですか。
  • 03:38
  • 課題発表
開く
挫折した人のための、初心者速習html+css【4ページのサイトマルッと制作編】
2014年3月21日公開
01:30:00
  • 自己紹介&アジェンダ
  • 03:45
  • 質問 過去の授業は受けましたか?
  • 01:56
  • サイト設計における大前提とは?
  • 02:49
  • サイトの中にある「ナビゲーション」って?
  • 04:08
  • なぜ「パンくずリスト」という名前なのか
  • 01:50
  • パンくずリストと呼ぶ理由
  • 03:50
  • CSSの記述の順番
  • 01:43
  • ドット絵風のCSSの当て方
  • 00:54
  • spanタグに指定するCSS
  • 00:30
  • コーディングが楽になるPCコマンド一覧
  • 01:41
  • さらにコーディングが楽になる「sublime」とは?
  • 04:02
  • index.htmlにsublimetextで開き、コードを書き込む
  • 03:25
  • 【sublimeの便利な機能】<article>から</article>までを簡単にコピーする方法
  • 03:07
  • sublimeでdps.htmlを開く
  • 04:21
  • 制作データを保存する
  • 04:11
  • ”.role”部分を指定する 〜文字の大きさや色を指定する方法〜
  • 04:00
  • margin rightで余白を調整する
  • 04:08
  • フォントをcssで設定する
  • 03:24
  • paddingで隙間を調整する
  • 05:29
  • line-haightで行間を調整する
  • 03:45
  • Q:今後、スキルアップにあたって、ネットや書籍で勉強する際、注意すべき点はありますか?
  • 04:15
  • Q:WEBフォントって初めて使いました。どんな環境のブラウザでも見られるんですか?
  • 05:55
  • Q:WEBフォントは商用などの使用は自由ですか?
  • 02:20
  • Q:練習するのにお勧めのWEBページはなんですか?
  • 03:25
  • Q:今後はHTML5のみ覚えればいいんでしょうか?
  • 01:20
  • Q:先生のお勧めのカラースキーマやプラグインはありますか?
  • 06:47
  • 課題発表
開く
挫折した人のための、初心者速習html+css【同一サイトがデバイスで切り替わる!レスポンシブ編】
2014年4月13日公開
01:30:00
  • 自己紹介&アジェンダ
  • 03:48
  • レスポンシブデザイン理論に軽く触れる
  • 02:30
  • レスポンシブなスタイルシートについて
  • 02:20
  • 読みにくいサイトの紹介
  • 02:00
  • 読みやすいサイトの紹介
  • 02:10
  • スマホサイトのための考え方
  • 02:45
  • PCサイトのための考え方
  • 02:20
  • CSSを切り替えるにはメディアクエリーを使います
  • 04:15
  • htmlファイル内に、css切り替えの記述する
  • 04:40
  • タブレット用からスマホ用のcssを作成する際の注意点
  • 03:40
  • スマホのUXとPCのUXとの最大の違い
  • 03:05
  • 指で操作する/Flashが使えない点に注意する
  • 03:30
  • AppleのDesigning Great Apps
  • 05:17
  • コーディング前のお約束
  • 02:07
  • sublimeの最大のメリット
  • 04:34
  • コーディングを始める
  • 03:47
  • サンプルファイルをsublimeで開く
  • 04:30
  • 各デバイス向けのcssファイルを開く
  • 04:40
  • タブレットサイズに対応することを確認
  • 03:10
  • 記事や複数カラムをスマホ向けに編集する
  • 04:55
  • スマホ向けの表示を確認する
  • 02:15
  • positionの活用で座標を指定する
  • 02:59
  • 実際にpositionを指定する
  • 05:23
  • Q:先生は世の中の全サイトのRWD化は望ましいと思いますか?
  • 02:23
  • Q:レスポンシブのデザインをする場合、メニューボタンを画像にする場合の注意事項ってありますか?
  • 02:04
  • Q:Bootstrapなどのフレームワークを使うべきか、先生のように自前で作る方がいいのか?どちらがいいですか?
  • 00:57
  • Q:scblimeを開いてDLしたコンテンツをファイルから開いたのですが、、、
  • 04:10
  • Q:カラムの幅の計算方法を教えて下さい。
  • 08:32
  • 課題発表
開く
挫折した人のための、初心者速習html+css【JQueryでTOP画像がクルクル動くようにしてみよう編】
2014年4月26日公開
01:30:00
挫折した人のための、初心者速習html+css【JQueryで商品画像をポップアップさせよう編】
2014年4月27日公開
01:30:00
  • 自己紹介&アジェンダ
  • 03:31
  • jQueryとは
  • 02:58
  • jQueryのライブラリとプラグイン
  • 03:17
  • jQueryプラグインを麻婆豆腐に例える
  • 03:20
  • jQueryのサイトからプラグインを入手
  • 04:40
  • jQueryのオススメ参考サイト紹介
  • 00:45
  • 実習前の準備
  • 03:25
  • sublimeでhtmlファイルを開くための方法
  • 03:50
  • 演習で使うプラグインとデーターをダウンロード
  • 05:15
  • コードを書いてみよう!
  • 03:11
  • Nivo-lightboxを演習用フォルダに入れる
  • 03:34
  • cssファイルをリンクさせる
  • 03:30
  • javascriptを入れる
  • 04:55
  • sablime画面でスクリプトタブを指定する
  • 03:55
  • lightboxの実装時の注意点
  • 02:55
  • cssで閉じるボタンを付ける
  • 01:55
  • ../で同一階層の別フォルダを参照する
  • 04:20
  • Play with settingsでエフェクトをつける
  • 03:58
  • エフェクトを確認する。
  • 03:42
  • 画像の文字の色を変えてみよう!
  • 04:00
  • Q:面白いので、jQueryをサイトに沢山実装していくと、ソースが重くなりウェブ表示がどんどん遅くなりますか?
  • 02:33
  • Q:jQueryの相性について
  • 00:43
  • Q:closeが文字のまま、fadeScalwしたポップアップのバックグラウンドが透明のまま色付けられ、透明度が操作できずです。
  • 01:27
  • Q:jQueryって使用する注意点は書き換えはいけないところだけでいいですか?
  • 02:02
  • Q:jQueryの質問ではないのですが、自分で書いたブログをバックアップできる、おすすめソフトはありますか?
  • 01:07
  • Q:index.htmlとtank.htmlやdps.html、healer.htmlは同じコードの部分(headerやaside)ありますが、共通コード部分を簡単にひとまとめにする方法はないでしょうか?
  • 01:32
  • Q:chome,ieはOKなのですが、F.Foxでは横に 画像がずれてしまいます。
  • 02:09
  • Q:ライセンスなどはあるのでしょうか?
  • 03:34
  • 課題発表
開く
スライド資料
担当の先生
受講生代表
  • 未定

    未定

受けたいランキング
新着の生放送授業
関連授業