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

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です