THE HAM MEDIA BLOG

先日の５月２３日土曜日、「第2回XHTML&CSSコーディング勉強会」を行いました。今回は２回目で、前回とは違って、参加型の内容で行いました。各自ＰＣを持ってきてもらっての実践でのコーディング。時間内にコーディングするというのはやはり無理なことでしたが、様々な意見交換もすることができて、有意義な勉強会にすることができたと思います。

もちろん反省点も多いのですが、無事に終えることができて何よりです。参加していただいた皆さん、ありがとうございました。

※参考例を追記しました

今回は総勢22名の参加

今回は定員29名のところ、22名の参加がありました。ＰＣを持っていなくても見学ありとしてうけたのですが、やはり実践形式ではPCがないというのは難しい状況でしたね。見学だった皆さん、申し訳ございません。もっと、PCがなくても何かできるような課題を準備しておけばよかったと反省するばかりです。

とりあえず、今回参加していただいた皆さんに書いていただいた、アンケートの結果をまとめてみようと思います。

アンケート結果(今回は実数で表示)

今回も勉強会の最後に、皆さんに簡単なアンケートにお答えしていただいたのですが、下記のような結果になりました。アンケートの回収率は２２人参加中、回収２２枚の100％でした。ご協力いただき、ありがとうございます。

■性別

■年齢

■勤務先

■満足度

■次回参加したいかどうか

■今回の感想など（一部を抜粋）

• ・出席してよかったです。特にTOPICSの点線つきの日付と文章の組み方は以前からどうしようか考えて、いろいろな方法を試していたのですが、今回は作り方を説明していただいて勉強になりました。
• ・勉強になったが、理想のコーディングを勉強する見学する時間がなかったので、セミナー形式のほうが好みだった。
• ・全体的に時間が足りない気がしました。作業をするにしても、時間が足りず、自分がわかっていない部分がどこであるのかわかるまでにいけなかったのが残念です。とても勉強になったので、次回は長くやりたいです。
• ・一部見出しのみ反映できませんでしたが、９割がた見た目のみできました。もう少し難しいか技術的な話題がでるとうれしいです。
• ・Webのプロの方から色々とTipsを聞けたので参考になりました。今後もぜひ参加させていただきたいと思います。
• ・このような勉強会、非常に良いですね。またこのような勉強会を企画してほしいです。
• ・勉強になりました。画像が用意されていると、コーディングは楽ですね！
• ・今、JavaScript勉強中なので、勉強になりました。皆さんのソースを見て、もっと勉強します。
• ・人それぞれのコーディングの仕方が見れて参考になりました。コーディング歴が浅いので、また今回のような内容で参加したいです。
• ・CSS初心者のためん、自分でコーディングすることができませんでしたが、実際にWeb製作をしている方が多く、とても勉強になりました。
• ・自分でデザインすると、ワンパターンになってしまうので、このように勉強会でコーディングするのは発見があって面白かったです。また最後にいろいろな話が飛び交いましたが、またそれも面白かったです。
• ・正直レベルが足りずについていけなかったですが、出席してお話を聞いているだけでも価値がありました。
• ・コーディングはあらかじめある程度作っておいて、詳細部分をコーディングしたほうが時間の都合上良かったのでは？
• ・コーダーの皆さんがわからないことや、画像の書き出しをどうしていらしているかなど聞けてよかったです。欲を言えば、皆さんの文章の流し込みで時間を取られていたので、コピペできるテキストデータをつけてもらえると助かります。結構手ごたえのあるテーマでした。
• ・パソコン持込で作業する方にとってはちょっと狭かったのではないでしょうか。初心者の方が多かったのでちょっと物足りなかったです。一緒にコーディング作業を進めていく部分もあったら良かったのではないでしょうか。作業は基本的に個人任せになってしまったような気がするので…。わからない方にとっては、講師と一緒に作業をすることで新しい発見などもあると思います。せっかくプロジェクタもあったので、ちょっともったいない気もしました。
• ・さっぱりわかりません。学習しなおします。
• ・説明時の画面表示の切り替えが激しくて、メモが取れなかった。

感想や意見ありがとうございます

今回の勉強会を行ってみて、やはり作り上げるには時間がたりなかったかな？というのが自分でも思うことでした。意見でも出ているように、一部はすでにXHTMLも用意しておいて、時間内に収まるようなものにしておけばよかったです。今後同じような内容をするときは、その変が要検討ですね。マークアップも各自で行うか、それともCSSだけにするか、マークアップに重点を置くか…その点を考慮しないと、短時間という枠の中でのコーディングは難しいみたいですね。

特に、初心者の方も何名かいたので、その方たちのためにも、説明しながら作業を進めていく時間がもう少しあった方がよかったなーとも思いました。

加えて言うなら、本当なら自分も一緒に作りながらの参加するという予定だったのですが、説明の時間も考えると、やはり時間が足りなかったですね。そこも、次回改善すべきところです。

今回の内容を少し説明

ちなみに、今回参加者の方に作ってもらったデザインは下記画像のようなものです。

※あくまで勉強会で使ったサンプルの画像です。

比較的簡単にできるかなーなんて思ったのですが、意外と躓きそうなところも多く、悩んだ人もいるようでした。

今回は上記のようなデザインにするために、あらかじめデザインのパーツわけはすでに終えていて(画像は全部準備しておいて)、マークアップとCSSの設定をしてもらうという課題でした。

個人的なポイント

今回、先ほどのようなデザインをくみ上げるために、ここは難しいかなとか、ここを覚えてほしいなと思う点は主に２点ありました。

一つがナビゲーション部分と、TOPICSの部分(日付と内容を横並びにする部分)でした。

ここのマークアップとCSSをどのようにするのかというのが、皆さんどうするのかなーと思い、作ってもらいました。

ナビゲーション部分

■デフォルト時

■ロールオーバー時

メインとなるナビゲーション部分、作り方は何パターンかあると思います。例えば一つ一つパーツごとにimgを用意して、CSSで切り替える方法、JSで切り替える方法。あと、ロールオーバーの画像も合わせた１枚の画像にして、背景のポジションで切り替える方法(CSS Sprite)。どのようにするのかは、個々人にゆだねてみたのですが、皆さんならどう作りますか？

一応自分ならというサンプルでは、ここは一つずつパーツにわけimg要素としていれて、JSでロールオーバーさせる方法をとるようにしています。動作系はJSに役割を持たせるという意味でも僕はそうしています。

しかし、JSが使えない(動作させない)ようなときや、クライアントの意向などによってはCSSで切り替えたり、背景のポジションで切り替える方法などでロールオーバーさせるようにします。しかし、その方法は、通常テキストなどを表示させるのを画面上から見えなくする方法なので、個人的にできるだけそのようなSEOとしてマイナス要因になりかねないことは避けるようにしています。そういう理由もあって、ロールオーバーはJSにしています。

リスト部分

ここは皆さんどうするのか迷う部分だと思い、いれた部分だったりします。

ここ、昔の僕は下記のよなマークアップしてました。

■良くない例

<ul id="topics">
  <li>
    <dl>
      <dt>2009.05.03</dt>
      <dd><a href="#">ダミーテキストダミーテキスト</a></dd>
    </dl>
  </li>
  <li>
    <dl>
      <dt>2009.05.03</dt>
      <dd><a href="#">ダミーテキストダミーテキスト</a></dd>
    </dl>
  </li>
  <li>
    <dl>
      <dt>2009.05.03</dt>
      <dd><a href="#">ダミーテキストダミーテキスト</a></dd>
    </dl>
  </li>
  <li>
    <dl>
      <dt>2009.05.03</dt>
      <dd><a href="#">ダミーテキストダミーテキスト</a></dd>
    </dl>
  </li>
  <li>
    <dl>
      <dt>2009.05.03</dt>
      <dd><a href="#">ダミーテキストダミーテキスト</a></dd>
    </dl>
  </li>
</ul>

このマークアップにすると、CSSの設定によってはIEでかなりずれたりするのですよね。崩れるよーということでサンプルを作って、参加者に説明しました。特に内容部分が複数行になった場合や文字拡大をした場合に崩れずに表示させるようにするのが、上記のマークアップだと難しくなるのですよね。

というより、こんな複雑にしているのは僕だけなんていう可能性も…

※以下追記しました
例えばシンプルなマークアップなら下記のようなもの。

■参考例

<dl id="topics">
  <dt>2009.05.03</dt>
  <dd><a href="#">ダミーテキストダミーテキスト</a></dd>

  <dt>2009.05.03</dt>
  <dd><a href="#">ダミーテキストダミーテキスト</a></dd>

  <dt>2009.05.03</dt>
  <dd><a href="#">ダミーテキストダミーテキスト</a></dd>

  <dt>2009.05.03</dt>
  <dd><a href="#">ダミーテキストダミーテキスト</a></dd>

  <dt>2009.05.03</dt>
  <dd><a href="#">ダミーテキストダミーテキスト</a></dd>
</dl>

定義リストでも十分です。dtにfloatをかけ、回り込んでいるddで点線を指定することで表現できます。ただし、縦横幅がdtとddでずれないように注意！また、hasLayoutもtrueになるようにしておかないと、ずれたりする原因になるので注意です。

■参考例のCSS

dl#topics {
	clear:left;
	margin: 0 0 20px 10px;
	overflow: hidden;
	font-size: 120%;
}

dl#topics dt {
	float: left;
	width: 6em;
	line-height:1.6;
}


dl#topics dd {
	padding: 0 0 0 6.5em;
	line-height:1.6;
	border-bottom: 1px dotted #333333;
}

ただし上記のCSS設定だと、IE6で、一行目のddが数ピクセル内側に入り込むバグがある。hasLayoutをtrueにしたいところですが、いろいろ崩れたりする可能性もあるので工夫する必要はあると思われる。
２行以内で内容を収めるなら、dd側の左paddingはなくして、dtとddにpaddingやmarginで高さをつけると複数になっても左側に入り込まないようになる。

※追記ここまで

単純にliだけでもいいのかもしれないですが、さらにその中を細かく構造化したら…などと考えてマークアップしただけですが、入れ子が深くなりますし、崩れもしやすいので、上記のようなマークアップはしないのが一番ですね。

ちなみに、今の自分であれば、dlで括って、dtとddだけでマークアップするようにしています。皆さんならこの場合はどうしますか？

横並びのメニューは表？

フッター部分に横並びの、フッターナビをつけたのですが、この横並びのメニューをtableで入れるのは？というご意見も出ました。自分はリスト(li)としてマークアップするのですが、なるほど、そういう見方もあるのかーと思いました。しかし、横並び一行はtabeleでマークアップするべきかどうかだったら「ベストな方法ではない」と思うのが僕の意見です。考える点としては、それがtable（表）なのかどうかなのだと思うのですが、どうなのでしょう？これも疑問だったりします。

意見交換したいですね

勉強会をしていて思うのは、上記のような「このマークアップでもいいのでは？」なんて意見が出たときに、ベストなマークアップって結局どれなのか？というところを考えなくてはならないのではないかと思います。文書構造どおり、さらにユーザビリティーにも配慮してのマークアップがベストになるのでしょうけど、ではそのベストにするマークアップとは？…答えなんてないかもしれないですが、どうすべきなのか、考える必要はあるかもしれないですね。
皆さんなら、上記で様々でた部分、どのような理由でどのようにマークアップしますか？参考までに教えていただけたらうれしいです。

第３回勉強会について

さて、第２回が終わったばかりですが、第３回の勉強会についてです。第３回は来月の６月２７日土曜18時から、かでる2・7で開催します！内容はWordpressのカスタマイズについてです。詳細は今後アップ予定ですので、ぜひ参加をご検討ください。