HTMLで演出っぽいものを作れるか、というのと、jQueryのプラグインを作ってみる練習。
Haxeを最近は使ってますが、これは生JSです。jQueryプラグインですしね。
さて。RayEffectです。
サンプル:→RayEffect JS
n0wriさんがwonderflで作られていたFlashエフェクトを元ネタにしています。(どこかの何かのキャンペーンサイトで同じようなエフェクトがあったような気がします。…が果たして何だったか。)
「CSS」カテゴリーアーカイブ
position:absoluteはwindowの左上からの座標に必ずなるとばかり思っていた
勘違いの話。
CSSでレイアウトするときに、「全部position:absoluteで配置すれば作ったデザインからずれないんじゃないか？」と思うけれど、「position:absoluteはwindowの左上からだからウィンドウ引き伸ばしたら左に寄っちゃうからだめだよな…」と思い直してあきらめていたのですが、そもそもこの前提が間違っていることを最近知りました。
position:absoluteの特性は、そもそも「親要素に対しての絶対座標で配置」ということなのですが、「親要素がstaticである場合はさらにその親要素からの絶対座標になる」というのが仕様のようです。positionは何も指定しなければstaticになるので、何も考えずに作ると、position:absoluteにした時の親要素は延々と辿っていってwindowになるはずです。なので、windowからの絶対配置になってしまって、左上寄せになってしまう…という勘違いを自分もしていたのだと思います。
つまり、中央寄せしたabsolute要素を作りたければ、positionがstaticでない要素を中央寄せにして、その子要素として絶対座標で配置したい要素を置けば良いことになります。上のサンプルはそんな感じで置いています。IETesterのIE6で確認しても普通に表示できていました。
多分初歩の初歩なのでしょうが、一度思い込んでしまうとなかなか気づかないものだな…と反省するのでした。
ちなみに、この方法、万能ではありません。ここでちょっかいを出してくるのがIEです。
表示は確かに出来ます。位置はピッタリです。しかし、position:absoluteは別のバグを引っ張りだすようで、IE8でjQueryのフェードインアウトなどの動きがおかしくなります。filterを全部の要素に指定すれば動いたのですが、それも何だか重そう…というのもあって解決策を模索中です。
うーん、ブラウザは奥が深い、というか闇が深いというか。人がブラウザを見つめるとき、ブラウザもこちらを見つめているのかもしれない。
参考
SublimeTextでHTMLとSCSSとJSを書いた話
もう既に有名で、もはや紹介する必要すらないであろうものではありますが、SublimeTextをしばらく使ってみたのでその話を書いてみます。
→Sublime Text: The text editor you’ll fall in love with
「恋に落ちるエディタ」という意味になるでしょうか。TOPページでデモが流れていて機能が紹介されていて、便利そうに見えます。Macっぽい感じがしますが、Windowsでも使えます。LinuxもOKみたいです。
とはいえ、このエディタの一番いいところは「何も設定しなくてもカッコイイ」というところではないかと個人的には思っています。エディタといえば、大抵は無骨な、メモ帳とほとんど変わらない、あるいはちょっと便利な機能を持っているものか、もっと統合開発環境みたいに重くて、やっぱり無骨なものがほとんどな気がしています。もちろん、カスタムすればどれも十分に良い感じになるのだけど、特に何もしなくてもカッコイイものは少ないのでは、と。(知らないだけかもしれない)。使っていたらそれなんてエディタですか？ってプログラマじゃない人が聞きたくなるエディタってすごいんじゃないかと。
Google Web FontsでWebフォントを使う
大変かと思ったけれどかなり簡単に使えるので、綺麗に見えるフォントを使いたいという場合はオススメです。英字フォントは容量も軽いので問題なし。日本語フォントは容量重いのでちょっと厳しいかもしれない。
例として、QuicksandというWebフォントを使いたければ、CSSファイルに以下のような感じで記述すればOKです。
@import url(http://fonts.googleapis.com/css?family=Quicksand);
body{font-family:'Quicksand', sans-serif;}
実に簡単です。
ただ、フォントが小さいと文字が潰れて読めなくなってしまう場合があります。(普通のフォントではあまり見ない気がする。)
意図したフォントを探すには、Searchから検索するか、Filtersで好みの条件を指定するといろいろ出てきます。フォントの読み込みの方法は、各フォントの「Quick-use」というリンクから見ることができます。
注意点として、ブラウザの設定でWebページのフォントを優先するような設定になっていないと、ブラウザ自体の設定が優先されて、Webフォントでの表示がされなくなります。Firefoxで動かない！という事態になったのですが、原因はそれでした。