とあるweb屋の仕事術

とあるweb屋の仕事術

10年以上現役のweb製作屋さん。web製作雑務全部やる。

CSSの疑似要素はあくまで装飾、意味のあるアイコンや文言には使用しない。

CSSの疑似要素はあくまで装飾、意味のあるアイコンや文言には使用しない。

CSSの疑似要素、便利ですよね。

疑似要素については下記の記事が参考になります。

まだ知らない方はどうぞ。

saruwakakun.com

この疑似要素ですが、

便利ですが、使いどころはしっかりと考えなくてはいけません。

疑似要素はCSSです。

 

CSSはデザインの「装飾」です。

ただの見た目のあしらいにすぎません。

 

なのでCSSには「意味のある要素」を

持たすべきではありません。

HTMLだけで意味がとおるか、

装飾を外したときに意味が成立するか、

これが基準になります。

 

いまどきCSSを外してWebサイトを

閲覧するユーザはいないでしょうが、

実装者としては正しくHTMLを組むべきです。

 

疑似要素はよくアイコンなどで

使用されることがありますが、

そのアイコンがなかった場合、成立しないものは

疑似要素で実装してはいけません。

 

たとえば、食べログぐるなびのサイトで

特定の店舗だけに「優良店」のようなアイコンを

つけるとしましょう。

 

その場合、疑似要素で実装すると、

HTMLには「優良店」という表記がありません。

HTMLだけで考えたときに、どの店舗が優良店か

わからなくなります。

これだと検索エンジンにもどれが優良店なのか

わからなくなるので、「優良店」アイコンは

HTML側に記述すべき、となります。

 

疑似要素で実装してもいい例は、

本当にただの装飾の場合。

たとえばECサイトで「よくある質問」ページが

あったとします。

 

<よくある質問>

→ お支払いについて

→ 配送について

→ 返品について

 

こんなデザインの場合「→」を少し装飾して

矢印をアイコンにしたりすることがあります。

この矢印アイコンは「装飾」です。

なくても成立しますよね。

 

疑似要素はこのように

「なくても成立するけど装飾したい場合」に

使用するのが正しい使い方になります。