無駄なdiv要素やclassだらけのマークアップから卒業する方法
グリッドベースのレイアウトを作成すると、ついついdiv要素を多用してしまいがちですが、意味のあるデータにはそれに適した要素を使用し、無駄なdiv要素やclassだらけのマークアップから卒業する方法をWebdesigner Depotから紹介します。 Fight Div-itis and Class-itis With the 960 Grid System 下記は各ポイントを意訳したものです。 はじめに CSSのフレームワーク：960.gsの場合 classの乱用を避ける リスト要素の使用 画像とキャプションの使用 複数の見出しとパラグラフの使用 子要素のclassは親要素に はじめに 数年前までウェブページの設計はテーブルがスタンダードでした。そしてCSSはそれを大きく変え、今日ではCSSのフレームワークがウェブページの設計を容易にしてくれています。 しかしながら、このCSSのフレームワ
名前空間宣言は何ですか？ - WHATWG FAQ - 日本語訳 - HTML5.JP
一部、直訳ではなく意訳した部分がございます。原文と表現が異なることがございますので、ご了承ください。この日本語訳は、私が理解を深めるために、自分なりに日本語化したものです。本日本語訳には、翻訳上の誤りがある可能性があります。したがって、内容について一切保証をするものではありません。正確さを求める場合には、必ず原文を参照してください。当方は、この文書によって利用者が被るいかなる損害の責任を負いません。もし誤りなどを見つけたら、当サイトのお問い合わせより連絡いただければ幸いです。 原文：http://blog.whatwg.org/faq/ （2011 年 1 月 21 日版） 翻訳日：2011/01/25 最終更新日：2011/01/25 概要 WHATWGが公開しているHTML5のFAQです。HTML5の目的や存在意義といった大枠の話から、要素の記述方法といった細かい話まで、さまざまな方面
俺のホームページ 2.0 を試作した - カナかな団首領の自転車置き場ダイアリー
HTMLでwebをつくるときhtmlやcssでなくほとんどイラレなどで作って配置だけhtmlでやれば簡単なのではないかと思うのですがどうでしょうか？ なんか、ピピッと来る質問があったので、試してみました。 参照：【俺のホームページ 2.0】 なにか問題が？ 一応、上記リソースのマーク付けは、Adobe Illustrator が吐き出したものを、なるべくいじらずに、alt や meta、style をいくつか追記するだけにしてみました。 いっそ SVG 形式にしてみる おまけだよ。 文字：Adobe CEF（110KB） 文字：SVG（241KB） 文字：アウトライン（1.02MB） 「文字：SVG」のヤツは、Opera で見るのと、Firefox で見るのと、書体が違う。あと、両端揃えが仇になってるのか、字間がグダグダ。なんでかは、知らないけど。アウトラインのヤツは、まあ、そのまんまだね
_blankの挙動はブラウザ実装依存にすればいい。
リンククリックの際に別窓を開く挙動になってるtarget="_blank"は、W3C的には、よろしくない方向らしい。 HTML / XHTML Strictではtarget属性が定義されていないとのこと。 target="_blank"は非推奨? | Web標準Blog | ミツエーリンクス HTMLの仕様書では、center要素やfont要素などの文書内容を意味づけするものではなく、見栄えを表現する要素や属性が「非推奨 (deprecated)」と定義されています。 しかしtarget="_blank"の場合は、この「非推奨」とはなっていません。ただし、HTML 4.0 やXHTML 1.0のStrict文書型では、target属性が定義されていないため利用できません。このためtarget属性を用いる場合は、Transitional文書型を選択する必要があります。 ふーん。W3Cが何故そ
W3C準拠派 vs 臨機応変派に分かれて議論をお願います。…
W3C準拠派 vs 臨機応変派に分かれて議論をお願います。 はたしてW3Cに準拠することだけが正しいやり方なのか、以前から私は疑問に感じていました。現状でブラウザが完全対応していない以上、ある程度の「裏技」を使うことは常識化しています。W3Cを厳密に守る方にはこうした臨機応変な対応が「汚いコード」として目に映るようです。 W3C準拠派、臨機応変派に分かれて議論をお願い致します。 ==========参考リンク========== 『趣味のWebデザイン（備忘録） ――テーブルレイアウト排斥の根拠薄弱について――』 http://deztec.jp/design/05/02/20_table.html 『カナかな団の躁鬱 ――所謂正しい HTML――』 http://www.aboutworks.com/shokodei/diary/2005/2005_01_a.html#PrintNo1
文字コード宣言は行いましょう(HTML) - Web標準普及プロジェクト
文字コード宣言は行いましょう(HTML) HTMLで日本語を使用する場合、そのファイルの保存方法が複数存在します。 それはいくつかのルールを使用して日本語を保存し、ブラウザがそのルールに則って読みとることで表示するためです。 このルールのことを文字の符号化方式と言います。 何故文字コードの宣言が必要なのか 保存する時の文字コードとブラウザが読みとる時に使う文字コードが違っていると文字化けが発生してしまいます。 これは一部の符号化方式を除き、そのファイルがどのような文字コードで保存されたものなのかをブラウザが判別できる確実な手段が無いために発生します。 しかし、そのHTMLファイルの作者がブラウザに対してどのような文字コードで保存したのかを明示することによってブラウザは確実に表示できるようになります。 それが文字コードの宣言です。文字コードは次のようにmetaタグを使って宣言します。 ISO
フレームの作法（TexTsiTe）
フレームは非論理的、再掲 フレーム（サイト）に関しては自分の中でロジックが出来上がっていて過去に幾度と無く発表したりしていたので今更という気もするけど、その今更記事を改めて発表しておこうと思う。上記事の言及ではなく「その先」にあるものを補足するものとしてお読み頂ければ。 そもそもフレームに論理性を求める必要性は無い 元々『論理的に結びついている「本文」「目次」という２つの文書』があり、この目次部分がブラウザのサイドバーとかで表示できたら便利なのにそういう機能が無いから代替的にフレームでやるしかねえな、というのがオレが求めた形（というのはいささか大袈裟だけど）だった。フレームが左本文・右目次で分かれていたとして「右目次」はオマケでいい、無くても全然かまわない。論理的に結びついている目次を擬似的に表示しているだけ。というのがオレの持論。大元がきちんと出来ていれば、フレームだとかそんなことはホン
アクセスキーを指定するサンプル - うなの日記
A要素やINPUT要素では、accesskey属性を指定することで、コントロールに素早くアクセスするためのショートカットキー(ニーモニックキー)を設定できます。 「accesskey="<キーを示す文字>"」の形式で指定します。 例) accesskey="X" A,INPUT以外に、AREA,BUTTON,LABEL,LEGEND,TEXTAREAに設定できます。 LABELに設定した場合、ラベルと関連づけられたコントロールにフォーカスします。 ショートカットコマンドは環境によって違うので注意 Windowsでは一般的には「Alt + <ショートカットキー>」ですが、 FireFoxでは「Alt + SHIFT + <ショートカットキー>」です。(どうでもいいけど、微妙に打ちづらい組み合わせだなー。) Macだと「Cmd + <ショートカットキー>」が一般的らしい。 以下はアクセスキーの
WEBデザイナ/開発者が覚えておくと便利なブックマークレット集:phpspot開発日誌
15 Must-Have Bookmarklets For Web Designers And Developers WEBデザイナ/開発者が覚えておくと便利なブックマークレット集。 起動すると、その場で画像などの要素をドラッグ＆ドロップでデザインできたりする便利なブックマークレット集です。 ReCSS - Reloads The CSS 起動すると、サイトのＣＳＳが再読込みされ、リロードすることなく見栄えの更新ができる Edit Any Website - ブックマークレット XRAY - See Details Of Any Web Element 起動するとJavaScript製のＤＯＭインスペクタが起動します。 MRI 起動してエレメントをクリックすると、クリックしたエレメントのセレクタが取得可能。 Design - Grid-Rule-Unit-Crosshair 起動すると、4
もうこれで十分。HTML上でテーブルを表示するなら·Sigma Grid MOONGIFT
業務システムを構築する際に、一覧表を表示するという処理は多い。そしてそのデータを並べ替えたり、チェックボックスを入れたりしたいというニーズも多く発生する。場合によってはカラムを並べ替えたり、一括更新したいなんて言われることもある。 ソートも並べ替えもページネーションも全部こみこみ それを一つ一つ実装していては非常に工数がかかってしまう。そこで使いたいのがこのSigma Gridだ。 Sigma Gridはテーブルの表示とソート、データ編集などを可能にする超豪華ライブラリだ。LGPLライセンスの下に公開されているオープンソース・ソフトウェアだ。 Sigma Gridはデータの表示に際してJSONでデータを渡す必要がある。そのため既存のシステムにそのまま組み込むのは難しいかもしれない。だがその変更してもあまりあるメリットを享受できるに違いない。 画像表示とクリックアクションの例 まずカラムごと
HTMLを綺麗に保つ12の原則 | エンタープライズ | マイコミジャーナル
Smashing Magazine - WE SMASH YOU WITH THE INFORMATION THAT WILL MAKE YOUR LIFE EASIER, REALLY. Chris Coyier氏がSmashing Magazineにおいて12 Principles For Keeping Your Code CleanのタイトルのもとHTMLコードをクリーンにするための12の原則を紹介している。厳密には11の原則だが、HTMLをクリーンに保つ上で実践的で効果的なものだ。WebデザイナやWebデベロッパは一度チェックしておきたい。12 Principles For Keeping Your Code Cleanで紹介されている原則を要約すると次のようになる。 [原則1] HTML 4.01を採用する場合でもXHTML 1.0を採用する場合でもStrict指定のDOCTY
新規でサイトを作るのに使えそうなの一式。Ver 3
随分前に、Ver2の見直しをして3になってたんですけど、公開してなかったので今更ながら公開です。 中身は2を使ってみて、社内のマークアップエンジニアからフィードバックもらったり、自分でも違和感が有った部分を調整してます。 それなりの期間使ってみて、問題をあんまり感じていないので、完成度としては大分良くなったかなぁって思います。 新規でサイトを作るのに使えそうな一式。Ver 3をDL（zip：40kb） Ver 3を見る Ver.3の中身ご説明 主な変更点を。 style.cssのwidthなどのプロパティをまとめていたのをVer1と同じに。 default.cssに書かれていた、p要素のmargin-bottomの指定をstyle.cssに移動。 default.cssのfont-familyの指定を若干変更。 index.htmlにGoogleカスタムサーチ用に使えるソースを記入。 Ja
HTMLから本文を抜き出せるモジュールHTML::ExtractContent - perl-mongers.org
This domain may be for sale!
nokogiri Documentation
nokogiri.rubyforge.org/ github.com/tenderlove/nokogiri/wikis github.com/tenderlove/nokogiri/tree/master rubyforge.org/mailman/listinfo/nokogiri-talk nokogiri.lighthouseapp.com/projects/19607-nokogiri/overview DESCRIPTION: Nokogiri (鋸) is an HTML, XML, SAX, and Reader parser. FEATURES: XPath support for document searching CSS3 selector support for document searching XML/HTML builder Drop in replace
hxxk.jp - DOCTYPE スイッチについてのまとめと一覧表 (HTML 5 や IE 8 Beta 2 のモードスイッチなどの情報も含んだ 2008 年版 )
DOCTYPE スイッチについて再度まとめ 以前 DOCTYPE スイッチについての検証とまとめと一覧表という記事で DOCTYPE スイッチについてまとめましたが、あれから 2 年弱が経過したので、改めてまとめてみようと思います。 まとめるまでの話がけっこう長いので、一覧表だけ参照したい ! という場合は DOCTYPE スイッチの一覧表をご覧ください。 DOCTYPE スイッチとは何か そもそも DOCTYPE スイッチとは何か、というのがまず書くべきところですが、これは私が書かずとも良質のリソースが各種ありますのでそのリンクのみまとめておきます。 !DOCTYPE スイッチ 各UAのDOCTYPEスイッチについて - CSS Dencitie Mozilla's DOCTYPE sniffing - MDC Mozilla's DOCTYPE sniffing - MDC ( 日本語
クロスブラウザのための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」は使用しないでください。 テキ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML → PDF
HTML、CSS、JavaScriptの練習に最適な便利ツール『rendur』 - 100SHIKI ～ 世界のアイデアを日替わりで ～
俺のホームページ 2.0
HTML5.JP - 次世代HTML標準 HTML5情報サイト