The FWAが何か変なことしてた
業界の人以外はまったく知らないと思いますが、
海外サイトのThe FWAが50million visitsを記録したようで、それが祝われてました。
すげえ海外的ですよね。祝い方というか、演出の仕方がすごい海外的。
こういうのを作りたいとは別に思いませんが、コテコテすぎて良いと思います。
英語知らんからまったく何言ってんのか分かんないけど。
ちなみにThe FWAは、ナイスなデザインのサイトを一日ひとつポストするサイトです。
いわゆる、海外系のブックマークサイトですね。僕も昔から見てました。
これからも見ます。よろしくねFWA。
position と overflow は注意
いやぁ。がんばったなぁ、僕。
今日さ、もうこれは「詰み」だな、と思うようなCSSの問題点が出たんですよ。
IEのバグとCSSの仕様の問題と、あとデザインの無茶振りによって引き起こされた「詰み」がさ。
けど、回避した。
仕事中に吼えたもんな。解決したとき。思わず吼えた。
それでは、どういう状況でどうなっていったかを記述していきましょう。
■サイトの要素はだいたい800pxぐらいで、中央にそろえたい。
■広がりを持たせるため、そのヘッダー部分の右だけを追加で300pxぐらい出したい。
■だから、見た目的には、真ん中にコンテンツは全部そろってるけど、右にぴょっと出てる要素がある。
■その場合、中心の線はコンテンツの中心線。800pxが中心。1100pxの中心ではズレてる。
■もちろんだけど、横スクロールバーとかナンセンスですよね？
■右だけ追加ゾーンは背景で。ぼかされながら広がってるので、ブラウザで狭く見てる人は見えなくて良い。
んん！なるほど！
よくわっかんねー要求だな！つーか要求してんの僕です！デザインしたの僕です！
CSSでどこまで粘れるかいってみたいと思います！レッツゴー！
では、挙がった問題点をつらつら書いていきましょう。
コンテンツ自体は800pxで中心なので、まずmargin:0 auto;でもって作ります。
で、右側。これがネックですね。あと、コンテンツに含めないというのも難しい。
どちらにせよ、リキッドに800pxが推移して、その横に300pxが常にある、という状況は、
僕の知識ではposition:absoluteが最適解な気がする。
僕の感覚では、position:absoluteって親がrelativeである必要があると思ったので、
全体をくるんでるcontainerにrelativeをあてます。
その後、一番下に<div id=”right_bg”></div>という空divをつくり、そこで表示させることに。
#right_bg{
position:absolute;
top:0;
left:0;
margin-left:800px;
width:300px;
height:500px;
background:url(img/right_bg.jpg) no-repeat;
}
うん、表示できた、オッケー。
ところが、空divだろうが何だろうが、要素は右に飛び出しているので、
横スクロールバーが出てしまっています。
次はこれを取り除くことに。
横スクロールバーを取り除くには、overflow-x:hidden;を加えれば良いです。
僕はbodyに加えてみました。オッケー。取り除かれました。
ということで、結局あっさり出来たんじゃね？と僕は思ってました。
ところがどっこい。
IEでは、position:relative が親にある場合、子要素がoverflowで隠れないバグ発生。
というか、positionやってるときはoverflowの挙動が怪しいとのこと。
うおおおああ！これは……！
検索すること1時間。
これは「詰み」じゃないか？と思う。
positionをはずさなければ、横スクロールはIEでは消せない。
でもpositionをしなければ、右に置けない。
どっちか立てればどっちか立たず。しかも、結構根本的。
どうしよう？
■結論
htmlにoverflow-x:hiddenしたら、消えました。
何か、CSSデザインの神髄を見た気がします。
bodyとhtmlで挙動がぜんぜん違うんだ……。
ちなみに*にもしてみましたが、その場合もまた違った挙動でした。
まあ、そりゃそうか。*は単にぜんぶだもんね。
つか、overflowで消すならhtmlがいいよってことなのかなぁ？
ともかく、何とか望んだ表示になったのでよしとしましょう。
最近、こういう自分のデザインの無茶振りによるCSSコーディングの圧迫がしんどいので
もうちょっと、こう、プロなんだから、そのへんも考えてデザインしてよって思います。
はい。がんばります。分かってんだけど、ついついぼかしかけたりしちゃうよね！
最近の音楽 / Nothing’s Carved In Stone、FoZZtone、FACT
現在、ヘビーに聴いているバンドのご紹介。
僕はどうしようもなくこういうロックバンドが好きです。
どいつもこいつもパネェ音楽やるわけですよ。まったく。
まず一番上のNothing’s Carved In Stoneは、ELLEGARDENの生形真一さんが中心になって出来たバンドなんだけど、
メンバーにストレイテナーのひなっちとかいたりとかして、とにかく良いです。
テナー、エルレ、あのへん好きな人はまったく問題なくハマれるのではないかなぁ、と思います。
てか1st Albumの出来が良すぎてビビる。特にNovember 15thという曲がすげえいい。
次、FoZZtone。フォズトーン？
声が良いですねぇ。すごく好きな声です。リンク先で「音楽」のPVを観れるのでぜひどうぞ。
個人的には「黒点」が好き。アレでFoZZtoneナニモノだ！要チェキ！状態になったので。
やっぱさー。じゃかじゃかギターかき鳴らすのは心に響くものがありますよねぇ。
次、FACT。
こいつらは僕もよく知りません。
ただ日本人離れした音楽センスにさすがの僕も無視はできません。
「A Fact of Life」という曲をMyspaceとかで観れると思うのですが、お暇があればぜひ。
何か、あのお面の存在感と音楽のクオリティと、不気味ですね。気持ち悪い、でも気になるﾋﾞｸﾋﾞｸ！
あと最近よく聴いているのは、「つばき」、「凛として時雨」、「Dirty Old Men」、「DOES」あたり。
いやぁ。いい時代になったもんです。クオリティ高い音楽がたくさん！
思うのは、こういった好きな音楽を作るやつらの年齢を見ていると、
いい感じに同世代になってきてて、僕は「おー、ぼちぼちタメで出てきたかー」っていう感想を持って
そしてスポーツ選手とかでも、僕と同世代の人が頑張っているのをよく見かけるし、
何ていうか。
がんばろう、って思える。本当に、がんばろうって。
よし。僕が小説シーンとかwebのシーンでがんばっていかないとな。
BTD更新
PUBLIC/IMAGE.METHODに行ってきました。
座りつかれたけど面白かったなぁ。
中村勇吾さんと冨野由悠季さんの対談は予想通りの展開になって笑った。
やっぱあの人、アニメでしかものを語れないな。
その語っている内容は実に響くし、世のクリエイターは耳を傾けるべき話だった。
つか生中村勇吾と生冨野は、ちょっと興奮しちゃった。
それ以外の話はそのうちレポります。
まずは更新。
今回で11章が終わりです。
んで、やっぱり切りどころが悪かったので、一気にぐわーっと二回分更新しました。
本来であれば、来週はおやすみしたいところなのですが、いかんせん、
あと一回で完結してしまうので、おやすみせずに行きたいと思います。
そうなんです、来週で完結です。
ちょっとアレな終わり方をしますけど、ご期待くださいませ。では。
Tulipian BY PRIVATE LABEL
うむ。西山茉希さん可愛らしい！
にじゅうまる！
マッキーがゴルフウェアを着てます。ちょっと前から個人的に話題でした。
新宿マルイでリアルに見かけたりとかもしてて、若干鼻息荒かったりもしました。
ゴルフの盛り上げ方として、ファッションにするのはいいと思うんですよねぇ。
最近、わりと可愛らしいプロゴルファーの方も増えてきているように思いますし。
僕はしませんけど。
あ、でも、一緒に打ちっぱなしにいって、手取り足取り教えつつ後ろでフガフガ言うのもいいですね！
たいへんにロマンっていうか、それは摘発されても文句が言えないレベルなので自重しろお前。
うーん。もうここはGilrs Contentsを追いかけるブログなのではと巷では噂されておりますが、
ご存知ない方に申し上げますと、うちは、Girls Contentsを追いかけるブログです。
これからも追いかけていきます。
