普通のHTMLの書き方
保守しやすく、規模に依存しないHTML文書のために 一般 DOCTYPEで始める 置き換えられるべきまたは旧式のDOCTYPEを使わない XML宣言を使用しない 文字参照はできる限り使わない &と<、>、"、'は名前文字参照を使ってエスケープする 制御文字や不可視文字は数値文字参照を使う コメントではその内容の前後へ空白文字を置く 終了タグを省略しない 空要素の書き方を混ぜない タグや属性値の前後へ空白文字を置かない 大文字・小文字を混ぜない 引用符を混ぜない 属性を2文字以上の空白文字で区切らない 真偽値を取る属性の値は省略する 名前空間は省略する XML属性は使わない data-*とMicrodata、RDFa Lite用の属性と通常の属性を混ぜない デフォルトの暗黙のARIAセマンティックスを尊重する 文書要素 lang属性を追加する lang属性の値はできる限り短くする できる限り
解像度にあわせて画像変更｜向陽デジタルワークス パーツギャラリー
その他 解像度にあわせて画像変更 解像度にあわせて画像変更 Chrome Firefox Edge IE11（一部非対応） IE9（一部非対応） iPhone（iOS6-8） iPad（iOS7） Android4.2 2017年3月31日更新 通常の画像と高解像度用の画像の表示・切り替え方法を紹介します。 <img>タグのサイズを指定する cssのbackgroundで背景にして、background-sizeを指定する cssのbackgroundで背景にして、css3のMeia Queriesでディスプレイの解像度によって切り替え <img>タグの画像をJavaScriptでディスプレイの解像度によって切り替え 同じ内容の画像で、画像サイズのみを変更（解像度の対応）するときにおすすめ！ <img>タグにHTML5の「srcset」を使用して、ディスプレイの解像度やウインドウサイズによ
MicroformatsとMicrodataの違いについて - kojika17
Webページの内容が、"何を意味するのか"をコンピュータが効率よく情報を収集・解釈できるようにする構想を「セマンティックWeb」「セマンティック(X)HTML」などと呼びます。 セマンティックHTMLを始めるにあたりMicroformatsとMicrodataの違いについて、"どう違うのか"分かりづらかったのでまとめてみました。 そもそもMicroformats、Microdataとは？ マークアップ言語であるHTMLは文章構造を表すことはできますが、意味までは表現できません。 例えば、人の名前や住所、電話番号といったものにHTML要素でマークアップすることはできません。 ただしMicroformatsとMicrodataを使うことにより、このような意味づけを可能にし、コンピュータも可読できるセマンティックなHTMLドキュメントを作成することができます。 Microformats、Micr
hentry - Microformats Wiki
Schema The hEntry schema consists of the following properties: hentry entry-title. required. text. entry-content. optional (see field description). text. [*] entry-summary. optional. text. updated. required using datetime-design-pattern. [*] published. optional using datetime-design-pattern. author. required using hCard. [*] bookmark (permalink). optional, using rel-bookmark. tags. optional. keywo
日記 | ヨモツネット
blog移行しました。新しいblogで更新を続けています。 XMLェ… text ja 2012-07-08 http://www.yomotsu.net/wp/?p=603 XMLェ… 日々の出来事2012年7月8日日曜日 ブログ作りなおそうかなーと思って、この Webサイト をみなおしてたら、Web ページのメタ情報としてダブリンコア (RDF) を混在させていたことを思い出した。バリデーターにかければ、グラフも取り出せて みたいな感じになる。でも結局あまり意味なかったです多分。いまは OGP とかありますしね。 Web ページは XHTML にしてたけど、ブログのコメントで参照先のない数値参照とか混ぜられると XML パースエラーになるし、XML だから他の語彙混在できるけど、RDF くらいしか混ぜてなかったし、XHTML 意味なかったです多分。いまは HTML に SVG 混在でき
)
Adding an HTML5 video control to your webpage (Windows)
Windows Internet Explorer 9 introduced support for HTML5 video.Using HTML5 video, you can embed a full featured video player on your webpage, without requiring a third-party plug-in or even JavaScript. How do I get started? What attributes can I use with a video element? How do I support more than one format? What happens on older browsers? Can I add a little style? Where to now? API Reference Sam
Learn web development | web.dev
Stay organized with collections Save and categorize content based on your preferences. Explore our growing collection of courses on key web design and development subjects. An industry expert has written each course, helped by members of the Chrome team. Follow the modules sequentially, or dip into the topics you most want to learn about.
HTML5 videoタグを使って動画を再生する | TechBooster
再生可能ファイルのリストアップ 全てのブラウザで目的の動画ファイルを再生できるようにするにはsourceタグを使います。 ブラウザごとに再生可能な動画ファイルを用意してsourceタグでリストアップしておくことで、 ブラウザは上から順番に対応できる動画ファイルを探してくれます。 <video id="video" controls width="320" height="240"> <source src="sample.mp4"> <source src="sample.3gp"> </video> JavaScriptで動画コンテンツを操作する videoタグで埋め込んだ動画コンテンツをJavaScriptを使って操作することが可能です。 たとえば、videoタグで埋め込んだ動画コンテンツを 独自に追加したボタンから再生/停止するには以下のようにします。 ■playvideo2.htm
todya-only.net
Bing Mapsの基礎〜応用 某GのmapのAPIを利用するのにクレカ登録が必須となったので、Bing Mapsでどのくらいまでいけるのか試してみた。 主な使用技術 Bing Maps API、JavaScript、CSS、レスポンシブ 詳しく見る Youtube APIを使用したサンプル YouTube Data API (v3)を使用し、JavaScriptにてユーザーチャンネルの動画を取得するプログラムを作成。 主な使用技術 YouTube Data API、JavaScript(jQuery)、CSS、レスポンシブ 詳しく見る ポケモンGO図鑑 Githubに公開されている「Pokemon-DB」を元にページを生成 主な使用技術 JavaScript(jQuery)、CSS、レスポンシブ、Photoshop（タイプのドット絵を作成） 詳しく見る
Web Design and Web Development : うやむやだったHTML5の文書論理構造をきちんと考えてみる | mnemoniqs’log.
iPhoneやandroidの案件ばっかりの今日この頃。 HTML5を使用することが多くなってきましたが、文書論理構造となると少しうやむやなところがありました。 <header>や<footer>などは特に違和感なく使えますが、<section>や<article>になると少し自信がなかったりするので、改めて見直してみます。 HTML5 Element Flowchart 『HTML5 文書論理構造』で探してみると、「HTML5 Element Flowchart 」なる画像が公開されていました。これがすごくわかりやすい。 HTML5で使用するタグを、消去法でマークアップしてます。 ではさっそくスタート。 1. それは、主要なナビゲーションブロックですか？ Yes <nav> で囲む グローバルナビゲーションやフッターナビゲーションなどに使用。 No 2へ 2. それは、自分自身だ
img 要素 - 組込コンテンツ - HTML要素 - HTML5 タグリファレンス - HTML5.JP
4.7.1 img 要素 カテゴリー: フロー・コンテント フレージング・コンテント エンベッディッド・コンテント フォーム関連要素 この要素が usemap 属性を持つ場合: インタラクティブ・コンテント パルパブル・コンテント この要素を使うことができるコンテキスト: エンベッディッド・コンテントが期待される場所 コンテントモデル: 空 コンテント属性: グローバル属性 alt - 画像が利用できないときに利用する代替テキスト src - リソースのアドレス crossorigin - 要素がクロスオリジンのリクエストをどのように扱うか usemap - イメージマップに使われる名前 ismap - 画像がサーバーサイドのイメージマップかどうか width - 水平方向の寸法 height - 垂直方向の寸法 text/html におけるタグの省略: 終了タグはありません。 指定可能な
HTML5とは。HTML5の制作・仕様 HTML5のコピーライト（copyright）表記
HTML5でコピーライトの表記に適した要素は「small」になります。 smallを使う場合は複数の段落をまたいでマークアップする事となっています。 下記が例になります。 <footer> <p><small>copyright all right reserved・・・・</small></p> </footer> 「footer」要素は主に、著作やコピーライトを入れます。 「small」要素はHTML5では、「細目」の要素も与えられました。「細目」とは法律用語で、免責事項や警告、法的制約、著作権表記など。 HTML4では著作権表記を括る要素として<address>が使われる事が多いですが、HTML5では<address>は、住所の表記のみに使用する要素となりました。郵送先住所表記の場合も<address>要素を使ってはいけないとされています。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSやtype属性でinputの全角・半角入力を切替える [無料ホームページ作成クラウドサービス まめわざ]![CSSやtype属性でinputの全角・半角入力を切替える [無料ホームページ作成クラウドサービス まめわざ]](https://cdn-ak-scissors.b.st-hatena.com/image/square/9b4bb8a4a33a630fad5b2f5407193da0266fb2eb/height=288;version=1;width=512/https%3A%2F%2Fmamewaza.com%2Fimg%2F1466210908981s.jpg)
HTML5 UP! Responsive HTML5 and CSS3 Site Templates
HTML5 video and audio tags in all major browsers
http://html5slides.pageforest.com/
Browse code samples
HTML5のメリットを活かした コンテンツアイデア
adakoda.com
IBM Developer
