メインコンテンツはここから
redstock-ws.com/blog/CSS/...
先日、はてぶで見つけた気になる気になる記事。XHTML、CSSとjQueryの話
↑
現実問題、この間違いが横行しているのが現実。
毎日憤りを感じている私自身もW3Cの仕様書を読まないって
言うところに自分の甘さを知りました。
昨日は翻訳ツールを利用し読んでました。
日本にも正式な組織が出来て翻訳されてほしいな。（希望）
英語勉強しないとね。（切実）
2.3
jQueryは、Ajaxのフレームワークの一種。
Ajaxのフレームワークは他にprototype.jsや Yahoo! UI Library、Spryなどなど
なんとなく知っていたけど、実際どうして良いか分からず
手付かずだったんですが、上記の記事を読むとわりと簡単に
（外部javascriptを設定と簡単なソースを書くだけで）
手軽に使えそう。
○Dreamweaverのビヘイビアにもフレームワーク
そんなAjaxのフレームワークですが今後、Dreamweaverのビヘイビアにも
フレームワークは採用されるようでAjaxも当たり前になりそうですね。
ビヘイビアで僕が思い出し事はロールオーバーとかの
Javascript.
今はCSSでaタグにhover等の擬似クラスでやる事が
当たり前になっているけどその昔はドリさま（Dreamweaver）
にjavascriptを自動生成していただいてました。
まったく知識のない僕はその※ソースがトンデモなものと
も知らずに使ってましたね・・・（汗；
そんな事に気づいたのは少しだけjavascriptを勉強した後の話（＾＾；
Ajaxフレームワークを利用する側もやはり基礎知識は必要だと言う
当たり前の事実に到達しました。
もちろんこれはプロとしてのお話。
上記で書いた通り「Ajaxも当たり前」になると言う事は知らずにも
一般ユーザーは使うと言う事になります。
だれでも使える「Ajax（による効果）」を説明出来て正しく理解して
使える事がプロフェッショナルなんだと思う。
決して自分でAjaxフレームワークを作れなければって事ではない、
でもDOM（ドキュメント オブジェクト モデル）とかは知っておかないもう
通用しない世の中になるはず。
僕はマークアップエンジニアなので当然として（見栄えの）デザインを
担当するデザイナさんも知っておくべきですね。
話せないけど読めるレベルの英語なみに～
※：長い理由は古いブラウザに対応する為と言う理由がありました。
Macromedia（現Adobe)は色々と考えていたのです。
CSSネタ；position 要素のabsolute（絶対位置指定）とrelative（本来の位置からの相対位置指定）についてのテクニック～
久々のCSSネタです。
CSSでLayoutを実装すると必ず利用するのpositionやfloat。
慣れてくると実用的な「float」を使う機会が多いかと思いますが「position」も利用する機会もあるのでここにメモしときます。
「position」にはいくつか要素があるのですがその辺りはGoogleで調べて頂くとして（ごめんなさい）よく使われるであろう 「absolute」 と 「relative」 について触れていきます。こちらとか詳しいです。
「absolute」はブウザの左上を基点にBoxの位置を設定します。ちなみに左上は（top:0; left:0;)と記述します。
「absolute」を指定すると本来あるべき位置を無視しブラウザの左上から強制的に表示されます。
有りがちな間違いは入れ子になっている子要素を絶対値にした為に親要素が延びずに背景が表示されないとかだと思います。
次に「relative」ですがこちらは現在あるべき位置を基点に左上から位置を指定します。記述は先程とおなじく（top:0; left:0;)のようになります。
「relative」を理解した上で「absolute」の応用です。
「absolute」は先程の説明の通りブラザの左上を基点として位置を指定するのですが親要素の指定が「relative」になっていた場合はその親要素の左上を基点に配置するようになります。
よって「relative」で設定されているBOX内で自由に設定する事が出来ます。
まじめな話,WEB標準を提案する材料が・・・難しい。
当面は今の会社でやっていくつもりなので、今後の製作物は
WEB標準（※1xhml+CSS等）でとなんとか提案したいと考えています。
が、しかし実際問題これを提案するのはかなり難しい。
※2「 DTPの延長にしかなかったWEBの概念」が定着してる環境で
これを提案して理解を求めるには決定的な材料が足りない。
なんせ、私自身もCSSレイアウトは初めはTableレイアウトの進化形に
過ぎないと言う過ちを犯したものですから。
●WEB標準を提案する良く聞く理由（分かる限り）には
以下のようなもの があります。
1.※3結果論としてSEO,SEMに優れたサイトになる（なりやすい）。
2.ソースが簡略化されて音声ブラウザ等への配慮がしやすい。
3.将来、正しいhtml（xhtml）でないと見れなくなる（疑わしい！）
4.現在の流行、Web2.0的（個人的にそんな理由は認めない！）
5.利便性、拡張性に長けた造りになり※4動的なサイトの開発で
有効な手段になる。
そんでもって上記を会社で提案できるかを色々と模索し見ましたが・・・・
○1.2については・・・・
会社のサービスはユザビリティ、アクセスアビリティに
配慮していない。また今後もするつもりもない、（と思う）
のでこの方面からの提案は出来ない。
勿論、多少はした方が良いがターゲットが保々絞られているので
そこに向けたアプローチだけで事が足りるのも事実。
○3については・・・・
tableの入れ子のレイアウトで見れなくなるって言うなら
話は早いが、残念な事（？）に当面そうはならない気がする。
そして場合によってはtableレイアウトが必要な時もある。
やはりこの方面からの提案も出来ない。
○4..現在の流行・・・・
だからと言って現在の流行だとか、かっこいいとかそんな事で
やってしまうのはとても危険な事だ。
なぜならビジュアル面のデザインの考え方から変えないと
言うわいるWeb標準って形にならない。
○5.利便性、拡張性
やはり、これがもっとも提案出来る理由になる。
実際問題、プログラマーさんに渡すhtmlを簡略化で出来る事や
後の修正がCSSを外部ファイルにしておけばプログラムとの
平行作業がかなり可能になる。
結論としては5が一番現実的な提案になる。
ですがそれを提案するにも一番大事なものはコンテンツ制作に
関わる人間の考え方であると思う。
ディレクシター、デザイナー（ビジュアル）、
マークアップエンジニア、プログラマー
それぞれの方向が同じでないと結局今と何も変わらない。
そうなるとコンテンツ制作の概念から改革しないとならないわけで
これはかなり難しい。
道のりは長い・・・・・。
/***********************************************/
補足：
現在在籍する会社は某オンラインゲームを基盤とした
WEBサービスを提供する会社でございます。m(_ _)m
※1 xhtml+ｃｓｓがWEB標準と言う事ではないので。
※2実際この状況はまだまだ多いと思う。
※3あくまで結果論です。
※4プログラムを含むサイトです。
/***********************************************/
新年のプチラッキー
↓が当たりました。
Dreamweaver プロフェッショナル・スタイル
某派遣会社のサイトでアンケートに答えると抽選でもらえたのですが
当たったみたいです（＾＾）
Dreamweaver は使ってはいるけどまだまだ使いこなせてませんね。
この本によると色々と効率的な使い方が書いております。
テンプレートなんて使った事無かった。（＾＾；
Ajaxのフレームワークの活用も乗っているのでこの本を活用して
作業能率を上げれるようにしたいと思います。
といっても今すぐ仕事でって言うのは残念ながら無理なので
まずは個人サイトの作成からですね。
リストを利用したナビゲーションの私的な定番（06/10現在）
htmlを正しく書いているとナビゲーションに適切なタグはおそらくリストタグになる事が多いのではないでしょうか。
その場合に私が一番やりやすかった方法を記録しておきます。
htmlはこんな感じ↓
/************html****************/
※「＜」と「＞」は表示の事情により全角です。ご了承下さいm(_ _)m
＜div id="navi"＞
＜ul＞
＜li class="navi-home"＞＜a href="pass"＞home＜/a＞
＜li class="navi-blog"＞＜a href="pass"＞blog＜/a＞>
＜li class="navi-news"＞＜a href="pass"＞news＜/a＞
＜li class="navi-about"＞＜a href="pass"＞about＜/a＞
＜/ul＞
＜/div＞
/************html****************/
CSSはこんな感じです↓
/************css****************/
#header #navi a {
display:block;
overflow: hidden;
width: 100%;
height:0;
padding-top:35px;/*ナビゲーションボタンの高さ分パディングする*/
color:#FFFFFF;
}
#header #navi ul{
width:*****px;/*ナビゲーション全体の幅 liの合計の*/
margin:0 auto;
padding:0;
}
#header #navi li{
display:block;
float:left;
width:****px;/*ナビゲーションボタンの横幅*/
margin:0;
padding:0;
text-align:center;
}
/*ナビゲーションの数だけ用意する*/
#header #navi .navi-about{
background: url("imageのpass") left top no-repeat;
}
#header #navi .navi-about a:hover{
background: url("imageのpass") left top no-repeat;
}
/*ナビゲーションの数だけ用意する*/
/************css****************/
この例はボタンのサイズが全て同じ場合で記述していますがナビゲーションのサイズが
それそれ異なる場合は個別のクラスに横幅を設定すれば良いと思います。
CSSの各自の細かいプロパティはここでは割愛させていただきます。
辞書等を見てもらえればすぐに分かると思います。
このblogのナビゲーションにもこの方法を利用をしてます。
まだ（2006/10/10現在）Homeとblogしかありませんが良かったらご覧ください～
先日のネタのマージンの代わりにテキストインデントで左右のどちらかに飛ばす手法もえますがナビゲーションの場合はクリックすると横に長い線が出てくるブラウザ（Firefox等）があるのでやらない事にしています。
やり方として問題はないですが少しカッコが悪い気がするので～
これらの方法も先日紹介した↓この本にもっと丁寧に書いております。
くどいですが本当に良い本ですｗ
イメージの高さを指定してしまう。
CCSを利用しコーディングをしている時、同じ様にイメージを配置してもIE6とネットスケープやFireFoxで表示される高さが微妙にズレたりして悩まさせれた事がありました。色々と調べた結果以下の様にすると解決出来ます。
/*-------------------------------*/
img {
vertical-align: bottom;
}
/*-------------------------------*/
vertical-alignプロパティは、テキストや画像などの縦方向の揃え位置を指定する為に使用するものです。「vertical-align」についてはググッってもらえれば優良なサイトが見つかる思いますのでそちらを参考になさってください。
余談ですがこのスタイルはサイト全体に対してすべきなので先日書いたやり方で
言うとcommonに入れておくとベストだと思います。
…うーん、しかし相変わらずひどい文章。
（＾＾；
わざわざごらんのみなさん、本当にすいません。m(__)m
時々は直しますが何とぞ御了承下さい。
基本的に色々な事をなかなか理解しない私が見つけた手法ですのでわりと使えるものが多いと思います。
もうすでにそんなの余裕だよってって冷たい事は言わない方向でお願いいたしますw
IE4 Netscape4 に配慮する。
CSSでレイアウトを行う時に問題となるのは対象のブラウザをどうするかではないでしょうか。
現行の最新ブラウザ、いわいるモダンブラウザを対象とする場合が多いのですが
問題は・・・・
IE4・Netscape4
等のCSSにしっかり対応出来ないブラウザ。
正直なところこれらのブラウザにCSSでレイアウトするのは不可能・・・・
いやいや、断言は出来ませんがモダンブラウザとの共存はかなりハードだと思います(^_^;)
最新より少し手前のものに関してはがんばり次第だと思います。（出来ればやりたくないですが…）
そんなこんな？なのでこれらのブラウザは対象としないとします。
（対象とする場合はtabelでレイアウトする方が得策でしょう。）
しかし対象外にするとしても、そのままレイアウトが崩れるCSSを適用させるのは
作り手の横暴です。ユーザーに配慮していないとても酷い話です。
そこで「IE4・Netscape4」にはCSSを適用しないようにする方法をとる事とします。
方法は以下の通りです。↓
○Windows版IE4
→@importで弾く
○Netscape4
→@importによる取り込みに未対応、media属性でscreen以外を指定
例を出すとこんな感じです。
※今回は読み込むCSS名をimport.cssして例を書きました。
1、htmlのheadの部分に以下の用に書き読み込みようのCSSを読み込みます。
読み込んだ先のCSS（今回だとimport.css）には※スタイルは記述しません。
なのでスタイルの記述されているCSSを別途用意します。
私の場合は以下のようにレイアウトに合わせて分けるようにしています。
common→全体に関わるものを記述。基準とするフォントの指定やスタイルの初期化等。
header→ナビゲーション等のヘッダー部分。
primary→メインコンテンツの部分。
secondary→サブコンテンツの部分。
footer→フッター部分。
3、読み込んだ先のCSS（今回だとimport.css）に@importでスタイルを記述したCSSを
を読み込む
/*import.css*/
@charset "utf-8";
@import url(common.css);
@import url(header.css);
@import url(primary.css);
@import url(secondary.css);
@import url(footer.css);
/*import.css*/
このようにする事でCSSをまったく読み込ませない状態になります。
ここで大事になるのが先日書いた htmlを正しく書く です。
htmlを正しく書いていればCSSが切れている為に見た目は質素になりますが、
最低限の情報を収集する事は可能になります。
htmlを正しく
CSSでレイアウトを組む事を考えると※構造化されたhtmlを書く事が重要になってくる。
私はCSSを勉強する前段階でこの辺を（何故か？）勉強していたのですが実際役に立ってます。
h1～6の見出しタグ
段落のp
改行のbr
…etc
tableレイアウトだと結構、無視される（と言うよりは無視せざるえない）のですがCSSになると避けて通れない。
しかし発想の転換で言い換えるとこれを押さえておくとCSSの習得も楽になります。
とかなんとか言いながら私の今年の残りのお仕事は残念ながらtableレイアウトで
コーディングをする事になりそうです。
実際全てのサイト構築がCSSだけ済ますというわけには行きませんね。
久々のtableレイアウトなので少し予習をしてたのですが
tableでも結構、綺麗なソースが（個人的に）書けていました。
うーん、やはり基本あって応用や例外だなぁ、CSSがどうとかの前にhtmlを
ちゃんとやろうと思う今日この頃です。
速習Webテクニック スタイルシート 上級レイアウト（オススメ書籍）
先日より少しずつ投稿しているCSSのテクニックは、色々なサイトや本を参考いたしました。
その中の一つがこちらの本。
速習Webテクニック スタイルシート 上級レイアウト
上級レイアウトとありますが本当に基本（ＣＳＳの記述の仕方やマークアップの基本）を押さえた方はこちらを読むと実際にやりたかった事が出来るようになります。
ある程度の知識はつけた。
でも実践経験無いし今一自信が持てない。
なんて思っている方に必見です。
スタイルを定義前にブラウザ初期化する
ブラウザにはそれぞれデフォルトのmarginやpaddingが
指定されていたりします。
それを以下のような方法で初期化しています。
厳密に言えばどちらも0（ゼロ）にするので
初期化ではないのかもしれませんがおまじない
だと思って書いています。
/*ブラウザのデフォルトの指定をを初期化する*/
* {
margin:0;
padding:0
}
/* 初期化ここまで*/
具体的な意味については他の優秀な方のサイトで
ご覧下さい。
m(_ _)m
追記～
ちなみに↓この本に詳しく書いています。
しつこいですがオススメですw
float（回り込み）を上手にclear（解除）する
CSSを勉強し出して基本を押さえた頃に
やってきた最大の難関がfloat（回り込み）の扱い。
※大きなブロックのfloat（回り込み）は
大体の場合footer部分のブロックにclearを
指定すれば大概は解決するのですが
問題はclearを設定する部分がない場合。
例えばこのＢＬＯＧで言うとheaderの部分の
ナビゲーションのリストがfloatを使っています。
それを以下のような方法で解除している。
#header:after {
content: ".";
display: block;
height: 0;
font-size: 0;
clear: both;
visibility: hidden;
}
これにより例で言うとID headerの中のfloat属性の
回り込みをheaderの閉じた後に解除しています。
（ID又はclass名）:after {
content: ".";
display: block;
height: 0;
font-size: 0;
clear: both;
visibility: hidden;
}
※この辺はいずれ入門編をつくろうと思いますので割愛したします。
CSSのカテゴリーを作りました。
CSSのカテゴリーを作りました。
忘れないうち今覚えている知識を書き出しておこうと思います。
間違っている点のご指摘やご意見等のコメントをいただければ
嬉しい限りです。
よろしくお願いいたしますｗ