Home > Diary Archive
Diary Archive
[メモ] ブラウザ幅に応じてコンテンツの幅を調整する
- 2010-05-08 (土)
- Diary
ブラウサーの横スクロールバーは鬱陶しい。
なので、なるべくコンテンツはブラウザ幅以内に収めたいものだ。しかし、それを事前に設計することは不可能。というわけで、ここはスクリプトの出番だ。ブラウザ幅を変更したときに、それに追随して記事(<article>タグ: HTML5で定義された要素)内の画像や映像(<video>タグ)をリサイズしよう。
- Comments: 0
- Trackbacks: 1
[メモ] CSS 3 Media Queries でWebブラウザーの幅に応じたレイアウトを
- 2010-05-08 (土)
- Diary
ブラウザ幅400px。テキスト幅をブラウザ幅めいいっぱいにしたリキッドレイアウトを採用。このサイズになるとモバイル(および低解像度ネットブック?)での利用が多いハズなので、検索ボックスは一回り大き目にしておいた。
<link rel="stylesheet" type="text/css" media="screen and (max-width: 800px)" href="layout-liquid.css" />
iPhoneなどのために ViewPort を設定しておくと幸せになれるかもしれない。
ブラウザ幅900px。サイドバーを常時表示するヒトもいるだろうし、みながみなウィンドウを最大化して使っているわけではない。一般的な環境ではこの程度が普通ではないだろうか。
<link rel="stylesheet" type="text/css" media="screen and (min-width: 800px) and (max-width:1163px)" href="layout-1column.css" />
このサイズでは当然PC用途なのでスクロールバーが発生する。多少多めの36pxというマージンを取ってみた。ブラウザ幅にスクロールバーが含まれるかどうかは…調べるのが面倒だった。
このぐらいになると、リキッドレイアウトではテキスト幅が広すぎて、1行を目で追うのが辛くなる。そこで、幅640px固定の1カラムにして中央に配置する。あまった余白にメニューを配置してみるなど。
カラム幅が640pxなのは、ビデオコンテンツの貼付けなどを考慮した結果。テキストの閲覧目的としても、全角40文字以内とちょうどいい(ただし、この辺は環境にもよる)。
ブラウザ幅1200px。うちのサイトだと、来てくれるヒトの7割は1280×800以上の解像度のディスプレイを利用している。フルHDレベルのヒトも2割弱いるみたいだ。
<link rel="stylesheet" type="text/css" media="screen and (min-width: 1164px)" href="layout-2column.css" />
画面幅に余裕があるので、フッターに配置していたコンテンツをサイドバー化し、2カラム構成にしてみるなど。個人的には2番目のデザインが好きなのだけど、使い勝手はこちらの方が上だろう。ページ下に追いやられていた広告もトップに(^q^
カラム幅は引き続き640px。それ以上広げても読みやすくなる気がしないし、CSSの変更も少なくて済む。
—
まだまだ鋭意製作中☆
- Comments: 0
- Trackbacks: 1
朝まで HTML 5 + CSS 3。
- 2010-05-07 (金)
- Diary
Webサイトを作ってたらそのままハマってしまって、結局朝までやってしまった。どうせなら HTML 5 + CSS 3 でサイト作ってみよう! とか思い始めちゃったのだ。まぁ、いいんだ。今日はうれしい休刊日。
- Comments: 0
- Trackbacks: 1
お祭り。
- 2010-05-05 (水)
- Diary
神保町をぶらぶらしていて、お祭りに遭遇した。
お神輿を担ぐ人たち、和太鼓の響き。
靖国通りのあたりにやたら警官が多いなと思ってたら、お神輿が通るので交通整理をしていたらしい。見られるとは思っていなかったので、ちょっと得をした気がした。
- Comments: 0
- Trackbacks: 1
メモリカードの中身を整理したら、ガンダムに汚染されていた。
- 2010-05-04 (火)
- Diary
最近、アキバのガンダム化がますますひどいと思う。この前(4月24日)にアキバに行った時は、ガンダムカフェができた日だったらしく、すんごい人だかりだった。
一方、ベルバラ(ベルサール秋葉原だっけ?)にはガンダムの生首が登場。新しいゲームのプロモーションらしい。疲れのせいか、お姉さんの笑顔がちょっと引きつっていた。キャンペーンガールというのも楽ではなさそうだ。
他にも発掘すれば、いろいろ。たとえば、おもちゃ屋さんのプラモデルコーナーにあるジオラマなんかもすごい。
ガンダムは30周年。僕と同い年。僕ぐらいの子にとってガンダムのせりふは、いにしえで言うところの古今和歌集の教養並みに、知ってて当たり前のものなんだよね。…30年後には何がその位置を占めているのだろう?w
- Comments: 1
- Trackbacks: 1
免許更新なう
- 2010-05-01 (土)
- Diary
早起きして幕張の運転免許センターへ。自動車免許の更新に行ってきました。
じつは、免許の更新って初めてなんですよね。前回は更新直前に免許証を召し上げられたりしていたので。それにしてもスゴい。混みまくり。ちょっと道に迷って(いい加減道覚えろよ!)、8時半過ぎに免許センターに着いたのですが、受付はすでに長蛇の列。最後尾に並んだときは、「今日は帰れるんだろうか…」と少し心配になりました。
12時過ぎになって、ようやく新しい免許証をゲット。
今回からはIC免許証ですよ!
しかし、これがクセモノのようで。SUICAなどのほかのICカードと一緒に携帯していると、改札やICカードリーダーで誤作動が起きるのだとか。Twitter で聞いただけ[1] なので試してはないのですが、試して他の人に迷惑をかける気もないので、免許証の新しい住処を探さなきゃいけないみたいです。
—
ちなみに、現時点で3年間無事故無違反! つぎこそはゴールド免許ほしいであります。
- Comments: 0
- Trackbacks: 2
わが友ナナミばあさん
すでに持っているのだけど、新潮文庫から3分冊で出たので改めて購入した。中学時代からなんども読んでいたので、いい加減ボロくもなっていた。ナナミばあさんの充実した老後の足しになれば、これ以上の喜びはない。
初めてナナミばあさんの小説を読んだのは、弟1号の誕生日プレゼントに『コンスタンティノープルの陥落』を買ってやった時だった。興味はあったけど、愛読する著者を増やすことには過度に慎重だった僕は、弟に買い与えて反応を見ようと思ったのだ。結局、弟1号はあんまり読まなかったみたいだけど、それでは、と読み始めた僕がハマってしまったのだから困ってしまう。ミイラを取らせるつもりが、自分がミイラ取りになって、ミイラになってしまったのだ。
ナナミばあさんの文体は、僕から言わせてもらえば、あまりイケてないと思う。固いし、回りくどいし、なにより入れ込みすぎだと思う。だけど、どの題材も魅力的て、ヴィヴィッドだ。本人が対称を"愛してしまっている"のだから、仕方ない。
だいたい高校の一時期、外交官になりたいなぁ…だなんて思ってしまったのも、ほとんどすべてばあさんのせいだ。イキってキッシンジャーの『外交』を読んでみたり、みんなが日本史を選択するところをわざわざ世界史を選んでみたり、教養を身につけねばなるまいと読み慣れぬ哲学書を手にとったりもしてしまった。それぐらい、マキァヴェッリにしろヴェネツィアの男たちにしろ、外交の場に立つ彼らは格好良かったのだ。いつかそんな知性豊富で、運命と戦う力量を持つ人間になりたいと願ったものだ。
しかし、それもこれも昔の話。京都でゴロゴロする日々、東京でキリキリする日々の中で、そんなことも忘れてしまった。それでも、なんとなく忘れられないのは善く生きることってなんだろう、ドコを変えてナニを守るのだろう、運命にうちかつにはどうすればいいのだろう、皆にとって理想的な組織ってなんだろうといった、ばあさんの本を読む上でふと思ったことだった。
それだけは、いつも結構真面目。学生のころに本流から外れて組織の経済学や進化経済学を学んだのだって、今になって共和主義について興味をもつのだってそれの延長線なのだ。今回、この本をもう一度手にとって、それが分かった気がする。
僕は、ばあさんは僕が言う意味で共和主義者だと思う。ばあさんの用語では"真の保守"に当たるのかな。なんせ『サイレント・マイノリティ』だって読んだのは15年前だw
- Comments: 0
- Trackbacks: 1
第9地区。
映画『第9地区』みてきた。
ところどころグロい。あんまりグロ耐性がないので、途中のエグいシーンは手で顔を覆い、指と指の間から覗いていた。
それでも、個人的には面白かった。けれど、 @subsfn の評価は低かったから、人それぞれってとこなのかもしれない。
話の内容は…言ってしまうとあんまり面白くないのだけど、スジに関係ないところだけ行ってしまえば、ある日突然、巨大な宇宙船が南ア・ヨハネスブルグの上空に現れる。宇宙船には栄養失調のエイリアンが大量にいたのだけど、人道的理由から彼らを地上に連れ出して"第9地区"へ保護する。そして、20年。第9地区では、何時まで経っても帰らないエイリアンと、住む土地を奪われた人間の間に、日増しに軋轢が重なってゆく。そこで、エイリアンの支援を担当している民間組織・MNUによって、エイリアンをヨハネスブルグから200km離れた"第10地区"へ移す作戦が実行されるのだが、その責任者に悲劇が襲いかかる。
面白いのは、主人公の視点からだけでなく、"報道"という第三者的な視点からの描写も随所に織り込まれていること。家族や同僚へのインタビュー、(ちょっと頓珍漢な?)専門家の解説といった、報道ニュースでおなじみの「パーツ」が取り込まれていて、主人公視点のリアリティと報道してんの現実との乖離感がミスマッチしていて、なんか不思議な気分になった。ほんとにエイリアンが来たら、こんな感じの出来事がほんとに起こるのかもしれない。
—
【おまけ】 フォントもあるでー♪
窓の杜 – 【REVIEW】SF話題作『第9地区』のエイリアンが使用している文字のフォント「D9 non-humans」
- Comments: 0
- Trackbacks: 1
東京のつるとんたん
- Comments: 0
- Trackbacks: 0
Home > Diary Archive



