前回の記事で、左端のボックス固定のリキッドレイアウトを作成しましたが、
おおきな間違いを犯していました。
前回の記事はこちら→http://www.tamago-tama.com/archives/2009/06/3-2.php
上記の記事で何がいけないかというと、中央のカラムをabsoluteにしたこと。
absoluteにすると絶対位置なので、下にボックスがあるともぐりこんでしまいます。
中央カラムがメインコンテンツや右端のコンテンツより縦が長い場合、
フッターが中央カラムに食い込んでしまいます。
そこで、今回また考え直してみました。
※この記事は見た目は出来ていますが、実際に使えないレイアウトでした。
ちゃんとしたリキッドレイアウトはこちら
http://www.tamago-tama.com/archives/2009/06/3-3.php
人生で可変+固定の3カラムリキッドレイアウトを組んだことがありませんでした。
時間のあるうちに試してみようと思い、調べてながら組んでみました。
珍しくサンプルを作りました。
サンプル→http://www.tamago-tama.com/demo/3karam/
今回参考にさせていただいた記事はこちらです。
3カラムで中央可変（リキッド）なレイアウト
http://blog.magical-remix.net/igalog/archives/171
全てのカラムが可変なら全ての幅をうまくパーセントで指定すればいいのですが、
今回は左端のコンテンツ部分のみ可変で、残りの右2つのカラムは固定にするという仕様。
そのようなレイアウトを使うときは、
「floatしたボックスのマージンを自身の横幅以上にマイナスするとHTMLの記述上で上に書かれているボックスに重なってしまう」という現象を利用します。
以前の記事→http://www.tamago-tama.com/archives/2008/04/highslidejs.php
以前カスタムしていたのですが、
MT4.2にアップグレードしてからHighslideのカスタムを外していたので、
再び実装しました。
数か月ぶりのCSSniteです。
今回のテーマはIA。
今までIAの事なんてほとんど興味がなかったのですが、
そろそろ勉強しなくてはと思って参加してみました。
スピーカーは佐藤 伸哉さん。
IAという言葉についての基本的な話と、IAの歴史についてです。
IAには二つの解釈があり、それは以下のものになります。
「インフォメーション・アーキテクチャ」：分野・専門性
「インフォメーション・アーキテクト」：役割・専門家
今回は「インフォメーション・アーキテクト」についての説明でした。
興味深かったのは、
・IAのタスクとは？
（ユーザ分析・ペルソナ・ワイヤフレームetc...）
・Web以前からIAは活躍していた
・IAの勉強方法
特にIAの勉強方法についてはとても参考になりました。
具体的には、情報整理のできているいいサイトの構成を手書きで書いていくというものです。
Ecxelのようなものにまとめるのではなく、手書きです。
手を動かして書くということで頭に入りやすく、
フォーマットに拘らず書くということで自分なりに纏める力がつくのでしょう。
現在では、IBMのサイトがオススメのようです。
また、現状よくまとまっているサイトが崩れていく様子を見るのも、
ものすごく参考になるようです。
また8月にもIAの話をやるので聴きに行きたいと思います。
最近やったゲームでは、自分としてはかなりヒットです。
女神転生シリーズ派生系。
東京の山手線封鎖がおこり、電気も止められて食料もわずか。
そんな中、悪魔を仲魔にして戦うRPGです。
メガテンシリーズといえば、悪魔と会話して仲魔にするというシステムですが、
今回は悪魔が自らをオークションに出して落札してもらうという、魔身売買システム。
この辺りがちょっとつまらないと感じましたが、容量上しょうがないのでしょう。
ストーリー分岐は特に難しいこともなく、さくさく進める事が出来ます。
1週目が結構辛く、LV差による獲得EXPのマイナス補正があるため、
ある程度のレベルになるとレベル上げがきつくなり、
仲魔の育成が大変になります。
2週目になるとマイナス補正が撤廃されるため、
レベルもどんどんあげる事ができるので、
ストレスなく仲魔の育成ができます。
また、1週目から仲魔にする悪魔のレベル上限が撤廃されるため、
自分のレベルが5だとしても、レベル９９の悪魔を仲魔に出来ます。
やる前は面白くなさそうだと思っていたのですが、かなりハマりました。
グラフィックもDSにしては結構いいクオリティなんじゃないかなと思います。
いきなりDreamweaverが全く起動しなくなりました。
再インストールを考えたのですが、
会社PCなのでソフト出してもらうのに色々手続きがいりそうで、
面倒なので自力でどうにか出来ないかと思い、
Google先生に助けを求めてみました。
dreamweaver 起動しない cs3でとりあえず検索。
結構ひっかかってひと安心です。
アドビの公式のサポートも発見しました。
http://www.adobe.com/jp/support/kb/ts/229/ts_229670_ja-jp.html
まずは『A』のサイトキャッシュのクリアをしてみるものの、全く改善されません。
そこで、次のステップに移り、
最後に作業していたサイト定義しているフォルダを別の場所に移動したら起動しました。
破損したHTMLかCSSかJSファイルが、
サイト定義しているフォルダ内に存在しているのが良くないようです。
幸いファイル数が少なかったため、どのファイルが破損しているのかすぐ特定できました。
破損していたのはCSSファイル。
サイト定義しているフォルダ内に破損しているファイルがあるだけで、
Dreamweaverが起動しなくなるなんて今まで知りませんでした。
もしサイト定義内で大規模サイトの構築をしていて、
その中のどれかひとつのファイルが破損した場合を考えるとゾっとします。
iPhoneで画像や音声を送ることができるMMSが実装されるようです。
OS3.0を入れている人はフライングでMMSが体験できるかも？
との情報を頂きました。
どうやらMMSをやるためには現状使っている
「i.softbank.jp」のアドレスではなく、
「softbank.ne.jp」を利用しなくてはならない様子。
「softbank.ne.jp」の取得はPCのMySoftBankページからしか出来ません。
iPhoneのMySoftBankでは「i.softbank.jp」の設定周りしかまだ無いようです。
今回つまずいたのは、色々なIDとパスワードがわからないところ。
MySoftBankのIDとパスワードは単純に自分が忘れていただけなのですが、
メール設定周りのIDとパスワードはそもそも発行されていないのでは？と思った。
とりあえず、「softbank.ne.jp」の取得は完了しました。
検証は一人では出来ないので、そのうち出来ればいいなぁと思います。
そのうちって、MMS本リリースまであとわずかなんですけどね。
（追記）
6月17日10：00現在MMS利用できました。
久々のお芝居でございます。
今回はお笑い系。
転球劇場って大阪では有名らしいです。
諸事情で遅刻して会場に行ったのですが、ぎゅうぎゅう詰め。
下北の駅前劇場という小さい所ですが、
よくぞこんなに人を入れたな 0という程の大入り。
お芝居の中身は…
以下ネタバレを含むかもしれません。
たまたまTwitterのTL上で、
ケイレキの招待をして頂けるというお話があり、
便乗してみました。
「ケイレキ.jp」
http://japan.cnet.com/news/media/story/0,2000056023,20394549,00.htm
リアルの知人ではなく、
たまたまTwitter上でフォローさせていただいた方なので、
ドキドキしながら＠返信。
快く招待していただけるということでDMからメールアドレスをお知らせしました。
さて、本題の「ケイレキ.jp」は、
自分の経歴から繋がるコミュニティ。
キッカケを発言して、それに対して誰かがコメントや「たしかに！」をつける。
Twitterだと、ただ個人的に呟いているだけで繋がりは生まれにくいのですが、
キッカケの場合は気楽に発言に対してコメントできるので、
人と人の繋がりが出来やすくなると思います。
まだまだ不具合があったりこれから追加される機能があったりと、
発展途上のサービスですが面白いサービスになればいいなと思います。
まずは、携帯やiPhone等で外出先からも、
手軽に見たりポスト出来るようになればいいなと思います。
やっぱりこれ系のツールって手軽さが重要だと思うんですよね・・・
こんな状態のことです。
恥ずかしながら今までちゃんと意識していなくて、
隙間があいたら無理やり高さを固定にして逃げていたのですが、
今回しっかり原因をつきとめてみました。
そもそもimgはインライン要素で行間をもっているため、
この現象が起きてるようです。
解消方法としては、リスト内のimgに対してCSSで以下の処置をすることです。
li img {
display: block;
}
もしくは
li img {
vertical-align: bottom;
}
今回この現象でちょっとつまずいてしまいました。
もっと勉強しないとだめですね。
おまけ
---------------------
たまーに画像をそのままbody内に置いてしまったりしていたのですが、
厳密にいうとbody内に直接かけるのは、
・ブロックレベル要素
・script要素
・挿入・削除を示すins, del要素
以上のタイプしか認められていないそうです。
なので、画像はpなどブロック要素の子要素として置くのが正しいのです。
知ってはいるのですが、結構悩むことがおおいのです。
THE HAM MEDIAさんのこちらの記事を参考にさせていただきました。
http://h2ham.seesaa.net/article/117579108.html
ソース上での解消方法は
「改行をなくす」「改行をコメントアウトする」
の2つですが、
上記この方法は何となく使いたくないので、
なるべく「display:inline;」を使わないようにしていました。
今回THE HAM MEDIAさんで紹介されていたもので、
これから参考にしようと思う方法を2つ抜粋させていただきます。
HTMLソースは下記。
<ul>
<li>テキスト</li>
<li>テキスト</li>
<li>テキスト</li>
</ul>
CSSは以下。
--------------------------------------------------------
li {
display:table-cell;
*display:inline;
*zoom:1;
}
--------------------------------------------------------
IE6、IE7、IE8、Firefox2、Firefox3.0、Opera9.6、Safari、Chrome全てで隙間がなくなります。
試してみようと思います。
参加してきました。
http://bigbeach-fes.com/
前日から雨が降っていたので開催されるか不安でしたが、
当日午後から雨も上り、太陽まで出てきてくれました。
狙いは「RYUKYUDISKO」と「FATBOY SLIM」
会場に入ったのが14時過ぎぐらい。
ひとまずRYUKYUDISKOの時間まで辺りをブラブラしてました。
RYUKYUDISKOめちゃくちゃ楽しかったです！
ただ、低いところでの演奏だったので全然見えませんでした。
RYUKYUDISKOに続きFPMも見る予定でしたが、
バテてしまったので合流予定の友人の元へ。
休憩したあと、FATBOY SLIMの会場へ移動。
昼間より人が増えていて、移動に結構時間がかかりました。
FATBOY SLIMはやっぱりすごかった。
VJもめちゃくちゃかっこよくて、お客さんの盛り上げ方もさすがといった感じでした。
会場の雰囲気はこちらでみることができます。
http://bigbeach-fes.com/staff_blog/
夕方ぐらいにiPhoneの電池が切れちゃったので、
全く写真を撮ることができませんでした。
残念。
Twitterから２日消えてみました。
もちろん閲覧もなしです。
単純に仕事が忙しかったことと、
心の不況によりマイナス感情をTwitter上で呟きたくないというのが主な理由です。
さて、Twitterを離れて体感したことは、
・ものすごく集中できる。
TwitterFｏｘでなにか発言があったらすぐにわかるため、
作業中に手を止めてちらちら見てしまっていたのですが、
それが全くなくなったので作業効率がアップしてる気がします。
・情報が全く入ってこない。
はてブやTwiccoのiPhoneFanをフォローしており、
そこから様々な情報を得ていましたが、
それらを見なくなったため全く情報が入りません。
現状この２点です。
もう少し何かに気づいてみたいので、明日もこのスタンスを保ってみます。
#そういえばこのブログをPostするとTwitterで発言されてしまいますねｗ
