リキッドレイアウトのコーディングでつまづいたので、今後のためにメモ。
作りたかったのは、下図のようなデザイン。

リキッドレイアウトのイメージ図


まあ、一般的な2カラムなんだけど、サイドバー(#sub)を幅固定にしたリキッドレイアウト。
背景色の色分けは画像使わずに行こうと思ってCSS書いてみた...けど、思ったようにレンダリングされない。

で、ググったり、本読んだり、散々試したあげくできあがったのが、このサンプルページ

HTMLのソースは以下。

<body>
<div id="container">
	<div id="header">#header</div>
	<div id="contents">
		<div id="main">
			<div id="mainInner">#main</div>
		</div>
		<div id="sub">#sub</div>
	</div>
	<div id="footer">#footer</div>
</div>
</body>

このHTMLに対してCSSを当てていくわけだが、考え方は下図参照。

リキッドレイアウトでのコーディング方法概念図

ポイントは、メインエリア(#main)とサブエリア(#sub)の左側に、それぞれネガティブマージンを入れているところ。
左エリアの色分けは、#mainから出したborderと#subのbackground-colorで実現させた。

そんなこんなで、最終的なCSSは以下の通り。

#contents{
	padding-left:240px;
	background-color:#F5F5F5;
	overflow:hidden;
	zoom:1;/*for IE6*/
}

#main{
	float:right;
	width:100%;
	margin-left:-240px;
	border-left:240px solid #EF4;
	background-color:#F5F5F5;
}

#mainInner{
	margin:0 50px;
	padding:50px 0;
}

#sub{
	float:right;
	width:240px;
	margin-left:-240px;
	background-color:#EF4;
}

以上、簡単に作り方をまとめてみた。

これまで固定幅レイアウトを扱うことが多かっただけに、リキッドレイアウトにとまどい、思いのほかコーディングに時間がかかってしまった。少しずつでもいい、引き出しを増やしていくぞ!と誓った1月最後の夜でした。

≫リキッドレイアウトのサンプルダウンロードはこちら

「ナガオカケンメイの考え」(通称:白ケンメイ)を読んで以来、ちょこちょこチェックしてるナガオカケンメイの話が聞けるってことで、九州大学の箱崎千年会議というイベントに行ってきた。

箱崎千年会議のパンフレット

久しぶりに訪れた九大は、かつてのにぎわいが嘘のように閑散としてて、なんだかセンチメンタルな気分に。

空っぽになりつつある九大、そして箱崎地区のことを思いながら、『ロングライフデザイン』を考える、というのが今回のナガオカさんの話のテーマ。ということで、話を聞いて気になった言葉なんかをまとめておく。

ハンバーグの中にニンジンを混ぜて食べさせる、という考え方

先月創刊したばかりの「d design travel」という雑誌の話。

『デザインを感じる旅をしよう』をテーマにして作った、この「d design travel」。実は以前の失敗を踏まえて作りかえたもの。

前身となる雑誌「d long life design」は、僕も実際読んだことがあって、デザインに関する読み物が充実していて、とてもいい雑誌だった。

コンセプトは『いいデザインを考えて生活しよう』。しかし、残念ながら売れなかった。結局、休刊することになったんだけど、そこで諦めないのがナガオカさんのすごいところ。

まず、売れなかった原因を考えた。

ふつうの人は生活しながらデザインのことなんて考えない。だから、みんなが好きな「旅行」をテーマにしよう。そして、その旅行先でデザインに触れてもらう提案をしよう。

これが冒頭の「ハンバーグの中にニンジンを混ぜて食べさせる」という考え方。「ニンジンの嫌いな子供に、ニンジンを無理に食べさせる」のではなく、食べてもらえるような方法を考え実践する。

世間を批判するのでもなく、自分の考えを曲げるのでもなく、その伝え方を工夫していくナガオカさんのスタンス。グチりそうになったとき、時々思い出そうと思います。

いいデザインの10箇条

ナガオカさんの考える、いいデザインの10箇条をまずは箇条書きに。

  1. 修理
    修理をして使い続けられる体制や方法があること
  2. 価格
    作り手の継続していく経済状態を生み続ける適正な価格であること
  3. 販売
    売り場に作り手の思いを伝える強い意志があること
  4. 作る
    作り手に「ものづくり」への愛があること
  5. 機能
    使いやすいこと。機能的であること
  6. 安全
    危険な要素がないこと。安全であること
  7. 環境
    いつの時代の環境にも配慮があること
  8. 計画生産
    あくまで計画された生産数であること。予測ができていること
  9. 使い手
    使う側が、その商品にまつわる商品以外に関係が継続する仕組みがあること
  10. デザイン
    美しいこと

いいデザインの10個目にやっと「美しいこと」という要素が出てくるっていうのもナガオカさんらしくて好きなんだけど、最近まちづくりに興味がある僕にとっては、これを「いい街の10箇条」にそのまま書き換えられることが一番の驚きだった。

最後にその置換えをして締めます。

いい街の10箇条

  1. 修復
    修復して使い続けられる体制や方法があること
  2. 物価
    住民が住み続けるのに適正な物価であること
  3. PR
    行政や住民に街の良さを伝える強い意志があること
  4. 作る
    行政に「まちづくり」への愛があること
  5. 機能
    住みやすいこと。機能的であること
  6. 安全
    危険な要素がないこと。安全であること
  7. 環境
    いつの時代の環境にも配慮があること
  8. 計画整備
    あくまで計画された整備(建設・人口)であること。予測ができていること
  9. 住み手
    住む側が、その住まい以外に関係が継続する仕組みがあること
  10. デザイン
    美しいこと

福岡はこのうち何個を満たしているか、徐々に考えて行こうかな。

あ、そうそうナガオカさんは、来年2010年2月に放送される「ようこそ先輩」に出演予定だとか。高校生にデザインを教える課外授業をしてきたそうなので、忘れずにチェックしようと思います。

最近、福岡にもwebの会社が増えてきたのか、知る機会が増えただけなのか分からないけど、心当たりの制作会社が増えてきたので、再度まとめ。

以前の記事は下記よりご覧ください。


では早速、制作会社一覧をどうぞ。

ペンシル
なにかと有名な福岡のwebコンサル会社。SEOのこと教えてください・・・。
[主な実績] 三好不動産, シノケン
リメディア
須崎公園の近くにある制作会社。本社は東京。美工社がやってる「リ・メディア」といつもゴッチャになるんです・・・。
[主な実績] 三井のリフォーム, バンタンデザイン研究所
フロッグマンオフィス
テレビ西日本系サイトを連発する西公園のふもとの制作会社。少人数なのに制作ペースがすごいんです。
[主な実績] テレビ西日本, 華丸・大吉のなんしようと?
フリーメソッド
まじめに取り組む姿勢が見える制作会社。会社は住吉神社そば。
[主な実績] コモス・スタイル, 天国社
キャッチアップ
システムに強い制作会社。コーポレートサイトに特化したCMS「BaserCMS」がリリース間近らしく、ほんと楽しみ。
[主な実績] おきグル, みえスマ
ヌーラボ
Backlog(バックログ)に続き、オンラインドローツール「Cacoo」をリリース。中洲のオフィスがめちゃキレイ。
[主な実績] バックログ, Cacoo
プロボ
玄人好みの制作会社。CSS効いてない?と思わせる自社サイトが、このご時世、逆に目立ってうらやましい。
[主な実績] アトリエ・トア, 独華陶邑
CGFM
夫婦二人でやってる制作会社。強みは人柄だと思います。
[主な実績] ふくおか生涯学習ひろば, ブルーオーシャンシステムズ株式会社
ブランコ
Movable Typeマスターがいるデザイン事務所。最近、サイトをリニューアル。効果抜群らしいので、穴が開くほど見るつもり。
[主な実績]  ライズ株式スクール, 九州大学出版会
小窓屋
妻とやってるwebデザイン事務所。いわゆる宣伝です。
[主な実績] ダイエットプランナースクール, てのひら盆栽教室 櫻苑

以上、福岡のweb制作会社をまた10個追加してみた。これでシリーズ合わせて30個。だいぶ、まとめらしくなってきて、ちょっぴり悦にひたってます。次回に続く・・・(といいな)。

[追記]
今回のまとめ、裏テーマは「僕とちょっとずつつながってる会社」でした。詳しくは僕まで。

ガイドさんのお話を聞きながら、博多の街をぶらりと巡る「博多情緒めぐり2009」が始まってます。

博多情緒めぐり

ということで、早速行ってみたというか、参加してみたというか、スタッフとしてガイドのサポートなんかしてきました。

博多情緒めぐりには、歩いてお寺を巡るコースとか、ベロタクシーに乗って海沿いを巡るコースとか、全部で7種類のコースがあるんだけど、僕が参加したのは「バスコース」。

文字通り、バスに乗って福岡の街をぐるっと一周するコースなんだけど、敏腕ガイドの話を聞きながら眺める景色は、新発見の連続です。

ぐりーん

「大濠公園」の池は福岡城の外堀の跡だとか、「大名」という町名は、黒田の殿様に仕えていた大名屋敷が集まっていたことに由来するとか。そして、なんと・・・あ、続きはぜひ「博多情緒めぐり」で!

街をめぐったその日から、福岡で暮らすのがもっと楽しくなること請け合いです。

「バスコース」に関係してる僕の個人的なおすすめポイントは、都市高速から眺める博多湾の風景。荒戸大橋を渡るときなんか、ジェットコースター気分でかなり気持ちよかですバイ。

なお、「博多情緒めぐり2009」は11月15日(日)で終了しちゃいますので、ご参加はお早めに。予約は、以下の申込案内ページからどうぞ(電話予約のみ)。

博多情緒めぐり2009(申込案内)

参考リンク:
博多情緒めぐり
ガイドと福岡・博多のまち巡り!「博多情緒めぐり2009」開催中!

サイト運営・管理研究会(仮)、通称「サト研」に参加してきました。
以前から気にはなってたんだけど、なかなか足を運べず、10回目にしてようやくデビューです。

サト研vol10

会場のAIP cafeには初めていったんだけど、繁華街にひっそりと建つ隠れ家的な感覚がかなり気に入りました。薬院の「あづまビル」もそうだけど、古いがゆえに魅力を増している空間。短所を長所に変えるというか、価値の転換というか、なにかと刺激を受ける建物です。


そんなこんなで、サト研Vol.10本編の話も少し。


Web上で同時編集可能なドローツール「Cacoo(カクー)」がまもなくリリース

ヌーラボのはしもとさんから発表のあった「Cacoo」、これがかなり便利そう。早速クローズドベータに申しこんだから、今度ワイヤーフレーム書くときがあったら使ってみようかと画策中。
もし画像もペタペタ貼り付け可能なら、Webサイトの校正指示にも威力を発揮しそうな予感。FAXで指示出しする時代に終焉が来るか?!


企業サイトに特化した福岡産まれのCMS「BaserCMS」、完成間近

キャッチアップのエガシラさんからは、開発中のCMS「BaserCMS」についての紹介。新着情報やお問い合わせフォームなど、企業サイトで最低限必要なものをCMSとして実装したのが、BaserCMS。
僕みたいな、しょぼくれWebデザイナーなら、「そうそう、こんなCMSを待ってたんだ!」と言ってしまうこと間違いなし。中小規模の企業サイト構築の救世主になる予感です。リリースが楽しみ!


詳しいレポートは、この辺とか、この辺とか、この辺でまとめられているので、そちらをご覧ください。

全体的な印象としては、なごやかなムードと、ゆったりとした進行で、とても居心地のいい時間が過ごせました。Webの知識が増えるのはもちろん、参加者のみなさんから刺激をもらえるのが一番うれしかったかな。サト研運営の皆様に感謝です。

あ、最後に僕のとりとめのないカメラ話に付き合ってくださった君色少年さん、ありがとうございました。これが苦悩を生み出す単焦点レンズです。

NikonD40+パンケーキレンズ

(参考サイト)
FWW_サイト運営・管理研究会(仮)