勉強会のゴールを一つのWeb サイト制作完成まで設定して、その制作プロセスをハンズオンして頂くスタイルを取りました。
今回のWeb サイトはドットインストールご提供頂いているのWordPress 入門を参考にさせて頂きました。制作者の田口さんにスペシャルサンクスです。
Index
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
１．ハンズオンの基本的なガイドライン
２．レスポンシブWeb デザイン
３．WordPress テンプレートタグの取り扱い
４．ハンズオンの課題
本日の勉強会にて参考にしましたWeb サイト
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
１．ハンズオンの基本的なガイドライン
完成しているWeb サイトからWordPress のコードを抜いていき、ラストは html ファイルまで戻していきます。
さらにほんの数行のhtml5 のコードにした段階で、そこからまた再びソースコードを補填しながら、元のテンプレートに戻していくという作業を行なって頂きました。
そうした作業を行なう中で、ほとんど手を加えなかったファイルが style.css です。HTML 構造をどんなにそぎ落としても、CSS はそのままにしておくスタイルを取りました。
マークアップはそれ自身で一つの大きなテーマです。HTMLファイルの基本構造を把握頂きましたら、すぐにWordPress タグに置き換えていく作業に入ってほしいという思いもありました。
２．レスポンシブWeb デザイン
今回の教材サイトは横幅600px 固定のWeb サイトでしたが、ご時世に基づき、レスポンシブWebデザインにおける rem （一文字を長さの単位とする）を基本単位とするレイアウト事例をご説明しました。ご参加の皆さまにたいへん興味を持って頂きました。次回のテーマの有力な候補としても検討中です。
いったん組み上がったHTML ファイルをそぎ落とし、再びそれを元に戻していくという作業を行なう中で、設定の状況や見落としなどにより元のデザイン・レイアウトに戻らない時があります。
今日の勉強会でもありました。そうしたときどうミスを見つけていくか、また不具合の切り分けを絞り込んでいくか、そのノウハウの共有なども図りました。
３．WordPress テンプレートタグの取り扱い
Firebug で元のソースコードのチェックを行ない、不具合を起こしている原因を絞り込んでいくプロセスは多少根気が必要となりますが、丁寧に時間をかけていけばほとんどは読み解けていけることが多いです。
分からないときはすぐに検索する。どんな時でも有効な作業ステップとなりますが、今回はことあるごとに WordPress Codex 日本語版で調べることに言及しました。
とくにテンプレート階層の理解は必須です。一つのテンプレートが優先して使用されるというのがどういうことなのか、具体的事例を交えてご説明をしました。
４．ハンズオンの課題
ハンズオンを行なう上での一つの課題は、参加者のPC 環境及びスキルのバラつきです。たまたま人数が少ないから個々に対応が可能だったものの、人数が多いときに同じように、個別の対応ができるかどうか、予定した日程を遅らせることなく進めていけるかどうか、いまはさまざまな試みの中で、ベストな選択ができるよう模索中です。
説明が多岐に渡るときに、ハンズオンで何をしていくのかを具体的に明示していけるかどうかが課題です。従前の資料の準備も明暗を分けそうです。どこまで労務をかけられるかの問題もありますが、行なうと決めた以上はベストな形にもっていく気概を、今後も忘れずに心がけていきたいと思います。
今回もご参加の皆さまに助けられながら、またたくさんの視点に気づかさせて頂きながら、学びのひとときを過ごしました。本当に感謝です。
