本日は [CSS Nite in TAKAMATSU Vol.3 [ CSS Nite ビギナーズ HTML + CSS 編 ]](http://cssnite.webridge-kagawa.com/outline/#vol3) に参加しました。
各セッションの内容
———————————————————————-
各セッションの内容を全部書くのは無理なので、気になった所だけ書いています。
### HTML + CSS のワークフロー / 山田恵理子さま ( 株式会社ゴーフィールド )
– HTML + CSS のメリット
– メンテナンス性の向上
– SEO 効果
– アクセシビリティの確保
– 様々なデバイスやソフトウェアで利用できる
– ウェブ標準に準拠
– HTML + CSS で意識をする事
– 構造化された HTML を書く
– HTML + CSS のワークフロー
– テキスト原稿を HTML でマークアップ
– HTML にデザイン実現の為の指定を加える
– ブラウザで確認しながら CSS を書いていく
– 制作のガイドラインがあれば複数人で作業する時効率が良い
– Firebugs 等の使い方
– 旬の情報を集める
– 自分で試してみる
### 押さえておきたい XHTML のキホン 10 / 多田吉臣さま ( 有限会社ヘルツ )
– XHTML ってなに？
– XHTML 1.0 が現在の主流
– 書式が厳格になっている
– マークアップ
– 意味が分かるように印を付ける事
– XHTML・CSS の役割
– XHTML は構造
– 文章構造を考える
– テキスト原稿から XHTML へ
– タグと要素
– 基本の書式、要素について
– 空要素と言うのもある
– 要素に特定の機能を持たせる属性と属性値
– 親要素と子要素
– ほとんどの要素が中に要素を含める事ができる
– ブロックレベル要素とインライン要素
– ブロックレベル要素
– h1～h6 要素
– p 要素
– ul 要素
– ol 要素
– dl 要素
– table 要素
– form 要素
– div 要素
– インライン要素
– a 要素
– img 要素
– br 要素
– em, strong 要素
– span 要素
– ID とクラス
– 要素にさらなる意味を与える
– ID とクラスの使い分け
– ID とクラスのネーミングの注意
– XHTML の構造
– XML 宣言
– 文章型宣言
– 後方互換モード
– ページの基本構成
– meta 要素
– link 要素
– style 要素
– script 要素
– コメントと文字参照
– まとめ
– 文章構造を考えてマークアップ
– セオリーはほぼ決まっている
– 適切なマークアップは人を幸せにする
### マークアップ選びのコツ / 益子貴寛さま ( 株式会社サイバーガーデン )
– マークアップを学ぶのに便利な方法
– CSS をオフにして見るのが基本
– ソースコードを確認する
– Firefox + Web デベロッパー拡張機能が便利
– マークアップで迷いがちな所
– ロゴ部分の見出しレベルは h1?
– ロゴ部分とタイトルのダブル h1 なるものもあるらしい
– 順不同リストは色々な所で使える
– リストは複数項目が基本
– 複数のマークアップの候補がある場合。ul, dl, table?
– 制作者の好みやユーザーの利便性
– 実際にマークアップしてみる
– 検証、答え合わせ、改善案
– まとめ
– 適切な要素選びの積み重ね
– 他のサイトから学ぶ事が大切
– マークアップの理由が説明できる事が大事
### CSS のキホン / 筒井志信さま ( Webridge Kagawa )
– CSS とは？
– ビジュアルデザインを付与するもの
– 現在一般的なのはは CSS 2.1
– CSS の書き方
– セレクタ、プロパティ、値
– 行末のセミコロンを忘れずに
– コメントで見やすく、デバックにも使える
– CSS の適用方法
– リンク、エンベット、インライン、インポート
– 一行目に文字コードを指定する
– メディアタイプの指定もできる
– セレクタ
– ユニバーサルセレクタ
– タイプセレクタ
– 子孫セレクタ
– クラスセレクタ
– ID セレクタ
– セレクタのグループ化
– 擬似クラス・擬似要素
– プロパティ
– border
– padding
– margin
– width
– height
– ボックスモデル
– IE5, IE6 の後方互換モードでは、ボックスモデルの解釈が違う
– CSS の単位
– スタイルの優先順位
– 後から書いた物が優先される
– 後から読み込みした物が優先される
– 詳細度=セレクタの強さの合計
– スタイルの継承
### これだけは押さえておきたい CSS レイアウトの基本 / 小林信次さま ( 株式会社まぼろし )
– コンテンツをセンタリングするテクニック
– ２カラム化のテクニック
– floar + clearfix
– position プロパティ
– まとめ
デモ中心で分かりやすかったです。
### CSS デザインの実用テクニック / 植田圭嗣さま ( ライジング )
– リストで作るナビゲーションデザイン
– テキスト
– float: left; ( おすすめ )
– display: inline;
– ソース上の改行で空白ができる
– 幅、高さ、マージン、パディングの指定が無効になる
– 画像置換
– a 要素はインライン要素なので幅と高さの指定ができない
– display: block; で幅と高さが指定できるようになる
– 文字を消す方法
– text-indent: -9999px; ( おすすめ )
– display: none;
– バックグラウンドプロパティでロールオーバー
– CSS Sprite
### CSS デザインのブラウザ調整 / 鍋坂理恵さま ( フォトアンドデザインサン・サン )
– ブラウザ調整の目的
– 様々なブラウザで出来るだけ見た目を揃える事
– ターゲットブラウザを決める
– アクセス解析でブラウザのシェアを確認する
– クライアンと事前に決めておく
– 開発の基準ブラウザを決める。Firefox? Safari? Chrome?
– ブラウザの調整のワークフロー
– バリデーションツールの利用
– IE tester がおすすめ
– Adobe BrowserLab もおすすめ
– オニオンスキン表示
– CSS ハック
– 特殊な書き方で特定のブラウザにスタイルを適用する
– ハック用のスタイルファイルは分割しておく
– コンディショナルコメントで読み込みを制御する
– 良くある IE6 のバグ
– ボックスモデル解釈の違い
– ダブルマージンバグ
– hasLayout
– 原因の特定は大きい所から小さい所へ
### JavaScript ライブラリと jQuery / 西畑一馬さま ( to-R )
– JavaScript ライブラリ
– Lightbox2 – 画像拡大
– alphafilter.js – IE6 で透過 PNG
– yuga.js – ロールオーバー用
– jQuery
– HTML とCSS の操作が出来る
– ゼブラテーブルができる
– イベントを制御できる
– タブパネルの実演
### HTML5 と CSS3 / 益子貴寛さま ( 株式会社サイバーガーデン )
– Web アプリなどの先鋭的な所から普及して行くんじゃないか？
– Google Chrome のサポート状況が良いらしい
– HTML5 と CSS3 を使う事でよりリッチなユーザー体験を提供できる
– Dreamweaver CS5 に HTML5 コードヒントなどの拡張がある
– CSS3 は別ファイルで管理した方が良さげ
– iPhone, iPad だと使える？
イベント全体を通しての感想
———————————————————————-
基本的な所を再確認できて良かったです。
スピーカーとスタッフの皆様、お疲れ様でした＆ありがとうございました！
[…] CSS Nite in TAKAMATSU Vol.3 [ CSS Nite ビギナーズ HTML + CSS 編 ] に参加しました | Bowz::Notebook […]