実践CSS3 & HTML5 with Microformats ワークショップ :: Web Directions East に行ってきたのでまとめ | Blog hamashun.com
実践CSS3 & HTML5 with Microformats ワークショップ :: Web Directions East に行ってきたのでまとめ 実践CSS3 & HTML5 with Microformats ワークショップ :: Web Directions Eastに行ってきました。 会場は恵比寿のとある会議室で、少人数（参加者10人弱くらい）で行われました。 講師はJohn Allsoppさんで、通訳にヤスヒサさん。 色んなお手伝い（という紹介でいいんでしょうか）にOli Studholmeさんというチームでした。 ヤスヒサさんは久しぶりにお会いしましたが、髪が伸びていました（お前が言うな）。 参加者の中で知ってる人はネコゼさんだけでした。 あの人とかあの人とか来ると思ったのになあ。。 休憩時間に技術評論社でHTML5の記事を書いた村田さんと名刺交換をさせてもらったりもしまし
便利なツールを使ってHTML&CSSコーディングの速度を上げる | Blog hamashun.com
Windows XPを使っていると様々な不便を感じます。 その一つ一つは小さな物ですが、一日中PCを使う僕たちからするとかなりのストレスとなってしまいます。 そんな時はツールを使って解決すると良いです。 注意：紹介しているツールは全てWindows用です。 CLCL かなり有名なクリップボード拡張ツールです。 「もう使ってるよ！」という人が多いと思います。 通常、Ctrl+Cなどでコピーしておける内容は一つのみです。 もう一度Ctrl+Cをすると、内容が上書きされてしまいますよね。 CLCLを使えば、その履歴を辿って呼び出す事ができます。 Alt-Tab Extender"Joe" このツールは超オススメです。 レジストリは使っていないので、一度試してみてください。 僕は、このツールが無いとWin XPを使う気にならない程に依存しています。 マークアッパーはウィンドウが増えがちです。 エデ
空白類文字についての補足・及び言及への返信 | Blog hamashun.com
前回の記事、li要素などを改行すると、要素と要素の間に半角スペース分の余白が現れる件について調べてみた。 | Blog hamashun.comを書くために空白類文字について調べたら、記事に必要な内容以上の知識を得ました。 また、ブクマコメントで言及を頂いたので、続編記事を書きます。 連続した空白類文字 ユースケさんのブクマコメントの内容です。 ちなみにどんなに改行や空白が連続してあっても、1つの空白として認識する（はず。あんまし覚えてないけど確かそうだったはず） はてなブックマーク - yu-suke＠double-team.orgのブックマーク / 2008年11月04日より引用 これはHTML4.01仕様書の9.1 空白類の節に載っていて、まさにそのとおりでした。 ここで、ソース文書中で語間に空白類が複数連なっている場合、PRE要素を除いて、レンダリング結果の語間スペース調整は全く異
li要素などを改行すると、要素と要素の間に半角スペース分の余白が現れる件について調べてみた。 | Blog hamashun.com
追記：トラバが送れないとの報告を受けて、文末に手動トラバを追加しました。 ナビゲーションなどをリスト要素でマークアップして、display: inline; で横並びにすると、li要素とli要素の間に謎の余白が現れます。 そして、この現象を解決する手段はいくつかあります（参考：リストをinlineで並べた時の余白｜CSS HappyLife）。 でも、この余白はそもそも何者で、なぜ現れるのでしょうか。 余白の正体 結論から言うと、この余白の正体は空白類文字です。 marginやpaddingの暴発ではありません。 では、なぜ何もない場所に急に空白類文字が現れるのでしょうか。 この謎を解くには、まずは空白類文字について調べる必要があります。 空白類文字 1 文書文字集合には、多様な空白類文字が含まれている。その多くは、特定の視覚的スペーシング効果を生成するために何らかのアプリケーションが用い
プレゼンワークショップに行ってきたのでまとめ | Blog hamashun.com
ヤスヒサさんに「プレゼンのワークショップやるので来ませんか」とお誘いいただいたので、行ってきました！ 講師的な人が一人で喋るセミナー形式のイベントにはよく参加しているんですが、みんなで考えて意見を交換するワークショップは新鮮で、集中力を保ったまま参加する事ができました。 会場 会場はミツエーリンクスさんが貸してくれました！ 太っ腹！ なにげにミツエーに行くのはこれで3回目なんですが、マジックミラーの向こう側が毎回気になってしまいます。 向こう側には何があるのだろうか。 内容 今回は技術的な事とは少し離れていて、プレゼンに関する物です。 なぜプレゼンの勉強なのかと言うと、最近、面白くないプレゼンが多いのだそう。 どういった物が面白くないプレゼンなのかと言うと、例えばスライドを読み上げるだけのプレゼン。 まあこれは資料だけ配布すればいいじゃんと思ってしまいますね。 それから、ハンズアウト（配布
CSS Nite in Ginza, Vol.23のまとめ | Blog hamashun.com
追記 2008-04-03 言及を頂いたので質問コーナーに追記しました CSS Nite in Ginza, Vol.23に行ってきました。 今回のゲストはあの大藤幹さん。 大藤さんの名著CSSプロフェッショナル・スタイルは、コーディングの勉強を始めたばっかりの頃に買って物凄く役に立った本だった事もあって、かなり期待していました。 開演前 19時開演なので18時30分に到着したんですが、既に座席は満員でした。 さすがに凄い人気です。 テーマ 大藤さんは雑誌Web Designingに『CSS Analysis』という連載をしていて、その内容は世界のWebサイトを取りあげて色んなテクニックを紹介するという物。 今回のテーマはそれの特別版みたいな感じで、『CSS Analysis Live!』でした。 なお、内容はあくまで解析したサイトの結果であり、それが正しいとか、或いは大藤さんの意見である
classとidの使い分けについて考えてみる | Blog hamashun.com
CSS Nite Vol.18の懇親会で行われたiwaimさんのプレゼンで、headerの部分は本当にidでいいの？という問いかけがありました。 多分、多くの人が行っているclassとidの使い分けは、複数回登場するかしないかだと思うんですけど、それはどうやら間違った基準なようです。 仕様書は？ そもそも、仕様書の定義としては、二つの違いはどうなっているのでしょうか。 id = name [CS] この属性は、要素に名前を割り当てる。この名前は文書中で一意でなければならない。 class = cdata-list [CS] この属性は、ある要素に1つのクラス名を割り当てるか、または複数のクラス名を設定する。幾つの要素に対してでも、同じクラス名あるいはクラス名群が割り当てできる。複数のクラス名については、空白文字によって区切らねばならない。 The global structure of a
スターハックに端を発するアレコレ まとめ編 | Blog hamashun.com
関連リンク そろそろCSSハックの良し悪しについて考えてみる（書式編） そろそろCSSハックの良し悪しについて考えてみる（管理編） おまけ付き Re:CSS の用途をわざわざ (X)HTML に限ることはない スターハックに端を発するアレコレ スターハックに端を発するアレコレ まとめ編 Kurumaさんに再ツッコミ頂きました！ 飲み込みの悪い子でホントすみません。 おかげさまで何とか理解できました（できたはず）。 今回のエントリは、割と自分用のまとめ記事です。 文章化すると、再確認になっていいってじっちゃが言ってた。 発端 そろそろCSSハックの良し悪しについて考えてみる（書式編）にて、スターハックは書式上で良いハックか悪いハックか？ と考えた結果、より厳格な記述を目指すなら、避けた方が良いかもしれません。と記述。 ツッコミ これに対して、松澤さんとKurumaさんからそれぞれツッコミをい
そろそろCSSハックの良し悪しについて考えてみる（管理編） おまけ付き | Blog hamashun.com
関連リンク そろそろCSSハックの良し悪しについて考えてみる（書式編） そろそろCSSハックの良し悪しについて考えてみる（管理編） おまけ付き Re:CSS の用途をわざわざ (X)HTML に限ることはない スターハックに端を発するアレコレ スターハックに端を発するアレコレ まとめ編 前回のそろそろCSSハックの良し悪しについて考えてみる（書式編）では、正しい書式である事に重点を置いて考えてみました。 しかし、実際の業務、それも複数人が関わる際には、そればかりを重視してもいられないというのが実情だと思います。 そこで今回は、管理のしやすさを中心に考えてみます。 なお、今回もハックと呼ぶと違和感を感じる部分があるかもしれません。 ブラウザ実装の差異に対する技術、といった意味合いで、この記事でもハックで統一しています。 ルールセット単位で使用する まず思いつくのがセレクタに対して指定する、ル
XHTML+CSS (r)evolution, 2ndに行ってきた | Blog hamashun.com
行ってきましたXHTML+CSS (r)evolution, 2ndに！ 最近はCSS niteにも行けてなかったので、久しぶりのイベント参加です。 XHTML+CSS (r)evolutionの講演は、名著Web標準の教科書を執筆された益子さんです。 Web標準の教科書（以下コロコロコミック）や雑誌Web creatorsの連載には、いつもかなりお世話になっているだけに期待も大です。 今回のお題はCSS3のカタチとナカミ。 CSS3の情報で日本語の物はまだまだ少ないので、これはかなり嬉しいです。 スライドが早速公開されているので、これに沿ってレポートを進めたいと思います。 ちなみにこのスライド、最近良く見かけるHTML Slidyで制作されているとの事です。 よし、プレゼンとかする機会があったらパクろう。 うん、機会があったらね。 4ページ：トレンドトーク そうそう、ちょっと前にHTML
激レアプロパティ directionの使いどころ | Blog hamashun.com
滅多に見かけないプロパティに、directionプロパティというものがあります。 テキストの表記方向を、左から右に。 もしかは右から左に指定する際に使用します。 「おいおいボーヤ、テキストは左から右に書くに決まっているだろう？」と思うかもしれません。 しかし世界は広いもので、アラビア文字なんかは右から左に書くのです。 縦書きだったら、日本語も右から左ですね。 まあ確かに、殆ど使う機会の無いプロパティだと思います。 でも先日、とあるWebアプリで使われているのを見つけてしまったので、今回ネタにしようと思いました。 そのWebアプリとは、かのlivedoor Readerです。 よく見ると、左カラムのスクロールバーが左側に付いている事が分かります。 そう、右から左への表記にすると、スクロールバーの位置も変わるんです。 #hogehoge { direction:rtl; } 使用方法は簡単。
よく解るかもしれないバックスラッシュエスケープ | Blog hamashun.com
ふと気になって、バックスラッシュハックでググッたら、以前書いたエントリが一番目に出てきました。 やったね！ なので調子に乗って、関連した記事を書いてみようと思います。 The・2匹目のドジョウ。 内容は、バックスラッシュハックのバックスラッシュハックたる所以でもある、バックスラッシュエスケープです。 そうです。 ウンチクです（またかよ）。 いやでも、技術を使うなら、「なぜそうなるのか」という理由は知っておいた方が良いと思うんですよね。 まず基本として、CSSにおけるバックスラッシュの効果は、『その直後の文字が持つ特殊な役割を無効にする』という物です。 サンプル CSS2 syntax and basic data typesの 4.1.3 文字及びその大小 を引用します。 プロパティや値の途中で改行 第1に，文字列内では，改行が続くバックスラッシュは無視される。すなわち，文字列は，バックス
古いブラウザが_のclass名、id名を無視する理由 | Blog hamashun.com
もう、class名やid名で悩まないんだからっ！！｜CSS HappyLifeとRED LINE:class名、id名の付け方に触発されて、また丁度良いタイミングで職場の話題にも上っていたので調べてみました。 古いブラウザが_（アンダースコア）の付いたclass名、id名を認識しないのはなぜか？ という話です。 結論から言えば、仕様書で定義されていなかったからだと思われます。 CSS2では当初、_は定義されていなかったのです。 ところがこれはミスだったようで、後に2001年4月3日の正誤表で訂正されます。 これはCSS2.1でも仕様書の変更点C.3.3 4.1.3 Characters and caseにおいて記されています。 アンダースコアは識別子として有効だ. "CSS2で識別子に使える文字は [A-Za-z0-9] とISO 10646の161以上、そしてハイフン(-)だ"が次のよう
CSSだけでスマートに角丸を作る方法 | Blog hamashun.com
WWW WATCHさんの角丸に関するあれこれを見ていて、そういえばcontentプロパティを使う方法があったなーと思い出したのでエントリします。 この方法を使えば、XHtml側に余計な要素を追加しないで、かつCSSのみで角丸が可能になります。 サンプル ソース div#circle { width:500px; height:auto; margin:0 auto; background:#aaf; } div#circle:before { display:block; content:url(tl.png); line-height:0; background: url(tr.png) no-repeat top right; } div#circle:after { display:block; content:url(bl.png); line-height:0; backgrou
英語力不要のサイト紹介サイトまとめ | Blog hamashun.com
グッドデザインなサイトを紹介するサイトは、やはり海外のサイトが多いんですよね。 英語が読めないとインターフェイスが解りにくい事もあったりして、閲覧するのもなかなか大変だったりします。 そこで今回は、英語ができなくても比較的解りやすいサイト紹介サイトをまとめてみました。 サムネイル付きでご紹介します。 CSS Mania 恐らくかなり有名なサイトです。 大きなサムネイルと、シンプルなインターフェイスがとても解りやすいです。 CSSElite CSS Gallery 見た目はちょっとゴチャっとしていますが、右カラム上部のShowcase Categoriesが秀逸。 「良い感じのナビゲーションないかなー」なんて時に重宝します。 screenspire.com 今回で一番大きなサムネイルを採用しています。 その代わりに1ページで1サイトの紹介になっています。 右カラム上部のREEVをクリックする
最近のOperaに使えるCSS Hack | Blog hamashun.com
Operaって、妙な所で妙な動きをしたりしませんか？ お前の技術が未熟だ、と言われればそれまでなんですけど、日本ではシェアも低くて情報も少ないかなあ、なんて。 そこで今回はOperaに使えるCSS Hackをご紹介したいと思います。 ただし、書式上は正しくない物なので、ご利用の際は用法容量を守ってお使いください。 サンプル .opera{ color:#f00; } ソースを見ても解りにくいと思うので補足。 各プロパティの前に、全角スペースを入れるだけです。 これを読み込むのは、IE5.5～IE7とOpera8～9になります。 あ、ちなみにWin版のみの検証です。 Mac環境無いのでゴメンナサイ。 IEを含めたくない場合は、直後にIE用のHackで上書きする必要があります。 本当は、Hackを使わなくても済むような作りにするのが一番なんですけれど。 とりあえずいざという時の保険として、覚え
アクセシビリティを更に高めるFIR | Blog hamashun.com
text-indentや他の方法でテキストを追いやって、代わりに画像を配置するテクニック、いわゆる画像置換やFIRと呼ばれるテクニックがあります。 これは音声ブラウザにおいても情報が読み上げられる事から、高いアクセシビリティを持つテクニックとされています。 主にナビゲーションなどで利用されていますが、最近では徐々に使われなくなってきているとか。 恐らくその理由は、CSSが有効で画像がオフの場合に、何も表示されないという点からだと思います。 まあ、そんな環境がどれだけあるのかは分かりませんけれど。 今回は、極力アクセシビリティを高めつつも、それなりにデザインを保てる方法をご紹介します。 アクセシビリティを高める、という意味では、テキストリンクにしてしまうのが一番です。 これならどんな環境でもほぼ対応できます。 しかし、デザイン的な問題が残ります。 特にメインナビゲーションなどには、やはり背景
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
