comments新人コーダーにお願いしたい、たった2つのことPocketぼくにはまだ直属の後輩はいませんが、作業内容について教えることがある後輩はいます。その後輩に、口を酸っぱくなるほど伝えてきたこと。それをぜひ後輩に後輩ができたら教えてほしいと思っています。今はもうスクリプト書いたりしていますが、やはり入った当初は、修正や更新ばかり指示されます。未経験で入ったり、実務経験が浅いとしょうがないのですが。直属の上司じゃないぼくが振った案件が、初めての0からマークアップしてCSS構築をする。最悪、納期に間に合わなければぼくがすべて組み直すつもりでしたけどwwwその案件は、後輩にHTMLとCSSコーディングしてもらったあとにぼくがWordrepssのテンプレート化するという内容。動きのスクリプトもできるだけ考えさせました。構築する上でお願いしたのはたった2つのこと。「もしもこうなったら」を常に考える事コーダーは入社当初、(ぼくもそうでした)デザインをいかに忠実に再現するかということにしか重きを置かれません。会社にもよるとは思いますが、まずは見た目から入ることが多いと思います。コーダーは、文字サイズや余白、マージンやパディングに最大限の努力をします。実際のところ、デザイナーがデザインしている段階では、いい感じに文字が入ってます。いい感じとは具体的には、改行や文字サイズ、文字間が調整されてかなり美しい状態。それを、忠実に再現するとだいたい本番運用が始まってから修正が入ります。項目がデザインより増えた。文字サイズがクライントの環境では違う。OSによってアンチエイリアスがかかったりかからなかったりする。デザインと同じ色なはずなのになんか見づらい。(特にグレー)デザインは1行だったものが実は3行になった。静的なHTMLサイトだとまだいいですが、CMSで構築されていると後からの修正は厄介です。自分でCMSまで触れるなら文句は言いませんが。「もしもこうなったら」を常に考えることが大事です。HTMLやCSSにはif文はありませんが、頭の中でもしもこうなったら、もしもこれがこうなったらを考えて欲しい。独学だったり、デザインがメインの専門学校だとなかなか意識しない部分だと思います。実際後輩のマークアップもほとんど修正させました。このような文章が合ったとします。桃太郎桃太郎の誕生昔々あるところに、おじいさんとおばあさんがいました。おじいさんは1.休日はごろごろしている。2.家事はほとんどしない。3.仕事は山へ芝刈りにいく。おばあさんは、川へ洗濯に行きました。洗濯への道順はこちらなんやかんやで、桃太郎が流れてきて、おっきくなって鬼ヶ島へ鬼退治に行くことになりました。桃太郎が鬼退治に行くことについておばあちゃんいきび団子を作ってもらい、いざ出発。途中できび団子をエサに仲間を手に入れました。仲間の詳細は以下の通り。・いぬ・さる・きじなんやかんやで鬼に勝ちました。来年度の仲間の募集は終了しました。あけましておめでとうございます。昨年は大変お世話になりました。本年も変わらぬご愛顧のほどよろしくお願い申し上げます。幸せに暮らしたようです。昔々あるところに、おじいさんとおばあさんがいました。おじいさんは1.休日はごろごろしている。2.家事はほとんどしない。3.仕事は山へ芝刈りにいく。おばあさんは、川へ洗濯に行きました。洗濯への道順はこちらなんやかんやで、桃太郎が流れてきて、おっきくなって鬼ヶ島へ鬼退治に行くことになりました。桃太郎が鬼退治に行くことについておばあちゃんいきび団子を作ってもらい、いざ出発。途中できび団子をエサに仲間を手に入れました。仲間の詳細は以下の通り。・いぬ・さる・きじなんやかんやで鬼に勝ちました。その後について活動履歴2013.10会社概要更新2013.11来年度の仲間の募集は終了しました。2014.01あけましておめでとうございます。昨年は大変お世話になりました。本年も変わらぬご愛顧のほどよろしくお願い申し上げます。幸せに暮らしたようです。最後がちょっとやっつけですねwこういう文章をどうマークアップするか、人それぞれやり方はありますが、まずはdivもspanも使わないこと。divやspanには文章的な意味は一切ありません。文章の内容を考えると、マークアップ例として以下のようになるのではないでしょうか。桃太郎<h1>桃太郎</h1><h2>桃太郎の誕生</h2><p>昔々あるところに、おじいさんとおばあさんがいました。</p><p>おじいさんは</p><ul><li>1.休日はごろごろしている。</li><li>2.家事はほとんどしない。</li><li>3.仕事は山へ芝刈りにいく。</li><!--数字が付いているので<ol></ol>で囲みがちだけど、この文章内容など、数字による優劣は存在しないので<ul></ul>で囲む。--></ul><p>今日は山へ芝刈りに。</p><p>おばあさんは、川へ洗濯に行きました。target="_blank">こちら</a></p><!--道順へのリンクを別タブ(別窓)にしている理由は、読んでいる最中に別ページヘ遷移してしまうとユーザーが混乱する原因となる。--><p>なんやかんやで、桃太郎が流れてきて、おっきくなって鬼ヶ島へ鬼退治に行くことになりました。</p><h3>桃太郎が鬼退治に行くことについて</h3><p>おばあちゃんいきび団子を作ってもらい、いざ出発。</p><p>途中できび団子をエサに仲間を手に入れました。</p><!--この2つを改行コード入れてひとつに纏めないのは、2つの文章は関連性が薄く、別々の段落として考える方が自然。--><p>仲間の詳細は以下の通り。</p><ul><li>・いぬ</li><li>・さる</li><li>・きじ</li></ul><p>なんやかんやで鬼に勝ちました。来年度の仲間の募集は終了しました。あけましておめでとうございます。昨年は大変お世話になりました。本年も変わらぬご愛顧のほどよろしくお願い申し上げます。</li><!--更新履歴などはデザインの都合などもあり、<dl></dl>で組む方もいると思いますが、個人な意見だと、dlタグは定義リストです。活動内容は定義している文章ではないので、ulで囲みます。--><p>幸せに暮らしたようです。</p>1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859<h1>桃太郎</h1><h2>桃太郎の誕生</h2><p>昔々あるところに、おじいさんとおばあさんがいました。</p><p>おじいさんは</p><ul><li>1.休日はごろごろしている。</li><li>2.家事はほとんどしない。</li><li>3.仕事は山へ芝刈りにいく。</li><!--数字が付いているので<ol></ol>で囲みがちだけど、この文章内容など、数字による優劣は存在しないので<ul></ul>で囲む。--></ul><p>今日は山へ芝刈りに。</p><p>おばあさんは、川へ洗濯に行きました。読んでいる最中に別ページヘ遷移してしまうとユーザーが混乱する原因となる。--><p>なんやかんやで、桃太郎が流れてきて、おっきくなって鬼ヶ島へ鬼退治に行くことになりました。</p><h3>桃太郎が鬼退治に行くことについて</h3><p>おばあちゃんいきび団子を作ってもらい、いざ出発。</p><p>途中できび団子をエサに仲間を手に入れました。別々の段落として考える方が自然。--><p>仲間の詳細は以下の通り。</p><ul><li>・いぬ</li><li>・さる</li><li>・きじ</li></ul><p>なんやかんやで鬼に勝ちました。</p><h2>その後について</h2><h3>活動履歴</h3><li>2013.10会社概要更新</li><li>2013.11来年度の仲間の募集は終了しました。</li><li>2014.01あけましておめでとうございます。昨年は大変お世話になりました。本年も変わらぬご愛顧のほどよろしくお願い申し上げます。個人な意見だと、dlタグは定義リストです。活動内容は定義している文章ではないので、ulで囲みます。--><p>幸せに暮らしたようです。</p>ぼくはあまりdl、ol、tableは使いません。文章構造的に合っていれば使いますけど。まとめ以上がぼくが繰り返し教えた2つのことです。2つ目はSEOの意味も含んでいるので、タグの意味を考えたマークアップをすること。そこからCSSでレイアウト、装飾をすること。1つ目のもしもを考えることは、ぼくが開発のプログラマと仕事した時にかなり苦労した経験からです。(プログラマはテンプレートの修正を嫌がるし、繰り返しを多用するのではじめに考えておかないまま作業をしてよく喧嘩しましたw)それに、この考え方はJavascriptやphpなどで繰り返し文やif文を作るときの基礎的な考え方になると思っています。以下に汎用性をもたせるかという部分で。こんなことを教えて教えた後輩が、途中で心折れずにこれからもがんばってくれることを期待して終わります。