[XHTML+CSS]30分でトライするコーディング実技試験サンプル

11月 2009年

[XHTML+CSS]30分でトライするコーディング実技試験サンプル

sakai 23:42 PM

イメージ

漬物が苦手なためいつも行くお弁当屋さんで「漬物はいりません」と言ったところ代わりにキャベツを大盛りにしてくれたのは嬉しかったのですが次の日から弁当屋さんに「キャベツ君」と呼ばれるようになったのが解せない気分の sakai です。

先日は弊社のコーダー（短期アルバイト）募集にたくさんのご応募ありがとうございました。お陰さまで、短期アルバイトの募集は締め切らせていただきました。
なお、近日中に今度は長期アルバイトもしくは中途採用の募集を検討していますので、また是非よろしくお願いします。

弊社では採用時に実技試験は行っておりませんが、今後は簡単な実技試験を導入してみるのも良いかも、と考えています。
面接に来ていただいた方にあまり時間を取らせるわけにもいきませんので、20～30分くらいでできて、かつ実力がわかるような試験問題を検討中です。

例として以下のような問題を作ってみました。
コーダーのみなさん、是非チャレンジしてみてください！

Q. 以下のデザインを XHTML+CSS でコーディングしてください。なるべく多くのブラウザで正常に表示され、コード量は少ないほど望ましいです。

一見するとシンプルなデザインなので簡単そうですが、「なるべく多くのブラウザで」というところでポイントがいくつかあります。
そのあたりをどうクリアするかで職業コーダーとしての技能が測れるかな？と思いましたがどうでしょうか…

なお、この問題に自分でトライしてみました。だいたい 20 分くらいかかりました。
以下は無数にある答えの中の「ひとつの例」としてご参考ください。
IE6以上、Firefox3以上、Safari3以上、Chrome2以上、Opera9以上で確認済みです。

XHTML のコード

<div id="a">
<p>12345</p>
<ul>
<li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>0</li>
</ul>
</div>

XHTML のコードとしては、おそらくこれが最少ではないかと思います。

後述する CSS で inline-block を使用している関係で、<li> を改行してしまうと隙間ができてしまい表示が崩れる、という問題があります。
いくつか解法がありますがとりあえず <li> は改行せずに記述しました。

CSS のコード

* {
    margin: 0;
    padding: 0;
}
div#a {
    width: 180px;
    margin: 50px auto;
    padding: 10px 10px 5px;
    border: 1px #999 solid;
    background: #EEE;
}
p {
    margin: 0 0 10px;
    padding: 10px 15px;
    background: #CCC;
    text-align: right;
}
ul {
    width: 195px;
    margin: 0 -15px 0 0;
    text-align: center;
}
ul li {
    display: inline-block;
    width: 50px;
    margin: 0 15px 5px 0;
    background: #CCC;
    line-height: 40px;
    text-align: center;
    list-style: none;
    *display: inline;
    *zoom: 1;
}

最後の「0」が中央寄せなのがポイントのひとつです。普通に float で組むと、ここが難しいです。

例では、display: inline-block; を使用しました。
IE6とIE7では上手く表示されませんので、ハックを使用しています。いうまでもなくバッドノウハウですが、「なるべく多くのブラウザで」という点を重視しました。

いかがでしょうか？「こんな手法もあるよ！」というようなご意見等ございましたら、是非コメントください！

コーディング

トラックバック

このエントリーのトラックバックURL: http://c-brains.jp/cgi-bin/mt/###/2059
###はmt-tb.cgiに変更してください。

実技試験、試してみました。
”20－30分で”というところがいいですね。
ちょっとやってみようかな、という気になります。
シリーズ化していただければまたトライしたいです。

ゆきこ | 2009年11月20日 11:49

＞ゆきこさん
実技試験、お試しいただきありがとうございます。
ちょっとした時間でできるコーディング問題って意外と他にないので、問題を考えるのも楽しいですよ！
反響次第で、シリーズ化も検討してみます。今後ともよろしくお願いいたします！

sakai | 2009年11月21日 00:18

floatで組んで最後の0はpositionを使ってみたのですが、
IE6でうまくいかずつい答えを見てしまいました。
display: inline-block;を使うんですねえ。
勉強になります。

cowhead | 2009年11月23日 08:42

＞cowhead さん
コメントありがとうございます。

自分も他に手法はないかと float を使って最後の「0」だけ :last-child で float を clear してみたり色々試したのですが、なかなか難しいのですよね。
HTML をもう少し冗長にすればなんとでもできそうなのですが…

今後ともどうぞよろしくお願いいたします！

sakai | 2009年11月24日 10:27

あの、この方法だと
Firefox3、Opera9以上でカラム落ちするんですけど
自分だけですかね？

shin | 2009年11月27日 08:19

＞shinさん
コメントありがとうございます。
ご指摘を受けて複数の環境でもう一度チェックをしてみましたが、カラム落ちは再現できませんでした。

もしお手数でなければ、カラム落ちする状況をもう少し詳しくお伺いできますか？
検証してみます！

よろしくお願いいたします。

sakai | 2009年11月27日 13:07

申し訳ありません。
<li>を改行していたのが原因のようです。
しっかり読みもせずお忙しいsakaiさんのお手間を取らせてしまいました・・。
本当に申し訳ありませんでした。

shin | 2009年11月27日 16:50

li要素です。

shin | 2009年11月27日 16:54

＞shinさん
さっそくご返答ありがとうございます。

いえいえ、li を改行なしで書くのはちょっと反則だなーと思っていましたので、大丈夫です！
コメントを頂けるのはとても嬉しいので、是非是非今後ともよろしくお願いいたします。

sakai | 2009年11月27日 16:57

こんにちは

web作成初心者です。

display: inline-block

*display: inline;

*zoom: 1;

はなぜ必要なのか？

*の使う意味を教えていただけませんか？

よろしくおねがいいたします。

nishiura | 2009年11月28日 14:03

＞nishiura さん
コメントありがとうございます。
*display: inline; と *zoom:1; は IE6 と IE7 用のハックです。
IE6 と IE7 は display:inline-block; に対応していないのですが、zoom:1 で hasLayout を true にしてうえで display:inline; を適用すると、display:inline-block; と同様の挙動になります。というバグ？を逆手にとっています。
プロパティの前に「*」をつけると、IE6 と IE7 にだけそのプロパティと値が適用されるようになります。

今後ともどうぞよろしくお願いいたします！

sakai | 2009年12月01日 00:08

なるほど。

わかりやすい説明ありがとうございます。

sakaiさん、優しいですね。

nishiura | 2009年12月01日 20:35

トラックバックを送ったつもりで送れていなかったようなので、
コメントさせていただきます。
css部分はそんなに変わらないんですが、HTMLは
dl,dt,ddでもいいかな・・。と思って作ってみました！

inline-block使わずに・・と考えてはみたものの、難しいですね・・。
http://develo.org/2009/11/23/0220.html

kame | 2009年12月07日 18:45

＞kame さん
コメントありがとうございます。

kame さんの回答を拝見しました。
なるほど！確かに dl でも組めますね。しかもこちらのほうが数文字の差でコード量が少ないですね。やられました！

今後ともバシャログをどうぞよろしくお願いします。