現在のGoogle HTML/CSS Guide コーディング規約/日本語訳
コーディングを勉強している方や、普段当たり前のようにコーディングしているけれど、上手く使えているのか不安な方向けにGoogle HTML/CSS Guideの翻訳記事を書きました。（2024年02月29日更新） 色んな方のコーディングを見ていると実に様々。情報や知識が古いままで、今では推奨されない書き方も散見されます。 特に仕事で使っていると、誰かに指摘されない限り自分のコーディングを見直す事は無いかもしれません。 ですがW3Cの定めたHTML5の廃止など、変化の速い業界では定期的な見直しは勿論、何か指標となる物があると安心です。 そこで今回はGoogleが用意しているgoogle html/css style guideのドキュメントを元に、Googleコーディング規約と要点を解説。このコーディングガイドラインが絶対的な正解では無いかも知れませんが、参考になれば嬉しいです。 Google
W3C発行のHTMLがすべて廃止された日 | フロントエンドBlog | ミツエーリンクス
あくまで有効日数はW3C仕様の名目上のステータスであり、参考情報にしか過ぎないわけですが、HTML5とそれよりも前に策定された(X)HTML仕様は、2018年3月に一斉に廃止され、HTML Review Draftと入れ替わるタイミングでHTML 5.1とHTML 5.2が同時に廃止されました。Second Editionを含んでいますが、HTML5シリーズがいずれも勧告から3年で廃止されているのは何とも興味深いところではあります。 また、古い話ですが、当時HTML5のEditorを務めていたHixieことIan Hickson氏が2008年に「HTML5の完成は2022年ごろになる」と発言していたことがありました（HTML5の完成は2022年！？ | Web標準Blog | ミツエーリンクス）。2012年にW3CとWHATWGのHTMLが分裂[1]し、結局今年になってWHATWG HTM
新しいHTMLタグportal、Portals機能で変わるWebの遷移体験！ CDS2019で紹介されたヤフーの実装例 #UIUX
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは。PayPayモールのエンジニア関と、Yahoo!ニュースのデザイナー萩野です。 皆様、突然ですがPortalsをご存じでしょうか。 Portalsとは、新しいHTML要素です。2019年11月11日〜12日にサンフランシスコで開催された「Chrome Dev Summit 2019」（以下CDS）でも紹介されました。 本記事では、Portalsが可能にする新しいWebでの体験をご紹介します。 Portalsとは？ なにができるの？ Webブラウザー上でユーザーにとって良い体験を提供するためには、表示速度の向上が欠かせません。 Portalsを利用すると、画面遷移の体感速度を向上させることが可能です。 まずはこちらの比較
W3Cで現在公開されているHTMLとDOM仕様は将来廃止されます - 水底の血
まえがき W3C（とWHATWG）からの公式なアナウンスはまだ確認していませんが、何度目かに結成されるW3C HTML WorkingのDraft Charterと、このCharterから辿れるDRAFT Memorandum of Understanding Between W3C and WHATWG（Memorandumは日本語で覚書などと訳されるので、ここでも覚書と呼びます）がブログエントリーのタイトルのソースになります。もっとも、今確認できる覚書もドラフトですから、変更があるかもしれません。しかしながらURLで観測できるわけですから、大筋でW3CとWHATWGとの間で合意が取れているのではないかと推測します。あとは、覚書だけでなくCharterもドラフトということになっていますが、以下の文章では面倒なので省略します。最後にお約束ですが、このブログエントリーは「だいたいあってる」感
若い世代が知らない2000年代のHTMLコーディングの地獄 - ICS MEDIA
ウェブの黎明期である2000年頃と比べてはるかにHTMLはコーディングしやすくなりました。10〜20年前のHTMLコーディングはどのようなものだったのでしょうか。 この記事では、NetscapeとIEのブラウザ戦争に決着がついた後の、IE6が全盛期となった2000年代のウェブサイト制作を振り返ります。懐かさに浸たり、現代のウェブの成り立ちに通じる温故知新な情報として参照ください。 テーブルレイアウト / spacer.gif XHTML・CSSが普及するまではテーブルレイアウトが一般的でした。テーブルレイアウトとはtableタグを使い、格子状にレイアウトしていく手法です。テーブルレイアウトは、デザインファイル（Image ReadyやFireworks）から画像を切り出す「スライス機能」と相性のいい方法でした。 <table border="0" cellspacing="0" cellp
【2018年版】今押さえておきたいフロントエンド関連 - Qiita
個人的に押さえておいたほうがいいと思う情報や最近動向が気になっている情報をまとめました。 短時間調べた程度でザックリ書いてますので、掲載している情報に間違いなどありましたら、 ご指摘いただけると助かります。 現時点でWorking Draft,Editor's Draftの情報もありますし、ブラウザ側でほとんど実装されてないプロパティ（業務ではあまり使えない系）も積極的に載せていっているので、対応状況についてはCan I useやMDNで調べてください。 途中まで載せてたけど多すぎてあきらめた... HTML Resource Hints(dns-prefetch, preconnect, prefetch, prerender) 指定しておくことで、ページ遷移時に名前解決・接続・リソースの取得・レンダリングを早めることができる。 Link types - HTML | MDN Prelo
HTML 5.2の新機能・削除された機能、変更された記述ルールのまとめ
HTML 5.2は2017年12月14日に勧告（Recommendation）され、仕様がRECステージに達しました。これはW3Cメンバーとディレクターの正式な承認を受けたことを意味し、Web制作者として、新しい機能の実装を開始するのに最適な時期になります。 HTML 5.2ではいくつかの新機能と削除された機能があり、記述ルールもいくつか変更され、今までinvalidだったものがvalidになり、新しくinvalidになったものもあります。 すべての変更点はHTML 5.2: Changesで確認することができます。 Web制作に最も影響を与えると思われるいくつかの変更点について説明します。 What's New in HTML 5.2? 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 HTML 5.2の新機能 HTML 5.2
HTML 5.2: 4.13. Common idioms without dedicated elements
Table of contents 1 Introduction2 Common infrastructure3 Semantics, structure, and APIs of HTML documents4 The elements of HTML5 Microdata6 User interaction7 Loading web pages8 Web application APIs9 Communication10 Web workers11 Worklets12 Web storage13 The HTML syntax14 The XML syntax15 Rendering16 Obsolete features17 IANA considerationsIndexReferencesAcknowledgmentsIntellectual property rights F
Unicode その他の記号及び絵記号 - CyberLibrarian
範囲：1F300～1F5FF Unicodeのその他の記号及び絵記号（The Unicode Standard Miscellaneous Symbols and Pictographs）を十六進数の数値文字参照で記述した表です。 Weather, landscape, and sky symbols（気象、景観、空の記号） Unicode 表示 名称 備考 1F300
dev.toがなぜinsanely fastを実現出来ているか - Qiita
INSANELY FAST Qiitaを読んでる人なら https://dev.to をほとんどの人が見たはず。見てない人は見てきてください、速すぎて驚くはず。またmizchiさんがdev.toに書いた なぜ dev.to がこんなにも速く、こんなにも自分にとって感動的なのか - dev.to を見た人も多いと思う。個人的にHeroku, Railsを採用してここまで爆速なサイトを構築出来ていることは今までの常識を覆す衝撃な出来事だった。こんな新しい発見をもたらしてくれたdev.toには本当に感謝してる。自分もこんなサイト作ってみたいなと思ってdev.toのことを色々調べてて少し知見がたまったので共有してみます。 この記事はOkinawa.rb Advent Calendar 2017 7日目の記事です。 Twitterやってるのでよかったらフォローしてください🙋♀️ @saboyut
フロントエンドチェックリスト（日本語訳） - Qiita
GitHubで公開されているフロントエンドチェックリストというドキュメントが、網羅されている内容が幅広く便利そうだったので、日本語に翻訳しました。 日本語版は、以下のGitHubリポジトリにあります。GitHub側と自動的に連携するようにしておりますので、誤訳や誤りなどがあれば GitHub のプルリクエストまたは Issue で報告していただけると幸いです。 https://github.com/miya0001/Front-End-Checklist 日本語版への貢献方法 最終更新日時: 2017-11-19 03:50:47+09:00 (未翻訳) Front-End Checklist The Front-End Checklist is an exhaustive list of all elements you need to have / to test before lau
【Tips】ただただフォーム最適化をまとめたチートシート的なもの - Qiita
概要 主に「2016年 - 2017年」の記事から引っ張ってきて、ただただ羅列したものです。 なので、このまとめ自体の最適化が成されてないですが、そこはご容赦ください… ユーザビリティ・アクセシビリティ 分かりやすさ 入力項目は必要最低限にする 項目名は簡潔で短く分かりやすいものにする できる限り入力フィールドの数は最小限にする 一つの項目の入力フィールドを複数に分けない 例：姓名、電話番号、郵便番号など 必須項目は、「＊」ではなく「必須」と表示する ラベルやヒント（○文字以上必要です）をplaceholderに設定しない フォーカスした際に消えてしまうため、入力例を入れてあげる程度にする フォーカスした際の入力フィールドのデザインを変える 入力フィールドのサイズは、入力される値に合わせる リアルタイムでチェック出来るバリデーションを実装する エラーメッセージは、上部にすべて表示するのでは
HTTP APIの詳細なエラー情報をレスポンスに持たせるための仕様
今日では HTTP(s) で API が公開されることは当たり前の時代ですが、エラーをアプリケーションにどう伝えるかは、個々の API の設計に依存していました。特に、HTTP ステータスコードは有限であり、元々持っている意味があるので、自由に使うことはできません。API はそのドメインごとにもっと複雑で細かなエラー情報があるはずで、それらはレスポンスボディに載せてアプリケーションに伝えることになりますが、その書式に規定は今までありませんでした。 HTTP API にて、アプリケーションにエラー情報を伝達するための（レスポンスボディに載せられる）標準的な形式が、RFC7807 Problem Details for HTTP APIs で定められています。適用例としては、以下のようになります。 HTTP/1.1 403 Forbidden Content-Type: application
W3C、「HTML5.1」を今年9月に勧告とする計画。仕様はGitHubで公開
W3CでHTML5仕様の策定を行っているWeb Platform Working Groupは、W3Cのブログにて「WORKING ON HTML5.1」という記事を公開し、2016年9月にHTML5.1仕様を勧告にする計画を明らかにしました。 6月中旬までにHTML5.1の勧告候補を公開し、9月に勧告にするとのこと。 The plan is to ship an HTML5.1 Recommendation in September 2016. This means we will need to have a Candidate Recommendation by the middle of June, following a Call For Consensus based on the most recent Working Draft. 計画ではHTML5.1の勧告を2016年9
HTMLを15年書いてる僕が語ってみる vol.1 - Qiita
僕はHTMLを書き始めて約15年。割と年齢は若い方で、いわゆる「ベテラン」という感じではないのですが、 長く付き合ってきたこの言語について、最近思うことが多いので語らせてください。 元W3Cメンバーとして考えていたことなので、 マークアップエンジニア、フロントエンドエンジニアには刺さるかもしれません。 以下が今回のお話です。 語りたいこと HTMLの変遷 HTMLってそもそも何 僕が書いた15年間 1. HTMLの変遷 1-1. 僕のマークアップの始まり 約15年前、僕は自分が産まれる前にできたファミコンのスーパーマリオブラザーズが大好きで、 なんとなく勢いで「ホームページ」を作ってみました。 母親がドリームキャストでホームページを作っていたので、「あ、なんかできそう」みたいな感覚で。 1-2. テーブルレイアウト 当時はHTMLが主に大文字で書かれていて、ほとんどがtable要素でマーク
accept-charset属性 | ばけらの HTML リファレンス(未完成)
この属性を持つ要素 …… form accept-charsetの解説フォームに日本語の文字を入れて送信したりする場合、それは何らかの文字符号化方式でエンコードされて送信することになります。受け側のシステムは符号化方式を自動判別して良きに計らってくれることもありますが、特定の符号化方式でないとうまく処理できない場合もあります。特に最近の blog などには UTF-8 でないと処理できないシステムが多く、トラックバックが文字化けするなどという現象が良く発生します。 HTML4 では、受け側が処理できる文字符号化方式を form要素の accept-charset属性で指定することができます。たとえば、UTF-8 で送信したいような場合は、以下のようにします。
今どきの入力フォームはこう書く！ HTMLコーダーがおさえるべきinputタグの書き方まとめ - ICS MEDIA
みなさん、入力フォームを制作する際、どのような施策をおこなっていますか？ 入力項目を見直したり、入力ステップを明確にしたりなど、入力フォーム最適化をおこなっていると思います。そのことで、コンバージョン率があがったり、ユーザーがストレスを感じないようになるでしょう。入力フォーム最適化はEFO対策 = Entry Form Optimizationとも呼ばれます。 サイトの設計段階で検討すべきことが多いですが、コーディングでも考慮すべき事が多々あります。今回はHTMLコーダーがエントリーフォームを制作する際に考慮すべき点について紹介します。 ※本記事では最近のブラウザに適したHTMLコーディング方法の紹介を目的としています。そのため、デザインとアクシビリティーでのベストプラクティスを紹介したものではありませんのでご了承ください。 自動入力機能に対応しよう Google Chrome（デスクトッ
ime-modeの標準仕様からの削除について - もずはっく日記 - WebStudio
もずはっく日記(2015年3月) 2015年3月2日 ime-modeの標準仕様からの削除について 初回投稿日時: 2015年03月02日13時03分57秒 最終更新日時: 2015年03月02日13時10分43秒 カテゴリ: CSS Firefox IE Windows SNS: Tweet (list) CSS3-UIの仕様書からime-modeの定義が削除され、各ブラウザベンダは直ちに実装を中止し、サポート済みのブラウザも実装を削除すべきだという文言に変更されました。 スラッシュドットでも取り上げられてて、多くのコメントが寄せられてました。参照されてる記事読まずに、書かれたコメントも多くて非常にアレではありますが、それはさておき、情報が混乱してるのは確かな訳なので、軽くまとめてみようかと。 あくまで私見ですが、少なくとも短期的にはあり得ないと思っています。そのような話がbugzi
FORMエレメント以外でfocusイベントを発生させる方法 - Qiita
例えば<div>でfocusイベントを発生させたい場合。 これやりたくて先日小一時間悩んだ。 解は簡単で、tabindex属性をつければOK。<div tabindex="0">みたいに。そうすればそのエレメントでfocus,blurイベントが発生するようになる。 tabindex属性はグローバル属性なので、すべてのエレメントにつけることができる。 以上 Register as a new user and use Qiita more conveniently You get articles that match your needsYou can efficiently read back useful informationYou can use dark themeWhat you can do with signing up
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
TwitterカードやOGPなど、head内のmetaに記述するコードを簡単に生成できるオンラインサービス -Hey Meta
