IBM DeveloperIBM Developer is your one-stop location for getting hands-on training and learning in-demand skills on relevant technologies such as generative AI, data science, AI, and open source.
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に関する情報まとめ。リファレンス情報、辞典サイト、CSSジェネレーター、Validatorなど知識～活用まで ｜https://wp.yat-net.com/name
2011年 07月 11日 HTML5、CSS3に関する情報まとめ。リファレンス情報、辞典サイト、CSSジェネレーター、Validatorなど知識～活用まで カテゴリ： CSS3 HTML HTMLとCSS タグ：CodingCSS3ジェネレーター作成支援ツール 現状HTML5とCSS3を利用したサイトの構築は自分の仕事上では出てきそうにないのですが、そうは言っても何も情報を収集しないわけにも行かないのでブックマークは当然しています。しかし、ただ単に貯めてるだけだといざという時活用出来ないので、一度ブログに書き留めておこうと思います。 html5 現状深く調べておらずリファレンスやタグ辞典的なものを収集しています。最近友人のクロ（@CROO1379）が色々情報を収集してサイトを構築しており、リファレンス的な意味ではかなり拾えそうな感じになっています。
MdN Design｜総合情報サイト
text-shadowはその名のとおり、テキストに影をつけるプロパティだ。うまく使えば画像を使わずとも、テキストを際立たせることができる。運用の効率化や、テキストコピーができるなどメリットも多い。 基本的な指定方法は、テキストから影までの距離（縦、横）とぼかしサイズ、影の色を指定して調整する【1-1】。CSS3でよく使われる、-moz-や-webkit-などのベンダープレフィックスの記述は、textshadowでは必要ない。カンマで区切れば、1つの要素に対して複数の影を指定できる【1-2】。また、影の色はrgba（半透明）で指定することもできる。影を半透明にしておけば、どのような背景色でも自然になじませることができるので便利だ【1-3】。 【1-1】「ぼかしサイズ」と「影の色」は省略可能 【1-2】カンマ(,)区切りで複数指定できる。工夫次第で複雑な表現も可能だ 【1-3】カラーコードをr
IDとclassを使わないで、HTML5とCSS3でコーディングしてみた。
IDとclassを使わないで、HTML5とCSS3でコーディングしてみた。 2011-05-02 Webサイトをコーディングする時に、IDとclassを考えるのが面倒臭くなったので、IDとclassを使わないでコーディングしてみました。 シンプルなサイトなら簡単でつまらないので、IDとclassを使っても難しそうなデザインにしています。 今回もJavaScriptは一切、使用していません。 完成したサイト ID, classなしで組んだサイトを見る。 サイトでやってみたHTML5 HTML5では、html, head, bodyタグを完全に省略しても構わないとされています。 省略してもDOMツリー上に存在しているので、 body {background:#f00;} というCSSの記述も認識してくれました。 サイトで使用したCSS, CSS3の簡単なまとめ Child Selector 結
HTML5とCSS3をページ全体or少しずつ導入するチュートリアル
デモページの全体のキャプチャ 下記は各ポイントを意訳したものです。 全体をHTML5化しても、面白そうなCSS3のエフェクトを少しずつ適用しても面白そうです。 ウェブページにHTML5を導入 ウェブページにCSS3を導入 ウェブページにHTML5を導入 デモページのHTMLの構造は、下記のようになっています。 HTML5：ページのベース 各エレメントを配置する前のHTMLのベースは、下記のようになります。 <!DOCTYPE html> <html lang="en"><head> <meta charset="utf-8" /> <title>Ferris Buller on Abduzeedo</title> <link rel="stylesheet" href="style.css"> <!--[if IE]> <script src="http://html5sh
デザイナは要注目！ 明日から語れるHTML5＆CSS3（1/4）- ＠IT
デザイナは要注目！ 明日から語れるHTML5＆CSS3：一撃デザインの種明かし（13）（1/4 ページ） ※本稿では特に断りがない場合、Firefox、Google Chrome、Opera、Safariは2010年7月時点の最新バージョン、IEはInternet Explorer 6/7/8の総称です。 いま世界で一番熱い「HTML5」「CSS3」とは？ 最近、「HTML5」「CSS3」といった言葉をよく耳にしませんか？ これらはWebの表現をもっと豊かにするために策定中の言語です。いままでのHTML 4.01やXHTMLでは実現できなかったことができるようになったり、CSS3はCSS 2.1よりさらにグラフィカルな部分まで表現できるようになりました。 FirefoxやOpera、Safari、ChromeといったHTML5＋CSS3に対応するWebブラウザが増えてきたことで、HTML5
HTML5 / CSS3のソースがダウンロードできるサンプル – creamu
HTML5 / CSSでできることをざっくり掴みたい。 そんなときに参考になるのが、『Create An Elegant Website With HTML 5 And CSS3』。HTML5 / CSS3のソースがダウンロードできるサンプルです。 HTML5で使われる<section>や<aside>、<header>、<footer>などの各タグの解説と、CSSにおける「RGBa」、「box-shadow」、「border-radius」、「text-shadow」などのプロパティーの解説がされています。 デモは以下から。 Download Source ソースのダウンロードも提供されているので、参考に見てみてはいかがでしょうか？ Touch The Future: Create An Elegant Website With HTML 5 And CSS3 あることが一つ決まった。と
HTML5 & CSS3 ブラウザ別サポート状況
What is an IP Address? An IP (short for “Internet Protocol”) address is a unique number assigned to every machine that connects to the internet. Nowadays, you can have multiple computers behind a router that share a single IP using Network Address Transformation (NAT). If you have ever used a wifi hotspot to access the internet, you’ve shared an IP address with someone. What’s the Difference betwe
Firefox と HTML5 について発表してきました | Mozilla Japan ブログ
先週末に開催された OSC 2010 Tokyo/Spring に参加し、Web の標準技術やブラウザがどのように変化してきているのか、「Firefox & HTML5 - Web プラットフォームの今 -」というタイトルでお話しさせていただきました。 当日は他にも多くの講演や展示のある中、100名を越える方に聞いていただき、ありがとうございました。 講演ではまず、HTML5 などの標準技術とブラウザが次世代プラットフォームとして注目されるようになるまでの経緯をお話ししました。そして、ブラウザに最近導入された技術について、次期 Firefox に向けて実装中のものを含めて 10 点ピックアップし、デモやコードを交えて紹介しました。ブラウザによって率先してサポートする技術に違いはあるものの、標準技術を共にサポートすることで Web を新しいプラットフォームとして育てていく今を楽しんでいただけ
HTML5とCSS3を採り入れたフレームワーク ｜ SEOモード
Enavu Networkの『52framework』というサイトで、「未来のフレームワーク」として、HTML5とCSS3で構成されたマルチブラウザ用のフレームワークが公開されています。 フレームワークはリンク先からダウンロードすることができますし、デモを見ることもできます。現在のバージョンは0.5でベータ版です。HTML5とCSS3を用いたサイトを作成しようという方はもちろんこれを有効に利用することもできるでしょうし、これからHTML5を学んでいこうという方にもマークアップの勉強材料として利用できるかなと思います。 現在サポートされているのは、次の通りです。 角丸テキスト・シャドウボックス・シャドウhtml5のマークアップグリッド・システムhtml5対応のCSSリセット使われている画像が、jpegファイルわずか2枚というのが、さすがHTML5+CSS3ですね。下の画像はグリッド用のhtm
15 Useful Resources to Get Clued Up on HTML5
HTML5 this, HTML5 that! There’s been plenty of HTML5 talk around the blogging world recently. It’s no longer a tiny spec on the horizon, it’s due to arrive soon! Some have already embraced it and are using it on their latest HTML5 sites. Want to join in on all the fun? Check out this collection of some of the best resources from various blogs and websites in the industry. Each one gives an interes
Web標準を学ぶ重量級コンテンツ「Web標準カリキュラム」の日本語訳が公開開始
オペラソフトウェアが中心となり、Yahoo!やWaSP（The Web Standards Project）などが協力して作成した、Web標準を学ぶためのオンラインコンテンツ「Web標準カリキュラム」日本語訳の一部公開が開始されました。 翻訳を行っているのは、W3Cの標準化動向などをブログで紹介していることでも知られる企業ミツエーリンクス。日本語訳の公開も、同社のブログのエントリ「Web標準カリキュラム 日本語訳の公開を開始 | Web標準Blog | ミツエーリンクス」で明らかにされました。 「Web標準カリキュラム」のオリジナルは英語版の「Opera Web Standards Curriculum」。全体で10章もある重量級のコンテンツです。 Introduction to the world of web standards Web Design Concepts HTML bas
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://websitesmaderight.com/2011/05/html5-and-css3-cheat-sheets/
IBM Developer
Studo m2 Web Site
SitePoint Blogs » JSON-P output with Rails
worldending.jp
http://shoonm.com/2010/03/html5css3.html
https://www.techmic.com/screencasts/html5-microformats-css3-1/