[B! HTML] norandoのブックマーク

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

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

norando 2021/04/27

見直すか…！

HTML

リンク

HTMLコーダーにとっての2020年。アンケート結果から分析するイマドキのウェブ制作 - ICS MEDIA

ウェブ業界の当たり前だと思っていることでも、同業他社の人には違う常識があるかもしれません。自分が業界多数の傾向と違うところはどこなのか・・・、この連載ではアンケートデータから国内のウェブ業界の傾向を分析します。連載第6回目となる本記事ではウェブ業界の﹁HTMLコーダーにとっての2020年﹂と題してアンケート結果を紹介します。 HTMLのエディター HTML制作によく使われるエディターはどれでしょう？アンケートで質問してみました。 805票の回答があり﹁VS Code﹂が64.5%、﹁Atom﹂が8.8%、﹁WebStorm﹂が8.2%、﹁その他﹂が18.5%でした。 VS Codeは圧倒的な人気ですね。ICS MEDIAでは記事﹃VS Codeの拡張機能7選﹄で紹介しているとおり、無料のソフトウェアなのに開発を便利にする機能がたくさん揃っていて魅力的です。 WebStormの回答者数は

norando 2020/07/11

リンク

普通のHTMLの書き方

保守しやすく、規模に依存しないHTML文書のために一般 DOCTYPEで始める置き換えられるべきまたは旧式のDOCTYPEを使わない XML宣言を使用しない文字参照はできる限り使わない &と<、>、"、'は名前文字参照を使ってエスケープする制御文字や不可視文字は数値文字参照を使うコメントではその内容の前後へ空白文字を置く終了タグを省略しない空要素の書き方を混ぜないタグや属性値の前後へ空白文字を置かない大文字・小文字を混ぜない引用符を混ぜない属性を2文字以上の空白文字で区切らない真偽値を取る属性の値は省略する名前空間は省略する XML属性は使わない data-*とMicrodata、RDFa Lite用の属性と通常の属性を混ぜないデフォルトの暗黙のARIAセマンティックスを尊重する文書要素 lang属性を追加する lang属性の値はできる限り短くするできる限り

norando 2018/08/03

HTML

リンク

HTML5 + JavaScriptによるFormバリデーション ~マークアップ編~ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作

こんにちは、フロントエンドエンジニアのいなばです。最近何件かフォームのバリデーションの実装について相談される機会が続いたので、社内勉強会の資料を作ったついでに記事にもしてみました。今回は、大きく分けて下記2点を満たすフォームを作ってみたいと思います。不正な入力値のとき、エラー内容がリアルタイムに表示される各項目の入力内容により、送信ボタンの非活性化 / 活性化が切り替わる最近では当たり前になりつつある、エラーの内容がその場で確認できて、項目のバリデーションがすべて通らないと送信ボタンが押せないフォームです。基本方針 HTML/CSSでできることはHTML/CSSでやる HTMLでできないことをJavaScriptでカバーする HTML5からフォームのバリデーションに関する機能が拡張されたため、使えるものは使ってなるべく楽に実装することを目指します。フォームを構成する要素ざ

norando 2017/04/21

リンク

今どきの入力フォームはこう書く！ HTMLコーダーがおさえるべきinputタグの書き方まとめ - ICS MEDIA

みなさん、入力フォームを制作する際、どのような施策をおこなっていますか？　入力項目を見直したり、入力ステップを明確にしたりなど、入力フォーム最適化をおこなっていると思います。そのことで、コンバージョン率があがったり、ユーザーがストレスを感じないようになるでしょう。入力フォーム最適化はEFO対策 = Entry Form Optimizationとも呼ばれます。サイトの設計段階で検討すべきことが多いですが、コーディングでも考慮すべき事が多々あります。今回はHTMLコーダーがエントリーフォームを制作する際に考慮すべき点について紹介します。 ※本記事では最近のブラウザに適したHTMLコーディング方法の紹介を目的としています。そのため、デザインとアクシビリティーでのベストプラクティスを紹介したものではありませんのでご了承ください。自動入力機能に対応しよう Google Chrome︵デスクトッ

norando 2016/12/29

リンク

HTML5

W3Cは、初期のHTMLからXHTMLまでを仕様勧告したのですが、その作業の遅さなどの諸問題で、この団体に見切りをつけて枝分かれしたのがWHATWGです。 W3Cは、学術︵大学︶的で理想的。WHATWGは、技術︵ベンダー︶的で実地的。今のHTMLはWHATWGが主導しています。 WHATWGは、変化していくものとして扱うため、﹁HTML﹂と呼称。 W3Cは、固定された規格として扱うため、﹁HTML5﹂とバージョン化。 WHATWGが作ったHTMLを、W3Cが切りの良いタイミングで複写して、独自の考えを足したのが、﹁HTML5規格﹂です。

norando 2016/12/18

WHATWGがよく分かっていなかった、なるほど。

HTML

リンク

はてなブックマーク

タグ

関連タグで絞り込む (3)

HTMLに関するnorandoのブックマーク (6)

お知らせ

今週のはてなブックマーク数ランキング（2024年6月第3週）

今週のはてなブックマーク数ランキング（2024年6月第2週）

月間はてなブックマーク数ランキング（2024年5月）

公式Twitter

キーボードショートカット一覧

はてなブックマーク

公式Twitter

はてなのサービス