Help us understand the problem. What is going on with this article?

自己流 WebDesign 5箇条

More than 3 years have passed since last update.

色々な思想はあると思うけど、自分がコーディングするときに気を付けたり、発注する際にお願いする事など。
命令形になってるけど、ほぼ自戒。

  1. タグの意味を知れ
  2. position は使うな
  3. 動作以外の目的で JavaScript は使うな
  4. ラベル等に画像を使うな
  5. CSS をベタ書きするな

1. タグの意味を知れ

最も忌避される事例はテーブルレイアウトだろう。
「ホームページ」百家争鳴な時期においては Table タグを利用したデザインが主流だった。
かくいう自分もお世話になったわけだけど、そもそも Table はデータを入れるものだ。
それ以外は使うべきではない。

dl,dt,dd タグもよく横並びのために使われていたりするけど、本来はデータ定義につかうべきものだ。
div タグによる隙間作成もやめてほしい (margin,padding で済むならそれでやるべし)。
タグはデザインのためにあるわけではないのだ。

見た目が良ければいい?
もちろんそれもありだが、検索順位とプログラマからの評価は期待しない事だ。

2. position は使うな

後からデザインを調整するときに泣かされるのがこれ。
画面上の表示位置と、 HTML 上の位置が異なるため、なかなか直すのが大変だ。
ブラウザのデバッグツールで追跡すればすぐに位置は判明するが、あっち行ったりこっち行ったりして忙しいのはなるべく避けたいところ。

今ではそうでもないけど、ブラウザ間の微妙な誤差により上手く表示されないことも多々。
JavaScript で動作を追加する際なんかも、しばしば調整が手間取る原因になる。

[float+clear] もそれはそれで、 after 擬似要素の問題を孕むけど、 position よりかは HTML 上で追跡しやすいと思っている。

もし利用するならば管理台帳を作った方がいい。
メンテ時にも役立つし、どれだけ position に依存しているかも見えるだろう。

3. 動作以外の目的で JavaScript は使うな

Angler に喧嘩を売るつもりはないけど、 HTML 上に存在しないのに画面表示されている要素のデバッグは面倒な場合が多い。
HTML/CSS やサーバサイドで済むことはなるべくそこで終わらせるのが無難。
ただ、遅延ロード目的ならば、ユーザ体験向上のために必要と思っている(もちろん何でもかんでもやればいいということでもない)。

特にコーディングはデザイナがやって、動作はプログラマが並行して作成して後から合わせる場合なんかは色々な不具合を産みやすい。
デザイナが DOM 読み込み後に JavaScript で高さを調整する仕組みを導入していたために、そのページに画像カルーセルを実装したら取締役の写っている画像が画面外にぶっ飛んでいった、なんてこともあった。
それはそれで美味しいが、納品はできない。

4. ラベル等に画像を使うな

見た目は画像の方が断然良いのはわかるのだが、メンテナンス性が下がってしまう。
文字だったら修正も追加も楽ちんだ。
ブラウザ上でコピペもできる。
SEO 対策的にも文字の方が良いという話も (alt があれば問題ないという意見も聞くが、 Google の中の人じゃないので不明) 。

コーポレートサイトのリンク変更作業をした際、サイト自体は別な業者が作ったものだったためアイコンなどを作成した ai データがなく、たった数文字編集するためにサイト内全部のボタンを差し替えるという苦行を強いられたことがある。
さらに CSS の調整も必要になったため (background-image,:hover)、費用対効果も疲労度も最悪だった。

5. CSS をベタ書きするな

デザインの記述はなるべく分散させず、一つのファイルに集約されていると後から編集しやすい。
タグには data-* なども含め色々なエレメントを書く場合があるし、なるべく頭でっかちにしない方が可読性も上がる。
主役はタグの中身なのだ。

jQuery3 あたりからはタグに直接書かれた display:none を show() で表示できない、なんてこともあったりする。

shimon_haga
フルスタックWebエンジニア。 インフラからフロントエンドまで。 Webシステムやアプリで使う知識と経験は一通り。 PHP/JavaScriptなどが主戦場。 最近は React(Native), Vue, Laravel あたりをふらふらと。
https://shimon.biz
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした