CSS HappyLife ZERO が移転したのでお手数ですが、消えちゃう前にブックマーク等変更してもらえるととても嬉しいです。 制作会社でコーディングする場合、社内のガイドライン的なのが有ったりデザイナーもある程度固定されてると思うので、毎回似たような事を確認したりとか、このデザインはどういう意図なんだろう？ってのも、何度か同じ人とやってれば見えてくる訳ですが、フリーランスの場合だとデザイナーは毎回違っていたり、当然ディレクションをする人も違うので最初に確認しておきたい事が有ったりします。 って事で、その辺りをまとめてみたり、デザインを渡されたときにこのデザインの意図は？って思う事とかもばーっと書いてみます。はい。 なので、デザイナーさんもコーダーにデザインを渡すときに気をつけて欲しい点とかもわかってしまうすばらしい内容（だと良いな）！ じゃあまずは最初に確認しておきたい基本的なことか

html5 関係無いのも有るかもですが、個人的にhtml5の要点をまとめたメモ。 ほんとにざっくり書いているので、何か期待しても何も出ません＞＜ 日本語が含まれる場合、title要素は charset の後（次）。 address要素は連絡先情報に使う。 例えば企業サイトの各支店の住所一覧とかに使うのはNG。ブログとかで、上手い店とかの住所にaddressを使うのもNG。 あくまでも、そのサイトの管理者への連絡先。なので、copyrightに使うのもNG。 copyrightはsmall要素が妥当。 なので、p small copyright って感じになる。 nav要素はあくまでも主要なナビゲーションに使う。 主要なってのは具体的にはグローバルナビゲーションやローカルナビゲーション。 なので、関連リンク一覧とか、ページ内にあるちょっとしたリンクに使うのはNG。 hgroup要素は、見出し

class名やid名って付ける時悩みませんか？ 今でもボクは結構悩むんですが、そんな悩みを解決する為に、人さまのソース覗きまくってよくあるclass名とid名を拾ってきました。 これで、チョットだけ作業効率アップ！？ 2010年6月10日追記： この記事自体、2007年 1月15日に書かれてるんでかなり古いです。 あくまでも参考程度に留めてもらうのが良いかと思います。 今だったら、html5の要素を参考にしたりして付けるのが、今後の事を考えると良いのかなーと思います。 また、善し悪しの判断はせずに公開しているものですが、位置に関するのは仕様変更に弱くなるのでオススメはしません。 全体に使えそうな感じ wrap wrapper top-wrapper wrapperAll frame mframe all-frame container page pagetop all allContent

HTML5版の新規でサイトを作るのに使えそうな一式です。 今までの新規で使えそうな一式のVer3からも有る程度流用はしていますが、結構いじってます。 今までみたいに、社内のマークアップエンジニアとかそういう人がもう居ない環境なので、何処かで使われていた訳ではありませんが、まー最初の準備って地味に面倒なのでちゃちゃっと始めるには良いんじゃないでしょうか。 【HTML5】新規でサイトを作るのに使えそうな一式。Ver 1をDL（zip：12kb） HTML5版のVer 1を見る 社内のマークアップエンジニアとかって書いたら、これどうなのよ？とか話してた頃がちょっと懐かしくなった。 コーダー飲みとか、CSS Niteなんかで、マークアップエンジニアやコーダーさんと会う機会は結構有るのに、そういう具体的な？話まではしないからなぁ・・・ それはさておき、中身のご説明などを続きにて。 中身のご説明 zi

CSS（スタイルシート）でbodyに設定しておくと便利な5つのポイント - デザインウォーカー | DesignWalker - ロサンゼルスで働くウェブデザイナーの日記を読んで、ボクなりな最初に指定して置くと良いポイントを上げたくなったので書いちゃいます。 むしろこのサイトの方向性的に有った方が便利だよなーと。 書くきっかけを頂き、感謝いたします。 ちなみに、最初に指定しておくポイントってそれぞれだと思うので、一つの参考として読んでいただければ幸いです。 最初にbodyに指定しておくと便利だと思う3つを。 body { background:#FFF url(../img/share/bg.gif) no-repeat left top; font-family:Verdana, "ＭＳ Ｐゴシック", sans-serif; font-size:80%; } じゃあ、詳細について色々書

以前に「もう、class名やid名で悩まないんだからっ！！」というエントリーを書いたのだけど、自分がよう使うid名とclass名のまとめと、その辺の理由付けをしてみよーかなぁと思った。 後、idとclassの使い分け絡みもちょっと書くかも。 こーいう内容を書くと反応が怖かったりするけど、ソレもまた勉強なり。とか思って自分なりの今の考えを書いてみようと思います。 先に言っておきますが、コレから書く事が正解とかこう付けるべきって解釈はしない感じでお願いします。 コイツはこう考えてるんだ。くらいで読んでいただければ幸いです。えぇ。 全体を囲む際によく使うかなっていう系 #page idでコレをつける事が最近多いです。 wrapperとかwrapを使わないのは、脳内がサランラップに犯されているからっていうやる気の無い理由もありますが、「このサイトのこのページ。」なんだからpageがしっくり来たなぁ

執筆が終わったと思えば、主業務が激務でネタがちらほら浮かんでたのに書けない今日この頃。 でも、どこぞのiPhoneネタと宣伝ばかりになってしまったブログよりいいかも知れません。えぇ。 さて、CSSってある程度覚えてしまえば思った以上に簡単に組めたりして、何となく組めている気がするって思ったりしないっすかね。 もしくは、その逆になーんかイマイチ成長してないようなって感じてる時とか。 そんな状況のときに、今よりちょっとだけコーディングのクオリティや効率を上げるのに意識する事とかやっておくべきこととかを思いつくままに上げてみます。 仕事としてってのがベースなので、個人サイトやブログレベルだと当てはまらないかも。 ボクが昔はやってなかったけど今は当たり前な事とか、今でも忘れがちな事とか、何かそういう感じのことを書いていくので、人によっては当たり前だし、ちょっとした発見がある人も居るかも？ よく分か

「今よりコーディングのスピードを上げる17の方法」とかってタイトルにしたら、いかにもそれっぽい感じがするなぁ（笑） さて、仕事をする上でもっとも重要な要素の一つに、作業スピードって有ると思うけど、正直最近の自分が以前に比べて早くなっている気がしない今日この頃。 一応、現状の作業スピードでも期間内に納品は出来てるから最低限の作業スピードは確保されてると思うんだけど、コレが1.5倍くらい早くなったら、空いた時間に勉強したり、もっとガンガン組んでいけるから、速さを極める事はとても重要だよなーと。 なので、自分がやろーとしてる思いついた方法をメモ。 コーディングのスピードが上がりそうな事 無理やり出した感も有るけど、取り合えず思いついた方法を。 1）基本的なタイピング速度を上げる。 タイピングソフトとかを活用して、基本となるタイピング速度を上げれば少しはコーディングのスピードも速くなるかもって思っ

メモ。 誰かの役にも立つかもしれないしってことで、いつも過去の案件のソースとか探してペタペタしてるけど、何処で使ったのか忘れたりするのでここに貼っておこう。 - コメントにて使用条件を書いてほしいとの事だったので念の為追記しておきます。 特別記載が無いエントリー以外は、どう使うのも自由です。 自分のブログにそのままソース掲載してもらっても、仕事で使ってもいいですし、あらゆる用途に対して自由に使ってください。 もちろん、改変・配布とかも自由です。 ただ、ウチで公開しているソースやサンプルに対して何らかの問題が生じても責任は負いません。各自の責任でご利用ください。 大体こんな感じです。 select要素でマークアップ済みの都道府県のやつ <select name="都道府県"> <option value="">都道府県をお選びください。</option> <optgroup label="北

光の4戦士を買ったんすが、売り文句通りレトロな感じがしていいですね。 まぁまだ2, 3時間程度しかやってないんで、これからどうなるか分かりませんが時間を見つけてやって行こうかと。 さて、以前からoverflowプロパティは使い勝手が良いというか、使う場面が多いプロパティの一つですが、考えてみると色んな事に使ってるなぁ～と思ったので自分が良く使うのをまとめてみました。 あんまoverflowプロパティを使った事が無い方は、ビックリですよ！ これで、ソコの可愛いアナタもoverflowプロパティの虜になる事間違い無し！！（わかんないけど サンプルとかは以下よりどうぞ。 サンプルサイトを見る サンプルをダウンロード 基本的に、全てoverflow: hidden; の指定を足す事で解決したり実現出来る感じです。 01 clearfixみたいに使う まずは以前の「clearfixを使わないでやるに

HTML5公開草案初版 (First Public Working Draft) がリリースしたりで、色んなトコロで見かける今日この頃。 HTML5関連適当にリンク。 HTML 5 HTML 5 differences from HTML 4 HTML 5 における HTML 4 からの変更点(2の日本語訳) とりあえず、ボクが一つだけ言えることは、英語は分からんって事です。 えぇ。 日本語訳が充実する日を心待ちにしていようっと。 で、まぁ何を思ったか、HTML5って現状のブラウザ相手にどんくらい組めるの？ って思ったので、なんか作ってみました。（こんなの参考にもならない感じですが） HTML5で書いてみたページ（Fxだとちゃんと見れないと思う） HTML5で書いてみたページのダウンロード(zip:8kb) そもそも書き方が正しいのかも分からずに書いてたので、こーじゃねーよ！っていう指摘が

hamashunさんがTwitterで、 IE6を使って閲覧すると右上に『アナログ』って出るようにしようぜ。 って言ってたので、CSS HappyLifeでやってみた。 ボクが出来る2008年最後の大仕事でした。えぇ。 使いたい方は是非是非。 ちなみに、ボクが使った画像はコレです。自分のモニタで出るやつを参考にしました。 ご自由にお使いください。 IE6だけに表示させるにはどんなやり方でもいいっすけど、手っ取り早いのだったらハック使ってやるのがいいかと。 .analog { display: none; } * html .analog { display: block; position: absolute; top: 10px; right: 30px; } こんな感じで。 であ。 16日のお昼頃追記 ウチのアクセス解析を久々に確認してみたら、全体の50％くらいがFirefoxで40％