HTML+CSS実践

第1回|HTML+CSSのコーディングルールについて学ぶ

おためし受講中
  • 授業で使用する教材

    教材はありません

「授業フィードバック」で、授業の感想を教えてください!

チュートリアルは、こちらの「その他のオプション」からいつでも確認いただけます。

コピーしました!

ここには授業中のやりとりが表示されます

生放送でのコメントが再生されています

【前半】授業
  • 自己紹介&アジェンダ
  • 00:00:13〜(00:40)
  • コーディングルールについて
  • 00:00:53〜(03:32)
  • 前回のおさらい:スライス切り出しをやってみよう
  • 00:04:25〜(02:17)
  • 授業で作ったコーディングの画像を、差し替えてみよう
  • 00:06:42〜(00:41)
  • imgフォルダーの中身を切り出したファイルに差し替えてみよう
  • 00:07:23〜(02:49)
  • 画像化したフォントをいれてみよう
  • 00:10:12〜(03:23)
  • トップ画像をカルーセルでスライドさせる為に、画像を切り出してみよう
  • 00:13:35〜(02:58)
  • ダミーの文字をコーディングで埋めてみよう
  • 00:16:33〜(02:52)
  • 上手く作成するコツとは
  • 00:19:25〜(01:45)
【後半】質疑応答
  • Q:今回のコーディングで気をつけるところはありますか?
  • 00:21:10〜(01:07)
  • フリーではなく一般的な明朝体でも、CSS:font-familyで指定ではなく、画像変換する方が良いでしょうか?
  • 00:22:17〜(02:43)
  • Q:画像の拡張子は統一した方が良いですか?
  • 00:25:00〜(01:00)
  • Q:h1をdisplay:note;でかくしており、text-indent:-9999px;とかで隠す方法もあると思うのですが、SEO的にdisplay:note;の方が良いですか?
  • 00:26:00〜(02:04)
  • Q:テキストの場合、text-indent:-9999px;とかでテキストを見えなくするのと、displayで見えなくするのってどちらが推奨とかってありますか?
  • 00:28:04〜(01:10)
  • レポート課題発表
  • 00:29:14〜

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

再生位置挿入 資料挿入
筆記アシスト
ONOFF
    全4回 2014年6月10日公開
    HTML+CSSのコーディングルールについて学ぶ

    HTMLとCSSを使って、150分で簡単なWEBサイト制作】全6回の4回目です。

    WEBデザインのためのPhotoshop】全3回で制作したカンプからビルボードとサムネールをスライスで切り出しました。これでサイトを制作する準備が整いました。

    jQueryを設置してインタラクティブなサイトを完成させる前に、htmlとcssのコーディングルールについて詳しく勉強して行きましょう。

    5月7日の「Webデザインの骨組み「ワイヤーフレーム」を学ぼう」からadobe クリエイティブクラウドの体験版を使用してこられた方は、体験期間の1ヶ月が終了していますので、生授業ではコーディングツールはSublime Text2を使用していきます。

    adobe クリエイティブクラウドは月単位の課金が可能です。既にDream Weaver(ヴァージョンは問いません)をお持ちの方、adobe クリエイティブクラウドに課金して利用を続行する方はDream Weaverを使用して頂いてかまいません。

    サイト制作の大まかな流れは、下記の様な物になります。

    1)クライアント(お客様)へのヒヤリング
    2)ターゲット設定
    3)サイト設計(ワイヤーフレーム)
    4)制作仕様書策定(デザインルール、コーディングルール策定)
    5)開発(デザイン&コーディング)
    6)ローカルテスト
    7)テストサーバーレビュー(クライアントチェック)
    8)リリース(本サーバーアップ)
    9)ランニング(SEO解析)
     
    この演習では、5番の開発の部分です。
    完成した静的ページをユーザーさんのアクションでインタラクティブに動くページにブラッシュアップしていきます。

    受講にあたって準備するもの

    1)Sublimeのインストール(授業中コードを打つのに使います)
    下記のURLからダウンロードしてください。
    http://www.sublimetext.com/2
    設定は何も必要ありません。インストールして授業が始まる時間に立ち上げられる様にだけしておけば大丈夫です。
    ※DreamWeaverが慣れている人は、こちらを使用されてもかまいません。

    2)解凍ツール (授業中配布する教材の解凍に使います)
    授業中にダウンロードしたファイルをすぐに解凍できる様になっていれば大丈夫です。(Mac OSXの場合はダブルクリックで展開します。windows7~の場合は右クリックのコンテキストメニュー「全て展開」を選択でOK)

    3)その他のバージョンのOSは、MacであればApp StoreでWinArchiver Lite.appを検索してダウンロードしインストールしておきます。
    Wiondwsであれば、下記のURLよりLhaplusをダウンロードし、インストールしておきます。
    http://www7a.biglobe.ne.jp/~schezo/

    教室画面の機能をご紹介します

    学習機能を活用して、効率よく学習しましょう!