input type='text' とtextareaの違いメモ

input typeでtextにした際は、textboxの長さはsizeで指定。

一方、textareaの場合は、rows,colsで指定。

メモでした。

backgroundの省略形と、CSSでの一枚画像でのロールオーバー

backgroundというプロパティなら、backrgound:url(button.png) no-repeat 0px 0px;
などという風に複数の値を記述可能。

background-imageならイメージのURLだけ。当然ですが。。

それで、CSSのみでロールオーバーさせる場合、
上下にロールオーバー前と後の両方の画像を作って、
a要素をdisplay:blockにし、
backrgound:url(button.png) no-repeat 0px -30px;
みたいに上などに適宜ずらしてやればOK。

参考になったページ：http://www.acky.info/tips/css/00014.html

センタリングとwidthの関係

ある領域をセンタリングしたい場合、
{
text-align:center;
margin:0 auto;
}
とするのは便利だが、
widthで値を指定してやらないとセンタリングされない。

当たり前のことかもしれないが、最初ちょっと思いつかず、
「なんでセンタリングされる場合とされない場合があるんだろう？！」と思っていた（笑）。

メモでした。

IE5のimgにfloatでカラム落ち。。

IE6までは大丈夫なのに、IE5.5ではカラム落ちする現象が発生し、悩みました。（どうもIE7でも落ちていた様子。自分の環境のIE７はIE testerなので再現せず。。）

親ボックスのwidthに対して、左右のボックスwidthをぴったり設定しているのに落ちるから、「なんでだろう！？」と思っていました。

判明した原因は、左と右にfloatでカラムを作った際、右はdivでくくっていたのに、左は単にimgにfloat:leftを振ってやっていたことが原因と判明。

IE5だと、imgのborder:0；にしておいてやっても、何かが邪魔するようです。。
margin-left:-5px;で落ちなくなったので、4px分何かが悪さしていたようです。。

vertical-alignをimgに当てたら、いい感じに。

今までvertical-alignをtextの方に宣言していました。

が、「どうもうまく画像と文字の上下バランスを調整できないなあ。。。」と思っていて、
ふと調べたら、
imgの方に割り当てることが書かれていました。
（「スタイルシート上級テクニック」河内正紀著P140)

すると、けっこううまく調整できました。。

よかった。

改行の恐怖。。

IE６以外のブラウザだと隙間があかないのに、
なぜかIE6だと、ブロックとブロックの間に隙間が出ている、という現象に少し悩まされました。

いろいろやってわかったのは、
二つの画像を横並びに配置しているレイアウトで、
その二つのimgタグを二行に分けて書いていたことが原因となっていました。

いろいろやっていて、ふと改行を加えず、二つのimgタグを一行にまとめてやると、marginが消えました。。

どうやら、改行が半角スペースとしてレンダリングされたことにより、
指定したwidthの範囲を超えたので、
下にmarginができた様子です。

改行（＋IE6)、気をつけねば。。。

cssでロールオーバー

かつてロールオーバーって、javascriptでしか実現できないかと思っていました。
しかし、CSSでかなり簡単に実現できると知って、
実際使ってみて、かなり幸せになりました（笑）。

ロールオーバー前と後の画像を一枚でまとめるて遷移させる手法が、自分の好みです。

縦30pxのボタンなら、上下に30px+30px=60pxの一枚続きの画像に仕立て、
それを配置して、a:hoverにてbackground-positionを-30pxとかしてやるという手法で。

最初の頃、javascriptを各ページのヘッダーに自動生成して書いてくれる某ソフトを使っていたのですが、
ソースがぐちゃぐちゃになってしまい、弱っていました。

ですので、スタイルシートでロールオーバーをこんなにシンプルに実現できるのが、うれしい限りです。素晴らしや。
（もちろんjsでも外部にソースをもっていってリンクはれば見すくなりますが、その当時は知る由もなく。。）

display:inline でつくる幸せナビ

一般に、HTMLの各構成要素（ブロック）は、ドンドコと縦に積み重ねられていきます。
が、display:inlineを使うと、横に並べていけます。

これ、自分はとても嬉しくて好きです。

ul(=unordered list=連番などが振られていないリスト）タグに、 このdisplay:inlineをスタイルシートで宣言してやると、
li（=list)タグの要素君たちが横並びになってくれます。 
よくある画面上部のナビ（グローバルナビとかヘッダーナビとか言われるようですね）が、 けっこう簡単に作れて、「いい仕事するなあ、display:inline　！」とか思ったりします（笑）。

 お粗末m(_ _)m

■追記
HTMLがそもそも横文字環境で作られた代物なので、デフォルト（初期設定）は縦に積み上げられる、という設計になってるのでしょうね。
日本語や他の縦書きアジア系言語なら、横（左）に置いていくようなものになるのかな。
将来的には、webでもっと縦書きがサポートされれば、その時はinline配置がデフォルトなのかもしれない、なんて夢想しました。。

いつかはbloggerテンプレも。

bloggerを多用しているのですが、
そのうち力入れて、bloggerのテンプレを、
オリジナルで作りこみたいところです。

今はデフォルトで選べるもののままで失礼しております。。

スタイルシートと付き合って。

「HTMLって楽しいなあ。便利だなあ。」と思ってこの数年。

CSSの存在は知っていたものの、HTMLを少し装飾するに留めていました。

しかしこのところ思い立って、「本格的にCSSを使いこなせるようになろう」と決意し、

かなりのペースで学習してきました。

基礎はそれなりに分かってきて、

フルCSSサイトも作れるようになったものの、

まだまだ応用に甘さがあります。

あ、基礎もか(^^;

HTMLは、シンプルで、その気になればほとんどの人がそれなりに使いこなせるようになる代物でしょう。

しかし、CSSはなかなかそうもいかない。

ブラウザ間で挙動が違ったり、

たとえば横並びの段組みという基礎レイアウトすら、

floatやpositionといった代物でかなり試行錯誤して実現しなくてはならなかったり等々、

基本を身につけるためにかなりの学習の必要が多々あります。

また、基礎が身についても、細かいところでその先も学ぶことは多々です。

それも楽しいのですが。

webという世界は、財力があまりなくても発信できる、という素晴らしい可能性をもったツールですね。

しかし、CSS（スタイルシート）という、

「素晴らしい手法だけれども、学習コストがかかるもの」の登場で、

「使いこなせればいいんだろうけど、難しいなあ」と思う（思った）のは、

僕だけではないと思います。

実際このところ、基礎学習のためにかなりの気合を入れ、無い金はたいて本も買い込んで学習しました。

（もっとスマートに身につける方もおられるでしょうが、自分は無理なんで。）

そんなわけで、このブログでは自分の備忘録を兼ねて、スタイルシートの覚書を残してゆきます。

それがもしも、どなたかの参考になるなら幸いです。

またもし、間違いやもっといい方法などがありましたら、ご教示いただけると幸いですm(_ _)m

なにぶん、常に学習の途上ですので、お手柔らかに。

（もちろん、できるだけ気をつけて、自分で確認したことを書こうと思います。

どこかで知らなかったこと、いいことを聞き知って、未実践の覚書を残すこともあるかもしれませんが。）

では、失礼します。。