実際にHTML/CSSの模写をするときには、どのタグを使えばよいのでしょうか?

実際にHTML/CSSの模写をするときには、どのタグを使えばよいのでしょうか?

Twitterでこんな質問をいただきました。HTMLとCSSを勉強中の人には参考になるのではないかと思い、記事にしました。以下、質問のやりとりです。

http://eclair.company/media/wp-content/uploads/sites/2/2020/02/V44VsTT8_400x400.jpg
マッキー/ エンジニア勉強中

お疲れ様です。 突然申し訳ありません。 コーディングの事で質問させていただいてもよろしいですか?

http://eclair.company/media/wp-content/uploads/sites/2/2019/11/seta.jpg
YutoSeta

こんにちは。 どんなことでしょうか?

http://eclair.company/media/wp-content/uploads/sites/2/2020/02/V44VsTT8_400x400.jpg
マッキー/ エンジニア勉強中

HTML/CSSの勉強をしているのですが、実際に模写をしようとするとどのタグを使ったら良いのかわからずアドバイスいただけたらと思い連絡してしまいました。

http://eclair.company/media/wp-content/uploads/sites/2/2019/11/seta.jpg
YutoSeta

「htmlタグはどのタグを使えばいいのか」ということですが、ひとまず他のタグは無視してdivタグで模写してみるといいと思います。 aタグ、inputタグ、imgタグなどはdivでは実現できないので模写でも使用する必要がありますが、それ以外のほとんどのタグはdivで代用できます。 模写ができるようになったら、改めて適切なタグを使用すれば問題ありません。htmlタグは見た目には影響しませんし、実際のところSEOやアクセシビリティの上で部分的に効果が見込めるくらいなもので、実務ではそこまで厳密にチェックが入らないケースもあります。

http://eclair.company/media/wp-content/uploads/sites/2/2019/11/seta.jpg
YutoSeta

まずは見た目通りに模写ができればOKです!

http://eclair.company/media/wp-content/uploads/sites/2/2020/02/V44VsTT8_400x400.jpg
マッキー/ エンジニア勉強中

詳しく教えていただいてありがとうございます。🙇‍♂️
参考にしつつもう少し頑張ってみます!

補足説明

後述する参考サイトを読めばわかりますが、HTMLできちんとマークアップをしてサイトをつくることは以下の2つのメリットがあります。

  • Google検索エンジンにサイト内容を理解してもらえ、適切な検索順位で表示してもらえる(SEO効果)
  • 視覚障がい者などが視覚に頼らないWebサイト利用をすることができる(アクセシビリティ)

参考サイト

セマンティックなマークアップをするメリット
(WebアクセシビリティPart2)
https://www.granfairs.com/blog/staff/web-accessibility-02

この記事をかいてみての感想

http://eclair.company/media/wp-content/uploads/sites/2/2019/11/seta-1.jpg
Yuto Seta

TwitterのDMでもここのコメントでも質問してくれると、同じ悩みを持っている人が救われるな、と思いました。
ウェブについて勉強している読者の人もひっくるめて、一緒にこのメディアを育てていけると嬉しいな。

今回の質問者のTwitterアカウントはこちら

http://eclair.company/media/wp-content/uploads/sites/2/2020/02/V44VsTT8_400x400.jpg
マッキー/ エンジニア勉強中

Twitterアカウント:@ganbaruzo28
HTML/CSS、JavaScript、jQuery、Rubyを勉強してます! スキルは、まだまだですがマイペースに頑張ってます😊 💻WORKROOM CAMP&モモンガオンラインサロン💻

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です