HTMLで図まで描ける！進化した「HTML5」ってどんなもの？ - はてなニュース
HTML言語の最新バージョンとして、現在標準化作業が進められている「HTML5」。はてなブックマークでもこのキーワードを目にする機会が増え、「HTML5って何？」と疑問に思っている人も多いのではないでしょうか。今回は、「HTML5って何？どんなことができるの？」という疑問にお答えしたいと思います。 ■HTML5でできること まずは、HTML5を使うと具体的にどんなことができるのかを見ていきましょう。 ＜具体的に何ができるの？＞ ▽HTML5.JP - 次世代HTML標準 HTML5情報サイト ▽HTML5とは？変わるWebと注目の新要素 HTML5.0の情報サイト ▽大幅に進化した次世代 HTML 規格「HTML5」とは？ - japan.internet.com Webビジネス ▽HTML5, きちんと。 ▽めざましTech - HTML5 についての Q&A ▽2010年に勧告される「
Mozillaのahoverは厳密なため注意が必要です - Web標準普及プロジェクト
Mozillaのa:hoverは厳密なため注意が必要です a:hoverでアンカーテキストの上をマウスカーソルが通過した時に動的に様々なプロパティを変更することができます。 この実装がMozillaの場合、他のブラウザより厳密であるため、若干の注意が必要です。 href属性の有無が意識されるWindows版IE 次の例を見てください。 <style type="text/css"> a{ color:black; background-color:white; } a:hover{ color:white; background-color:black; } </style> </head> <body> <p> <a>href属性の無いアンカーテキスト</a><br> <a href="index.html">href属性のあるアンカーテキスト</a> </p> </body> href
CSSの実装状況で変わるボックスのデザイン方法
Web制作において、対応しなくてはいけないブラウザの中には、未だしぶとくIE6が残っています。IE6が2001年に登場したことを考えると、もう8年もその時代の「縛り」を(健気に)守りながら作っていることになるんですね。 いま良く使われているCSSのテクニックも、ほとんどはこの「縛り」の範囲内で有効な手法なわけですから、突然2001年にタイムスリップしてサイトを作る事になったとしても、今も昔も変わらない１つの古文書に従えばいいので、きっと活躍できます。 しかしたまらん、流石に疲れた。 ボックスひとつができること CSSでは、文書を構成する各要素は、ボックスという矩形領域に置きかえられ、それらの持つプロパティを操作して装飾します。つまり、ボックスはページデザインを構成する最小単位と言えるわけですね。 そこで今回は、最小単位となる1つのボックスに対して、どのような装飾手法が有効かという点を、CS
IE8が対応したCSS 2.1の機能：テーブル、セレクタ、アウトライン関連の機能 - builder by ZDNet Japan
前回の「IE8が対応したCSS 2.1の機能：印刷とコンテンツの追加に関する機能に続けて、IE8が新規に対応したCSS 2.1のプロパティや値についてまとめていく。 今回はテーブル、セレクタ、アウトラインに関連する機能を確認していきたい。 なお、新しく対応した機能を利用するにはIE8のStandardsモード（標準準拠モード）で表示する必要がある。Standardsモードや互換表示ボタンについては第2回の記事「IE8のレンダリングモードと互換表示」を参照してほしい。 テーブル関連の機能 IE8は、これまでテーブル関連で未対応だった次の3つのプロパティをサポートした。 border-spacing caption-side empty-cells border-spacingプロパティ border-spacingはセルの間隔を指定するプロパティだ。古いIEではのcellspacing属性を
【レポート】5分で把握するHTML5 - Google Developer Dayセッションリポート (1) HTML5仕様の概要 | エンタープライズ | マイコミジャーナル
Google I/Oで大きく取り上げられ、一躍注目の技術に躍り出たHTML5。Google Developer Day 2009でも、「HTML5により拓かれる次世代Web」という田村健人氏によるセッションは大盛況で、椅子が足りずに床に座り込んで聴講する人がかなりの数に上った。 筆者も同セッションに参加し、HTML5の新機能に関する簡潔でまとまった知識を得ることができた。本稿では田村氏のセッション内容を元に、HTML5の全体像をコンパクトにお伝えしよう。 HTML5とは? グーグル ソフトウェア エンジニアの田村健人氏 HTML5は、言うまでもなくHTMLの最新バージョンである。現行のバージョンであるHTML4も、決して小さな仕様ではなかったにもかかわらず、そこにWebアプリケーション向けの機能が大幅に強化された。 あまりに仕様が巨大すぎるため、現在の規格は以下の4つに分けられている。 H
.htaccessで使える16の技:phpspot開発日誌
16 Useful .htaccess Tricks and Hacks For Web Developers : Online Marketing Blog - Website Development & Website Marketing tips and Strategies .htaccessで使える16の技が色々と紹介されていました。 1. ErrorDocumentでエラーページ指定の方法 ErrorDocument 401 /error/401.php ErrorDocument 403 /error/403.php ErrorDocument 404 /error/404.php ErrorDocument 500 /error/500.php 2. Timezone設定 SetEnv TZ America/Houston 3. IPブロッキング allow from al
A CSS Sticky Footer
A CSS sticky footer that just works We've all tried to use a sticky footer one time or another, but they never seem to come out right, do they? Well, the days of a hard to understand CSS-based sticky footer are thankfully over. In just a few simple CSS classes with minimal extra HTML markup, I've fashioned a sticky footer that even beginners can get a handle on. It's been tested in IE 5 and up, Fi
外枠だけ太い罫線の表を作るCSS - スタイルシートTipsふぁくとりー
《2017年7月2日 12:10 公開/更新》 外枠だけ太い罫線の表を作るCSS [テーブル,線] スタイルシートを使って表(テーブル)を綺麗に見せる装飾方法はいろいろあります。手軽に見栄えを良くする方法として「罫線の太さを変化させる」という装飾がお勧めです。表の内側の枠線を細くして、表の一番外側の枠線だけを太くすると、ずいぶん見栄えが良くなります。 外枠だけが太い罫線の表(テーブル)にすると、簡単に見栄えが良い表になる 表の「外側の罫線」と「内側の罫線」とで装飾を分けるのは簡単 外側の罫線は、表そのもの(table要素)の枠線 内側の罫線は、セル(th要素やtd要素)の枠線 外側の罫線だけが太く、内側の罫線は細い表をスタイルシートで作るCSSの書き方 外側の罫線だけを二重線にした表をスタイルシートで作るCSSの書き方 外枠だけが太い罫線の表(テーブル)にすると、簡単に見栄えが良い表になる
HTML5 における HTML4 からの変更点
この文書「HTML 5 における HTML 4 からの変更点」は、W3C の HTML ワーキンググループ による「HTML 5 differences from HTML 4 (Working Draft 22 January 2008)」の日本語訳です。 規範的な文書は原文のみとなっています。この日本語訳は参考情報であり、正式な文書ではないことにご注意ください。また、翻訳において生じた誤りが含まれる可能性があります。 原文が勧告 (Recommendation) ではなく、策定途中の草案 (Working Draft) であることにご注意ください。 原文の最新版 は、この日本語訳が参照した版から更新されている可能性があります。また、この日本語訳自身も更新されている可能性があります。日本語訳の最新版は、W3C 仕様書 日本語訳一覧 から参照することができます。 更新日: 2008-09-
わずか565バイトテトリスのプログラミング解説
「往年の名作「スーパーマリオブラザーズ」、あの濃い内容でわずか40キロバイト」に載っていたわずか565バイトのテトリス。文字数にして551文字。79文字*7行のプログラミングで、テトリスが動きます。 以下のソースコードをメモ帳に貼り付けて、htmlで保存すればテトリスが動きます。 <body onKeyDown=K=event.keyCode><script>X=[Z=[B=A=12]];h=e=K=t=P=0;function Y() {C=[d=K-38];c=0;for(i=4;i--*K;K-13?c+=!Z[h+p+d]:c-=!Z[h+(C[i]=p*A-Math.round(p/ A)*145)])p=B[i];!t|c+4?c-4?0:h+=d:B=C;for(f=K=i=0;i<4;f+=Z[A+p])X[p=h+B[i++]]=1 if(e=!e){if(f|B){fo
livedoor Techブログ : jTemplatesでHTMLを書くときに知っておきたい8つのこと
こんにちは、(主に)LDサービスのインターフェース部分に携わらせてもらっている油井です。 現在ホットな JavaScript-library の一つとして「jQuery」の名をあげることができますが、このライブラリのプラグインとして動作するjTemplatesというHTMLテンプレートエンジンにも、(個人的にはですが)注目しています。 http://jtemplates.tpython.com/ そこで、以下、私がjTemplatesを触ることにより知り得た『jTemplatesでHTMLを書くときに知っておきたい8つのこと』について言及していきたいと思います。 ※ 今回の記事では「jQuery1.2.1-非圧縮版」そして「jTemplates0.5.0-非圧縮版」を使用することを想定しています。 1, (特殊変数である)$Qの正体 jTemplatesには$Tと$Pそして$Qという特殊変
HTMLタグ/テキスト・フォントタグ/特殊な文字を表示する - TAG index
特殊な文字や記号を表示させることができます。 例えば、タグを表示させようとしたとき、タグをそのまま書いてしまうとそのタグが機能してしまい、タグそのものを表示させることができません。そんな場合には、特殊文字を使って次のように記述します。
ごく簡単なHTMLの説明
HTMLは本来簡単で便利なものです。「30分間HTML入門」で基本は十分。まずシンプルに自分の情報を表現してみてください。 You can write a document as simple as you like. In many ways, the simpler the better. -- Tim Berners-Lee 簡単なHTMLの説明 少し詳しいHTMLの説明 XHTMLから次世代ウェブへ 電子テキストで情報発信 簡単なHTMLの説明 だんだん説明の量が増えてきたので、コンパクトな入門ページを用意しました。 基本がきちんと分かる30分間(X)HTML入門 HTMLを使った人間・コンピュータ双方にわかりやすい表現 （スライドのHTML版） 何のためのHTML？ HTMLは画面をレイアウトするためではなく、文書を環境に依存せずに共有できるように記述するための約束です。そこを正
ウェブコンテンツ・アクセシビリティ・ガイドライン 1.0
E-mailｼ嗹ebmaster@zspc.com Copyright © 1996-2000 ZSPC. All Rights Reserved. All pages except color chart are written in Japanese. g src="/static/zspc.com-vcss.gif" alt="Valid CSS! | " height="31" width="88" border="0"> g height="31" width="88" src="" alt="Level A conformance icon, W3C-WAI Web Content Accessibility Guidelines 1.0" border="0">
タグの読み方・・・？ - きつね♪の楽天的生活：楽天ブログ
2005年04月07日 タグの読み方・・・？ (10) テーマ：タグに挑戦！(102) カテゴリ：徒然なるたわごと このタグどうやって読むんだ？a href・・・。 今までためらいなく「あ はーふ」って読んでたんだけど、日記のコメント見て改めて考えた。 考えたところで頭にできあがってしまった自分勝手な読み方って治らないんだけど～・・・でも、ほんとはどうなんだろう、ってちょっと検索かけてみたら、結構みんな色んな読み方してんじゃん！（笑）。 TAG<index>ってゆーページ内に タグの読み方アンケート［投票結果］ってのを見つけた！集計期間は今年の2/16～3/16ってゆ～のでまだ新しい。 そこで自分の読み方と同じ人が何人いるのかチェック(*￣m￣)プッ。 （追記：みゅーたろーさんのコメントより英語読みの正解を追加） DOCTYPE（78人）・・・ドックタイプ （正解：ドキュメントタイプ） W
Another HTML-lint gateway
HTML文書の文法をチェックし、採点します htmllint.cgi ver1.21 / htmllint.pm ver3.30 文法しか採点しません。内容の良し悪しは採点されません。結果に疑問を感じたら必ず結果の解説を読んでください。満点で慢心しないでください。 チェックしない警告は減点対象外で、満点は 100点です。チェックしても減点されない警告もあります。気に入らないチェック項目は外すことができます。お好みに調整してください。 また、基本的な設定項目だけの簡易ゲートウェイもあります。いちいちオプションなんかどうせ指定しないや、という方はご利用ください。 ダイアルアップはつらいので、ローカル環境でチェックしたいとお考えの方は、ダウンロードのページを参照してください。 チェック方式 チェックしたいHTMLのURLを指定するか、HTMLを下のテキスト領域に直接記述して、[チェック] ボタ
「美乳」で文字化けが直るって本当？
・「美乳」で文字化けが直るって本当？ オンラインＤＶＤ＆ＣＤレンタルなら月々1980円で借り放題のＤＭＭがお得！ えっ？ って聞きなおしたくなるようなタイトルですが、「この『美乳』という文字をヘッダー部分にコメントとして挿入しておくと、文字化けが直る」という話は確かに存在します。ただし、これは大前提としてEUC-JPのページを作成するならば、という話になります。 <HTML> <HEAD> <meta http-equiv=Content-Type content="text/html; charset=EUC-JP"> <!-- 美乳 --> <TITLE>テスト1</TITLE> </HEAD> <BODY bgcolor="#FFFFFF"> このページはアダルトサイトとは無縁です。ヌード画像などは一切ありません。 </BODY> </HTML> では、なぜ、この「美乳」がおまじない
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.designwalker.com/2009/11/html5.html
TableとCSSいろいろ - DesignWalker
http://www2.ttcn.ne.jp/~inn/html/xhtml10/xhtml031.html