2009年2月（全 7 件）
特殊なデザインのボックス
WEB > HTML > flexible box
2009年2月18日 19:22
特殊なデザインのボックス
flexible box は基本的に Photoshop などで好きなデザインの枠を作成し「中央のリピート部分・蓋・底」の3つの画像を切り出せばサイズ可変の背景を作成する事ができる。
一般的なデザインであれば画像さえ作成すれば枠を表示させる事ができるが、以下の3つのパターンでは画像作成に加え CSS を修正する必要がある。
- 背景の右側に 80px 以上のイラストやグラデーションを使いたい
- 110px 以下のごく小さなサイズのボックスを作りたい
- 周辺に 20px 以上の透過部分を作りたい
これは、標準状態の CSS で確保された、透過枠表示用の 20px・右側表示用の 80px のスペースによる制限で、目的に応じてこの値を増減させる。
ボックスの基本
WEB > HTML > flexible box
2009年2月16日 23:31
ボックスの基本：全体の余白
flexible box の各種制御は <div class="box-frame boxname"> のように、box-frame と同じ場所に指定した ボックス名で行う。ボックス内部の余白は「.boxname .box-body」の padding によって指定可能で、内容物が収納される <div class="box-body"> は背景の外周とぴったり同じサイズになるため、余白ゼロから任意のサイズまで自由に設定する事ができる。
ただし、別項で解説予定だが .box-body の padding-top を 0 にした場合、CSS の仕様上、ボックス内の最初の要素の margin-top の分だけ、親要素が下がってきてしまう。（厳密には少し違うのだが、外見上はそう見える）
最初の要素の matgin-top を 0 にしておけば問題無いのだが、そういった事はたいてい最も忙しい時に忘れて「なんで崩れてんの？」となりがちなので、「.boxname .box-body」の padding-top は最低 1px 確保しておく事を勧める。
flexible box
WEB > HTML > flexible box
2009年2月16日 22:26
一般的な blog の記事表示のように、ヘッダ・本文・フッタといった定型フォーマットがある場合、それぞれのパーツに背景を割り当てれば、不要な div などを付加する事無く角丸などのデザイン枠は実現可能だ。
ただしその場合、表示する内容にあわせて調整を要する事が多く、さらにデザインの自由度も限られてくる。（蓋や底のデザインを表示内容の高さに合わせる必要があったり、逆にデザインの高さを確保するために不自然なスペースが生じたりする）
という事で、万能は言い過ぎだが結構応用の効くボックスパーツ、名付けて flexible box（いま命名）。このサイトのカテゴリーアーカイブや、サイドメニューなどで使用している。
- 上端・中央・下端の3枚の背景画像で上下左右にサイズ可変
- CSS 側で細かいサイズ調整が可能なため、レイアウト変更・サイズ調整に強い
- % 指定や、固定 + フリー等の段組みが可能
- 入れ子が可能
- 中身をボックスの最外周まで配置できるため、デザインの自由度が高い
- 透過入りの角丸画像なども使用可能
- 蓋や底にあたる要素が不要
- IE 5.5 / 6 / 7・Firefox 2 / 3・Opera 9・Safari での表示が可能（Mac IE 5.2.3 でも一応表示可能だが、追加設定や段組みを行ったボックスは崩れる可能性あり）
- HTML / CSS とも Valid で空 div なし......ただまあ、笑っちゃうソース
コメント投稿に関するアナウンスを出す
WEB > Movable Type
2009年2月 3日 23:32
正確にいつからなのかは把握していませんが、最近の Movable Type は JavaScript がオフの状態ではコメントを投稿する事ができません。（不正な要求です、というエラーがでます）
こういったアナウンスは、それが必要な場合だけ（この場合、JavaScript がオフな時だけ）表示させた方が、見ている人の戸惑いは少なくなります。
<noscript> 〜 </noscript> で JavaScript がオフの時だけ注意書きを表示させるようにしても良いのですが、コメントフォームの以下の部分にアナウンスを挿入する事で、JavaScript がオフの場合のみ、メッセージを表示させる事ができます。
デフォルトテンプレートの投稿フォーム上部
<div id="comment-greeting"></div>
この部分に囲まれた内容は JavaScript がオンの状態では、Movable Type のコメント設定にあわせて JavaScript 中のメッセージに置換されます。
現在あなたがサインインしていなければ、このページのコメントフォームの上部には「コメントする前にサインインすることもできます。」というメッセージが表示されているはずです。
JavaScript をオフにしてリロードすると、今度は「コメントの投稿には JavaScript が必要... ... ご注意ください。」というメッセージが確認できると思います。
HTML ソース自体には、「コメントの投稿には... ... ご注意ください。」というアナウンスが書き込まれています。
<noscript> を別途作る必要がないのと同時に、空 div が無くなるオマケつきです。
この記事に続きはありません
コメント (0) |
トラックバック (0) |
このページの先頭へ △
2009年2月
Diary
2009年2月 4日 22:12
2009年2月27日
Amazon の商品画像がかなりのサイズまで拡大できるようになっていた。調べてみると最近追加された機能らしく、それ以降の商品画像のいくつかが、この超拡大に対応しているようだ。（いろいろ見て回ってみると、フィギュアなどはもっと前の商品から対応しており、拡大の効果が高い商品から順番に機能を追加しているのかもしれない）
一定サイズの枠に表示された画像をドラッグしていく Google map のような操作感で、画像は 400 × 400 のパーツに小分けされている。商品によって拡大後の画像サイズはまちまちだが、試しに Nintendo DS のゲームソフト画像を Safari の「構成ファイル一覧」をもとにダウンロード後、ジグソーパズルしてみると縦横 1700ビクセルほどあった。
パッケージなどのガワごと掲載されている商品のほか、ジャケットだけが画像になっているものもあるので、気に入ったジャケット写真を壁紙にするなんてのも楽しいかもしれない。
wii 用ゲームソフト「ソニックと暗黒の騎士」のジャケット画像（データサイズが 1.2MB と大きいので注意）は 1765 × 2500 の特大サイズで、ソニックの肌（？）の質感も見える。
本・雑誌系の表紙画像は実際に印刷されたものを撮影・スキャンしているのか、印刷物特有のモアレが出ているものが多かったが、ゲームソフトのジャケットなどは印刷用の版下を使っていると思われる画像（トンボつきの画像があった）もあり、商品によっては実物より綺麗なんてことも。
2009年2月23日
開発者向けに公開されている Mac OS X 10.6 において、QuickTime Pro 用の機能がアンロックされている事から、QuickTime の「無料版 / Pro」の区別が無くなるんじゃないかという噂がある。（開発者向けだからアンロックしてあるだけなんじゃない、とも言われている）
オレは Pro バージョンにしているため、無料版の制限項目がどれなのかを知らなかったのだが、Web で公開されているスクリーンショットなどを見て、正直 Apple セコいなーと思った。
QuickTime Player で動画やサウンドファイルの編集・変換がしたいって人がそれほど多いとも思えず、たいていの人はその名の通り、動画の再生ソフトとして使っているだろう。
そういった人にとって、無料版で使用できず残念に思える（有料版買おうかなぁ、という動機になる）機能は「再生の繰り返し」と「選択範囲のみ再生」くらいしかないような気がする。あとの「ムービープレゼンテーション」やら「すべてのフレームを再生」「ポスタームレームへ移動」なんて、むしろいつ使えるのか教えて欲しいくらいだ。
そんな状況で、メニューにデデンと「PRO（にしないと使えないよ）」なんてアイコンをいくつも居座らせるのはなんというか、Pro 版の存在を告知する効果はわかるけどその倍くらい神経逆撫でしてるんじゃない、と思ってしまう。
編集・変換したかったら有料版ね、というのは段階として分かりやすく機能的にも納得しやすい。切った貼ったの編集機能と、フォーマット変換のエンコード以外は全て無料で OK にすりゃいいのに。
2009年2月19日
細かい部分を除いて、Mac IE 5.2.3 でもこのサイトを表示可能にした。もともと CSS ハックは最小限に抑えているので、修正箇所はそれほど多くないのだが、それでも「えっ？」てなところで不具合があったりしてなかなか大変。
2009年2月15日
HTML と CSS を組み合わせたパーツの紹介記事を書いている最中に、以前から「ここが改良できたらなぁ」と思っていた弱点の解決策を思いつく。人に説明すると自分でも良く分かる、というのはよく言われる事だが正にそれ。
2009年2月4日
海外ユーザーが指摘する「JRPGが変えなければならない7つのこと」
「3：装備を変えたら外見も変わるべき」「4：もっとまともな（吹き替え版）声優を」「6：もっとダンジョンにパズル要素を」といった、ゲームならではの要素を除くと、結局のところ " 脚本がいまいち " という話に行き着くのだろう。
ただまあ「1：子供のキャラクターをパーティに加えるのをやめさせるべき」は、JRPG という枠だけで考えるのは難しい面もあると思う。
というのも、ゲームをはじめマンガやアニメといった日本のフィクションにおいては、子供が大人スケールの世界で悪人と命がけで戦うだの、世界を守るだのといった物語がスタンダードとも言える地位を確立しているからだ。
もちろん海外にも子供が活躍する物語はあるが、それは子供ならではの特徴を活かした特殊な状況や活躍を描いたものであったり、子供なりのスケールの話であったり、寓話的なものであったりといったものが主となる。（このあたりは、日本と外国の子供 - 大人観の違いであったり、マンガやアニメといったフィクションがどれくらいの観客層と内容をカバーしているかの違いによる部分が大きい）
つまり、劇中において説明や理由づけが弱すぎるという事実は確実にあるにせよ、それ以前の問題として「子供が大人と肩を並べて戦う」という展開に対する慣れが、日本人と外国人では全く違うのだ。
慣れとは、別の方向から見れば抵抗感の大小とも言える。抵抗感の小さい日本人は、子供が旅に同行する理由をゆるく説明されても「まあそういうもんだよね」と流す事ができるが、抵抗感の大きい外国人は「なぜその子供が同行する必要があるのか、その子供でなければいけない理由とは何なのか」をきっちり説明してもらわないと、気になってしょうがないのだ。
こんな具合に、子供の参加に関しては別の要素が絡んでくる話でもあるが、それも含めた全般的な問題点は、お約束に乗っかっただけで、個々の練り込みが浅く細部を端折る（実際のところ、これが一番の問題）物語が多い事だと思う。
2009年2月3日
Safari で Movable Type の操作をしていると、テンプレートや記事の更新の最中に反応が返ってこなくなる時がある。最初はサーバ側の処理や通信速度の問題なのかと思ったのだが、Firefox だとほとんど発生しないので、ブラウザ側の問題のようだ。データ送信に何か問題があるのだろうか。
2009年2月1日
ほったらかしだったサイトを全面改修。サイドメニューの月別アーカイブを見ると2007年2月から2009年1月まで、ほぼ2年飛んでるのがなんとも。
この記事に続きはありません
コメント (7) |
トラックバック (0) |
このページの先頭へ △