新規でサイトを作るのに使えそうなの一式。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
続・FireFoxのテキスト自動改行 - Affamative Way
昨日の続き ちょっと調べたらそっこーで公式見解が見つかった。 Firefox 3 の修正内容のご紹介 その3 — URLも改行されるように | Mozilla Japan ブログ とにかく意図しない場所での改行が発生しないように、極力制限をかけている仕様になっています。これは、単純に文字だけを見て改行するかどうかを決定すると、日付の書式や、時間の書式等まで改行してしまったりすると、Web ページの内容自体を壊しかねないためです (日本語以外の言語圏では単語の途中で改行するという発想自体があまりないことの方が多いことに注意してください)。将来のバージョンではより改行の発生パターンは制限されるかもしれませんが、これ以上、改行可能位置が増えることはないと考えて頂いて良いと思います。 ﾏｼﾞｯｽｶ。。。増えないんすか。。 そして、この修正が完了した今、Web デザイナの方々にひとつお願いしたいこと
SEOだけで満足できない人のためのmetaタグ情報まとめ (後編)
SEOだけで満足できない人のためのmetaタグ情報まとめ (前編) 「http-equiv編」 このエントリは上記のエントリの続きです。前回のエントリでは触れなかった、metaタグのname属性を持つものについてまとめたいと思います。metaタグの中で一番有名ともいえる、「meta name="keywords"」(キーワード)や「meta name="description"」(概要)もこちらに含まれます。 meta name (name属性)とは メタデータとはそもそも「文章の中身ではなく、HTML文章そのものについてのデータ」を記述するところです。前編のhttp-equivで出てきた「content-type」や「content-language」も「このHTMLの文字コードはUTF-8」だとか「日本語の文章である」と指定して、ユーザーエージェント*1に情報を与えているわけです。当然
[CSS]HTMLの各要素が配置されたスタイルシートのチェック用のテンプレート
SFS Site From Scratchから、HTML/XHTMLの各要素が配置されたスタイルシートのチェック用のテンプレートを紹介します。 <!-- Sample Content to Plugin to Template --> <h1>CSS の基本的な要素</h1> <p>この HTML の目的は何のデフォルト設定が CSS を持っているか決定するのを手伝うこと、そして、場所を設計するとき、どんな可能な要素でもミスしないようにすべての可能な HTML 要素がこの HTML に含められることを確認することです。</p> <dl> <dt>Original:</dt> <dd><a href="http://www.sitefromscratch.com/content/html-xhtml-css-testing">HTML XHTML for CSS Testing</a></d
HTML 5は何をもたらすか - モジログ
HTML 5が与えるインパクト、それがもたらすものについて、具体例を３つ考えてみた。 ■ HTML5は何をもたらすか １ Webレイアウトの「標準」 ２ フィードを代替する ３ Webページの「リミックス」が進む 以下、順に説明していこう。 ■ １ Webレイアウトの「標準」 「HTML 5では「article」タグでページの「本文」が取れる」の図にあるように、HTML 5で導入される「header」「article」「nav」「footer」などの新タグは、現在のWebレイアウトでよく用いられるid名などをそのまま、正式なタグに昇格させたものだ。 HTML 5が実際にブラウザでサポートされ、広く普及するのはだいぶ先だろう。しかし現時点からこの仕様、新しいタグ名が挙がっているということで、divのidやclassとして「header」「article」「nav」「footer」など、HTM
XHTMLの利点 - 木俣ロバート久の覚書 - Hatena Blog
HTMLにくらべて、XHTMLは、他のXML文書を埋め込む/他のXML文書に埋め込まれた場合に意味がある。単体で使った場合、例えばHTML4.01とXHTML1.0はほぼ等価なので、違いはない。 具体的には、XHTMLでRDFaを使いたいとか、RSSにハイパーテキストの断片を埋め込みたいという場合、XMLであることに意味が生じる。 でも、結局ほぼ等価なんでしょ、といわれれば、少なくとも現状ではそう。だから、もし、XMLであるXHTMLが必要になったらHTMLをXHTMLに変換すればいいし、逆もまた然り。 じゃあ、基本HTMLにしておいて必要に応じてXHTMLに変換するのと、その逆の場合と、どっちのほうが良いか、という話になると思うが、現状では基本HTMLのほうが利点が大きいだろう (XHTML1.0ユーザーも、わざわざHTML4.01互換にしてtext/htmlとして配信しているくらいだし
HTML 5では「article」タグでページの「本文」が取れる - モジログ
次世代HTMLの「HTML 5」について、そのウワサは以前から耳にしながらも、中身については知らなかった。 仕様や解説記事（末尾にまとめた）をいくつか流し読みしてみて、驚いた。これこそ、私の求めていたものだ。 私は以前より、Webページの「本文」がどこからどこまでなのか、ソフトウェアで判定できる標準的な方法があればいいとずっと思っていた（「フィードをアイテム単位に区切れば、セマンティック・ウェブが一気に現実化する」）。HTML 5では、いくつか導入される新しい要素（タグ）の中に「article」というものがあり、これがまさに「記事」の範囲を示すものなのだ。 これさえあれば、プログラム的にWebページを取得して、その「article」タグの部分だけ抽出すれば「本文」になる。あらゆるWebページにこの「article」タグが入ってくれば、もうフィードに頼る必要もなく、どんなページの「本文」でも
pre 要素のスタイル定義とマークアップ - 2xup
2006-09-07T00:56:49+09:00 なにやら pre 要素に CSS でどういったスタイル定義をしているのか、また、pre 要素をどのようにマークアップしているのか、様々な意見がでている模様。 ブログにコードを貼り付ける方法で悩むの巻(i d e a * i d e a - Lifehacks by 100SHIKI.COM) pre要素へのスタイル指定(hail2u.net - Weblog) Re: i d e a * i d e a - ブログにコードを貼り付ける方法で悩むの巻(hxxk.jp) 情報共有と新たな発見を期待して、どのようにスタイル定義・マークアップしているのか公開することに。まずは注意しているポイントを挙げてみます。 Macintosh 版 Internet Explorer では、div 要素以外に値が visible (初期値) 以外の overf
第24回 tableデザインをかっこよく見せる
前回，thead/tbody/tfootとthやcaptionといったtable系のタグを一通り理解したところで，実際にtableのデザインをいくつか作って眺めてみることにします。プレーンなtableをCSSでいろいろと装飾してみて，デザインを考えるという段取りにしましょう。 まずはプレーンなtableを作る 社員名簿をイメージしてプレーンなtableを作ってみました（リスト1）。データベースから読み出してPHPで生成したtableという感じで眺めてください。このプレーンなtableはborderの設定などをしていないためケイ線は一切無く，お世辞にも見やすいとは言えません（図1）。 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtm
HTML/XHTMLマークアップ・CSSコーディングガイドライン | enoq(エノーク)
HTML/XHTMLマークアップ・CSSコーディングサービス - ciqlie（シクリエ）では、コーディングガイドラインに基づいたHTML/XHTMLマークアップ・CSSコーディングを行います。このページではコーディングガイドラインの一部を掲載しております。 案件によってはガイドラインと一部異なる設計・実装を行う可能性がございますのであらかじめご了承ください。 ディレクトリ構成 命名規則 HTMLマークアップ CSSコーディング アクセシビリティ ディレクトリ構成 html ├common/ │ ├css/ │ │ ├import.css [各CSSファイル読み込み] │ │ ├common.css [各ブラウザスタイル調整定義] │ │ ├structure.css [サイト構造定義] │ │ ├editorial.css [サイト構成定義] │ │ ├component.css [サイ
ちょっとしたメモ - alt要素？
alt要素なんて、もちろん今の仕様には存在しないわけだけれど、それらしきものが検討された様子がある…という話を、何かのページの一部に書いたような気がするのだが、消してしまったみたいなので、思い出しながら書き記しておこう。検討の痕跡が残っているのは、XHTMLモジュール化仕様のDTD実装ページだ。 このページのF.2.5. XHTML Qualified NamesのセクションBは、「XHTMLの全要素型の名前空間修飾名を提供するためのパラメータ実体を宣言する」とされている。つまり、このセクションでxxx.qnameという形の定義があれば、xxxはXHTMLの要素型名として用いられる（と想定されている）ことをあらわす。このセクションの最後には、次のような記述がある。 <!-- Provisional XHTML 2.0 Qualified Names ....................
HTMLの提案書を書こう | Takazudo Clipping*
HTMLなんかどこに頼んだってかわんねーよ！というわけじゃない。 ちょっと前に、会社がコンペに参加するとかでHTMLの提案書を書いた。要件は、もう設計とか完了していて、ワイヤーフレームとかチャートとか用意しちゃっている気合いの入ったクライアントで、デザインとCMSに組み込むためのHTMLテンプレート（とガイドライン）を作ってーというもので、自分が書いたのはHTMLのところ。 まー、最初は自分が全体書いてて、ユーザーありきで設計してデザインしてコーディングしてってやってるんですーという、ワークフローな感じのことを書いたのだけれども、社内のWeb仙人に駄目だしされ、もっと特化したものを書け！大体、デザイン以降が要件なんだから、前半まったく意味ねーよ！ってことで自分の書いたものはフルボツになり、自分はHTMLのとこだっけ書くことになりました。 しかしまぁ、前からこんな、HTMLで何がいいわけ？み
[Think IT] 第1回：結構良さそうだぞHTML 5！ (1/3)
【即実践！HTML+CSS】ポストWebコーディング 第1回：結構良さそうだぞHTML 5！ 著者：吉田 光利 公開日：2008/04/07（月） HTML 5時代はすぐそこまで来ている！ HTML 5と聞いたとき、皆さんはどう思ったでしょうか。 筆者の場合は「え？HTML 5？また覚えなきゃいけないことが出てくるの？」「もうHTMLはいいだろ」「今あるサイトはどうなっちゃうの？」「W3Cの勧告なんてあてにならないからなぁ」などというネガティブな感じです。 しかし、HTML 5について学んでいくと「おお！結構良さそうだぞHTML 5」「これは来るな！」という気持ちに変わりました。 2010年の正式勧告される予定で、そこに向かってすごいスピードで広がっています。もしかしたら、それくらいの時期には定着しているのではないかと筆者は考えています。なぜならばあのInternet Exploreもこの
hn要素を各エリアに配置し、アクセシビリティを高くする。 - Trans
ページの各エリアに対してhn要素を使い起点を設けることにより、アクセシビリティを高めることができるかもしれません。 ある全盲の音声ブラウザユーザの意見 最近、ある全盲の音声ブラウザユーザの意見を聞く機会がありました。彼女が主張する使いやすいWebサイトとは以下の3つとのことでした。 ページ全体の構造がイメージしやすいこと 迷子にならないように道しるべがあること 自分の行きたい場所にすぐに行けること 1つ目はWebサイトの標準的なデザインに従えば、ある程度達成できます。このあたりは、Alertbox: ウェブデザイン標準の必要性（2004年9月13日）を参考にしてください。 また、3つ目はWebコンテンツJISにもあるナビゲーションスキップである程度対応できます。ただ、ジャンプするのはメインコンテンツだけにするべきか、それともサブナビゲーションも入れるべきかなどの問題もあるとは思いますが。
DOMの基本。正しいHTMLとドキュメントツリーを理解しよう
DOMを介してHTMLを操作する方法を理解しよう。そのためには、正しいHTMLの概念とドキュメントツリーを知る必要がある。 旧来のDHTMLの手法では、JavaScriptから操作できるHTML要素には限りがありましたが、DOMでは、HTML上のありとあらゆる要素を自由自在に読み取ったり、書き換えることができるようになります。本連載では、おもにDOM Level 1で規定されている手法を使って、JavaScriptを使ってどのようにHTML上の要素へアクセスするのか、そして、それをどうやって書き換えるのかを詳しく解説していきます。JavaScriptからHTML要素を手に取るように操れるようになります。 ドキュメントツリーとは DOMスクリプティングでは、HTMLに関する正しい知識が求められます。まずは正しいHTMLとはなんなのかを理解していただきます。そして、DOMスクリプティングでは欠
HTMLメールの制作時に気をつけたい9つのポイント | コリス
Vdot Mediaのエントリーから、HTMLメールの制作時に気をつけたい9つのポイントを紹介します。 9 best practices for email design 旧式のHTMLを使用する CSSレイアウトは使用しないで、安全で旧式のテーブルレイアウトを使用する。 スタイルは、インラインで指定する head部分のスタイル指定を無視するメーラーがあるので、CSSはインラインで指定する。 背景画像に頼ったデザインにしない 背景画像が表示されない場合があるので、表示されなくても破綻しないデザインにする。 画像は表示されないものと考える 画像が表示されない場合でも、情報が伝わるようにデザインする。 画像には、altを設定する 画像が表示されない場合、altに記述したテキストで情報を伝えられます。 パス指定は、絶対パスを使用する 画像のパスは、http://から記述します。 ファイルの容量は
アンカーの最適化
Updated 2007.01.30 / Published 2007.01.30 従来の HTML では a要素の name属性にアンカー名を付与してウェブページ内の特定箇所をリンク先として参照できるようにする目的地アンカー（終点アンカー）が用いられてきましたが、XHTML では name属性は廃止され、旧来の目的地アンカーのテクニックは利用できません。本文書では HTML4 の規格から新たに登場した id属性を name属性に代わって指定することでアンカーを最適化させる手法を解説します。 アンカー内容を空にして使う旧来の手法について a要素に name属性を指定する目的地アンカー（終点アンカー）は、従来の HTML によく用いられる手法ですが、開始タグと終了タグの間、つまりアンカー内容を空にして使われていることがあります。これはアンカー内容を空にすることで、目的地アンカーを視覚的にわか
テキストエディタでWebサイト構築をガンバル人へ（1/3） ― ＠IT
テキストエディタでWebサイト構築をガンバル人へ：どこまでできる？ 無料ツールでWebサイト作成（6）（1/3 ページ） 「あえて」テキストエディタでWebサイト構築 今回はテキストエディタと組み合わせることで、開発をより便利にできるツールについて考えてみよう。 現在「あえて」テキストエディタでの開発を行われている方には、現在使っているエディタを選択するまでの“経緯”や“こだわり”があると思う。筆者もこれまでにさまざまなテキストエディタを試し、「この程度のもので十分だ」と感じるテキストエディタを現在使っている。 テキストエディタ＋α そこで今回は、テキストエディタ自体とそのプラグイン／拡張機能に関する紹介は行わないこととし、「どのようなテキストエディタを使っている場合でも、組み合わせて使うことでより簡単にWebサイト構築ができるツール」という観点で紹介したいと思う。もちろん、Webオーサリ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
XHTML 2とHTML 5はまだ別々の道を歩む
Web標準XHTML+CSSデザイン クリエイターが身につけておくべき新・100の法則。 公式サポートサイト