もぎゃ: 2009年7月アーカイブ

photo by taberandrew

 こういう、たくさん項目があって必要なものにチェックを入れてください、というフォームを作ることがあって。

このとき、何も指定していないと、ブラウザはこんなふうに、チェックボックスの後ろで改行されてしまうことがある。
これを避けるために、強制的に改行を入れる人がいて。
<div style="border:1px solid black;width:200px;padding:10px;">
	<label><input type='checkbox' name='field[]' value='1' />山手線</label>
	<label><input type='checkbox' name='field[]' value='2' />京浜東北・根岸線</label><br/>
	<label><input type='checkbox' name='field[]' value='3' />中央線</label>
	<label><input type='checkbox' name='field[]' value='4' />常磐線</label><br/>
	<label><input type='checkbox' name='field[]' value='5' />東海道本線</label>
	<label><input type='checkbox' name='field[]' value='6' />総武線</label>
</div>
より力ずくの例としては、テーブルにして行を切ってしまうとか。
そういう方法でも一応問題は解決するんだけど、後日路線が増えたら関係ないところまで直さないといけないし、フォントサイズを変えている人がいたら意味不明なところで改行される恐れもあって、できればこういうことはしたくないものですよね。

で、スマートにやる方法。
<blockquote>
<div style="border:1px solid black;width:200px;padding:10px;">
	<label style="white-space:nowrap;"><input type='checkbox' name='field[]' value='1' />山手線</label>
	<label style="white-space:nowrap;"><input type='checkbox' name='field[]' value='2' />京浜東北・根岸線</label>
	<label style="white-space:nowrap;"><input type='checkbox' name='field[]' value='3' />中央線</label>
	<label style="white-space:nowrap;"><input type='checkbox' name='field[]' value='4' />常磐線</label>
	<label style="white-space:nowrap;"><input type='checkbox' name='field[]' value='5' />東海道本線</label>
	<label style="white-space:nowrap;"><input type='checkbox' name='field[]' value='6' />総武線</label>
</div>
</blockquote>
こういう風に、改行されたら困る単位で"white-space:nowrap;"を指定してあげれば、それ以外の位置を見つくろって改行してくれるので、内容が変わってもフォントサイズが変わっても大丈夫なコードになります。

#ここでstyle=""を使っているのは、見やすさのためなので、本来はもちろんCSS上で適当なセレクタに"white-space:nowrap;"を指定しましょう。

当たり前の話なんだけど、なぜか強引に改行を挿入する人がいっぱいいるみたいなので書いてみた。


プログラマの人が、デザイナさん10人に自分のサイトのデザイン、どこがダメなのかを指摘していただいたという話があって。

Geekなぺーじ : 10人のデザイナさんに駄目出しして頂きました
いいなぁ、僕も教えてほしいなぁ・・・・。

と思っていたので、先日のwebtekoのプレゼンの際に、メイドめーるのデザインを出して、「どうしてこんなに素人っぽいの?」と聞いてみました。

before.PNG
#一部で誤解されている方がおられたみたいですが、メイドめーるのデザインは、素人っぽさを狙ってこうなったのではなくて、僕が全力でデザインしてこうなっています。

メイドめーる デザインに関していただいたつっこみ@WEBTEKO

  • グラデーションを使うとそれっぽくなる
  • スペースの取り方がバラバラなのでまとまって見えない。その結果、読むペースが乱れてしまう
  • ロゴとキャッチが一体になっていてわかりにくい
  • 何を読ませたいのかを考えて制御する
  • ボタンが立体的にする
  • 今っぽいデザイン:
    →でっかいログインフォームと、小さな「登録する」
    大きくすればクリックしてくれるとは限らない
  • ボタン→対照色じゃなくてもいい。読めればいい。
  • 吹き出しつけたら?
  • ボタンの中にアンダーラインは変。ボタンなの?テキストなの?
  • コンテンツ量が少ないので、ajaxとかで1ページにまとめちゃってもいいのでは?

頂いた意見の中で、わりとすぐに対応できそうだったコンテンツ間隔の問題と、ボタンの作り方を修正したのが、今のデザインです。
あと、ちょっと落ち着かせる意味でロゴを小さくしてみた。

after.PNG
・・・多少はマシになった気がする。ボタンの色がまだ変かなぁ?



(2009-07-19 08:39:23) プレゼンテーションがうまく見えないみたいだったので、アップロードし直して差し替えました。

ウェブテコ第8回「デザインのあれこれ」で、「プログラマがデザインをがんばってみた」というテーマでお話しさせていただきました。


スピーカーとしてトークしながらデザインについて教えていただこうという目論見wにつきあっていただいたみなさま、どうもありがとうございました。

プレゼンで出てきた書籍と、プレゼンでは触れられなかったけど参考になった本のリンクです。

デザイン全般に関する書籍


レイアウトや配色について書いてある本です。一冊に全部書いてあるのでちょっと薄いですが、ざっと学ぶにはこれがいいかと。

配色に関する本


プレゼンで出てきたのが「カラーイメージスケール」、「配色基礎講座」の方は、理論の本です。

レイアウトに関する本


あと、レイアウトに関しては、このサイトも大変参考になりました。
デザイン勉強会の資料を公開します。 - Vox


photo by Enrico Capello

[selenium][warn] Link has target '_blank', which is not supported in Selenium! - もぎゃろぐ
ということで、seleniumをつかって、target="_blank"のリンクを開くことをごまかしてきたのですが、案の定、これではごまかせない話が出てきました。target="_blank"のリンクを開いて更にその先でテストを続行したい場合にどうするか。

いろいろ考えた末、こんな手を思いつきました。

getEval s=window.document.getElementsByTagName('A');for(i=0;i<s.length;i++){s[i].target='_self';}

問題になるクリック処理の一個手前で、こんなのを実行します。 このコマンドは、JavaScriptを走らせて、全てのリンクのtargetを"_self"に書き換えてしまいます。 結果としてリンク先は同じウィンドウで開くので、そのままテストを続行することができます。



このアーカイブについて

このページには、 もぎゃ < /strong>が 2009年7月 に書いたブログ記事が含まれています。

前のアーカイブは もぎゃ: 2009年6月 です。

次のアーカイブは もぎゃ: 2009年8月 です。

最近のコンテンツは インデックスページ で見られます。過去に書かれたものは アーカイブのページ で見られます。

Powered by
Movable Type