nucleusの時間です

面白いツールを見つけました。

Firefox（タブブラウザ）のプラグインなんですけど、これを入れるとそのページのCSSが簡単に見えるようになるんです(^^)
参考記事：「ソースを見てまず勉強」
View formatted source (format source extension)

これはまた違うけど、その場でソース打ってすぐ確認できるので便利。
W3CShool: Tryit Editor v1.4

いちいち他のソフトを起動させてコピペなんて面倒ですもんね。

：1拍手

cssを勉強してて「contentプロパティ」なるものを初めて聞きました・・オイオイ自分
これってblockquoteとかとあわせて使うと便利なんです(^^)v
Part 1. Let's begin CSS : Chapter 4. “要素の操作”←を参考にしました。

今まで適当にCSSを齧ってきていたのが痛烈に実感できます、もっと基本を固めないと仕事なんておこがましいや（汗）

：0拍手

スタイルシートについて分かりやすく簡潔に書いてあるサイトを見つけました。
CSSのセレクタ
けっこう適当に齧っていると適当にしか覚えていないので、結局、使い物にならない知識になっちゃうって事にやっと気が付きました。
反省、反省(^^;

：0拍手

CSS1,CSS2では16の色名が定義されているんだそうです。
参考サイト：スタイルシート2 - CSSのプロパティ
red・lime・blue・black・gray・silver・white・maroon・gree・navy・purple・olive・tea・yellow・fuchsia・aqua
少なくともこの色だけでも覚えておけば便利に使えそう(^^)
いちいち色番号なんて覚えてられないし、液晶だと細かい色って見えにくいんだよね。

：0拍手

スタイルシートの記載方法についてツボが書かれてあるサイト発見しました。
スタイルシートの基本 -- ごく簡単なHTMLの説明

カスケーディングを利用した一般設定と局所設定

この優先順位の仕組みを利用して、(1)サイト全体の共通スタイル、(2)セクションのスタイル、(3)その文書特有のスタイル、(4)ある場所の特定のスタイルといった形でスタイルを使い分けることができます。
(1)(2)を外部スタイルシートで（この順序で）指定し、(3)をstyle要素で、 (4)をidセレクタやstyle属性で指定するわけです。
こうすることで、全体の統一性を保ち、確実なメンテナンスを行いながら、セクションや文書ごとに個性的なスタイルを適用することが可能になります。スタイルシートはまずサイト全体に適用する一般的なものを設計し、それから順次セクション、文書と局所的なものを加えていくと効果的に使うことができます。

「あっ！なぁーるほど」と思ったのは私だけでしょうか？(^^;
どっちみち、構成力が必要になるのは間違いないようです。
CSSエディタがあってもそれだけではダメみたいな。

・・・いまさらながら「そうか！」と納得しているなんて「今まで見よう見真似」ってのがバレバレですね。どうしてもっと早くから知り合えなかったのかしら（涙）

：0拍手

やっとわかった・・・・回り込みさせたくない場合には、要素に
>float: none;
>clear: both;
を入れれば、その要素を当てられたコンテンツは回り込まないんだ。
頭では理解しているんだけどなかなか感覚的に理解できてないアホな頭。
あーん、ちゃんとした作成ソフト欲しいよぉ、手打ちは厳しい(T_T)

ADP: floatレイアウトでつまづかないためのTipsに「そのものズバリ」って私の本心が書いてあった(^^;
>floatを使ってレイアウトに挑戦といっても、実際やろうとするといろんなところでつまづく。けっきょく、floatを使う場合はいつも行き当たりばったりになってしまい、CSSなんて嫌いだ！ということになりかねないので・・（略）
まさにその通りなのです～、部分は理解していても全体が繋がっていないので結局わやくちゃになって「面倒だ」とお決まりの結論・・・いかん、いかんぞー！今が理解するチャンスなんだ。
このページ、イロハが書いてあって参考になります(^^)

>すべての要素のmarginとpaddingを0にしておく。
>セレクタに対してwidthとpaddingを同時に指定しない。
なぁーるほど、中身の方でpaddingなんかをしてやれば外が決まってるからレイアウトも崩れないってワケね、納得納得！

>position: absolute
absoluteって何？しっかり忘れてる(^^;調べとこ・・

★スタイルシートリファレンスに
static（初期値）
relative（相対値）
absolute（絶対値）
fixed（絶対値の固定）
・・の図解が載ってました。

：0拍手

CSSで段組しよう　-実録！CSS編-に長年の疑問が解明されていました！
>IE（後方互換モード）とOpereやFireFoxなどのブラウザではDIVなどのボックス要素の横幅の計算方法が違うんですよ(T_T)。IEでは borderまでがWidth幅ですが、他のブラウザではMarginまでがWidth幅なんで漠然とかくと段組が崩れる可能性があります。

そぉーなんだよね、ブラウジングの基本をIEにするとNNとかで大いに崩れるんですよ。
そっか、計算方法の基準が違ったのかぁ、統一して欲しいなぁ。IEはタブで開けないし、不便といえば不便だし。

IEとNNのBOXの計測方法の違いについて・・・を読んでいてここにも長年の謎が解き明かされてました。
>position:static（デフォルト）

staticってデフォルトの事を言うのかいな（汗）
これがね、私のHTML作成ソフトには記載がなくて「ナンだろう？」と不思議でしょうがなかったのだ。
なーんだ、早くそう言ってくれればよかったのに。（基本の基本で書かなくても知ってるだろう？って事かも）
でも、デフォルトって事は使用する物によってデフォルトがあるんだよね、それを知らないとマズイな。

>margin
>borderの外側の余白です。position:static（デフォルト）状態では、隣り合うBOX要素のmarginと競合し、相殺されます。

「相殺」ってこの場合、何を意味するんだろう。
単純に言うと「消しあう」みたいな事だよね。重なって表示されるとか？干渉しあうとか？

なんだか基準の基準で躓いている気がしてならないのですけど、とほほほ。
まず、BOX配置を考える時には最初にBOX領域（大きさ）じゃなくてcontent領域なのかな？たいてい、記事にはpaddingとかmarginとかつけるし。
どっちを基本にしたらいいのだろう？

文章とかを作る場合は、骨を書いから肉付けをするのが基本だと思うんですけど、CSSはどうすんだろうな？最低限欲しいcontentの幅とかもあるし・・全体的な列の大きさを決めちゃうと「あら？内容が小さくて不恰好」って事にもなるし（体験済み）
なかなか難しいなー、これも「慣れ」なのかな？

：0拍手