いろんなバリデータ集めてみたよ！Markup Validator Collection！ | 9bicMag™
古今東西、バリデータを集めてみました。ナカトミツヨシです。 皆さん、バリデータ使ってますか？HTMLやXML、CSSなんかの構文が、W3Cの勧告にちゃんと合ってるか、その妥当性を調べる事をバリデートと言いますが、それを調べてくれるソフトやシステムを、バリデータと言います。今日は、そんなバリデータをいろいろ集めてみました！ なんでいきなりバリデータかと言うと、本家「W3C Markup Validator 1.0」がついにリリースされたんですよ。なので、本家以外のバリデータも色々まとめておこうかなー、と思った次第でございます。では、個人的に知ってるものをリストアップしておきます！ W3C Markup Validator 1.0 本家です。一応、HTML5もバリデートできるみたい。 CSSをチェックできるCSS Validation Serviceもありますよ。 Site Validator
JavaScriptなしで地域ごとに色が変わる日本地図を作る
HTML、CSS、画像だけで、マウスオーバーした地域ごとに色が変わる日本地図を作る方法です。 文字だけではちょっと意味がわかりにくいかもしれませんので、とりあえず↓の日本地図の上にマウスカーソルを載せてみてください。クリックするとページ遷移しますが、このデモでは Not Found になりますのでご注意ください。 デモページを別のタブで開く このデモをダウンロード（ZIP） 2009年に仕事で「日本地図をクリックすると地域ごとに違うページに飛ぶ」ページを作らなければならなかった時に、当時 JavaScript も書けないし Flash は PC に入っていなかったので、HTML と CSS だけで作ってみました。 このデモはDOCTYPE宣言が HTML5 になっていますが、当時 HTML 4.01 で、IE6 でもきちんと動くように作りました。 ですので、特殊なタグやプロパティは使わず
リストの横並び時に生まれる< li >の隙間を解決する5つの方法
ナビゲーションやリストを水平に並べると、なぜか少し隙間が生まれてしまうことがあります。今回はこの現象の解決方法をいくつか紹介したいと思います。 結構簡単な方法なので、知っている人も多いと思いますが、もし知らない人がいれば、ちょっとは役に立つかと思います。基本的にはfloatで解決すれば良いと思いますが、floatを使うと都合が悪くなる場合などもあると思うので(width指定とか、センタリングとか)、そんなときのためにどうぞ。 個人的にメモしておいたものを、WEBにUPして管理しておきたいという意味もあり、今回記事にしています。 元となるソース HTML <ul> <li>バナナ</li> <li>リンゴ</li> <li>ミカン</li> </ul> CSS ul { margin:0; padding:0; list-style:none; } ul li { display: inli
IE6などのクロスブラウザに強くなる、22のHTML+CSSコーディングの基礎
IE6などのクロスブラウザに強くなる、22のHTML+CSSコーディングの基礎 2011-06-04 Twitterなどを見てると、 「IE6がー！」とか 「IE6,7,8,9、Firefox、webkit系、Operaで同じレイアウトにするの大変」などのツイートをたまに見るので、クロスブラウザでも差が出にくく、効率の良くなるコーディングの基礎を紹介します。 気をつけるHTMLの記述方法 HTMLの記述方法を間違えていると、ブラウザCSSの解釈が変わってきます。 以下のようなことは基本的なことですが大切な事です。 DOCTYPEを書く。 HTMLの先頭にDOCTYPEを入れるようにして下さい。 DOCTYPEがないと、ブラウザ間での誤差が起こりやすい状態になります。 DOCTYPE スイッチについてのまとめと一覧表 (HTML 5 や IE 8 Beta 2 のモードスイッチなどの情報も含
クロスブラウザのためのHTML/CSSのテクニック集 | コリス
anthonyshortのエントリーから、クロスブラウザのためのHTMLとCSSのテクニックの紹介です。 How to get Cross Browser Compatibility Every Time 簡単な意訳なので、詳細やキャプチャは上記エントリーを参考ください。 サマリー doctypeはstrictを使用し、正しいHTML/CSSを使用してください。 スタイルをリセットするスタイルシートを使用してください。 Firefoxでのレンダリングのために、テキストのスタイルシートに「-moz-opacity:0.99」を指定してください。 Safari用には「text-shadow:#000 0 0 0」を使用してください。 画像のリサイズをCSS/HTMLで行わないでください。 全てのブラウザでフォントのレンダリングを確認してください。 「Lucida」は使用しないでください。 テキ
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
HTML5 + CSS3 やスマートフォンにも細かく対応したリセット CSS の normalize.css が便利
Facebook のアンケートで HTML5 + CSS3 やスマートフォンに細かく対応した normalize.css を見つけました。ひと通り読んでみたところ、とても細かく設定してあって良かったです。 Normalize.css: Make browsers render all elements more consistently. 今まで自作の reset.css を用意して使っていましたが、これからはこの normalize.css を使おうと思います。コメントも充実していますが、英語が苦手な方向けに日本語化してくれている人もいるので、参考にしてみましょう。 よさげなリセットCSS Normalize.cssを適当に日本語にしました | nevermind
いま起きているWeb標準の進化、HTML5、CSS3、JavaScript 2.0
日本が大型連休に入る少し前の4月23日、W3CはHTML5の新しいドラフトを公開しました。いつも最新のWeb標準化動向を伝えてくれるWeb標準ブログのエントリ「Last Callに向け進むHTML5 | Web標準Blog | ミツエーリンクス」によると、今回のドラフトから仕様書に大きく手が加わり、Webサイトを作る人向け（制作者に関係する要件）と、Webブラウザを作る人向け（実装要件についての要件）ごとに見やすくなるようなスタイルシートが用意されたとのこと。 これまでも何度かこのブログでは、HTML5やJavaScript 2.0などのWeb標準の動向を書いてきましたが、今回は分かりやすいようにその動きをまとめてみました。 HTMLはHTML4でいったん進化が終了し、それ以後はXHTMLで進化していくことになっていました。しかし実際にはXHTMLは期待されたほど普及せず、XHTMLによっ
標準準拠・後方互換モード各々の CSS 解釈の違いをまとめたドキュメントを共有
2007-07-27T21:11:11+09:00 最近のブラウザには DOCTYPE 宣言の有無や種類で大きくわけて2種類の表示モードを切り替え、CSS や HTML の解釈を変える機能が備わっています。マイクロソフトは同様の機能を DOCTYPE スイッチとしており、一般的にもそう呼ばれることが多いように感じます (この記事でも DOCTYPE スイッチとします)。 DOCTYPE スイッチはオンの状態で standards mode (標準準拠モード) に、オフの状態で quirks mode (後方 (過去) 互換モード) になります。標準準拠モードは仕様に準拠した厳格な表示モード、後方 (過去) 互換モードは仕様に準拠していない古いブラウザとの互換を目的とした表示モードです。つまり DOCTYPE 宣言の記述が無いようなコンテンツに対しては、仕様に準拠していない古いブラウザの解釈
XML宣言でIE6が後方互換モードになるバグ はじめてのブログデザイン
先日、当ブログで制作したテンプレートをご使用中の方から不具合報告を受け、その方とのコメントのやりとりから有益な情報を頂きました。 既にご存知の方も多いと思いますが、XHTML の文章型宣言である XML 宣言をソースの一番上の先頭に記述すると、IE6 では後方互換モードになってしまうバグがあります。FC2ブログのソースで言うと下のようなソースです。 <?xml version="1.0" encoding="EUC-JP"?> 私のように知らなかった方のために説明させて頂くと、後方互換モードとは、IE6 より古いバージョンの IE での CSS の解釈（後方互換モード）となり、W3C の標準仕様に従って表示するモード（標準準拠モード）とは違う CSS の解釈をします。 したがって、他のモダンブラウザと IE6 に表示のズレが発生します。 ボックスモデルの解釈の違い img 要素の padd
CSS_XHTML_TIPS:XHTML-TIPS hrは構造か見栄えか
この記事に対してご意見をいただきました。それについて追記した記事があります。→http://blog.livedoor.jp/cssxhtml/archives/53084266.html 今週は真冬の天気、調度良い具合にWEB案件の実務が結構な量がある為、内勤でした。明日もこの真冬日が続くらしいが、あいにく外勤となりそうです。 今回のテーマはWEB標準としてhrは構造か、見栄えかという問題を取り上げます。 業界内、WEBデザイナの間ではどっちつかずのテーマとして数多く話題が取りざたされていますが、私はどちらかというと構造派です。次に上げるサンプルを例に解説しますと、 なぜ構造かと言うと、サンプルにあるように（ずいぶん長いサンプルですが）CSSの切られた状態でのページビューがナビ部位とコンテンツ部位をわかりやすく区切る役目を担っており、見やすさ＝ユーザビリティに配慮することになると
CSS3・HTML5のブラウザ対応状況一覧 – creamu
Deep Blue Skyというサイトで、CSS3・HTML5のブラウザ対応状況一覧がまとまっています。 自分のブラウザのCSS3・HTML5対応状況を調べてくれるjavascriptライブラリ、Modernizrを使って調べたようですね。 ↑はMac Firefox3.5。ちょっと残念な感じですね。。 対応状況は以下のようになっています。 Internet Explorer 6, 7 & 8 Firefox 3.5 (Win) Google Chrome (Win) Opera 10 (Win) Safari 4 (Win) Safari 4が一番優れていますね。IEがひどいことになっている。。。 詳しくは以下からどうぞ。 Browser support for CSS3 and HTML5 姉妹サイトである以下のサイトでは、自分のブラウザの対応状況が見られます。IPとかも調べられますよ
Bos138 | Agen Juragan Bos 138 Slot Login Link Alternatif
🎰 Game Online, 🎲 Angka Jitu, 🏆 Pertandingan Bola, 💸 Permainan Kartu Game Bos138 menawarkan berbagai jenis permainan slot yang tidak hanya menarik dari segi visual namun juga menjamin keamanan dan keadilan bagi para pemainnya. Di era digital ini, kepercayaan menjadi aspek penting dalam pemilihan situs judi online, dan Game Jackpot berupaya keras untuk memenuhi ekspektasi tersebut dengan menyedi
知らない人は損してる？コーディングが3倍速くなるZen-Codingを導入してみた - EC studio デザインブログ
最近になって急に盛り上がってきているZen-Codingをみなさんご存知ですか？ Zen-CodingはHTML/CSSをショートカット＋スニペットで簡略化してコードを書くことができるライブラリです。 独立したテキストエディタソフトではなく、既存のHTML/CSSエディタにプラグイン的に導入するものです。 Zen-Codingというのもがどういうもので、どんなすごいものなんだ、というのはこちらの動画を見てください。 ※音が出ますのでご注意ください。 Zen Coding v0.5 from Sergey Chikuyonok on Vimeo 一体何がおこわれているのか？という感じだと思われますが、今回の記事ではこのZen-Codingの導入方法と使い方の一例を紹介します。 Zen-Codingに対応しているエディタは色々あるのですが、今回は弊社の開発環境しているAptana Studio
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTMLクイックリファレンス
CSS3とHTML5の主要ブラウザの対応状況一覧
大藤幹のHTML/XHTML/CSS辞典｜株式会社龍球インク
HTMLタグボード - HTMLタグ一覧、CSSリファレンスなど