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

こんな質問が来ました。「実際にHTML/CSSの模写をするときには、どのタグを使えばよいのでしょうか?」

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

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

マッキー/ エンジニア勉強中
マッキー/ エンジニア勉強中

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

YutoSeta
YutoSeta

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

マッキー/ エンジニア勉強中
マッキー/ エンジニア勉強中

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

YutoSeta
YutoSeta

「htmlタグはどのタグを使えばいいのか」ということですが、CSSを覚えるという観点ならまずはdivタグとspanタグを使って模写してみるといいと思います。aタグ、inputタグ、imgタグなどはdivでは実現できないので模写でも使用する必要がありますが、それ以外のほとんどのタグはdivで代用できます。 HTMLで正しくマークアップすることが目的であれば、 見た目の模写ができるようになったのちに改めて適切なタグを使用して学ぶのが効率的です。正しくマークアップをすることよりも正しく見た目を再現できることの方が実務では優先度が高いと個人的に思っています。正しくマークアップをすることは、サイトの構造がGoogleに正しく伝えられSEO上の効果が見込めます。また、視覚障害者などに向けたアクセシビリティ上の効果が見込めます。

YutoSeta
YutoSeta

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

マッキー/ エンジニア勉強中
マッキー/ エンジニア勉強中

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

補足説明

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

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

参考サイト

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

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

Yuto Seta
Yuto Seta

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

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

マッキー/ エンジニア勉強中
マッキー/ エンジニア勉強中

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

コメントを残す

メールアドレスが公開されることはありません。