古いブラウザが_の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 HappyLife ZERO がいい感じな件 | Blog hamashun.com
CSS HappyLifeの平澤さんがCSS HappyLife ZEROという、主にCSS初心者・中級者の方を対象にしたCSSに関するアレコレがつまったサイトを公開しました。 まだ未完成との事ですが、関連・参考ページなどへのリンクが逐一載っていたり、対応ブラウザをアイコンで示したり、スクリーンショットを細かに乗せていたりと、凄く丁寧に作ってあります。 これ作るの、すげー大変だったろうなあ……。 個人的に特にいいなと思ったのが、デザインでした。 アカデミック臭が良い意味でしないと言うか、初学者な人は取っ付きやすいんじゃないでしょうか。 もちろん「仕様書読め」ってのは正しいですし通るべき道なんですが、慣れてないとあの見た目は結構、圧倒される物があります。 そんな人がワンクッション置くには合ってるんじゃないかなとか。 ちょうどうちの会社にインターン生が来ているので、早速紹介しました。 凄く嬉し
JS習作：clearfixジェネレータ | Blog hamashun.com
サンプルページ 概要 12月3週目のJavaScriptです。 適用したいセレクタを入力してclearfixのコードを吐き出す何かを作ってみました。 出力のセレクタ部分はカンマで改行することもできます。 単純に文字列を取得して定型文に組み込んでいるだけなんですが、組み込む場所がまちまちだったりして書いてる内に混乱してきました。 シンプルにできる事を複雑にしてしまってる気がする。。。 ソースコード jQueryを使用しています。 $(function () { $('#clearfixGeneration').click(function(){ $(this).empty(); var new_line_switch = $('#newLineOn').attr('checked'); var selecter_val = $('#selecterInput').val(); var com
JS習作：チェックボックスの一括チェック・解除 | Blog hamashun.com
サンプルページ 概要 12月1週目のJavaScriptです。仕事で似たような物を使う機会があったので、それをまとめてみました。 やりたかった事は以下です。 チェックボックスのチェックを、まとめてオンオフしたい オンオフはそれぞれに専用のボタンがあるんじゃなくて、一つにしたい ソースコード jQueryを使用しています。 $(function () { var checkBoxs = $('input.checkbox'); $('#allCheck').click(function(){ if(this.checked) { checkBoxs.attr('checked', 'checked'); } else { checkBoxs.removeAttr('checked'); } }); }); 学んだ事や雑感 仕様決めの時点的な事 最初は、ボタンでトグルするようにオンオフをしよう
JS習作：IEでもimg要素のlabelを効かせる | Blog hamashun.com
概要 11月3週目のJavaScriptです。やりたかった事は以下。 IEが、labelに含むimg要素のラベル付けに対応していない件を何とかする できればjQuery無しで作りたい。（が、しかし…） ソースコード 結局jQueryを使用しました。 $(function () { var ua = $.browser; if(ua.msie) { function inputFocus(inputId){ $('#' + inputId).focus().click(); } $('label').click(function(){ var labelFor = $(this).attr('for'); inputFocus(labelFor); }); } }); 学んだ事や雑感 ブラウザ間の差 input要素のtype属性がtextのみなら .focus(); で問題無かったのですが、
HTMLコーダーとかマークアップエンジニアのキャリアパスについて | Blog hamashun.com
最初に結論 この手の話は長くなりがちなので、チャッチャと進めようと思います。 なので最初に結論。 あ、「マークアップエンジニアって何？」と言う人はググってくださいすみません。 HTMLとCSSしかできない人は、そろそろ他の事も始めた方が良い。 コーダー今昔物語 その理由です。 昔：テーブルコーディングで十分だよね ちょっと昔：CSSコーディングできるんだー凄いね！ 最近：CSSコーディングくらいできて当たり前だよね？ 将来：えーHTMLとCSSしかできないのー？（未来予想） こんな感じかなーみたいな。 僕は比較的最近になってこの業界に入ってきた人なので、昔の部分は聞いた話とかからの想像です。 言いたいのは、HTMLとCSSしかできない人の価値はこの先低くなっていくよねって事です（人材的な意味で）。 HTMLコーダー・マークアップエンジニアが進むべき道は？ ではどうしたらいいのか？ 答えにな
お知らせ：アイコンを変更しました | Blog hamashun.com
古いやつ 新しいやつ 服とかはレイヤになってるから、色を変えたりできるよ！ トリミングが必要なサービスではこんな感じ。 これまでは普通に自分の顔写真を使っていたんですが、実はこれ、もう2年以上前に撮影した物で、髪型は違うし使ってる眼鏡は刺身さんからの借り物だしで、大分微妙だったのです。 で、2008年末くらいだったかな？ に941さんのアイコンがVesperさんが描いた似顔絵になって、うわー似顔絵良いなーと思っていたわけです。 なので、絵師さんに似顔絵を発注してみました。 お願いしたのはpixivフェスタなどでもお馴染みの、輝竜司さんです。 サイトには美麗イラストが盛りだくさんなのでFeed購読とかすると良いと思います！ 自分の写真とか撮って送るのは最高に恥ずかし体験でしたが、超いい感じのイラストに仕上げていただいて感謝感謝です。
じゃあ俺もCSSの書き方を書くよ！ | Blog hamashun.com
自分のプロパティの書き順とか｜CSS HappyLifeとかRedLine Magazine : 自分もプロパティの書き順とかとかを読んだので僕も書いてみます。 プロパティの降順 clear float position display width height min-height margin padding border あとは概ねアルファベット順 わりとアバウトだった件。 テンションによって微妙に入れ替わってたりしそう。 CSSのコードの書き方 <div> <ul> <li><a href="/">hoge</a></li> <li><a href="/">huga</a></li> <li><a href="/">foo</a></li> <li><a href="/">bar</a></li> </ul> </div> 例えばこんなHTMLだったら、 div { width:
便利なツールを使ってHTML&CSSコーディングの速度を上げる | Blog hamashun.com
Windows XPを使っていると様々な不便を感じます。 その一つ一つは小さな物ですが、一日中PCを使う僕たちからするとかなりのストレスとなってしまいます。 そんな時はツールを使って解決すると良いです。 注意：紹介しているツールは全てWindows用です。 CLCL かなり有名なクリップボード拡張ツールです。 「もう使ってるよ！」という人が多いと思います。 通常、Ctrl+Cなどでコピーしておける内容は一つのみです。 もう一度Ctrl+Cをすると、内容が上書きされてしまいますよね。 CLCLを使えば、その履歴を辿って呼び出す事ができます。 Alt-Tab Extender"Joe" このツールは超オススメです。 レジストリは使っていないので、一度試してみてください。 僕は、このツールが無いとWin XPを使う気にならない程に依存しています。 マークアッパーはウィンドウが増えがちです。 エデ
【追記あり】li要素などを改行すると、要素と要素の間に半角スペース分の余白が現れる件について調べてみた。 | Blog hamashun.com
【追記あり】li要素などを改行すると、要素と要素の間に半角スペース分の余白が現れる件について調べてみた。 追記：トラバが送れないとの報告を受けて、文末に手動トラバを追加しました。 ナビゲーションなどをリスト要素でマークアップして、display: inline; で横並びにすると、li要素とli要素の間に謎の余白が現れます。 そして、この現象を解決する手段はいくつかあります（参考：リストをinlineで並べた時の余白｜CSS HappyLife）。 でも、この余白はそもそも何者で、なぜ現れるのでしょうか。 余白の正体 結論から言うと、この余白の正体は空白類文字です。 marginやpaddingの暴発ではありません。 では、なぜ何もない場所に急に空白類文字が現れるのでしょうか。 この謎を解くには、まずは空白類文字について調べる必要があります。 空白類文字 1 文書文字集合には、多様な空白類
マルチディスプレイでHTML&CSSコーディングの速度を上げる | Blog hamashun.com
シリーズ目次 マルチモニタ編 キーボード・マウス編 ツール編 エディタカスタム編（近日公開） AutoHotkey編（初級）（近日公開） 今よりコーディングのスピードを上げるには｜CSS HappyLifeで17個の作業高速化Tipsが公開されていますが、ちょこちょこ言及頂いているので僕も持ちネタを出してみます。 一つ一つが長くなりそうなので、全部で5回に分けて公開しようと思います。 マルチモニタまじおすすめ 4）デュアルじゃなくてトリプルモニタにする。 自宅会社ともにデュアルモニタだけど、1枚増やしてみる。 これで、Photoshop、エディタ、ブラウザで分けれるっていう素晴らしさ。やりたいけど、金が・・・ hamaさんとかモニタ5枚だったっけ？（笑） 今よりコーディングのスピードを上げるには｜CSS HappyLife より引用 モニタ2枚でデュアルにしている人は結構いますが、3枚でマ
空白類文字についての補足・及び言及への返信 | 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 文書文字集合には、多様な空白類文字が含まれている。その多くは、特定の視覚的スペーシング効果を生成するために何らかのアプリケーションが用い
CSS Niteで喋ってきました | Blog hamashun.com
hamashunのセッション 先日のCSS Niteで、「Webの世界に情報発信しよう！」というタイトルで喋ってきました。 内容は簡潔に言うと、「ブログ書こうぜ」です。 当日のアンケートを見させてもらったんですが、おおむねいい感じの評判を頂けてたようでほっと胸を撫で下ろしました。 なんて言うか、正統派のプレゼンではなかったので、もっと好みが分かれるかなーとか思ってました。 特に寸劇とか寸劇とか寸劇とか。 スライドはUPしていますが、高橋メソッド風味なので（あくまで風味）、スライドだけ見てもあまり意味は無いっぽいです。 音声とか公開・・・されるのかな？ セミナーのような場所で喋るのは今回が初めてだったので、いろいろと勉強になり、また課題も見つけられました。 喋っている時の姿勢をもうちょっとシャンとした方がいいかなとか、間の取り方をもう少し緩急付けたいなーとか。 小山田さんのセッション 今回の
浅漬けCSS | Blog hamashun.com
最初に結論 ブラウザの差異を最小限だけリセットするCSSって浅漬けCSSって感じじゃない？ きっかけはTwitter 昨日、@reaさんがTwitterにポストした一言がきっかけです。 最近、ぬか味噌 CSS を使わなくなった。デメリットの方が多い気がする。 それに対する@hamashun（僕）の反応がこんな感じです。 @rea 実はぬかみそ的な CSS は使った事がなかったりします。 必要な要素への margin と padding のリセットと、あとは border 消したり、とかは大抵毎回使いますけどもー。 浅漬け CSS 。 ちなみにここでのborderを消す、というのはimg要素にリンクをした時に表示されるborderについてです。 フォームのborderとかは消していないです。 Twitterのログだけだと説明不足だったのでここで追記。 @reaさんから頂いた更なる反応。 @h
PSDをXHTMLとCSSにしてくれるサービス、PSD2CSS Onlineを試してみた | Blog hamashun.com
PhotoShopのPSDファイルをXHTML＆CSSに一発変換できる「psd2css」:phpspot開発日誌でも紹介されていて結構なブクマもついていたサービス、PSD2CSS onlineがどんな感じなのか知りたかったので、実際に試してみました。 複雑なデザイン 複雑っていうのは、今回用意した物の中でっていう事です。 背景画像やテキスト装飾などを盛り込んでみました。 ソースコード1 これはひどい＞＜ 全ての要素が画像として切り出されて、positionプロパティで配置されています。 色分けのみのデザイン 今度はかなりシンプルにして、色で塗り分けたカラムを並べただけにしてみました。 ソースコード2 これもひどい＞＜ こちらも変わらず、画像をpositionプロパティで並べたものになっています。 枠線のみのデザイン 枠線のみで構成されたPSDを用意しました。 ソースコード3 もうだめぽ＞＜
microformatsを超ざっくりと説明するよ！
ご注意 なにぶん超ざっくりなので、あえて説明不足な記述もあります。 その辺は最後の質問で聞いてください。 ご注意2（公開時に追記） このスライドは社内勉強会用に公開したので、最後が「続く」となっていますが続きません（次の人へのバトンでした）。 ご了承ください。
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!』でした。 なお、内容はあくまで解析したサイトの結果であり、それが正しいとか、或いは大藤さんの意見である
HTMLとかCSSで仕事してる人達のIRCチャンネルってあるのかな | Blog hamashun.com
IRCのチャンネルってみんなどうやって探してるんだろう。 クチコミ？ あったら是非入りたいです。 コメントとかブクマコメントとかTwitterとかで教えて貰えると嬉しいです。 なかったら勝手に作ろうと思います。 この前のCSS Niteの打ち上げで「知りませんかー」って聞いてみたんですけど、そもそもIRC自体、利用している人が少ないようでした。 やっぱりWeb制作側よりシステム開発側の文化なのかな。 IRCは便利だし色々と楽しいので、使った事ない人は使ってみるといいと思います！ 「IRCってなんぞ？」という人は枯れた技術で社内を潤す IRCを使おう！ - livedoor ディレクター Blogを読むといいと思います。
エイプリルフールの今日に、あえて告知やらなんやらを書く勇気 | Blog hamashun.com
したらば掲示板がリニューアルしました 無料で2ch系BBSが借りられるサービス、したらば掲示板がリニューアルしました。 デザインをWoopsdezことまめこ、コーディングをワタクシhamashunがやりました。 サービスの性質故か、全体的にユルい感じになってます。 特に404ページとか見ちゃだめだぞ。 絶対見るなよ！ nowaだけはガチ ガチ。 ロゴにマウスオーバーで表示される文言は、プロレスに詳しいにぽたんさんにお願いしました。 なお、にぽたんさんの「たん」は敬称ではありません。 気をつけてくだしあ！ HTMLとCSSで仕事してたりしてなかったりする人たちのたまり場を作ってくれた件 その1 昨日の件ですが、とあるIRCチャンネルで一緒にいながら実は一度も喋った事のなかったユースケさんが、#markupper を作ってくれました！ ありがとうございます！ サーバはfreenode、チャンネ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
