ポアモア Pour Moi レディース ボディースーツ インナー・下着 Suspense lace and fishnet deD29IHE

知ってた?ナルホド! BLOG

2019.10.28

シルバー 45cm 4面カットアズキチェーンあす楽メール便 ポスト投函 ネコポス200円 4面カットあずきチェーン線径Yf6v7gby

WRITTEN BY

 | 

HIRAHARA NATSUMI

こんにちは!コーダーの平原です。

Webサイトのコンテンツやパーツを作るのに、HTMLタグの選定や、CSSの当て方は人それぞれだったりします。
ですが、中には検索エンジンの読まれ方を意識していないものや、メンテナンス性の悪いもの、HTMLを読み物として読んだ時に、コンテンツ同士の関係性がまずかったりするものもあります。

弊社の開発チームでは、そのようなことにならないよう、理想的なコーディングの方法というものを日々追求し、それをチーム内で標準化しています。

「これ、どうやってコーディングする?」シリーズでは、Webサイトでよく見るコンテンツやパーツの、弊社の開発チームが思う理想的なコーディングの仕方をご紹介していきたいと思います!
それでは第一弾いってみましょう!

  1. 見出し下の英字
  2. HTMLの選択肢
  3. 弊社開発チームの答え
  4. まとめ

シルバー 45cm 4面カットアズキチェーンあす楽メール便 ポスト投函 ネコポス200円 4面カットあずきチェーン線径Yf6v7gby

日本のWebサイトによく見られる、上記画像のような「見出し下の英字」。
これをコーディングするとなったら、様々な方法がありますよね。

シルバー 45cm 4面カットアズキチェーンあす楽メール便 ポスト投函 ネコポス200円 4面カットあずきチェーン線径Yf6v7gby

考えられるのは、以下のような選択肢だと思います。
この3つの中で、どれが良いコーディングの方法だと思いますか?

  1. シルバー 45cm 4面カットアズキチェーンあす楽メール便 ポスト投函 ネコポス200円 4面カットあずきチェーン線径Yf6v7gby

  2. シルバー 45cm 4面カットアズキチェーンあす楽メール便 ポスト投函 ネコポス200円 4面カットあずきチェーン線径Yf6v7gby

  3. ウォッチHERMES エルメス クリッパー デイト ホワイト文字盤 SS シルバー レディース QZ クォーツ 腕時計 CFK1Jlc

    シルバー 45cm 4面カットアズキチェーンあす楽メール便 ポスト投函 ネコポス200円 4面カットあずきチェーン線径Yf6v7gby

    SERVICE

シルバー 45cm 4面カットアズキチェーンあす楽メール便 ポスト投函 ネコポス200円 4面カットあずきチェーン線径Yf6v7gby

答えは…2番の

シルバー 45cm 4面カットアズキチェーンあす楽メール便 ポスト投函 ネコポス200円 4面カットあずきチェーン線径Yf6v7gby

です!

SERVICEと、サービスは同じ意味を持っていますよね。
意味が重複するものは、HTMLの要素として置いてしまうのではなく、カスタムdata属性で、見出しの装飾として扱ってしまいましょう。

ちなみにCSSは下記のような形で記述します。
擬似要素のcontentにattr属性を指定することで、data-titleを取得することができます。
便利ですよね。

h2{
  position: relative;
  padding-bottom: 1em;
  text-align: center;
  font-size: 2rem;
  line-height: 1;
}

h2:before{
  content: attr(data-title);
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  font-size: 1rem;
}

空調風神服 KU90550setM XLセット販売空調服 長袖ワークブルゾン バッテリー 選べるファン 基本セット 交織トロピカル 夏用 作業服 作業着 熱中症対策 クーリングウェア サンエス SUN SvwmONn8y0

Webサイトは、公開して完了ではなく、その後の計測やメンテナンスが必要です。
その為にも、コンテンツやパーツのコーディングの方法は、ルールを決めて標準化することで、メンテナンス性がぐっと高くなり、仕事の効率化にも繋がります。
シャネル CHANEL サングラス レディース メンズ ブランド UVカット おしゃれ 薄い 色 紫外線対策 スクエア 伊達メガネ 黒 ブラック 5349A 1555 S6SqMSGUzpV とりあえずspan!とりあえずdiv!というコーディングから、少しでも要素に意味や関係性を持たせてあげて、検索エンジンに正しく読んでもらえるHTMLを作っていきたいものですね。

PAGE TOP