だるかぶ
ご訪問ありがとうございます。ゆっくりしていってね。（本ページは広告を含みます。）
2010年6月26日、CSS Nite in TAKAMATSU Vol.3 [ CSS Nite ビギナーズ HTML + CSS 編 ] に参加しました。
各セッションの内容を全部書くのは無理なので、気になった所だけ書いています。
この記事の目次 非表示
- #️⃣ HTML + CSS のワークフロー / 山田恵理子さま ( 株式会社ゴーフィールド )
- #️⃣ 押さえておきたい XHTML のキホン 10 / 多田吉臣さま ( 有限会社ヘルツ )
- #️⃣ マークアップ選びのコツ / 益子貴寛さま ( 株式会社サイバーガーデン )
- #️⃣ CSS のキホン / 筒井志信さま ( Webridge Kagawa )
- #️⃣ これだけは押さえておきたい CSS レイアウトの基本 / 小林信次さま ( 株式会社まぼろし )
- #️⃣ CSS デザインの実用テクニック / 植田圭嗣さま ( ライジング )
- #️⃣ CSS デザインのブラウザ調整 / 鍋坂理恵さま ( フォトアンドデザインサン・サン )
- #️⃣ JavaScript ライブラリと jQuery / 西畑一馬さま ( to-R )
- #️⃣ HTML5 と CSS3 / 益子貴寛さま ( 株式会社サイバーガーデン )
- #️⃣ イベント全体を通しての感想
#️⃣ 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 だと使える？
#️⃣ イベント全体を通しての感想
基本的な所を再確認できて良かったです。 スピーカーとスタッフの皆様、お疲れ様でした＆ありがとうございました！
現場からは以上です。それでは、またッ！！！
だるかぶ
