Hatena::ブログ(Diary)

三等兵

2010-03-21

YOUもCSSプロパティ覚えてJavaScript楽しんじゃいなよ

YOUもJSやっちゃいなよー!ジースジュニア(ジースJr.)に入っちゃいなよー!ええ?どんな活動をするかって?そりゃ決まってるよー、歌をうたったりダンスしながらJavaScriptのコーディングするんだよーアーハー!

さあ今日からキミもジースジュニアの一員だよー!やっぱりダイナミックが売りだからね!最新最先端技術(笑)のDHTMLやるよー!ダサイHTMLじゃないよー!死語じゃないよー!最低限これ覚えておくとジースジュニアとしてダイナミックに活躍できるプロパティ覚えたらどうかなーウーハー!

プロパティはここから選ばさせてもらってるZE☆

http://css-happylifezero.com/property/


ダイナミックに使いがちなCSSプロパティ

の前にちょっと注意。moonshellというの使ってみました。横▲んとこ押すと実行されます。あとちょっと読み込みに時間かかるかもしれません。またIE7の人は死ぬかもしれませんが、生きろ!それからジャニーさんっぽい人は面倒なので消えました。


backgroundプロパティ

http://css-happylifezero.com/property/background.shtml

backgroundプロパティは要素の背景をあれこれできるプロパティ。これをダイナミックに扱ってみると。この例では色がだんだん白くなるよー。

backgroundはショートハンドプロパティといって、一括で背景のプロパティを設定することができるのね。今回は色だけ設定してます。そのほかには簡単にいっちゃうと、背景画像の配置、背景画像の配置の場所、背景画像の繰り返し表示の設定、なんかができる。詳しくはリンク先で。

なんかめんどくせ、って思ったら背景いろいろ扱えるぞーぐらいで、細かい部分はそのときそのときに確認しましょう。


それから要素の中が空っぽなのは文法的にアウトだけど、こだわり無ければ別にどうでもいいと思うし、以後そういうの考えていないから全部空っぽ。


borderプロパティ

http://css-happylifezero.com/property/border.shtml

要素に枠をつけるプロパティ。

でもborderプロパティなんてJSから操作することそうないと思う。CSS単体では触ったりすることはあるけど。ということで覚えておくといいかもねという位置づけ。


アイデアによっては面白いことができるかもしれないけど思いつかないのでこんなので勘弁。マウスのっけてみてください。

枠がちょっと変化してますね。borderプロパティもショートハンドプロパティ。一括で要素の枠線を設定することができる。

それでこのmouseoverとmouseoutのような挙動は、疑似クラス使えばCSSだけで同じようにできる。

#div:hover{
  border-style:double;
}

JSでわざわざ制御することもない操作なので注意。


あともうひとつボーダーおまけで。border-radiusで角丸ができるよ。

http://css-happylifezero.com/property/border-radius.shtml


これはダイナミックにしてみましょう。非対応ブラウザはみえないであろうから注意。OperaとIEはダメ。IEは最悪。でもIE8は仕方が無いとして、IE7で生きているお前。おれは、お前みたいな信念持った奴、好きだぜ。最高にクールだ。そうやって曲げずに生きる姿、わるくねぇ。

ああでもよ、まあ、ちょっと気が向いたらさ、気が向いたらでいいんだ。できればIE8にアップデート、たのめねぇかなぁ。はは、いやなに、火狐とかチョロメとかオペラとかサファリパークの方がいいんだけどよ。どうせお前のことだ。IE以外認めない、ってそんなこといいだすんだろ。

ああ、ああ、だからいいんだ。IE8でいいんだ。アップデートしたあかつきには、そんときはまたあのときみたいに、カシスオレンジ(笑)おごってやるから・・・よ。まってるぜ。フッ。ああ、今日も夕日がまぶいぜぇ。

いやっふううぅダイナミックにこちゃーーん!

だんだん丸くなっていきます。ただしこれは極端に角丸にした場合なので○になっただけで、実際は角丸程度のラインもできるからねー。

コードも汚くてめんどくさいことやってるだけだから、

border-radius //css3
-weblit-border-rudius //safari,google chrome
-moz-border-rudius //firefox

が、角丸を実現させているという点を抑えればおけおけ。これで丸っこくなってます。あと色の変化はbackgroundの要領と同じ。

このように角丸できますが、私は今だったらまだ画像使います。なぜってそりゃあ、カシスオレンジ(笑)おごってやるやつがよ、多いから・・・な。しょうがねえやつらだが、そのクールな信念だけは認めてやるぜ。フッ。ああぁ、今日も、今日も夕日がおれに生きろと吠えているぜぇ。

no title


cursorプロパティ

http://css-happylifezero.com/property/cursor.shtml

cursorプロパティはマウスカーソルの形を変えられるプロパティ。見た目大事なんですよー。ああ、ジースジュニアはイケメンである必要はないので安心してね。大切なのは、ジースなのかジースでないのかであって、ジャニーズである必要はないのさ。

(´・ω・`)


と、ということで!見た目が大事がわかるサンプル。2つのボックスがありますが、それぞれどういうことができるかオンマウスした時点でなんとなく分かるのではないでしょか。上のやつはOpera無理だと思う。ごめんね。

汚いコードに対するつっこみは無しの方向で。やったことなかったから手間取った。うん、上のボックスはドラッグ&ドロップで動かせます。下のボックスは伸ばせます。なんとなくオンマウスした時点で感づいたかなと。これぞカーソルの力。

つーわけで要素を動かしたり、伸ばしたりするとき、直感的に分かってもらうためにcursorプロパティはよく使われてるんですよーということでした。あとはigoogleなんか見てみたら。あーそういえばそうだなーとか思ったりするんじゃないかしらん。

http://www.google.co.jp/ig


ちょっと細かいけど、マウスカーソルの形はそれがどう扱えるかを示す地味に重要なプロパティ。


displayプロパティ

http://css-happylifezero.com/property/display.shtml

要素をブロックレベルで表示させたり、表示上から完全に隠したりできるプロパティ。これはよく扱われているプロパティです。詳しくはリンク先におまかせ。

これはシンプルに体感してみよう。場広く応用できると思うよ。

要素の表示と非表示を設定することができる。もし表示、非表示がブロックレベルでなければ'inline'とするよ。ブロック要素とインライン要素の違いは...うーん、なんて説明すればいいのかわからん。こちらを見てみてはいかが。

http://www.mozilla.gr.jp/standards/webtips0015.html


divとspanはどちらも同じような性質のタグなのですが、ブロックレベルとインラインレベルの部分で違う。こんな感じ↓


文章中に続けてできるのがインライン要素で、前後に改行が入っちゃうのが
ブロック要素
と認識しちゃいなよYOU!
文章中に続けてできるのが<span style="color:red"><strong>インライン</strong><em>要素</em></span>で、前後に改行が入っちゃうのが<div style="color:blue">ブロック要素</div>と認識しちゃいなよYOU!

わかりにくいかな?だったら文章中に挿入できるタグはインラインで、それ以外はブロックなんじゃねーのぐらいで良いと思うよ。もっと気になったら検索するか本に書いてあるさ。

このプロパティは重宝するから覚えておいて損はない。値についてはblockとinlineとnoneさえ把握しとけばおけおけ。inline-blockという便利なものもあるんだけど、そういえばあまり使わないなぁ。


heightプロパティ

http://css-happylifezero.com/property/height.shtml

これは要素の高さを設定するプロパティ。名前からして分かりやすいねー。これも使わないときなんてないぐらいのプロパティ。CSSレイアウトでも頻繁に使う。ダイナミックに扱う場合は、さっき使ったにこちゃんコードを使いまわしてheightの扱いをみてみよ。

あっはっはー内容については怒らないでー!ほんの出来心なんだZE☆

heightプロパティを使うとこんな感じで要素がビローンと縦に伸ばすことができるよー。今回は舌に見立ててみました。もうちょっとうまくやるとなるとsetInterval使えばいいんじゃないかな。今回はめんどくさかったからやめた。


それからアコーディオン型メニューとかもheightこれいじってると思う。

http://jsajax.com/Articles/jQuerylAccordionMenu/1091

でもこのようなアコーディオン型メニューというは個人的におすすめしない。


というのも、隠す必要があるほどの目次なんて見る気が失せてしまう。設置している本人は楽しいんだけど…。うん、難しいけど、サイトのコンセプトや見せ方でどうしても、って時は使うべきだと思うよ。でもそれ以外なら普通に表示されている方が扱いやすい気がする。もちろんただの主観ですよ。


positionプロパティ

http://css-happylifezero.com/property/position.shtml

要素の配置位置を設定できるプロパティ。これもよく使います。今までのコードでもかなり使ってるよ。個人的にマルチカラムレイアウト時はpositionプロパティのが好きだったりする。なんかこう、カチっと当てはまる具合が良い。でも結局float使うんだけどね。

このプロパティは少し複雑。直感的にはわからなかいかもしれないなあ。値は4つあって、詳細はリンク先で。relativeとabsoluteはよく使う。fixedに関してはIE6が対応していないので注意。

absoluteとrelativeの使いどころが少し難しい。今回はCSS講座はこちらに投げ。

http://www.css-lecture.com/log/css/037.html


最初にもいったけどpositionプロパティは要素の配置位置を設定できるプロパティ。ただしpositionプロパティは、その要素が相対配置なのか、絶対配置なのか、固定配置なのかを設定するのであって、位置そのものは設定しない。では表示位置はどうする?ということで、

  • top
  • right
  • left
  • bottom

のプロパティをそれぞれ併用するよー。基本的にはtopとleftプロパティだけで問題ない。使い方は、たとえばbody直下にdivをおいて、100px下、200px左部分に置きたいときは、

//<div id="div"></div>

#div{
  position:absolute;
  top:100px;
  left:200px;
  width:50px;
  height:50px;
  background:#000;
}

みたいに使うよ。これで描写されたときに、100px下、200px左に配置される。

じゃあ、今度はこれをダイナミックに移動させてみるよー。基点から100px下、200px左に動的に動かします。IE死んでるよ。これは横着してるからコードが悪いかも。

setIntervalでtopとleftの値を足していくことでこのように動いていく。


動的にしないにしても、他にもやりようはたくさんあるのでこれも重宝するプロパティ。


visibilityプロパティ

http://css-happylifezero.com/property/visibility.shtml

要素の表示/非表示プロパティ。表示/非表示だけだとdisplayプロパティも同じような感じですね。でも両者には違いがあって、visibilityプロパティは見えなくなるだけでスペースはなくならないんですよ。何いってるかわけわからんと思った人は、目で見た方が早いかな。

ほほー、display:'none'はスペースも無くなっちゃうけど、visibility:hiddenはスペースは保たれてます。

visibilityプロパティの使いどころは「その要素を非表示にはしたいのだけれどレイアウトは保持させたい」ってとき。displayかvisibilityどっちつかえばいいかわかんなーいってときの判断基準はここ。


widthプロパティ

http://css-happylifezero.com/property/width.shtml

要素の幅を設定するプロパティ。さっきのheightプロパティとよく併用して使います。今までのサンプルでもほとんど使ってきてますよー。この例では単純に要素をダイナミックに伸ばすだけ。

横に伸びましたー。

じゃーこんどはheightプロパティと併用してみますと。

こういう具合に操作できますね。とても単純。


z-indexプロパティ

http://css-happylifezero.com/property/z-index.shtml

要素の重なりの順序を設定するプロパティ。これはflashでいう深度に近い、かな。たぶん。んー、これも目でみると早い。ボタンを押してみてみよー。IEは死んでるよー。

表示の重なりの順序が変わってますね。z-indexってIEでバクがあったり、効かないことがあってめんどくせって今まで使わなかったのですが、JSがらみだと抵抗無く使うようになりました。

このz-indexの実践でよくわかりやすいのはLightBoxとかかな。

http://www.nickstakenburg.com/projects/lightview/

暗い地はdivかなにかの要素で、z-indexで一番上に表示させるようにしてさらに透過させてる。個人的に使用頻度は高くありませんが、便利だと思う。



他にもいろいろあるかもしれませんが、だいたいこれらあたり押さえとくとイメージしていることを形にできると思うよ。ただまあやっぱり、IE7以下でJSとか死ねるから、ターゲットブラウザ次第で遊び心禁止になるね。数年で解消されたらいいんだけど、先日葬式が行われ現世にうらみをもったIE6の怨念が付きまとわれるかもしれない。はやく成仏して欲しいよね。


CSSでなくてJSで使ったやつ

今回はsetIntervalとsetTimeoutメソッドを使ってた。それからイベント(onclickとかonmouseoverとか)はほとんどからんでくる。

イベントは結構種類がある。イベント一覧。以前メモってたやつです。これら以外にもあるので気になるなら検索してくだしあ。

http://d.hatena.ne.jp/sandai/20091013/p1

個人的にonchage便利。


Moonshellについて

http://takahashifumiki.com/web/programing/802/

ねむたいから投げる。久しぶりに時間とれると遊んでしまうけど、なんか睡眠時間削るってなんだろう。というか他ごとやりながらだとだめだね。午前4時だよ。寝るよ。


おわり

ほどんど実用的ではなくてしょぼいですが。趣旨としてはCSSをJSで操作するときの単純な例と、CSSのプロパティ紹介だったりとHTMLやCSSを扱わないプログラマさん向け。一部遊び心で無駄なことやってますけど。これらの応用や発想は各自がんばってね。

あっ、それからコーダーさんやデザイナーさんでもプログラミングするんだったらやっぱりJSを踏み台にするのが良いと思うよ。jQuery触ってるでしょうからきっとすぐ扱えるようになると思う。便利→面倒、な流れだからやりたくなくなるかもしれないけど、他言語に移民するときスムーズにいくんじゃないかな。

何にしてもウェブの流れでJSは結構きているから習得して損はないんじゃないかと。というかきてるのはjQueryか。ああ、じゃあ別にやらなくてもいいか笑

最後に、若干死語最新最先端最高峰技術(笑)DHTMLは、たいがい邪魔なだけの演出になっちゃうから使いどころを気をつけたいね。だからその人のセンスにかかってる。細かい演出にJSは最適だよ。センスある人はジースジュニアの一員としてダンスしながらコーディングしちゃいなよYOU!アーハー!