マークアップ、プロとアマチュアの違い

youtubeで絶対に続けられる筋トレ動画を見て筋トレ始めました。ハードルを下げるって大事。ただ膝曲げしてる程度の物なんですが、隙間で出来るしフォームとかも気にせずやっても、次の日ちょっと筋肉痛なんですよね。意外と効いてるっぽくてうれしい。

さて本題に入ります。勉強中の人は結構悩むかもしれないプロとアマの違いについて書いていきます。未経験でも面接で、この記事の内容を気にかけて実装してます！と言えばアピールできるような物にしたいと思っています。それでは行ってみましょう！！

デザイン通りの実装ができる

デザイナーさんにマークアップの指導をしたことがあるのですが、デザインデータできっちり余白や文字サイズをそろえるデザイナーさんでも、マークアップに慣れないうちはなかなかそこまで気が回らないというパターンが多いです。余白の違いや文字サイズの違いを感覚的に理解できるようになるまでは、一度デザインデータをjpgなどで書き出してみて、backgroundに配置して自分の実装との差を見てみるのもいいかもしれません。

実際の利用を想定した実装ができる

作って終わりという作業はあまり多くなりません。保守業務でサイト内容を少しずつ変えていくことも多いです。そういった時、先を見据えた実装が求められます。

具体例を出すと、ブログ機能付きのwebサイトでトップページに最近の記事タイトルが表示される場合があるとします。ブログは記事ごとにタイトル名が変わりますので、長いタイトルもあれば短いタイトルもありえます。長文タイトルが設定されるとレイアウトが崩れることも多いので

overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

上記cssで1行までに収まるようにしたり、2行までで収まるcssを準備しておく必要があります。これらはもしかすると一生効果を発揮しないかもしれませんが、可能な限りレイアウトの破綻などが起きないようにマークアップをするのがプロの仕事です。

こちらの記事に現場で使うパターンが多く記載されているので、現場のcssの使い方を知りたい人はぜひ読んでみてください。

よくあるデザインで起こる想定外のコンテンツに備える、CSSの実装方法のまとめ

エラーの無い実装ができる

htmlはプログラミング言語と違い、エラーで処理が停止するようなことはありません。ページ内の要素をすべてdivで組むこともできますし、間違ったタグ組みをしても表示されないといったこともありません。ですが検証ツールにはエラーが表示されますし、読み上げツールを使用したときに意図しない伝わり方をする可能性もあります。バックエンドの人以上に正しいタグ組みをする意識が必要になります。

といってもたくさんあるタグとそのルールについて、いきなりすべて覚えるのは難しい所です。ですのでここはツールの力を借りつつ、じっくり覚えていくのがおすすめです。

Markup Validation Service

このサイトにURLやソースを記入するとHTML構文エラーを指摘してくれます。本番実装前は一度チェックを通し、少なくとも赤いエラーは無くなるようにしましょう。（私もたまにやってしまいます）

SEOへの影響や、ページの無いように変化は出ない「正しいタグ組み」ですが、素早く適切にクローラーに情報を渡すためにも、適切に書けるようにしましょう。

終わりに

今回はなかなかわかりづらいプロとアマチュアの違いについて、マークアップに絞ってですが書いてまいりました。技術的な話などは検索すれば見つけられますが、実際に現場に入る為に必要なものについて、悩んでいる人たちに届けられればと思います。ここまで読んでいただきありがとうございました！