こんにちは、鴨田です。 個人的に仕事の大半はスマートフォン関連なので、 最近のマークアップはほとんど全てHTML5+CSS3で行っています。 とはいえ、PC向けのサイトではまだまだHTML4.01、XHTML1.0、CSS2.1を使用している場合が多いと思います。 ですので、今回はHTML5+CSS3を導入するにあたって、役立つと思う7つの設定について、書きたいと思います。 1.HTML5の初期テンプレート案 <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>HTML5 初期テンプレート</title> <!-- reset.cssの設定 --> <link rel="stylesheet" media="screen" href="reset.css" /> <!-- Viewportの設定 --> <meta nam
The web today is a growing universe of interlinked web pages and web apps, teeming with videos, photos, and interactive content. What the average user doesn't see is the interplay of web technologies and browsers that makes all this possible.� Over time web technologies have evolved to give web developers the ability to create new generations of useful and immersive web experiences. Today's web is
新しいはてなブックマークボタンが公開されました。次のような3種類のタイプが用意されています。 スタンダードバーチカルシンプル ボタンをクリックすれば、その場でブックマークやコメント投稿ができます。 それはさておき、このボタンを表示するコードをページに貼り付けると、XHTML1.xやHTML4.01のページがvalidにならなくなります。 本エントリーでは、問題点の簡単な解説と、設置したはてなブックマークボタンを(X)HTML validにする方法を紹介します。 また、1ページに複数のブックマークボタンを表示する場合、(X)HTML validにする話とは別に、3項の対処を行うことで表示速度を若干改善することができます。 動作をざっと確認した限りの記事なので、認識誤りがありましたらご指摘ください。 ※記事中のソースコードは見やすくするよう、途中で改行しています。 1.問題点 はてなブックマー
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 混在でき
iPhone の登場以来、HTML5 対応を謳うサイトが増えている。実際、iPhone 専用サイトには、従来の Web には無い操作性や機能を実現したものが少なくない。iPad や Android 端末も登場し、デスクトップには IE9 がもうすぐ公開される。今後、HTML5 の利用はますます広がることだろう。しかし、その一方で、HTML5 の仕様はまだ策定中で、最終草案にもなっていない段階だ。このような状況で、HMLT5 にはどんなスタンスで取り組むのが良いのだろうか。W3C HTML5 Japanese Interest Groupの議長をつとめる矢倉氏に、HTML5 について、スマートフォン/タブレット向けの技術という観点から解説をお願いした。 インタビューした人:矢倉 眞隆氏 株式会社ミツエーリンクス R&D 本部 Web 標準チームチームに所属。Web標準Blog (http:/
本連載では、Webデザイナーに向けて、HTML5/CSS3でWebデザインや制作手法はどう変わるのかを解説していきます。主な HTML5/CSS3の役割や機能を学んでいただくとともに、サンプル作成を通してコーディング手法を習得していただくことを目的としています。なお、サンプル作成のツールとして「HTML5 Pack for Dreamweaver CS5」を使用します(詳しくは、「HTML5 Pack for Dreamweaver CS5 の使い方」をご覧ください)。 ※HTML5とCSS3は現在策定中の仕様です。本連載は執筆時点の仕様内容にもとづいており、正式に勧告されるまでに変更されることもあり得ます。 さっそく、Dreamweaver CS5を用いて HTML5を用いてWebページを作ってみましょう。 HTML5文書を作成する Dreamweaver CS5では新規ファイルを作成
HTML5+CSS3の環境で汎用的に利用できるHTML・スタイルシート・スクリプトなどのファイルを一式にまとめたテンプレートを紹介します。 ファイル構成:コメント無し版 各ファイルの説明 index.html HTML5の要素を配置した汎用的に利用できるHTMLファイル。各スタイルシートファイルも埋め込まれています。 css/main.css @import用のスタイルシートです。 css/reset.css Eric Meyerの「Reset CSS」です。 css/core.css ベースとなるスタイルが定義されています。 css/_patches 各ブラウザ用のスタイルシートです。 css/_print プリント用のスタイルシートです。 js Modernizrがセットされています。
Updated 2010.08.02 / Published 2010.08.02 latest logさんでエントリーされていたコードを削る方法がすごく勉強になったので、練習がてらに早速IE8以下でHTML5の新要素をCSSセレクタで使う際にdocument.createElement()で事前に書き出しておく必要があるコードをMinify化してみました。 書き出す必要のあるHTML5の新要素 まず最初に、IE8以下では未知の要素となるために書き出す必要のあるHTML5の新要素名を列挙しておきます。 article要素 aside要素 nav要素 section要素 hgroup要素 header要素 footer要素 figure要素 figcaption要素 time要素 mark要素 この他にも、HTML5の新要素にはcanvas要素, audio要素, embed要素, vide
Updated 2010.07.29 / Published 2010.07.29 これからHTML5を使いはじめようという方に向けたHTML5のおさらいです。HTML5の記述方法にはじまり、導入にあたって間違いやすいところや勘違いしがちなところをまとめてあります。 hgroup, header, footer要素の説明を含めた続きもあります(続HTML5についてのおさらい)。 HTML5の記述方法 まず最初に、必ずDOCTYPE宣言を行います。HTML5には公式のDTDがないので、すごくシンプルになっています。 <!DOCTYPE html> 続いて、html要素にドキュメントの言語を宣言します。 <html lang="ja"> そして順番にhead要素ときて、文字エンコーディングの指定ですが、charset属性が新たに利用できるようになりました。 <meta charset="UTF
HTML WGより3月4日付で、新しいHTML5の草案を含めた6つの文書が公開されました。 HTML5 HTML Canvas 2D Context HTML Microdata HTML+RDFa HTML: The Markup Language HTML5 differences from HTML4 HTML5 differences from HTML4の日本語訳も、いつもの通り更新しています。 HTML5 における HTML4 からの変更点 変更点 昨年の草案からの変更点から、いくつか気になるものを挙げてみます。 ひとつは、会話文を表現するdialog要素が削除されました。専用のマークアップを用意する必要性や、表現力に乏しいといった懸念が寄せられたことによります。 また、figure要素とdetails要素について内容モデルの変更がありました。これらの要素はキャプションにlab
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く