THE HAM MEDIA BLOG

先日『CSS3のtransitionプロパティでアニメーションを試してみた』をエントリーしましたが、とりあえずは:hoverで動作するものばかりを試作していたのですが、:hover以外はどんなのがあるか？と思い、とりあえず調べてまとめてみた。

このブログでもひっそりと使っているCSSでのanimation。結構今更ですが、これも毎回調べたりしつつ使っているので、勉強したことを書きだしておきます。

今回はその中でもtransitionを使ってアニメーションをみてみようと思います。

Webサイト制作をしている方には、必需品なんじゃないかと思われるくらい便利なFirefoxのアドオン『Firebug』。HTMLやCSSのコーディングを担当している人の多くはいれているアドオンですね。

Firebugを入れて使っている人は多いようなのですが、意外と知られていない機能が盛り沢山だったということが、先日の勉強会（SaCSS）にて発覚！使っているといっても、一部の機能に限られてしまっているようなのです。

もちろん「そんな機能知ってるよ！」というくらい使っている人も多いと思います。しかし、そんなに使いこなせていないや、活用できていない！という人も勉強会の時に多かったように、実際にも多いはず！

Firebugの使い方をもう少し知っていると、Webサイトの制作の時に便利だ！と思える場面が多々でてくるので、是否今回ご紹介する機能は抑えておき、活用してみてください。

先日の勉強会を行ってみて、やはり皆さんが苦手とするのはfloat関連だということがわかりました。横並びにする際は、floatを使い並べ、そしてfloatした後はclearしましょう。

リストを横並びにした時の空白

リストをdisplay:inline;などで横並びにすると、リストとリストの間に空白ができちゃうんですよね。これを知らないと、paddingを0にしたりとかmarginを0にしたりとか、そういうのでがんばろうとしてしまうんだけど、実はそうじゃなくてHTMLの書き方によって(改行)空白できちゃうんですよね。

これをdisplayプロパティで横に並べる時、どの方法なら隙間なく並べられるか！他の方法とかを含めて検証してみましょう。

ネタ元：mixiコーダー組合コミュ 「トピ立てるまでもない質問はこちら」トピックの質問97

以前「float関連の問題で覚えておくべき５つの対策 」でもfloatについて取上げたことがあるのですが、今回はfloatのclearについてのお話。floatの解除方法について。

ブラウザで確認をせずにコーディングに没頭していると、いつの間にか崩れてしまっているなんてことが結構多くあるのですが、その原因となる部分を見つけるのは、慣れるまではかなり時間がかかってしまう。自分もコーディングを覚えたてのころは、数時間も原因となる箇所を見つけることに悩んだりした時期もありました。

初心者などは、問題となる箇所を見つけるのに苦労したりすると思います。問題を解決させるために、CSSをどんどん加えていったり、important!をつけたりなんてことで解決させようとする人もいると思いますが、今回はその問題となる箇所を見つけるために、しておくといいことを、いくつか紹介します。

小さいブロック要素とかを横並びにさせたいときとか、inline-block使うと便利なんですよね。幅も高さも指定できてしまう要素にみせることができるinline要素になるというのがとても便利。わざわざblock要素にして、floatさせて横並びにさせる、そして並ぶ要素を終わらせたあとはclearをして…なんてことをしていると、指定が多くなってしまうんですよね。ですが、inline-blockを使うと、そんなことしなくても簡単に並べちゃうってのはいいですよね。

しかし、そのinline-blockは、IEやFirefox2などのオールドブラウザだとうまく動作しないことの方が多い。今では使えるようになっているブラウザが多いのですが、IEや以前のブラウザを気にすると、使いどころが少なかったりもする。

CSSのpositionのプロパティに、fixedというのがある。
これは指定の部分を固定配置にして、画面がスクロールしても、
画面の同じ位置に表示させておくものである。

ところがこのプロパティ、IE6だとうまく固定されない。

CSSの設定の仕方で実現できるようなので、メモエントリー。

CSSのfloat関係って、基本的に覚えておくべき事ですが、
動作がいまいちわかり辛かったり、バグが多かったりと、
float一つとっても覚えておくべきことって多いと思います。

なのでfloat関連の問題で覚えておくべき解決方法や
回避方法のことなどについてをまとめてみた。

先日の日曜日、コーディングを専門としている企業の方と僕と共同して、
「XHTML＆CSSコーディングハンズオン勉強会」というのを行ってみた。

講師はそのコーディング専門の企業の方で、
年間100サイト以上をコーディングを行うという凄腕の方。
今も数百ページにも及ぶサイトのコーディングを行っているとか・・・
僕からしてみたら恐ろしいくらいのスピードでコーディングしている方で、
その方を講師として、今回実践形式の勉強会を開催しました。

コーディングの実践についてなので、まとめることも少ないですが、
勉強会で学んだことなどをメモしておこうと思います。

Art and web design by Matthew James Taylorというサイトで、
「Equal Height Columns with Cross-Browser CSS & No Hacks」
というエントリーがあがっていたので読んでみた。

高さを揃える方法っていろいろあるのですが、
この方法もクロスブラウザに対応しているので、なかなか便利かもしれないです。

一般的な技術なんだけど、実は使った事がなかったので、
ちょっと覚書の為にエントリー。

テキストのクリック時にちょっとした動きが欲しいとき、
位置をずらす方法。

mixiのとあるコミュニティの質問にて、
画像を左下に配置して、テキストを回り込ませる方法は？
というような質問があがってた。

確かに"float:left"させただけだと、回り込みはするものの、
一番上に配置されてしまうし、marginとかpaddingとかをつけたとしても、
その部分にテキストは流れこまずに、空白となってしまう。

どうやればできるんだ？

というわけで考えてみた。

ネタ元：font-familyの憂鬱 - Webtech Walker

以前から気づいていたのですが、
％でfont-sizeを指定していると、
IEだけなぜか他より少し大きくなっていた。

フォントの問題なんだろうなって思っていたけど、
こればかりはどうしようもないなとあきらめていた。

文字コードがUTF-8で、日本語フォントを指定しないと、IEはフォントサイズ11px相当の文字を12px相当の大きさで表示させてしまします。
font-familyの憂鬱 - Webtech Walker

そんな時にネタ元のエントリーを見つけたのだが、
本当にそれだけで変化するのか！？
と不思議に思ったので検証してみることにした。

以前『二つの画像とCSSやjQueryで表現する３種類のロールオーバー』
というのをエントリーしたのですが、
サンプルで作った「imgを直接ロールオーバー」というのが
なんだかちらちら。そして少しぶれて動く。
単にデフォルトでボーダーがついているので、その問題なのですが、
そうじゃないにしろ、FirefoxやOperaで見たときに、
画像やマウスがちらついてみえたりする設定になってしまっていた。

ということで修正してみる！

過去にもfont-sizeの問題について考えた事があったのですが、
今回はfont-sizeのパーセント表記一覧 - Webtech Walkeを読んで、
今後のfont-size指定、自分はこうしようと思うのを書いておきます。

CSSのプロパティで「display」ってありますけど、
displayプロパティってどのくらい利用していますか？

あまり多様するようなプロパティではないのですが、
それでもdisplayプロパティを使う時って出てくると思います。

このdisplayプロパティは色々な値を持っているのですが、
どんな値がどんなことになるのかって実は僕もあまり知らなかったりします。

そんなときに、
「Understanding CSS Positioning part 1 | KilianValkhof.com」
というエントリーを読んだので、いっそ勉強してみようと思い、
displayプロパティについて書いてみる事にしました。

ネタ元：Webサイトはまったく同じ見た目である必要はない

サイト制作をする際に、デザイン通りに作るかどうかというのは、
コーダーとしてもとっても重要になってくること。

しかし、ブラウザが違うだけでもCSSの対応やバグによって、
少しずつ見た目がずれてしまうことが多々ある。

そして通常もとめられることが、どのブラウザでみても、
同じように表示させるという事だった。
果たしてそれが本当に必要なことなのだろうか？

今はCSSを使ってサイトを制作することが標準となっているが、
まだまだCSSをこれから覚えるって人は多いはず。

XHTMLのマークアップをしているときにも、
間違えやすいことは多々有って、
そんな例を挙げているのがエントリーはいくつもある

ブログが続かないわけ | XHTMLでやりがちな8個の間違い

XTHMLのはけっこう目にするが、
僕はCSSでもやりがちな間違いがあるよな〜
なんて思ったので、いくつか上げることにした。

初心者も上級者も、これから挙げるリストの事は気をつけた方がよい。

尚、今回は指定した値で起こるバグとかではなくて、
CSSを書いている段階で間違いやすい点をまとめてみた。