HTML5+CSS3の導入時に役立つ7つの設定
こんにちは、鴨田です。 個人的に仕事の大半はスマートフォン関連なので、 最近のマークアップはほとんど全てHTML5+CSS3で行っています。 とはいえ、PC向けのサイトではまだまだHTML4.01、XHTML1.0、CSS2.1を使用している場合が多いと思います。 ですので、今回はHTML5+CSS3を導入するにあたって、役立つと思う7つの設定について、書きたいと思います。 １．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
HTML5やcss3を使う際に見てるリファレンス的なサイトとか、使い勝手の良いツールとか - かちびと.net
あまりに情報量が多くて混乱してきたので 自分用にまとめ。リファレンスとか、ちゃんと 実践で使えるツールを自分なりに厳選して まとめておきます。どうも、あっちこっちで あれが便利とかこれが便利だとか言われる と訳が分からなくなるのでそろそろ絞らない とですね。 というわけでお遊びではなく実践に役立ってる基本的なリファレンスとか助けてくれるツールのメモなので目新しいものはありません。完全に自分用のまとめです。個人的には基礎用のサイトと、実践向けのツールやライブラリだけあればいいという感じです。 尚、css3/html5に関する情報だけを求めている&特に情報取得に急いでないならdotHTML5というサイト1つで事足りるかと思います。 ※W3Cは割愛でいいですよね チートシートとかリファレンスだけで基本的にはいい感じですかね・・ HTML5 タグリファレンス マークアップもままならないほど慣れてな
HTML5という言葉に圧倒され気味の方への、HTML5入門 | Ext Japan Blog
この記事は5/23に掲載された「A HTML5 Primer for the Overwhelmed」を訳したものです HTML5がグーグルやアップルにより、リッチインターネットアプリケーション（RIA）のためのソリューションとして強力にサポートされ始めた結果、HTML5という言葉がバスワード化しています（特にGoogle I/O以降）。そして、HTML5という言葉が広く流布するにしたがって、その言葉本来の意味とは違う意味で使われ始めていることも、驚きではなくなっています。「HTML5の経験があること」が採用条件となっているような採用情報も既に存在しますし、シンプルなJavaScriptアニメーションもCSS3によるアニメーションもひっくるめてHTML5のサンプルとして紹介されていたりします。 ちょうど00年代中頃に「次世代のWeb開発」を指すバズワードとして「AJAX」や「Web2.0」
HTML5+CSS3 入門
Webを記述する言語の標準の現状 昨年度であれば、HTMLを記述する授業では自信をもって以下の基準を推薦していました。 HTML (文書の構造を記述する言語) – XHTML 1.0 もしくは XHTML 1.1 CSS (文書の体裁・デザインを指定する言語) – CSS 2 しかしながら、ここ数年で、とくに去年あたりから状況は大きく変動しつつあります。現状の変化を理解するには、ここに至るまでの歴史的な経緯について簡単に理解する必要があります。ここまでの経緯を整理した上で、将来の展望を探りたいと思います。その上で、この授業ではどのような基準にのっとって「正しい」ということを定義するのか決めていきたいと考えます。 HTML (Webサイトの記述言語) の標準化巡る闘争の歴史 AppleInsider: なぜ Apple は HTML 5 に賭けているのか： ウェブの歴史 [Page 2] よ
HTML5&CSS3入門 with HTML5 パック 第6回 Graceful DegradationとPolyfill | デベロッパーセンター
本連載では、Webデザイナーに向けて、HTML5／CSS3でWebデザインや制作手法はどう変わるのかを解説していきます。主なHTML5／CSS3の役割や機能を学んでいただくとともに、サンプル作成を通してコーディング手法を習得していただくことを目的としています。なお、サンプル作成のツールとしてDreamweaver CS5以降を使用しています。CS5をお使いの場合は、拡張機能「HTML5 パック for Dreamweaver CS5」が必要です。CS5にHTML5 パックをインストールするには、Dreamweaver CS5のアップデータ11.0.3を適用する必要があります。CS5.5の場合、これらのHTML5 パックの機能はデフォルトで実装されています。 ※HTML5とCSS3は現在策定中の草案です。本連載は執筆時点の草案の内容にもとづいており、正式に勧告されるまでに変更されることもあり
MdN Design｜総合情報サイト
スマートフォンと違い、iPadなどのタブレットに最適化された表示を行っているサイトはまだまだ少ない。 そこで今回は、LESSON 13同様、別HTMLを用意せず、同じHTMLにJavaScriptとCSSを使用して、タブレットタイプ用に表示を最適化させる。 タブレット用にするからといって特別にHTMLの作り方を変える必要はなく、正しくマークアップできていれば基本的に問題ない。 ただ、あまりにも無駄に多い入れ子構造や、レイアウトは避けたほうがよい。あくまでも(X)HTML/CSSを意識して作ろう。 今回はタブレットにも使用されるので、HTML5やCSS3を駆使してPC用も作ってよいが、IEなどの未対応ブラウザへの対応が発生するので注意が必要だ。 【1】のような、ブログ形式のPCページ構成をベースに構築していく。 使用するCSSは ・PC用CSS（デフォルト） ・スマートフォン用CSS ・タブ
MdN Design｜総合情報サイト
text-shadowはその名のとおり、テキストに影をつけるプロパティだ。うまく使えば画像を使わずとも、テキストを際立たせることができる。運用の効率化や、テキストコピーができるなどメリットも多い。 基本的な指定方法は、テキストから影までの距離（縦、横）とぼかしサイズ、影の色を指定して調整する【1-1】。CSS3でよく使われる、-moz-や-webkit-などのベンダープレフィックスの記述は、textshadowでは必要ない。カンマで区切れば、1つの要素に対して複数の影を指定できる【1-2】。また、影の色はrgba（半透明）で指定することもできる。影を半透明にしておけば、どのような背景色でも自然になじませることができるので便利だ【1-3】。 【1-1】「ぼかしサイズ」と「影の色」は省略可能 【1-2】カンマ(,)区切りで複数指定できる。工夫次第で複雑な表現も可能だ 【1-3】カラーコードをr
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML5を使うためのプログレッシブエンハンスメント 〜すべての人に確実に情報を届けるために〜SwapSkillsFreeEventProgressive enhancement