もう、class名やid名で悩まないんだからっ！！｜CSS HappyLife

2007/01/15 2391 users class名 ID名 チョット ボク こっから

class名やid名って付ける時悩みませんか？ 今でもボクは結構悩むんですが、そんな悩みを解決する為に、人さまのソース覗きまくってよくあるclass名とid名を拾ってきました。 これで、チョットだけ作業効率アップ！？ ---- こっから続き 全体に使えそうな感じ wrap wrapper top-wrapper wrapperAll frame mframe all-frame container... 続きを読む

とっても使えるoverflowプロパティ。その使い方色々。｜CSS HappyLife

2009/11/01 1353 users プロパティ 使い勝手 感じ 3時間程度 使い方

光の4戦士を買ったんすが、売り文句通りレトロな感じがしていいですね。 まぁまだ2, 3時間程度しかやってないんで、これからどうなるか分かりませんが時間を見つけてやって行こうかと。 さて、以前からoverflowプロパティは使い勝手が良いというか、使う場面が多いプロパティの一つですが、考えてみると色んな事に使ってるなぁ～と思ったので自分が良く使うのをまとめてみました。 あんまoverflowプロパテ... 続きを読む

国民健康保険税が高いので、多くの人が安くなる方法を。 - CSS HappyLife

2012/03/22 1312 users フリーランス 大抵 主題 国民健康保険税 ご飯

ブログの主題と全然関係ないけど、ウェブ制作な人とかイラスト描いてご飯食べてるフリーランスの人には意味の有る内容なのかなーと思ったので簡単にでも書いておくです。 ちなみに、現状で年間20万以上払ってる人が安くなる内容です。 20万って言うと、所得ベースで年間200万ちょい稼いでれば超えてしまう額です。 フリーランスになると大抵の人が社会保険から国民健康保険に切り替える訳ですが、多分皆思うのです。 『... 続きを読む

コーディング前に確認しておきたいこと。 - CSS HappyLife

2010/07/19 982 users コーディング前

CSS HappyLife ZERO が移転したのでお手数ですが、消えちゃう前にブックマーク等変更してもらえるととても嬉しいです。 制作会社でコーディングする場合、社内のガイドライン的なのが有ったりデザイナーもある程度固定されてると思うので、毎回似たような事を確認したりとか、このデザインはどういう意図なんだろう？ってのも、何度か同じ人とやってれば見えてくる訳ですが、フリーランスの場合だとデザイナー... 続きを読む

cssのテクニックなどを学びたい時に見ておきたい12サイト - かちびと.net

2009/09/24 874 users CSS リファレンスサイト テクニック net オマケ

cssが苦手で嫌いなので 好きになろうと思い、勉強に なりそうなサイトを国内外で 選んで絞ってみました。 同じ思いをしている方とシェア したいと思ったので記事にします。 リファレンスサイトは今回は割愛しました。勉強するなら抑えて当たり前ですしね。国内外合わせて11サイトとおまけが1サイトあります。まずは国内サイトから。 CSS HappyLife 個人的に国内でcssといえばCSS HappyLi... 続きを読む

【HTML5】新規でサイトを作るのに使えそうなの一式。Ver 1｜CSS HappyLife

2010/06/09 861 users 一式 一式。Ver HTML5 Ver3 準備

HTML5版の新規でサイトを作るのに使えそうな一式です。 今までの新規で使えそうな一式のVer3からも有る程度流用はしていますが、結構いじってます。 今までみたいに、社内のマークアップエンジニアとかそういう人がもう居ない環境なので、何処かで使われていた訳ではありませんが、まー最初の準備って地味に面倒なのでちゃちゃっと始めるには良いんじゃないでしょうか。 【HTML5】新規でサイトを作るのに使えそう... 続きを読む

新規でサイトを作るのに使えそうなの一式。（あの人のパクりじゃないんだからっ！）｜CSS HappyLife

2007/11/01 718 users 一式 パクリ JOG あなた ジョグ

08年6月4日追記： コレの新しいの作りました。 新規でサイトを作るのに使えそうなの一式。Ver 2 11月7日追記： contens.cssの56行と60行目の#contents部分でスペルミスしておました。 ごめんなさい... 現在は修正版になっております。 修正後のcontents.css --- SO905iがやば過ぎる件。JOGですよ！じょぐ！！！すげー待ってた。アナタを心から待っていた... 続きを読む

パンくずリスト（Topic Path）を作成する際に使えそうなサンプル8種｜CSS HappyLife

2007/01/30 689 users Topic Path パンくずリスト 日常茶飯事 コピ うち

普通のエントリー久々な気がする今日この頃。 今回はトピックパスとかパンくずリストなんて呼ばれてる、ちょっと規模の大きいサイトでは日常茶飯事で見かけるアレのサンプル色々です。 サンプルの前に #main .entryBody #topicPath_01 とかってなってますけど、#main .entryBody はウチのサイトの都合で優先順位上げの為にやってるんで、コピったりする場合はいらない感じです... 続きを読む

bodyに設定しておくと便利な3つのポイントとおまけ｜CSS HappyLife

2007/02/11 676 users Body DesignWalker オマケ ウェブデザイナー

CSS（スタイルシート）でbodyに設定しておくと便利な5つのポイント - デザインウォーカー | DesignWalker - ロサンゼルスで働くウェブデザイナーの日記を読んで、ボクなりな最初に指定して置くと良いポイントを上げたくなったので書いちゃいます。 むしろこのサイトの方向性的に有った方が便利だよなーと。 書くきっかけを頂き、感謝いたします。 ちなみに、最初に指定しておくポイントってそれぞ... 続きを読む

都道府県選択するやつ。｜CSS HappyLife

2009/07/15 671 users ヤツ Option select要素 何処 案件

メモ。 誰かの役にも立つかもしれないしってことで、いつも過去の案件のソースとか探してペタペタしてるけど、何処で使ったのか忘れたりするのでここに貼っておこう。 select要素でマークアップ済みの都道府県のやつ <select name="都道府県"> <option value="">都道府県をお選びください。</option> <optgroup label="北海道・東北"> <option ... 続きを読む

2008年2月版web開発者のためのベストクリップ36個*ホームページを作る人のネタ帳

2008/05/27 643 users ネタ帳 ホームページ エントリ 殆ど バナー

ネタ帳は、売れない、人が来ないホームページにならない為の、インターネットの知識とブログネタに使えるエントリを書いています。 個人的超お勧めエントリ3個 これだけは！というエントリがこれ。 ユーザーの動き。｜CSS HappyLife # ロゴクリック＝トップページに戻るという認識は殆ど無い。 # トップページに戻る場合は、ブラウザの「戻る」ボタン。 # サイドバーのバナーは、認知すらされない傾向が... 続きを読む

【スマートフォン向け】新規でサイトを作るのに使えそうなの一式。 - CSS HappyLife

2011/06/14 603 users 一式 スマートフォン向け

前回の更新日が見たくない程に時が流れている今日この頃・・・。 ブログを更新するモチベーションが中々上がらなかったんですが、まだ、だらだらでも良いから書いていきたいなと言う気持ちは有るんです。えぇ。 こんだけ更新が滞ってても、Twitterとかで時々ブログ読んでますって言ってもらえたり、最近なら「今日からできる定時で上がるためのWEB制作効率アップ術 | カッシーのWEBる。」で、【HTML5】新規... 続きを読む

ユーザーの動き。｜CSS HappyLife

2008/02/13 599 users ユーザー

ボクたちみたいな、ウェブサイトを閲覧するのが当たり前の人間からすると、全く気づかない事に気づかされたりしたので、自分用メモ。 2008年2月14日の22：47頃に追記 ボクのただのメモ書きをもうちょっとちゃんと以下のエントリーで書いてもらってるので、あわせてご覧になって頂くと、良いかと思います。 Webアクセシビリティについての覚書 - ねんがんのWebユーザビリティテストに参加した ---- こ... 続きを読む

画像とかの横にあるテキストを上下中央に｜CSS HappyLife

2008/03/16 552 users 上下中央 テキスト table-cell display 画像

←こういう感じで、画像の横にあるテキストを画像に対して上下中央にするってーのは、今まで出来ないと思ってたんす。 だけども、ヨモツネットさんの記事でヨモツネット[日記] ≫ CSS で簡単に上下中央揃えを実現するってが紹介されてたので、試して見ました！ display: table-cell;がポイントになってて、IEはハックで対応みたいな感じです。 ---- こっから続き デモページ 画像とかの横... 続きを読む

ソースがシンプルなJSによるロールオーバー｜CSS HappyLife

2007/06/20 520 users 略語 本題 ロールオーバー ご用 CSS

Webは略語じゃないのに「WEB」って書く人が多いのが気になって仕方ない今日この頃。（あ、音声ブラウザを配慮したらという場合です） さて、本題に。 CSSのみでロールオーバーするテクニックは有名でございますが、ココ最近JSでいいじゃん。と思うようになってます。 ってことで、こんなサイト名ですけどJavaScriptでやるロールオーバーの方法のひとつでも。 ---- こっから続き jsファイルのご用... 続きを読む

それなりに使い勝手が良さそうなヘッダーのサンプル4種｜CSS HappyLife

2008/01/21 469 users ヘッダー フッター 予感 下書き状態 沢山

17日から下書き状態だったエントリー、、、沢山用意する予定だったけど色んな都合で増えない予感なんで公開。 ずいぶん昔にフッターの区切りっぽいサンプルを作ったけど、ヘッダーは作ってなかったので、ヘッダーのサンプルを作ってみましたよっと。 というか、ヘッダーのサンプルって見かけたことがほっとんど有りません。（必要とされてないから？ ヘッダーって作るの大変というか、厄介だったりしませんかね。 全部画像な... 続きを読む

【Photoshop】コーディングする時のスライス方法とか - CSS HappyLife

2012/10/12 443 users Photoshop

珍しく、Photoshopネタでも。 コーディング関係だからこのブログの主題っぽい！ 今回は、PhotoshopCS6を利用したスライスに関するアレコレです。 コーディング時にはスライスは必須ですし、一番面倒な部分なので少しでも効率良くスライス出来ると良い感じですよね。 内容としては、スライスの基本からって訳じゃないので、最低限スライスツールが使えてる方を対象にしたような感じになってると思います。... 続きを読む

2カラムサンプル13種｜CSS HappyLife

2007/07/01 392 users

2カラムのサンプルを色々作ってみました。 事の発端は、Layout Gala: a collection of 40 CSS layouts based on the same markup and ready for download!を見ててですが、こういうレイアウトサンプルサイトは色々あって、P O P * P O Pさんでも紹介されていますね。 IE7もサポートしているCSSレイアウトがダ... 続きを読む

IE6で閲覧すると。｜CSS HappyLife

2008/12/15 361 users IE6 Twitter モニタ アナログ ボク

hamaさんがTwitterで、 IE6を使って閲覧すると右上に『アナログ』って出るようにしようぜ。 って言ってたので、CSS HappyLifeでやってみた。 ボクが出来る2008年最後の大仕事でした。えぇ。 使いたい方は是非是非。 ちなみに、ボクが使った画像はコレです。自分のモニタで出るやつを参考にしました。 ご自由にお使いください。 IE6だけに表示させるにはどんなやり方でもいいっすけど、手... 続きを読む

今よりちょっとだけクオリティを上げるために。｜CSS HappyLife

2008/09/19 349 users クオリティ

執筆が終わったと思えば、主業務が激務でネタがちらほら浮かんでたのに書けない今日この頃。 でも、どこぞのiPhoneネタと宣伝ばかりになってしまったブログよりいいかも知れません。えぇ。 さて、CSSってある程度覚えてしまえば思った以上に簡単に組めたりして、何となく組めている気がするって思ったりしないっすかね。 もしくは、その逆になーんかイマイチ成長してないようなって感じてる時とか。 そんな状況のとき... 続きを読む

フッターとかの区切り『｜』のサンプル4種｜CSS HappyLife

2007/02/21 346 users フッター CSS 未対応

Track Back URI Track Back [1] Re: フッターとかの区切り『 | 』のサンプル4種 こういうのをCSSでやると、私は「:before擬似要素使いてぇ。（未対応の）IE6うぜー」と思ってしまうのですが、border-leftプロパチを使って... by Liner Note｜2007年02月22日（木） 続きを読む

CSSセレクタ簡易対応表｜CSS HappyLife

2007/04/15 327 users

CSS セレクタ対応表。 完全な自分用メモ。 三角は若干の不具合があるが、ほぼ対応している感じ。 ---- こっから続き 続きを読む

フッターの背景をコンテンツが少ない時でも下まで表示させる｜CSS HappyLife

2008/06/30 296 users フッター 背景 コンテンツ 少ない時 Body

デジパのベトナムオフィシャルサイトがオープンしました。 さて、今回はこのデジパベトナムを組むのに辺り、最初は無理（もしくは相当厄介）だと思ってたことが思ったよりカンタンに出来たのでご紹介。 Movable Type 4のデフォルトテンプレートもそうですが、コンテンツの内容が少ない場合に、フッター部分は当然上に来てしまい、下がbodyに指定している背景色になってしまいます。 キャプチャみたいな感じで... 続きを読む

clearfixを使わないでやるには。｜CSS HappyLife

2008/11/09 295 users clearfix float CSS うち エントリー

2008年11月11日お昼頃 overflow部分を一部加筆しました。 ウチのとあるページのコメント数が28になって、何となく嬉しい今日この頃。 さて、今回はこんなタイトルですけど、こんなエントリーをしようと思ったのは、floatを指定した要素の親要素の高さが算出されない時の解決手段として、clearfixでぐぐれみたいなのをよく見かけたり、あまりにもclearfixが有名だから、最近CSS覚えた... 続きを読む

実装が簡単で、フォームの使い勝手を向上させるJS 3種 - CSS HappyLife

2011/06/29 288 users 実装 使い勝手 フォーム 確率 Webクリエイターボックス

Web屋の私がブックマークしているサイト65 | Webクリエイターボックス の、CSSんところにちゃっかり、CSS HappyLife ZERO が載ってて嬉しい＞＜ さて、今回はフォームです。 お問合わせフォームとか資料請求フォームとか、ウェブサイトには結構な確率で何らかのフォームが有るかと思います。 このフォームの使い勝手の良し悪しが、とても重要なのは言うまでも有りません。 でもまぁ、ビミョ... 続きを読む