CSS Nite in TAKAMATSU Vol.3 [ CSS Nite ビギナーズ HTML + CSS 編 ] に参加しました

本日は CSS Nite in TAKAMATSU Vol.3 [ CSS Nite ビギナーズ HTML + CSS 編 ] に参加しました。

各セッションの内容

各セッションの内容を全部書くのは無理なので、気になった所だけ書いています。

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 レイアウトの基本 / 小林信次さま ( 株式会社まぼろし )

  • コンテンツをセンタリングするテクニック
  • 2カラム化のテクニック
    • 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 だと使える?

イベント全体を通しての感想

基本的な所を再確認できて良かったです。 スピーカーとスタッフの皆様、お疲れ様でした&ありがとうございました!

1 Comment

コメントを残す

メールアドレスが公開されることはありません。