THE HAM MEDIA BLOG

札幌での第2回XHTML&CSSコーディング勉強会を終えて

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
コーディング勉強会
タグ:
セミナー
札幌
コーディング

第2回コーディング勉強会

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

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

※参考例を追記しました

今回は総勢22名の参加

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

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

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

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

■性別

勉強会アンケート

■年齢

勉強会アンケート

■勤務先

勉強会アンケート

■満足度

勉強会アンケート

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

勉強会アンケート

■今回の感想など(一部を抜粋)

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

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

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

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

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

今回の内容を少し説明

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

第2回コーディング勉強会 デザインサンプル
※あくまで勉強会で使ったサンプルの画像です。

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

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

個人的なポイント

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

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

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

ナビゲーション部分

■デフォルト時

第2回コーディング勉強会

■ロールオーバー時

第2回コーディング勉強会

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

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

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

リスト部分

第2回コーディング勉強会

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

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

■良くない例

<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にしたいところですが、いろいろ崩れたりする可能性もあるので工夫する必要はあると思われる。
2行以内で内容を収めるなら、dd側の左paddingはなくして、dtとddにpaddingやmarginで高さをつけると複数になっても左側に入り込まないようになる。

※追記ここまで

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

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

横並びのメニューは表?

第2回コーディング勉強会

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

意見交換したいですね

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

第3回勉強会について

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

この記事へのコメント
こんにちは。土曜日はありがとうございました^^

記事内で参加者への投げかけがあったので、コメントで書きますね。

・ナビゲーションのマークアップ
CSSのbackgroundをずらす方式と、jQueryのロールオーバーを使い分けます。今回は後者です。
スピードと完成度のどちらを重視するかで、案件ごとに変えています。
ただ、h2hamさんが仰っている文字を消すことによるリスクが不安ではあるので、最近はimg要素を使うパターンが多くなっています。

・TOPICSのリスト
このパターンだと、定義リストでマークアップしています。デザイン的に非常に困難な時は、テーブルにすることもあります。
h2hamさんが例示された、ulの中にブロック要素を入れ子にする方式は、好きになれないのと、定義リストが分断されてしまうのとで、私の場合は使うことはありません。

こういった限定的な「間違いの例」を初心者の方に提示すると、かえって混乱してしまうので、確実な解法を2、3パターンご紹介する方が良いと思います。
バグフィクスに限定したセミナーを開いて、そこでご紹介するのはどうでしょう(あ、それ面白そう)

・横並びのメニューは表?
「行」「列」「ヘッダとなるもの」が存在していないものはテーブルとみなさない方針で考えてます。

ディスカッションのときにもお話しましたが、
以下のように階層カテゴリー化されている場合は
テーブルとみなして良いと思います。

学科1 コース コース コース コース
学科2 コース コース コース コース コース
学科3 コース コース

長くなってしまった…これで失礼しますです。

来月のWordPressのは参加できないですが、
また次々回勉強させてくだしあ><
宜しくお願いいたします。
Posted by WebbingStudio at 2009年05月25日
先日はお疲れ様でした。トラックバックから飛んできました。
ほとんど話を聞かないで作業しまい申し訳ありません〜。
見た目だけでも完成させたかった。

私はHTML,CSS共に解釈は人それぞれなので、用法を守ればスパムにならないと考えています。

ちなみに、最後に仰っていたことは本気ですか?(笑)一応、動くことはできますよ。
Posted by Ichimura at 2009年05月25日
先日はお世話になりました。

勉強会の内容について意見させて頂きたいのですが、次回以降コーディングメインの勉強会がありましたら、グループ毎に分かれてディスカッションして、最後に全体のフォローアップをするようにした方がいいのではないかと思います。

参加者のスキルレベルにバラつきがあるように感じましたので、スキルレベルの高い人には物足りなく感じられ、スキルレベルの低い人には、敷居が高いように感じられたのではないでしょうか。

同程度のスキルレベルの人同士がお互いのコードを見て、問題点を洗い出し、全体のフォローアップで解決方法を検討するようにすれば、スキルレベルの差をある程度吸収できるのではないかと思います。

差し出がましいようで申し訳ないのですが、参考までにご一考ください。

それと、勉強会中に問題となっていた「横並びのメニューはテーブルでもいいのでは?」という意見についてですが、例えばレコードが1件で、且つデータ項目がないデータをデータベース上で扱うべきか検討した場合、データ構造上適切ではないと判断できるでしょう。同様にXHTMLがデータ構造を記述するものである以上、「横並びのメニュー」をテーブルにするのは、あくまでデザイン上の都合であるため、望ましいとは言えないのではないでしょうか。勉強会で明確な判断基準が提示されていませんでしたので、こちらも差し出がましいのですが参考にして頂ければ幸いです。
Posted by hirata at 2009年05月25日
>ウェビンさん
コメントと、ご意見ありがとうございます!プラス、ご指摘ありがとうございます。やはり同じデザインでも、人によっては作り方様々だなーというのが今回の感想だったのですが、ウェビンさんのソースは比較的同じでした(サンプルとは別)。違うとしたら、サブナビの部分くらい。
ナビゲーションは結局どうしたほうが一番いいんでしょうね。テキストを書いておいて、CSS Spriteを使うのか、それともJSで変化させるのか。いずれにせよ、私は今は後者を選んでいますが…ケースバイケースなんでしょうけどね。
TOPICSのは、本文でも書きましたが、以前はこんな風に書いて、結構やらかしたーなんて例です。ややこしく考えすぎなんですね、自分は。
>「行」「列」「ヘッダとなるもの」が存在していないものはテーブルとみなさない
これに関しても同感で、見た目とかそういうのを抜きにしても、テーブルじゃないよなーなんて思うのです。
うーん、おくが深い。

>Ichimuraさん
コメントありがとうございます。私の話は注意事項とか、こうしておきなーというアドバイスだったりしますので、知っている方でしたら黙々と作業で十分です!

あ、最後に言っていたことは本気でして、良ければライトニングトークくらいでいいので、話をしてもらえませんか?

>hirataさん
コメント、ご意見ありがとうございます!
>グループ毎に分かれてディスカッション
…というのは、実は第1回では行ったんですよ。ソースについてのディスカッションではなかったですが、活発な意見が出たりもしましたので、今後内容によっては取り入れていくつもりです。今回はあくまで「実践してみる」というのが目的でしたので、あのような形式でした。もちろん、おっしゃる通り、改善すべき点も多いのですけどね。

敷居云々のところは、そうですね、なかなかどちらに合わせるというのは難しく、かといってその中間というわけにもいかなかったりするので、毎回悩む点ではございます。まだまだ勉強会として工夫していくべき点なので、そこは要検討させてください。

テーブルの表示部分に関してはおっしゃる通りですね。横並びのメニューだからテーブルというのは、あくまでデザイン上の都合なんですよね。ご指摘ありがとうございます。
Posted by ハム at 2009年05月27日
偉大なポスト。ポイント驚くほど明確に表現します。
Posted by coach7store at 2011年03月10日
コメントを書く
お名前: [必須入力]

メールアドレス: [必須入力]

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック

トップに戻る

×

この広告は1年以上新しい記事の投稿がないブログに表示されております。