WEBサイトをコーディングする時に、DOM構成について手探りで行ってしまい、結果ごっちゃごちゃになってしまう事、ありませんか？
HTMLはシンプルなDOM構造にしなければ、その後自分の首を締める事になりかねません。
レスポンシブデザインや、整ったUIを簡単に構築できる。
Bootstrapは、どうしてもネスト（階層）が深くなりすぎてしまって、これはこれでゴッチャゴチャになりがちというデメリットもあります。
確かに決まった書き方で整理さえできていれば、どんなに階層が深くても問題ないという考え方もありますが、構築完了後に修正したり機能追加する際に、地獄を見る経験をしたことがある人であれば、出来る限りシンプルな状態で構築するクオリティの高さを理解できると思います。
今回は、IMGタグについての特性を調査してみたいと思います。
シンプルDOMにして得られるメリット
訳も分からずシンプルDOMと言われて、ハイそうですかという感じにはなりません。
もちろん、これには理由が有ることを理解してから勧めましょう。
1. HTMLやCSSの実容量が軽くなり、ページの高速化、データの無駄転送防止につながる。
2. ネストが少ないのでソースコードが荒れることを極力防ぐことができる。
3. 管理するDOMが少なくなるので、その後にソースコードに触る際の管理コストが削減される。
いかがですか？シンプルにすることによるメリットはどれも魅力的なものばかりですね。
デメリットとしては、こうした事に対応するためのスキルが必要になるため、初心者にとっては難しい状態になる可能性もありますが、敷居の低いデメリットは考えないほうが無難な為、技術革新を追求する姿勢で行きましょう。
IMGタグの現状
このアイコン画像に枠線を作る場合、1階層上にdivタグなどで囲ってやることで、枠線描画を簡単に行うことができます。
<div style="display:inline-block;border:1px solid black;border-radius:50%;text-align:center;padding:10px;">
<img>
</div>
上記構成をIMGタグのみで行ってみると・・・
上位階層が無くてもほぼ同じ書き方で対応ができてしまいます。
<img style="width:100px;height:100px;display:inline-block;border:1px solid black;border-radius:50%;text-align:center;padding:10px;">
これを、cssの疑似要素で行う場合・・・
{
content:url(画像パス);
display:block;
width:100px;
height:100px;
border-radius:50%;
border:1px solid black;
padding:10px;
}
そんなに難しい操作を行わなくても、無駄なDOM構造を減らすことは簡単にできそうですね。
いっその事CSSで画像管理するような構造も悪くないかもしれません。
ただし、疑似要素で作りこんでしまうと、HTMLソースコードを読んだだけでは、構造の理解がしずらいというデメリットも生まれてしまうので、class名などのレギュレーションをしっかりしないといけませんね。
