最近の実装に合わせたHTMLテンプレート、基本のコードとすべての要素の役割も解説

最近の実装に合わせた、Webページ用のHTMLテンプレートを紹介します。 レスポンシブ用のHTML、ソーシャルメディア用のHTMLをはじめ、高速表示に欠かせないrel="preload"なども含まれています。IEなどの古いブラウザはプログレッシブエンハンスメントで対応しています。 HTMLテンプレートはすべての要素の役割を各行ごとに解説しているので、自分に不必要なものを削除したり加えたりすることもできます。 My current HTML boilerplate by Manuel Matuzović 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに HTMLのテンプレート（最終形） HTMLのテンプレートを1行ずつ解説 ページのタイトルと説明文、外部ファイル ソーシャルメディア用のHTML アイコンとアドレスバー もう

[coliss]

最近の実装に合わせたHTMLテンプレート、すべての要素の役割を各行ごとに解説

[su_zu_ki_1010]

この手の知識は定期的に更新していかないと、一昔前の記述が残ったhtmlファイルを書いてしまう…

[kzhvsonic]

こういうの読むと自分で管理してるサイトのテンプレートも書き換えなきゃなあと思うのだけど、なかなか時間が取れないままだ。

[waicode]

2020年代のHTMLテンプレート、というかheadタグを思い出したいときはココを見る。ogとかviewportとか。

[nelpesica]

[]

[muneking]

#direban

[buhoho]

参考になりました

[haruten]

これはありがたい

[tokage3]

ありがたや

[cloudyray]

html

[yamada_k]

JavaScript module に関する部分はバッドノウハウ的な香りがするなあ...。

[yamadar]

コリスさんいつもありがとうございます

[tettekete37564]

だいぶ疎くなってるからもはや勉強になるって勢い

[tk_musik]

独自に作ってたので助かる

[oqzl]

知識をアップデートする

[AzuLitchi]

自分のサイトが一番後回しになるあるある

[tnkhtm]

勉強になります

[ajisaiotoko]

そもそもこんなに色々書かなきゃいけないのも問題やと思うよ。もっとシンプルにならんの？？

[clubman023]

めも

[t0ng]

DOCTYPE宣言そんなことになってたのか

[spark7]

ogpとかtwitter cardとかヘッダを汚くしてくれて嫌やね

[kuzumaji]

不要コード整理しなきゃ…

[harry0000]

個人でfaviconとか作るの大変なんな…（助けて）

[lex010]

だいぶ昔には読めたはずなのに、今のはもう読めない

[fujibay1975]

なんなんno-js

[kujira_aoi_blue]

ちょうど切らしてた

[norando]

見直すか…！

[yarumato]

“最近のブラウザはほとんどがSVGファビコンに対応。favicon.svgの利点は、拡大縮小しても見栄えが良いことと、ダークモードに対応（メディアクエリでprefers-color-scheme: darkを使用）できることです。”

[teruringo]

ややこしい

[ksaito54]

気がつくと変わっている分野。

[kibitaki]

普段はコリス有難がる方ではないけど、先ほど目が腐るようなガイドライン記事を見たばかりなので目が潤う。