読者です 読者をやめる 読者になる 読者になる

TRANS

神戸のNPOやソーシャルビジネスの創業・起業のお手伝い

(X)HTMLにおいて属性値をダブルクオテーションでくくる習慣はどこから来たの?

なぜだか分かりませんが、WordPressのいくつかのテンプレートタグでは、属性値をシングルクオテーション(単引用符)でくくって出力します。例えば、こんな感じ。 <link rel='index' title='NPtech.jp' href='http://www.nptech.jp' /> 「これ、なんかキモイ!」と思っていたのですが、仕様では特に問題ありません。 デフォルト</link>…

HTML5を書き直した。

先日公開したわかりやすい技術文章の書き方にid:vantguarde先生から、 HTML5といってるけどなんか違うなあ。sectioning contentの使い方に問題が多い。 http://b.hatena.ne.jp/vantguarde/20090817#bookmark-15373666 と赤点をいただいたので、再試というこ…

Takazudoさんの質問に忘年会代わり・バトンに回答する

ヨモツネットの小山田さんにならい、Takazudoさんからの質問に答えます。 先にエクスキューズ といっても、僕はNPO法人という「組織」に所属するとはいえ、「SOHO」のような個人でサイト制作を請け負っているようなものなので、皆さんと回答の毛色がちょっと…

alt属性が空なら、CSSで背景画像として扱うべきなの?

Web制作者ってとりあえずalt属性は空にしておけばいいって思ってるよね?のはてブコメントで何名かの方が「alt属性が空ならCSS指定」というような意見があったので、そのへんのお話。 きっかけ 上記エントリーでは実際に視覚障害者からの一つの意見としてこ…

携帯用の告知ページのHTMLとCSSを公開しておきます。

インクルーシブデザインワークショップの告知ページの携帯用HTMLとCSSを書いたので、せっかくだから公開しておきます。 モバツイにインクルWSの広告出してるよ! 先日から宣伝しているインクルーシブデザインワークショップ with Re:Creator's Kansaiですが…

CSS Variablesとコーディングフロー

お盆休み中ではあるのですが、なぜかほとんど休日出勤状態になっており、気分転換にメモ書き。 CSS Variables 元ネタは、 CSS Variablesで値を一元管理 | クリエイティブ・タブロイド withD(ウィズ・ディー) CSS Variables と CSS の未来 : could あたり。…

Web制作者ってとりあえずalt属性は空にしておけばいいって思ってるよね?

アクセシビリティの基本でありながら、奥が深いalt属性。こんな視点もあるのだということを書いておきます。追記(2008年7月14日):文章中に誤解を招く表現がありましたので、文章を追記しました。 ある視覚障害者の意見 上のタイトルは皆さんを煽っている…

HTML×CSSのプレビュー型とアーキテクト型コーディングフロー

CSSにはプレビュー型とアーキテクト型コーディングフローというのがあり、今後はアーキテクト型コーディングが主流になるのでは!というアイディアを思いつき、実際にコーディングしてみたら。・・・挫折しました。ただ、こういう考え方もありなのかなと思い、書…

印刷用デザインをきれいにまとめるための7つのポイント

印刷用デザインもWebサイトにとっては1つのデザインだと言えます。制約がある印刷用デザインをきれいにまとめるためのポイントを上げてみました。 印刷用デザインをどうするか。 当ブログで印刷用CSSをはじめて取り上げたのが2006年12月でした。また、2007年…

CSSの擬似クラス「:hover」で作るちょっと変わったメニュー

IE7の大きな進歩の1つといえば、a要素以外にも:hover擬似クラスが指定できるようになったこと。では、これを使ってどんなWebデザインができるのかについて3つの事例を調べてみました。 CSS hover effect | Veerle's blogより。 サンプルはKansas City Homes …

2007年の「CSSやWeb標準」ベストエントリー100選+α

2007年にCSSやWeb標準に関するどんなテクニックや議論があったのかを書き出しておくのも一興かなと思いまとめてみると大変なことになってしまいました。 筆者より一言 CSSな人たちは「懐かしいなー」と振り返ってもらえればいいですし、今年こそCSSやるぞ!…

デバッグ用CSS「Diagnostic Styling」とそのサンプルコード

CSSを使って開発中のHTMLのデバッグを行ってしまうという考え方の紹介とそのサンプルコードをメモしておきます。 デバッグ用CSSとは何か。 まず、サンプルのコードを示してみます。 img[alt=""] {border: 3px dotted red;} img[title=""] {outline: 3px dott…

CSS+JavaScriptで画像に柔軟なレイアウトを作る。(日本語訳)

著者: Aaron Gustafson件名: If I Told You You Had a Beautiful Figure...日付: 2007年9月25日URL: http://www.alistapart.com/articles/figurehandler訳者: Arata Kojimaその他: Translated with the permission of A List Apart Magazine and the author[…

Håkon Wium Lie氏「CSSの10年とこれからの大きな動き」(日本語訳)

タイトルは誇張ではありません。僕も読み始めたときは何のことなのか分かりませんでしたが、途中で出てくるコードを読んで、やっと分かりました。「本当に、これは今のWebデザインやCSSを変えるかもしれない」と。元記事は、A List Apart: Articles: CSS @ T…

10年後から現在を振り返ったときに最も重要なWebの出来事(日本語訳)

Vitamin Features » Back to the Future of the Webの日本語訳です。毎度のことながら、意訳、誤訳も多少なりともあるかもしれません。けれど、英語圏の人たちが今のWeb事情をどういうふうに把握しているのか、それを垣間見るのにはよいかもしれません。ちな…

「IEハックなんて全部捨てちまえ!」英語圏の反応をまとめてみました。

IEハックなんて全部捨てちまえ!に対する意見は結構まちまちで、僕も色々と勉強させてもらいました。では、元ネタの英語圏の反応はどうだったのでしょうか。それを簡単にまとめてみました。 現在の投票の結果 「Trash All IE Hacks」で募集している投票の結…

IEハックなんて全部捨てちまえ!

件名の通り。といっても、英語ブログの訳文です。原文は「Trash All IE Hacks」より。間違いもあるかもしれませんが、訳文の許可をもらったので日本語訳しておきます。以下から訳文。 みんながIE6を嫌っていることをそろそろ認めようよ。僕たちのCSSのデバッ…

Web標準という言葉の分かりにくさ

Web標準という言葉は分かりにくい。Webに携わる人に説明するのならまだしも、Webと無縁な人に説明するのは結構骨が折れます。そもそも、Web standardsはWeb標準という言葉で訳すのは正しいのか。そんなことを2つのポイントから考えてみました。 Web標準はそ…

Re: h1とかheaderとか

コメントではコードが反映されないようなので、こっちでコメント代わりに書いておきます。内容は、h1とかheaderとか|junk diaryへの返信です。 TBありがとうございます。 header要素の話なのですが、はてぶのコメントでkitsさんも述べているように、仕様書…

h1要素の話とHTML5のheader要素とかの話について

見出し要素に関する議論 - 徒委記を読んで思ったことを書きとめておきます。それから、話を転じて、HTML5のheadingheader要素などの話もメモしておきます。 要所、要所にて僕のはてブの発言の ブクマ 僕もh1でサイト名はありだと思うんだけど。全ページ統一…

text-transformから見るブラウザのレンダリングの違い

実際のコーディングではほとんど役立つことはないと思いますが、text-transformを用いていると、UAの違いというのが浮き彫りになったりします。 例えば、XHTML 1.0 Strictで次のようなコードを書いたとします。 <ul> <li>google com</li> <li>グーグル.com</li> <li>google.com</li> <li>google </li></ul>…

Re: Re: XHTML+CSS (r)evolution, 3rdの内容は信ずるに値するか?

我的春秋: Re: XHTML+CSS (r)evolution, 3rdの内容は信ずるに値するか?にコメントしたはずなんですが、反映されたのかどうか分からなかったので、TBでもお伝えしておきます。 自分の無知をさらけ出すのもあまりよい気持ちでもありませんが、やはり気になるこ…

携帯用CSSを書く上で押さえておくべきポイント

先日、diggでVitamin Features » Make your site mobile friendlyというエントリーが上がってきてました。見てみると、非常にうまい具合に携帯向けのCSSやHTMLの書き方などが紹介されていました。僕も携帯向けCSSの書き方には興味があったので、勉強がてら重…

英語圏で話題になっているかもしれない、セマンティックウェブやCSSの書籍たち。

ゴールデンウィークも終わりですが、ちょっと肩抜き程度に小ネタなど。 はてぶを見ながらも、英語圏のCSSなどのエントリーを追っていると、英語圏では話題になっているけど、日本語圏では話題になっていない洋書というものがちょくちょくあります。で、以下…

* { magin: 0;}だけでは物足りない!zoom: 1;を使おうよ!

IE6からIE7が今後本格的にマーケットシェアを取って行くことを考えると、IE7の仕様やバグを考えた上でのマークアップが欠かせないとは思います。でも、僕らはまだIE7がどんなものかが分からない。そのため、とりあえず* { zoom: 1;}を指定しておくことが安全…

印刷用CSSをもっとよくするための4つのTips。

約2ヶ月くらい前に、Printing the Web: Solutions and Techniques | Smashing Magazineというエントリーを読みました。10個以上の海外のサイトのいろんな印刷向けCSSやJavaScriptのTipsが紹介されていて、「印刷用CSSをまとめてみた。」を書いた自分としては…

英語圏から学ぶ、body要素に対するfont-size指定方法のまとめ

YUI Fonts CSSのfont-sizeで悩み始めてから、font-sizeってどういうのがいいのだろう、と考えていました。そこで、英語圏ではどういうふうに指定しているのが多いのだろうと、いろんな記事を読み漁ってみました。いろいろなやり方はあるにせよ、5つくらいの…

IE7でも、pxで指定されたフォントサイズは拡大、縮小ができない。

とりあえず、一言だけ。CSSでfont-sizeをpxで指定したときは、IE6のブラウザ側の文字サイズを拡大、縮小を選択しても、文字サイズがリサイズできないことは有名なバグ。 どうやら、IE7でもそのバグは修正できていないようです。僕も、先ほどIE7でテストして…

【解決編】YUI Fonts CSSをモダンブラウザで最適化する。

先日、YUI Fonts CSSでフォントサイズを指定した際に、Operaにおいてはフォントが小さく表示されるので、em指定するとか、Operaのみハックするとかして解決する、そんなことを書きました。でも、ようやく各モダンブラウザでYUI Fonts CSSを使いながら、的確…

YUI Fonts CSSのline-height: 1.22em;の謎を解く!

先日から、ずっと頭に引っ掛かっていたYUIのFonts CSSのbody * { line-height: 1.22em;}という指定。はてなの人力検索でも質問してみたのですが、結局分からずじまいで、仕方がなく、自分でマークアップしてテストしてみました。どうやら、id:b-windさんがお…

Yahoo! UI Library: Fonts CSSを使うのなら、Operaには気を付けて!

Yahoo! UI Library: Fonts CSSを知ってから、CSSを書く際にfont-sizeは大体このライブラリを読み込ませてから使っています。ただし、Operaで表示する際には、気をつけたほうがよさそうな点があったので、メモしておきます。 Fonts CSSはどういう構造になって…

letter-spacingをマークアップする際の注意点

body要素にletter-spacingを入れる際の注意点が分かったので、自分の備忘録としても書いておきます。 今までは、 /*\*/ letter-spacing: 0.1em; /**/というふうにbody要素に書いており、MacIEの「letter-spacingを指定した要素内の表示が崩れる」というバグ…

日本語で日本語のCSS情報のみをGoogle Coopで検索する。

CSS Engine in Japan アイディアはEric's Archived Thoughts:CSS Searchより。これの日本語版がほしかったので、自分のブクマやRSSリーダーに入っているフィードを中心に作ってみた。 とにもかくにも、動けばよかったので、デザインなどは一切無視。単に調べ…

2xupで実装されているエラスティックレイアウトを調べてみた。

2xupさんのところで実装されているエラステックレイアウト(Elastic Layout)、もしくはエラステックデザイン、はたまたエラスティックレイアウトというのが気になってしょうがない。今年、アックゼロヨンでグランプリを受賞したみずほ証券でも、似たような…

印刷用CSSをまとめてみた。

以前、絵文禄のことのはさんのところで、サイトの横幅を640ピクセルにする理由――統計と現状に基づく結論というエントリーがあった。それから、ちょっと印刷用CSSに興味を持って、色々と調べてみたり、自分で書いてみたりした。そのまとめ。 ちなみに、#navi…

posiotion: absolute;で絶対配置に固定したli属性は、IE6もしくはIE7において、display: block;が効かない?

既に、どこかで公表されているバグなのかもしれないけれど、自分がハマリにハマリ、今日一日をこれだけのために使ったと言っても過言ではないので。 こんなコードを書いていた。まず、HTML。 <div id="navi"> <ul> <li><a href="#">ああああ</a></li> <li><a href="#">いいいい</a></li> <li><a href="#">うううう</a></li> </ul> </div>簡単なulとliで書いたナビゲーシ…

Web制作に役立つ拡張機能

以前から、Web Developer Toolbarはよく利用していたのだが、覚え書き@kazuhi.to: Re: 第7回 ページ構造を確認する方法のところで、面白いFirefoxの拡張機能を発見してしまった。 それが、X-RayとProfessor X。 使い方は、覚え書き@kazuhi.toさんのところを…

アクセシビリティを実践しないと、訴えられる?

興味深い判決だと思う。 NFB 対 Target社訴訟の判決 連邦地方裁判所の判事はWebサイトが視覚障害者にとってアクセシブル(利用可能)でない場合、小売業者は法に訴えられる可能性がある、という裁定を下しました。Target社はこの裁判の中で、自らのWebサイト…

兵庫県のホームページがリニューアルしました。

仕事柄、結構頻繁にアクセスしている兵庫県のホームページ。いつの間にか、リニューアルされているみたいで、Web標準的なサイトに生まれ変わっていた。 ソースを読んでみると、ざっくりtableで囲んだ後、各メニューなどはul、liで作りこむなど割合しっかりし…

JavaScriptなしで、CSSを切り替える。

phpsoptで紹介されていた記事。 http://phpspot.org/blog/archives/2006/08/javascriptcss.html 元ネタは、456 Berea Streetの人のやつ。ここのZoomLayoutのやり方をずっと知りたかったんだけど、やっと分かった。よかった。 ただ、phpspotの記事はその紹介…