[B! html] chirollのブックマーク

普通のHTMLの書き方

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

chiroll 2018/07/24

html5
html

リンク

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

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

chiroll 2016/03/10

HTML

リンク

HTML5で誤用されがちな各要素の正しい使い方 | コリス

HTML5はXHTML1.0やHTML4を継承しつつ、使い方が大きく変わった点もあります。よく利用されるHTML5の各要素の誤用されがちな例とそれを正しく適切に使う方法を紹介します。 You're Doing it Wrong: Common HTML Tag Misuses [ad#ad-2] 下記は各ポイントを意訳したものです。 <br>の誤用 <br>の間違った使い方 <br>のよくある誤用は、コンテンツ間にスペースをつくるために使用することです。これはWYSIWYGエディタで作成するとよく起きる現象で、複数の空の行で隙間をつくります。 <br>の適切な使い方 <br>は文章を改行するために使用するものです。段落に分けるには<p>を使用し、文章同士の間をあけるためにはCSSのmarginなどで間隔を設定します。 <div>の誤用 <div>の間違った使い方 HTML+CSSでペ

chiroll 2011/09/28

HTML

リンク

HTML5 でやりがちな間違い

HTML5 Doctor で「Avoiding common HTML5 mistakes」という記事が上がっていましたので稚拙ではありますが翻訳など。HTML5 でマークアップする際にやりがちな間違いをいくつか挙げて、さらに正しいマークアップ例も紹介くれていますので、参考にしてみてはいかがでしょうか。 HTML5 Doctor で「Avoiding common HTML5 mistakes」という記事が上がっていましたので稚拙ではありますが翻訳など。HTML5 でマークアップする際にやりがちな間違いをいくつか挙げて、さらに正しいマークアップ例も紹介くれていますので、参考にしてみてはいかがでしょうか。 Avoiding common HTML5 mistakes ： HTML5 Doctor 翻訳といっても要約みたいな感じですので、書いてあることをそのまま日本語にしたものではあり

chiroll 2011/07/27

HTML

リンク

永久保存版！？携帯コーディング、これだけ読めばすぐできる！ | KAYAC

マークアップエンジニア（以下、ME）のtacamyです！(`・ω・´) カヤックでは、デザイナーもHTMLコーディングをしてくれています。（いつもありがとうございます！）そんなワケで、本格的にHTMLコーディングはしないけど、ちょこっとしたページなら組みますっていうデザイナー向けの、「コレだけ読めばすぐできる」シリーズを始めました。第一回は「携帯コーディング」についてです。携帯はPCとは全くの別物なので、なんとなく敬遠しがちですが、最低限の内容であれば覚えることも少ないですし、一度覚えてしまえばスタンダードがしばらく変わらないので、覚えておいて損はないですよ！携帯コーディングの基本基礎の基礎文字コードはShift-JIS CSSはインラインで指定（タグに直接style属性を追加する）画像を含むページ容量100KB以内（HTML自体の容量は9KB以内）画像はgifか

chiroll 2010/09/06

リンク

HTML5ことはじめ | Another Step.com

制作者側にはかなり普及してきた感もあるHTML5。情報は溢れていますが、自身も少しづつ勉強してきたのでXHTML1.0との違いなどをメモがわりにアウトプットしてみた。 (マークアップメインの話です) HTML5はW3Cより2008年1月22日に草案が発表され、2010年8月現在も草案の段階です。勧告はW3Cが2012年3月、WHATWGは2022年としており、どちらにしてもまだ先ですが、新しいブラウザは段階的に対応していくと予想されるし、JSを使えばIEもカバーできるので、現状利用することも可能でしょう。メリット・デメリットについては賛否両論?あるでしょうが… ※このサイト自体もHTML5で組んでいますが、HTML5、WordPressともに未熟なため、制御できず正しく組めていない箇所があります。また下記内容についても間違っている可能性があるので、その場合は指摘していた

chiroll 2010/08/23

リンク

Makes you HTML souce eautifully indented - Ham Cutlet

インデントを綺麗に

chiroll 2010/06/01

リンク

html5 ざっくりメモ

html5 関係無いのも有るかもですが、個人的にhtml5の要点をまとめたメモ。ほんとにざっくり書いているので、何か期待しても何も出ません＞＜日本語が含まれる場合、title要素は charset の後（次）。 address要素は連絡先情報に使う。例えば企業サイトの各支店の住所一覧とかに使うのはNG。ブログとかで、上手い店とかの住所にaddressを使うのもNG。あくまでも、そのサイトの管理者への連絡先。なので、copyrightに使うのもNG。 copyrightはsmall要素が妥当。なので、p small copyright って感じになる。 nav要素はあくまでも主要なナビゲーションに使う。主要なってのは具体的にはグローバルナビゲーションやローカルナビゲーション。なので、関連リンク一覧とか、ページ内にあるちょっとしたリンクに使うのはNG。 hgroup要素は、見出し