おためし受講中

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/

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

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