CSS HappyLife

第2回コーディングコンテスト開催決定。

2010-02-19T15:12:57Z

第一回から随分時が流れましたが、第2回コーディングコンテストが開催決定しました。

今回も前回同様、予め用意されたpsdデータを使って参加者が自分のスキルとかを駆使してコーディングをしていくわけですが、第2回目は HTML5+CSS3を利用してコーディングするので現状だと個々でかなり大きな違いが出そうです。

対象ブラウザもかなり絞って、Firefox 3.6、Safari 4 のみになっているので、ホントにバリバリCSS3を使っていく感じですね。

デザインもその辺りをかなり考慮されているっぽく、CSS3を知っているか知らないかで明らかな差が出そうなデザインになっているので、1ページとは言え、前回なんかより難易度はずっと高いと思います。

今回主催はピクセルグリッドさんがやっております。
代表の中村亨介さんをはじめ、高津戸さん、小山田さんと何だかすげーメンツが揃ってる会社です。

前回一応主催っぽいことしてたのもあり、今回ボクは審査員としてちろっと参加させていただきますので、色々よろしくお願いしますです。

IEだとMT5のフッターが動くのを何とかするメモ

2010-02-03T17:37:00Z

IE7（6も？）で、MT5かMT5.01のエントリー画面とかブログ記事の一覧あたりで特定の動作をするとフッターが動いて、メイン部分に重なってしまう現象が有る気がするんですけど、これってボクだけでしょうか・・・

良く分かんないけど、ちょっと困るのでそれに対しての対処方法をメモ。

どんな風に動くかと言いますと、次のような感じで動いてくれます。

これが正常な状態で、チェックボックスにチェック入れたり、プルダウンを表示したりすると・・・

こんな風に、エントリーの一覧部分に被ってしまいます。エントリー数が多いとかなり迷惑な事になってくれます。
エントリー画面でも動くようで、カスタムフィールドとかで長くしてるとフィールドに重なっちゃったりもしました。
IEのユーザーは減っているかもしれないけどまだまだ現役ですし、MTを更新する人はIEが多かったりするので、こんな風になると非常に困ります。

と言う事で、問題っぽい個所を探って対処してみました。

解決する為に修正が必要なファイルは、mt-static/css ディレクトリにある、main.css です。
これをテキストエディタとかで開いて修正します。

当然ですが、ここを下手にいじると管理画面が大変な事になったりするので、やる場合自己責任でお願いします。

main.cssを開いたら、35行目の #content-body を探して、そこに /zoom: 1; の宣言を足してあげればOKです。
zoom じゃなくても、hasLayout が true になればいいと思います。

後はアップロードして、大丈夫か確認します。

と、言う訳でMT5をIEで使う必要がある場合対策しておくと良いかと思います。
次くらいのバージョンで直るかなー？

今回頼んだ名刺の出来がすごく良かった

2010-02-01T11:55:36Z

DQ6を買ったのに忙しくて未開封なままの平澤です。
頑張って仕事進めてプレイしたい限りです。

さて、今回は名刺が切れそうだったので新しく頼みました。
フリーランスと言えば名刺は必須なので最初に当然作った訳ですが、あんまり人に聞いたりしっかり調べずにお願いしたのも有るんですけど、最初にお願いしたところは正直ビミョーだったので、今回は別の所にしようと探していたところでした。
そしたらちょうど似たタイミングで、ココが気になっているって会社を教えてもらって、ボクも気になったので名刺サンプルをもらってから、実際に注文してみました。

そして、実際に名刺が届いた訳ですが、実物見て、個人的にすんげー気にいったので、ボクのおすすめって事でご紹介です！

先に書いておきますが、会員登録時に「紹介者コード」って欄が有り、そこに以下のコードを入れてもらうといつでも5%オフで買えるみたいなので、頼んでみようって思った方は入力してやってください！

紹介者コード：40063825

で、今回頼んだトコロですけど「SuperPrint」ってところです。

SuperPrint ：印刷価格破壊プロジェクト

個人的に良かった点とか悪かった点とか色々

サイトがちょっと怪しかったり（失礼）しますが、個人的には印刷品質と用紙の種類が豊富だったのが決め手でした。
なにせ、最初に頼んだところは、用紙がビミョーだったりテカりが気になったりしましたけど、今回そういうのが全くなかった！
あ、ちなみに今回頼んだ用紙は「特殊名刺のスケッチブック」ってのです。
その名の通り、スケブみたいな厚みとざらざら感が良い感じだったので頼んでみました。
オックスフォードも気になったから、個人名刺とかで使いたいなーと思ってます。

こんな感じで、何その紙？ってのが結構あるので、無料サンプルをもらうのが良いかと思います。
今なら限定500部で豪華版がもらえますし。

値段に関しては、やたら高くなければそこまで気にしなくても良いかなと思ってましたが、値段も安かったっす。送料込みの値段ってすげーなーと。

悪かったっていう程ではないですが、頑張って欲しいって思ったのが、会員登録しないでも買えるようにして欲しい点とクレジット対応です。
後は、ちゃんとサイトに書いてますけど、納期が一週間くらいかかります。
急いでる場合は、もうどうしようもないっすね。

ざっとこんな感じです。
今後、封筒とかも始めるらしいのでそこも気になってたり。

ボクがそうでしたけど、名刺つくろーって思った時に、どこがいいんだろう？って悩むと思うので、個人的なオススメはSuperPrintさんです。

と言う訳で、せっかく気にいったのに、次回頼もうと思ったらサイトが無かった・・・（失礼）って事になったら困るので、気になったら頼んで下さいませー。

アルファブロガー・アワード2009にウチがノミネートされましたっ

2010-01-22T14:57:48Z

アジャイルメディア・ネットワークさんから、CSS HappyLifeがアルファブロガー・アワード2009にノミネートされたとのご連絡をいただきました！

何かの間違いでは！？って気もしなくもないですが、デザイン部門に載ってます。
良ければ、ウチのサイト投票してやって下さい！

アルファブロガー・アワード2009：デザイン部門

すでに、45以上も投票してもらってありがとうございます！＞＜

何の情報も知らないのでアレなんですけど、なんでデザイン部門に！？
CSSは見た目とかを補助する言語だからですかね。

そんな事よりも、アルファブロガーって！！
ここに入っているだけでもビックリです・・・

なんで選ばれたんだろうっていう驚きが隠しきれませんが、選ばれた以上は投票してください！

これはもう、ガッツリ更新しろやごらぁって事ですね＞＜
が、頑張ります！

あ、ちなみに締め切りは2月22日（月）、結果発表は2月24日（水）みたいです。
どきどき。

ZERO

2010-01-18T01:27:00Z

ただの宣伝になっちゃうんですけど、CSSに関するアレコレがつまったサイト作りました。
一応、ギリ公開レベルになったので公開です。
まだ未完成コンテンツがすげー多いですが、取り合えず頑張って書いたんで見てやって下さい！

CSS HappyLife ZERO

IEオンリーで見られると切ないのでIEメインの人は、ChromeとかFirefoxでも見て頂けると嬉しいです。
この半年間くらい時間見つけたりしながらセコセコ作ってましたけど、ここまで形にするだけでも想像以上にきつかった...プロパティ多過ぎ。
今後は全然埋まって無いコンテンツを充実させたり、CSS3のプロパティを書いていきたいなーと思ってます。

ちなみにこのブログは微妙に方向性など修正するかもしれませんが、引き続き運営していきますのでよろしくお願いします。

HTMLコーダー100の質問に答えてみた

2010-01-13T11:57:53Z

遅くなりましたが、新年一発目。
本年も、CSS HappyLifeとhappyLineをよろしくお願い致します。

さて、先日「コーダー飲み会」なるものがあり、一応コーディングやってるって事でボクも参加させていただきました。

仲の良い人も何人かいましたが、人見知りなボクは大半が初めましてでドキドキ。

そんな中、幹事の一人 uzuさんが「HTMLコーダー100の質問」を作ったらしく、うっかり「やります！」と答えてしまったので、答えましたよ！って事でエントリーっす。

HTMLコーダー100の質問の回答

001 年齢は？: 26歳
002 パソコン歴は？: 14年くらいかなぁ
003 コーダー歴はどれくらいですか？: 4年くらい
004 初めてwebを作ったのはいつですか？: 専門1年の時に作った個人サイトが最初
005 コーダーになろうと思ったきっかけは？: なろうと思った事は無いかも。
デザインはへちょかったけど、コーディングは認められたからそのまま気付けばコーダーっていうパターンの人。
006 コーディングは誰に／どこで習いましたか？: 独学です
007 web業界以外の友達・家族とコーディングの話をしますか？: 一部の友だちには話します
008 ご両親はインターネットユーザーですか？: いいえ。ネットって何ですか状態です。
009 視力はいくつくらい？メガネ・コンタクトどちらですか？: 裸眼で0.3くらい。ほぼいつもメガネです。
010 本はAmazonで買いますか？: ぼちぼち買います
011 ネットショッピングをしますか？主に買うものは何ですか？: どんな商品か明確に分かっている物ならネットで買います
012 携帯サイトで買い物をしたことがありますか？: ないっす
013 お酒は強いですか？: 弱いっす。梅酒とかカシスオレンジばっかり飲んでます。
014 休日の過ごし方を教えて下さい。: 休日って間隔があんまり無いですが、ダーツしたり冬はスノボしてたり。
015 今、欲しいものは何ですか？: 大きなテレビを置ける部屋とテレビ（PS3を買ったのにテレビが無くてプレイ出来ないから）
016 平均睡眠時間を教えて下さい。: 8時間とか寝てるような・・・寝過ぎです
017 平日の起床時間は何時ですか？: じゅ、、、10時くらい
018 なにかスポーツをしていますか？: 冬はスノボ。テニスもしたのに一度で終わってるからもっとやりたい。後ダーツはスポーツですか？
019 パソコンと関係ない趣味がありますか？: もちろん有りますよ！
020 コーディングに役立つ資格、パソコン関係の資格を持ってますか？: 何も持ってません
021 昼と夜、どちらの方が仕事がはかどりますか？: 夕方から夜にかけて
022 ブラインドタッチは教本通り10本の指を使いますか？: Yを左手人差指で押す癖が有るけど、おおよそ正しいかと
023 眠い時の対処法はありますか？: 寝る
024 息抜きについ見てしまうサイトはなんですか？: mixi見たりフィードチェック辺り。あと、hondaのサイトとかダーツ関係のサイト、雪山関係のサイト
025 他に息抜きにしていることがあったら教えて下さい。: ぼーっとコーヒー飲む
026 仕事上で得意なことはありますか？それは何ですか？: んー特には・・・
027 仕事中にBGMは聞けますか？能率が上がるのはどんな音楽ですか？: その時はまってる曲をひたすら流してます。能率が上がってるかは謎。
028 作業パソコンはWin?Mac?: Win Vista 64bit。7が欲しい。
029 作業パソコンはデスクトップ？ノート？: デスクトップ
030 作業パソコンのマウスは標準マウスですか？: LogicoolのMX620を結構長い事愛用してます。普通な感じのマウスです。
031 マウスパッドは使っていますか？: ぷち高いのを使ってます。
032 作業パソコンにAdobe製品は何が入っていますか？: PhotoShop CS3 とか色々。近い内にAdobe Creative Suite 4 Web Premium を買う（買いたい
033 作業パソコンはモニタは何インチですか？: 19インチ×2
034 自宅にパソコン持ってますか？いくつありますか？: 2つと、OS入って無いPCが1つ。
035 自宅に作業環境はある？: ある
036 会社と自宅、作業はどちらがはかどりますか？: 会社が有れば会社！
037 自宅パソコンは家族と共用ですか？: 一人暮らしですから～
038 自宅パソコンはWin?Mac?: 作業パソコンと同じなので、Win Vista 64bit。
039 自宅パソコンのメーカーは何ですか？: 自作なので色々ごちゃごちゃと
040 自宅パソコンはデスクトップ？ノート？: 作業パソコンと同じなので、デスクトップ
041 打ち合わせのメモは手描きとテキストどちらがいいですか？: 手書き
042 スケジュール管理は何でしてますか？（手帳・アプリケーション・webツール・モバイルなど）: GoogleカレンダーとかToDOで
043 メーラーは何を使ってますか？: Becky!
044 RSSリーダーは何を使ってますか？: Google リーダー
045 好きなポータルサイトはどこですか？: 特に無いかも
046 ブックマークは何で管理していますか？: 昔ながらのブラウザのお気に入りと、最近になってはてブをちょこちょこ。Deliciousも微妙に。
047 不得意だけど使わねばならない技術はありますか？: Fireworksを使ったコーディング
048 web系の雑誌を購読していますか？: 購読は特にしてないかも。昔はウェブクリを定期購読とかしてました。
049 webの参考書は何冊くらい持っていますか？: 20冊くらいかな。あんまり無いっす。
050 お薦めの参考書があったら教えて下さい。: Web標準XHTML+CSSデザインクリエイターが身につけておくべき新・100の法則。（著書なんで言っておかないと！）
051 参考にしているおすすめサイトがあったら教えて下さい。: 最近はちょっと訳有りで、仕様書関連のサイトばかり見てます
052 コーディングに使ってる、便利なツールを教えてください。: 基本、秀丸オンリーなのでマクロとか便利ですけど、テーブルちゃちゃっと作るなら、Dreamweaverが素晴らしいですね。
053 コードにコメントはつけてますか？: 必要最低限付ける程度
054 制作過程で、どの作業が一番好きですか？(コーディング、画像作成、検証、打ち合わせ)？: んー何だろう・・・テンション上がってる時が好きな時です。
055 画像切り出しに使うソフトはなんですか？: PhotoShop CS3
056 webデザインに使うソフトはなんですか？: PhotoShop CS3
057 検証対象ブラウザは何個ありますか？: 7個くらい
058 一から新規制作とリニューアル、どちらが好きですか？: どちらも同じくらい
059 定期運用と新規制作、どちらが好きですか？: 新規作成
060 テーブルコーディング業務はありますか？: 無いです
061 新規制作の割合はどれくらいですか？: 完全に新規となると、殆ど無いです
062 iPhoneサイトのコーディングをしたことはありますか？: 無いです
063 よく使うJavaScriptがあったら教えて下さい。: yuga.js
064 携帯サイトのコーディング業務をしていますか？: ごく稀にする程度で基本しないです
065 FLASHはどのくらいできますか？: 全然出来ません
066 いま興味がある技術はありますか？: もっとデザインやりたいー
067 自分の書いたコードは美しい？: まぁ、ぼちぼち
068 ソーステンプレートを作っていますか？: 新規用が有る程度で色んなテンプレートっぽいのは作って無いです
069 単語登録にタグを登録していますか？: 多少登録してます
070 HTML5、早く実務で使いたい？: 今は様子見
071 CSS3、早く実務で使いたい？: ばれない程度に使ってｒｙ
072 コーディングで伸ばしたい技術は？: スピード、メンテナンス性
073 コーディング以外で伸ばしたい技術はありますか？: デザイン！
074 職場にコーダー専門職は何人いますか？兼務は何人ですか？: フリーランスなんでボクだけです
075 職場のコーダー男女比はどのくらい？: フリーランスなんでボクだけです！
076 勤務時間は何時から何時までですか？: 起きている時です
077 通勤時間はどのくらいですか？: 10秒くらい（寝床からPCの前に移動する時間）
078 月の残業時間は最高何時間でしたか？: 残業って概念が無いー
079 現在の仕事環境で良いところはどんなところですか？: いつでもどこでも
080 デザイナなど他の仕事とコーディングを兼務してますか？: 頼まれれば基本なんでもやりまっせ
081 職場は服装自由ですか？何か規則はありますか？: 自由過ぎて困ります
082 休日出社や徹夜作業はありますか？: 土日やってる時もありますが、徹夜はしません
083 プライベートでサイト／ブログを持ってますか？: 持ってます evolbird ってサイトがあるっす
084 プライベートでドメインを持っている。: 持ってますよー
085 プライベートでサーバーを持っている。借りている。: 借りてます。コアサーバ安くて何でも出来ていいです。若干安定しないですが・・・
086 CSS Niteには何回行きましたか？: 10回とか？良く覚えてません
087 地方のCSS Nite行ったことありますか？: 無いです
088 尊敬するwebクリエイターがいたら教えて下さい。: たくさん居ますが教えませんっ
089 旅行に行く時パソコンを持っていきますか？持っていきたいですか？: 長期で出る場合は、ノート持っていきます。
090 好奇心を満たす面白い仕事を無償でやったことがありますか？どんな仕事でしたか？: デザイン強化したいときにブログデザインを無償でやったくらいかなぁ
091 ディレクターなどキャリアチェンジを考えてますか？一生コーダーを貫きますか？: どーしよっかねぇ・・・
092 特定のパートナー（彼女・彼氏・夫・妻）がいますか？相手は同業者ですか？: 居ますね、同業者ですね。
093 パートナーは同業者がいい？別の職種がいい？: どっちでも。
同業ならWeb関係の話題で話せるし、職種によっては仕事も頼めたりやったり出来る。でも、意見が対立し易い気もする。
094 コーダーをやっててよかったなあと思うときは？: 承認欲求が強い子なので、認められたって思った時かなぁ
095 何年後／何歳までコーダーをやるつもりですか？: わかりません
096 次の締め切りはいつですか？: とりあえず、2月10日っす。
097 コーダー以外だったらどんな職に就きたいですか？: 体動かす職に就きたいかも
098 よいコーダーの条件を3つあげてください。: 体調管理、探究心、向上心かなー
099 10年後、あなたは何をしてると思いますか？: 働かなくても良いくらい稼いでたら良いのになー
100 コーダーとしての自分を100点満点で評価してください。: 65点。まだまだ足りないモノが多過ぎる・・・

各プロパティの値を初期値にする、initial_value.css

2009-11-23T17:06:35Z

前回のエントリー「とっても使えるoverflowプロパティ。その使い方色々。」の補足で、Dreamweaver使ってコーディングする場合、デザインビューを使ってるとその部分が選択できない問題が有ったと思います。（確認しているのはVer8）
一時的に、宣言を取れば普通に選択できます。

さて、ちょっと必要になったんで、各プロパティを初期値にするCSSを書いておきました。
使いどころとしては、ごちゃごちゃ複雑になってきたCSSが何か当たってて変だったりする時や、取り合えず初期値に戻してみたい時ですね。
他に、ブログサービスとか使ってると、良く分かんない場合が有るのでそんな時にも活用できるかもしれません。

ダウンロードしたい方は以下よりお願いします。

initial_value.css

DLするのとほぼ同じのを貼り付けておきます。

selectorsName {
	background-attachment: scroll;
	background-color: transparent;
	background-image: none;
	background-position: 0% 0%;
	background-repeat: repeat;
	border-collapse: separate;
	border-spacing: 0;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	bottom: auto;
	caption-side: top;
	clear: none;
	clip: auto;
	color: #000;
	content: normal;
	counter-increment: none;
	counter-reset: none;
	cursor: auto;
	direction: ltr;
	display: inline;
	empty-cells: show;
	float: none;
	font-size: medium;
	font-style: normal;
	font-variant: normal;
	font-weight: normal;
	height: auto;
	left: auto;
	letter-spacing: normal;
	line-height: normal;
	list-style-image: none;
	list-style-position: outside;
	list-style-type: disc;
	margin: 0;
	max-height: none;
	max-width: none;
	min-height: 0;
	min-width: 0;
	orphans: 2;
	outline-color: invert;
	outline-style: none;
	outline-width: medium;
	overflow: visible;
	padding: 0;
	page-break-after: auto;
	page-break-before: auto;
	page-break-inside: auto;
	position: static;
	right: auto;
	table-layout: auto;
	text-align: left;
	text-decoration: none;
	text-indent: 0;
	text-transform: none;
	top: auto;
	unicode-bidi: normal;
	vertical-align: baseline;
	visibility: visible;
	white-space: normal;
	widows: 2;
	width: auto;
	word-spacing: normal;
	z-index: auto;
}

!impotant宣言を付けたバージョンも有ります。

selectorsName {
	background-attachment: scroll !important;
	background-color: transparent !important;
	background-image: none !important;
	background-position: 0% 0% !important;
	background-repeat: repeat !important;
	border-collapse: separate !important;
	border-spacing: 0 !important;
	border-top-style: none !important;
	border-right-style: none !important;
	border-bottom-style: none !important;
	border-left-style: none !important;
	bottom: auto !important;
	caption-side: top !important;
	clear: none !important;
	clip: auto !important;
	color: #000 !important;
	content: normal !important;
	counter-increment: none !important;
	counter-reset: none !important;
	cursor: auto !important;
	direction: ltr !important;
	display: inline !important;
	empty-cells: show !important;
	float: none !important;
	font-size: medium !important;
	font-style: normal !important;
	font-variant: normal !important;
	font-weight: normal !important;
	height: auto !important;
	left: auto !important;
	letter-spacing: normal !important;
	line-height: normal !important;
	list-style-image: none !important;
	list-style-position: outside !important;
	list-style-type: disc !important;
	margin: 0 !important;
	max-height: none !important;
	max-width: none !important;
	min-height: 0 !important;
	min-width: 0 !important;
	orphans: 2 !important;
	outline-color: invert !important;
	outline-style: none !important;
	outline-width: medium !important;
	overflow: visible !important;
	padding: 0 !important;
	page-break-after: auto !important;
	page-break-before: auto !important;
	page-break-inside: auto !important;
	position: static !important;
	right: auto !important;
	table-layout: auto !important;
	text-align: left !important;
	text-decoration: none !important;
	text-indent: 0 !important;
	text-transform: none !important;
	top: auto !important;
	unicode-bidi: normal !important;
	vertical-align: baseline !important;
	visibility: visible !important;
	white-space: normal !important;
	widows: 2 !important;
	width: auto !important;
	word-spacing: normal !important;
	z-index: auto !important;
}

仕様書のProperty index部分の必要なところを持ってきてるだけなので、お好きに使って下さい。

参考：Appendix F. Property index

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

2009-11-01T16:15:00Z

光の4戦士を買ったんすが、売り文句通りレトロな感じがしていいですね。
まぁまだ2, 3時間程度しかやってないんで、これからどうなるか分かりませんが時間を見つけてやって行こうかと。

さて、以前からoverflowプロパティは使い勝手が良いというか、使う場面が多いプロパティの一つですが、考えてみると色んな事に使ってるなぁ～と思ったので自分が良く使うのをまとめてみました。

あんまoverflowプロパティを使った事が無い方は、ビックリですよ！
これで、ソコの可愛いアナタもoverflowプロパティの虜になる事間違い無し！！（わかんないけど

サンプルとかは以下よりどうぞ。

基本的に、全てoverflow: hidden; の指定を足す事で解決したり実現出来る感じです。

01 clearfixみたいに使う

まずは以前の「clearfixを使わないでやるには。」でも書いてますが、floatの指定が有る要素の親要素に高さを算出させるために使います。

↑こんな状況の時ですね。画像にfloatの指定があるから親要素が高さを算出してくれません。これを解決する為に、overflowを使います。

#main .overflowExample01 {
	_zoom: 1;
	overflow: hidden;
}

これで確認してみると以下のようになられます。

これだけでもずいぶん役に立ってます。
次。

02 リストの最初だけborderを消す

とあるブラウザが:first-childに対応しておりませんので、それに対応する為にも使えます。

↑こんな状況の時ですね。デザイン上一番上にはborderがいらないんだよ！って時に使えます。
コレを解決する為のCSSは以下のように。

#main .overflowExample02 ul {
	_zoom: 1;
	overflow: hidden;
	margin: 0 0 20px;
	padding: 0;
}
 
#main .overflowExample02 ul li {
	margin: 0;
	margin-top: -1px;
	padding: 5px;
	list-style: none;
	border-top: 1px dotted #666;
}

li要素にネガティブマージンの指定をして、ul要素にoverflow: hidden; の指定が有る事で、はみ出た部分を消す感じです。
サンプルでは縦並びのリストですが、フッターなんかで｜付きの横並びリストで先頭の｜だけ消したい場合なんかにも使って行けます。

見た目は地味ですけど、意外とこういうデザイン多いので、ちゃちゃっとやるのに大活躍です。
まぁJS使ってclass付けたりしても全然良いのですけどね。

次。

03 IE6のカラム落ちを強制的に防ぐ

IE6は、widthプロパティの指定が有っても子要素とかの横幅に合わせて広がってしまいカラム落ちが発生します。その原因になっている要素を探して横幅を調整するのがベストですが、どうしようもない時なんかも有る訳でそんな時に使っていきます。

でっかい画像を置かれてカラム落ちしていますが、これを強制的に防ぎます。
指定するのはカラム落ちしちゃってる要素です。

上手く行くと、上記のように画像が切れてしまいますがカラム落ちは防げます。
IE6だけそんな感じにしたい場合、ハックとあわせて使うといいと思います。

CSSは以下のような感じです。

#main .overflowExample03 {
	float: left;
	width: 440px;
	margin-bottom: 20px;
	padding: 10px;
	background: #ccc;
}
 
#main .overflowExample03 .sub {
	float: left;
	width: 140px;
	margin-right: 10px;
	padding: 10px;
	background: #999;
}
 
#main .overflowExample03 .main {
	float: left;
	overflow: hidden;
	width: 250px;
	padding: 10px;
	background: #fff;
}

div.main のoverflow: hidden;部分がIE6対策です。
次。

04 img要素の横幅に左右されずに横並び

画像の横にテキスト何かが来る場合、img要素にfloatの指定をしただけだと、テキストが長文だと下に回り込んでしまいます。

↑こんな感じですね。
それに対応する為に、テキストが入る部分にdiv要素を追加してwidthプロパティとfloatプロパティの指定をして並べたりしていたかと思います。
この方法の最大の欠点は、widthプロパティの指定が有るのでimg要素の横幅が決め打ちになってしまいイマイチ使い勝手がよくありません。それを解決する方法としてdisplay: table-cell; を使った方法が有ります。

画像の下にテキストが回りこまないレイアウト | ヨモツネット

当時ヨモツネットさんのこの方法が活躍してました。
これと同じ事がoverflow: hidden; でいけます。

このサンプルのHTMLは以下のようになってます。

<div class="item">
 
<p class="image">
<a href=""><img src="" alt="" /></a>
</p>
 
<div class="text">
<p>
</p>
</div>
 
</div>

この、div.text に、overflow: hidden; の指定をすると、、、

↑こんな感じでテキストがimg要素より明らかに長くなっても回り込まない上に、div.text にはwidthプロパティの指定をする必要がありません。

これはかなり素敵です。

neotagさんのブログにも書いてあります。

横幅不定のサムネイルとテキストを横幅指定せずに横並びにするCSS - neotagの雑文

次。

05 見出しとかマーカーが食いこまないようにする

ちょっと前のウェブクリでヨモツネットの中の人が書いていましたが、floatプロパティの指定が有る要素に後続する要素が有り、その要素に背景の指定が有ったりすると、背景が食いこんでしまいます。

↑こんな感じです。仕様通りの動きでも、こうはなって欲しく無いですね。
これを防ぐのにも使えます。

04と同様にdiv要素を追加出来るならそれでもいいんですが、ブログとかの場合div要素を追加するのは手間だったり、書く人のリテラシーによっては無理が生じる場合も有るので、h3要素やul要素などに直接指定します。

#main .overflowExample05 ul,
#main .overflowExample05 h3 {
	_zoom: 1;
	overflow: hidden;
}

IE6は、zoomプロパティで対応。
これで、以下のように食いこまない感じになります。

これもかなり素敵です。
他にも、Firefoxでtext-indentプロパティで飛ばした際のリンクの破線を消すのに使ったりもしますし、色んなところで大活躍するプロパティです。

でも、IE5.5とは仲良く出来ないみたいなので、ターゲットブラウザに入っている場合気を付けた方が良いです。
後、印刷関係とも相性が悪い事が多いので、印刷用スタイルシートではデフォルトのvisibleに戻せるのは戻した方がいいかもです。

また、今回のサンプルはhidden にしていますが大半はauto でも同じ事が出来ます。

ページ送りのサンプル4種+2

2009-10-26T15:33:00Z

ず、随分間が空いてしまった・・・何て言う現実。
気付けば冬間近ですね。

久々の更新が、特別目新しくもなんともないんですが、自分なりのページ送りサンプルを作ってみました。
ホントは最初のだけ有れば事足りてるんですけど、ボリューム感を出す為に4種類+2にしてみました。

地味にサンプル作ってたら時間取られたので、解説は軽めですが続きにて。

今回作っておきたかったのは、センタリングさせたページ送りっす。
とても似たようなエントリーが有るので、下記も参考にしてみるといいかと。

各サンプル共通で以下のスタイルが当たってます。

#main ul,
#main ul li {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

では、01以外はおまけなので解説は01のみで行っきます。
HTMLソースは以下のような感じです。

<ul class="pageNav01">
<li><a href="1.html">&laquo; 前</a></li
><li><a href="1.html">1</a></li
><li><span>2</span></li
><li><a href="3.html">3</a></li
><li><a href="4.html">4</a></li
><li><a href="5.html">5</a></li
><li><a href="6.html">6</a></li
><li><a href="3.html">次 &raquo;</a></li>
</ul>

リストをインラインにして並べた時に生じる余白対策をしている以外は普通のリストです。
CSSは以下のような感じ。

#main ul.pageNav01 {
	margin: 0 0 10px;
	padding: 10px 10px 5px;
	background: #eee;
	text-align: center;
}
 
#main ul.pageNav01 li {
	display: inline;
	margin: 0 2px;
	padding: 0;
}
 
#main ul.pageNav01 li span,
#main ul.pageNav01 li a {
	display: inline-block;
	margin-bottom: 5px;
	padding: 1px 8px;
	background: #fff;
	border: 1px solid #aaa;
	text-decoration: none;
	vertical-align: middle;
}
 
#main ul.pageNav01 li a:hover {
	background: #eeeff7;
	border-color: #00f;
}

#main とかは適所書き換える感じでお願いします。
ボクのサンプルではFx2対策していないので、必要な場合a要素とspan要素に display: -moz-inline-box; の宣言を入れてもらえると素敵だと思います。

また、装飾用のスタイルが結構当たっていますが、ポイントとなる宣言は、ul要素のtext-align: center;とli要素のdisplay: inline;、a要素とspan要素のdisplay: inline-block;辺りです。
あと、vertical-align: middle;は特定のフォント対策で、何も無いと次とかの部分だけ1pxくらいずれてしまうのを防ぐためです。

ちょっと違った方法として、複数行になるほどページ分割しなかったり、極端に検索結果が多くなる場合は...とかで切ってしまう場合、サンプルの01´みたいにすれば気持ち細かい調整が減るので心なしか楽になります。

01´のCSSは以下の様になってます。

#main ul.pageNav01s {
	margin: 0 0 10px;
	padding: 12px;
	background: #f3f3f3;
	text-align: center;
}
 
#main ul.pageNav01s li {
	display: inline;
	margin: 0 1px;
	padding: 0;
}
 
#main ul.pageNav01s li span,
#main ul.pageNav01s li a {
	display: inline-block;
	padding: 1px 8px;
	background: #fff;
	border: 1px solid #ccc;
	vertical-align: middle;
	text-decoration: none;
}
 
#main ul.pageNav01s li a:hover {
	background: #efefef;
}

ざっとこんな感じです。

最近、ふとCSS関連で困って調べごとすると、ヨモツネットに助けられてる気がする今日この頃。

それにしても、更新率が落ちている言い訳をいつの日か・・・っ

ちょっとした組み方の違い

2009-08-18T23:46:08Z

DQ9ではじめてマルチプレイやりました！
新しい楽しみ方だと思うなー。

ちなみにやったのは、この人たち。

collamoの中の人。: CSS Sprites作成ツール「Tonttu」を作ったみたいで、試しに使ってみましたがPSとかでチマチマ作るより全然使いやすかったっす。
興味ある方どうぞ。

これからゆっくり考Lの中の人。: ブログの内容はよく分かりませんが、「JavaScript超初心者によるJavaScript入門講座」ってサイトではてブ50目指して頑張ってるみたいです。
音声解説やってるのでお姉さまが優しく語りかけてくれます。

確認せず晒したんで本人に怒られたら困っちゃう。
さてさて、本題の組み方の違いです。

比較的簡単なサンプル二つを例に、同じデザインを再現するにでもCSSの書き方が違うと全然違うんですよねって辺りを書くっす。

以下のサンプルページを別タブとかで開きながら読んで頂けるとスムーズです。

組み方の違いのサンプルページ

一つ目のサンプル

←こんな感じで、右寄せのテキストにアイコンとかマーカーみたいなのが付いているデザインを組む場合のサンプル3種です。

一つ目の1

#main p.sign01 {
	background: url(../img/item/mark.gif) no-repeat 432px center;
	text-align: right;
}

テキストを右寄せにして、背景画像は左から頑張ってソレっぽい位置に調整して再現してます。
この場合、フォントサイズをpx指定とかで固定しないと重なってしまったりしますし、ブラウザによっては結構位置がずれたり、テキストが増えた場合全く対応が出来ないので、NGです。

一つ目の2

#main p.sign02 {
	text-align: right;
}
 
#main p.sign02 span {
	padding-left: 15px;
	background: url(../img/item/mark.gif) no-repeat left center;
}

p要素は右寄せにするだけにして、span要素を追加して再現してます。
span要素が増えてしまいますが、テキストが増えてもフォントサイズを変更しても絶対に崩れない利点が有ります。
span要素を追加する事をどう捉えるかですが、後のメンテナンス性などを考慮すると仕事の場合この方法で対応してしまうのが良いかと思います。
「続きを読む」とかでa要素が有れば何の問題も無いデザインなんですけどね。

一つ目の3

#main p.sign03 {
	float: right;
	width: 7.1em;
	padding-left: 15px;
	background: url(../img/item/mark.gif) no-repeat left center;
	text-align: right;
}

floatプロパティを使って再現してます。
widthプロパティの単位をemで指定する事で、フォントサイズの変更に対応出来ますがwidthプロパティの指定が有るって事はテキストが増えた場合改行してしまうので変な部分で改行される恐れが有ります。（サンプルはちょうどいい具合に改行されてますが）
また、floatプロパティを使っているので、当然ですが後続する要素が隣接しようと頑張っちゃいます。
隣接されては困るので、後続する要素に「clear: both;」の宣言を追加する必要が有ったりと若干手間です。

一つ目のまとめ

1は楽かもしれませんがNGです。
2はspan要素を天秤に掛ける必要が有りますが、諸々対応出来ます。
3は、テキストが変更されない場合なら特に支障はないかなと。

二つ目のサンプル

パッと見は大したデザインじゃないのに、背景画像を使わないと再現出来ないデザインを組む場合のサンプル3種です。

二つ目のサンプル共通CSS

#main h3 {
	margin-bottom: 10px;
	background: #333;
	color: #fff;
	font-weight: normal;
}

二つ目の1

#main h3.sample01 {
	padding: 5px 5px 5px 20px;
	background: #333 url(../img/share/bg_h3_01.gif) no-repeat;
}

背景画像をデザインのまま切った場合です。
テキストが2行になった場合の処理がコレで問題無ければOKですが、デザイナーの意図が、2行の場合は左の白線も伸びて欲しいとなるとNGです。

二つ目の2

#main h3.sample02 {
	padding: 5px;
	padding-left: 8px;
}
 
#main h3.sample02 span {
	display: block;
	padding-left: 12px;
	background: #333 url(../img/share/bg_h3_02.gif) repeat-y;
}

span要素を追加して、追加したspan要素に背景画像を指定して再現した場合です。
背景画像は、白線部分だけで切り出しています。
これなら、2行になった場合も白線が伸びてくれますが、span要素を追加するのは今回は微妙です。
本文内に出現する小見出し（サンプルはh3要素）は、ちょこちょこ出てくる可能性が有るので、毎回span要素を入れるのは手間です。なので、出来ればspan要素は入れたくありません。

二つ目の3

#main h3.sample03 {
	padding-left: 20px;
	background: #333 url(../img/share/bg_h3_03.gif) repeat-y;
	border-top: 5px solid #333;
	border-bottom: 5px solid #333;
}

このくらいのデザインなら、よく見るとborderプロパティで再現できる事がわかります。
2と同じように画像をカットして白線の位置調整してもいいっす。
これでspan要素を追加する事も無く、デザイナーの意図も反映できます。

二つ目のまとめ

サンプルはエントリーするにあたって都合の良いデザインにしちゃってますが、ココで言いたいのは、そのデザインをよく見ると実はもっと効率の良い組み方が有るかもしれないって事です。

何か昔、角丸の作り方を初めて本とかで知った時に、div四重にして作るしか方法が無いと思ってた時が有り、ちょっと考えれば別の方法が有る事に気付くかも知れないので、色々考えて組むと幅が広がるかなと思います。

まとめ

コーディングしていると、そこでdiv要素は必要か？span要素は必要か？などと色々考える事が有るかと思いますが、そういった場合のバランスの取り方的な部分と、フォントサイズやテキストの増減に対しても柔軟に組む必要が有ります。

デザインを再現しただけでメンテナンス性などが考慮されていないと、後々の修正が手間になったりするので前と似たようなデザインを組む場合など別の組み方が有るのか考えてみるのもいいかなーと思うっす。

HTML5のimg要素のalt属性の仕様は読んでおくべきだと思う。

2009-07-30T11:12:00Z

読んでおくべき。で終わってるタイトルが、自分っぽくなくて違和感有り有りだったの何となく変更。

都道府県選択するやつ。がもしかしたら一日辺りの過去最高のアクセスを稼いだかも知れないという現実。
7月16日のアクセスが17,000PVオーバーって何だ・・・おかしいな、ウチはCSSネタが主力なのに・・・あぁ複雑。

本題ですが、HTML5のimg要素のalt属性に関する仕様がすごい事になってますね。
ちょっと読んでて泣きそうになるくらい事細かに書かれています。

これは、コーディングを生業としている人間なら覚えていなければならないと思うので、必読すべき内容です。

ざっくりまとめると、その画像が無くても完全に意味が伝わるようにしろって事です。
本文内に画像が出てくる場合は、前後の文書とalt属性の値が不自然になるのもいけないってなってますね。

図なども、タイトル的な書き方ではなく、事細かに書けと、仕様書が言ってるのはちょっとすごい事だなぁって思いました。

例えば、「図：CSS HappyLifeの1カ月辺りのアクセス数」
とかは全然ダメで、
「CSS HappyLifeの1カ月当たりのアクセス数はxxxxPVで、何日のエントリー時にはxxxxPV上がっているのが確認出来ます。うんたらかんたら」
みたいに書く必要があると。

alt属性をどうやって入れるか悩んでいる場合、大いに役立ちそうですが、ガイドラインやこうやって書くといいよ！的なものではなく「仕様」として考えてるってトコロがすごいです。

HTML5のリファレンス本とか書く時も、この説明省けなくなるって事っすねぇ・・・alt属性の節だけで何ページ使うんだろう（笑

なんにせよ、仕様としてこれだけの事が書いてあると、HTML5じゃない場合でもalt属性をどうするかっていうのは影響しますね。

都道府県選択するやつ。

2009-07-15T07:31:23Z

メモ。

誰かの役にも立つかもしれないしってことで、いつも過去の案件のソースとか探してペタペタしてるけど、何処で使ったのか忘れたりするのでここに貼っておこう。

-
コメントにて使用条件を書いてほしいとの事だったので念の為追記しておきます。

特別記載が無いエントリー以外は、どう使うのも自由です。
自分のブログにそのままソース掲載してもらっても、仕事で使ってもいいですし、あらゆる用途に対して自由に使ってください。
もちろん、改変・配布とかも自由です。
ただ、ウチで公開しているソースやサンプルに対して何らかの問題が生じても責任は負いません。各自の責任でご利用ください。

大体こんな感じです。

select要素でマークアップ済みの都道府県のやつ

<select name="都道府県">
<option value="">都道府県をお選びください。</option>
<optgroup label="北海道・東北">
	<option value="北海道">北海道</option>
	<option value="青森県">青森県</option>
	<option value="秋田県">秋田県</option>
	<option value="岩手県">岩手県</option>
	<option value="山形県">山形県</option>
	<option value="宮城県">宮城県</option>
	<option value="福島県">福島県</option>
</optgroup>
<optgroup label="甲信越・北陸">
	<option value="山梨県">山梨県</option>
	<option value="長野県">長野県</option>
	<option value="新潟県">新潟県</option>
	<option value="富山県">富山県</option>
	<option value="石川県">石川県</option>
	<option value="福井県">福井県</option>
</optgroup>
<optgroup label="関東">
	<option value="茨城県">茨城県</option>
	<option value="栃木県">栃木県</option>
	<option value="群馬県">群馬県</option>
	<option value="埼玉県">埼玉県</option>
	<option value="千葉県">千葉県</option>
	<option value="東京都">東京都</option>
	<option value="神奈川県">神奈川県</option>
</optgroup>
<optgroup label="東海">
	<option value="愛知県">愛知県</option>
	<option value="静岡県">静岡県</option>
	<option value="岐阜県">岐阜県</option>
	<option value="三重県">三重県</option>
</optgroup>
<optgroup label="関西">
	<option value="大阪府">大阪府</option>
	<option value="兵庫県">兵庫県</option>
	<option value="京都府">京都府</option>
	<option value="滋賀県">滋賀県</option>
	<option value="奈良県">奈良県</option>
	<option value="和歌山県">和歌山県</option>
</optgroup>
<optgroup label="中国">
	<option value="岡山県">岡山県</option>
	<option value="広島県">広島県</option>
	<option value="鳥取県">鳥取県</option>
	<option value="島根県">島根県</option>
	<option value="山口県">山口県</option>
</optgroup>
<optgroup label="四国">
	<option value="徳島県">徳島県</option>
	<option value="香川県">香川県</option>
	<option value="愛媛県">愛媛県</option>
	<option value="高知県">高知県</option>
</optgroup>
<optgroup label="九州・沖縄">
	<option value="福岡県">福岡県</option>
	<option value="佐賀県">佐賀県</option>
	<option value="長崎県">長崎県</option>
	<option value="熊本県">熊本県</option>
	<option value="大分県">大分県</option>
	<option value="宮崎県">宮崎県</option>
	<option value="鹿児島県">鹿児島県</option>
	<option value="沖縄県">沖縄県</option>
</optgroup>
</select>

実際には↓こんな感じになると思うっす。

電話番号とFAX

<tr>
<th><label for="formLabel_tel">電話番号<img src="../img/item/icon_indispensable.gif" alt="必須" /></label></th>
<td>
<input name="電話番号" type="text" id="formLabel_tel" class="formTextArea ascii" size="40" value="" />
</td>
</tr>
<tr>
<th><label for="formLabel_fax">FAX番号</label></th>
<td>
<input name="FAX番号" type="text" id="formLabel_fax" class="formTextArea ascii" size="40" value="" />
</td>
</tr>

メールアドレス

<tr>
<th><label for="formLabel_mail">メールアドレス<img src="../img/item/icon_indispensable.gif" alt="必須" /></label></th>
<td>
<input name="メールアドレス" type="text" id="formLabel_mail" class="formTextArea ascii" size="40" value="" />
</td>
</tr>

IEが有るから助かってるって思えるかもしれないお話

2009-07-05T10:47:12Z

何かしらのサイトを組んでいる時って誰でも一度は思うんだろうけど、
「IEなんて・・・（自重」、「IEさえ・・・（自重」、「ちょ、IEおま・・・（自重」
とか、思うっすよね。

ボクも勿論その中の一人で、特にIE6に関しては常に思ったりしています。
IEのために今までどれだけの時間を費やしたか・・・と思えるほどに。

そんなIEさんですが、今日は逆にIEが有るから助かってるかもって思えるお話です。

ぇーまぁそんな訳で、明日からIEが一切なくなったとして。

「3番目のグローバルナビだけちょっと指定変えてもらえる？」
と、言われて、
『class追加するのやだなぁ』
ってのが、
「リンク先変わらないんだから属性セレクタ使えばいけるっしょ」
って言われてしまったり。

「そこの最初のh3だけmargin-topは0で、他のh3は30pxでお願い」
と、言われて、
『最初のh3だけclass追加しないといけないかな』
ってのが、
「間接セレクタか、:first-of-type疑似クラス辺りでいけんじゃね？」
って言われてしまったり。

「あー悪いんだけどこの部分ちょっと角丸にしてくれない？」
と、公開直前に言われて、
『今から画像切って、divも追加になるんじゃ・・・』
ってのが、
「そんなん、border-radiusプロパティ使えば良いんだけど」
って言われてしまったり。

「そこの日付とタイトルが横並びになってる部分、しましまにしてほしいんだって」
と言われて、
『面倒だけどclass追加してやるかー、あ、JSでいけるかな』
とか思って作業したら、
「いや、:nth-of-type()疑似クラス使えばスグでしょ？」
って言われてしまったり。

「なんかこのソースやけにdiv要素が多いよね」
と言われて、
『だって角丸やドロップシャドウ多くて・・・』
とか言ったら、
「backgroundって背景複数指定できるからさ」
って言われてしまったり。

「ここのアンカーリンクで飛んだあと、飛んだ場所を分かるようにしてもらえない？」
と言われて、ターゲット疑似クラスが浮かばなかったり。

と、こんな感じでIE6や7が対応していないプロパティやセレクタを使えば解決する事が、スグに浮かんでこないと突っ込まれまくってしまう可能性も有るよねとか思いました。

実際、ボクも完ぺきに覚えている訳じゃないから、いきなりIE消えたらちょっと時代に取り残されるかもしれないなぁって考えると結構恐怖っす。
そう考えると、幅が狭い分助かっている部分も有るような。

IE6や7が対応していないプロパティやセレクタに関してあんまり覚えてなかった自分への自戒を込めて。
でも、IEのバグを把握するよりは楽なんだろうなぁ。

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

2009-07-02T10:05:00Z

ふと、昔のサンプルを見て、今そんな組み方しないよ。とか思ってしまったので、最近もっぱらコレっていうのを書き書き。

コレに限らず、昔のエントリーを見てると、自分で無いな～使えねー！って突っ込みたくなるエントリーが多いっす・・・うぅ。
念じたら全部最近の書き方になおらないかな。

・・・

残念ながらなおらないと思うので、昔のエントリーを見る場合は、ちょっと気を付けたって下さい。

何気に大掛かりな計画は有るけれど、計画がでか過ぎて中々どうにもこうにも。
というかブログ書いてる暇有るなら、「お前アレやれよアレ。」ってお怒りの声が聞こえてきそうなので、アレに専念する為にまた大人しくしてるっぽいです。

最近フッターで区切りが有る場合は、:first-child疑似クラスを使って対応するケースが殆どです。
実際のサンプルも用意しました。

サンプルサイトを見る

XHTMLはこんな感じ。

<div id="footer">
<ul>
<li><a href="/">トップページ</a></li
><li><a href="/homepage/">ホームページ制作</a></li
><li><a href="/result/">実績紹介</a></li
><li><a href="/faq/">よくありそうな質問</a></li
><li><a href="/profile/">プロフィール</a></li
><li><a href="/contact/">お問い合わせ</a></li>
</ul>
<!-- / #footer --></div>

どっかのサイトのフッター部分をほぼそのまま持ってきました。

「>」を改行してるのは、inlineにした時の余白埋めるためです。
コメント使ってやるのと同じですね。

して、CSSは以下のようになっております。

#footer {
	clear: both;
	width: 830px;
	margin-top: 20px;
	padding: 15px;
	background: #000;
}
#footer a {
	color: #fff;
}
#footer a:hover {
	color: #f0f;
}
#footer ul {
	margin-bottom: 10px;
	text-align: center;
}
#footer ul li {
	display: inline;
	margin-left: 10px;
	padding-left: 10px;
	border-left: 1px dotted #fff;
}
#footer ul li:first-child,
#footer ul li.firstChild {
	margin-left: 0;
	padding-left: 0;
	border-left: 0;
}

デザイン指定部分も持ってきてるので若干ソースが長いですが、要はli要素に指定したのを、:first-child疑似クラスで一番最初のli要素だけ上書きします。
コレはIE6に対応していないので、対応させるためにjQuery使ってます。
最近常にjQueryは何らかの形で使うので。

では、IE6対応させるためのjQuery使ったやり方を。
まずは、head要素内でJSを読み込みます。

<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">google.load("jquery", "1.3");</script>
<script src="./js/share.js" type="text/javascript" charset="utf-8"></script>

続いて、share.js（ファイル名は何でもいいですが）に以下を書き書きします。

$(document).ready(function() {
	$('#footer ul li:first-child').addClass('firstChild');
});

これで、firstChildってクラス名が付くので、先ほどのCSSソースの最後の部分の指定がIE6で適応されます。

#footer ul li:first-child,
#footer ul li.firstChild {
	margin-left: 0;
	padding-left: 0;
	border-left: 0;
}

ここの部分ですね。
当たり前ですが、JS使ってるので切ってる場合適用されませんが、IE6ユーザーでJS切っている人もレアだと思いますし、これから減っていくだけのブラウザですし、見た目としても有りえない崩れ方をする訳ではないので実用レベルかと思います。

まーコレも一つの「Progressive Enhancement」です。えぇ。
（横文字使ってみればイイと思ってるわけじゃないですよ）

とはいえ、どうしても嫌な場合普通にclass属性追加するしかないと思います。

フリーランスになるみたいです。

2009-06-30T10:25:07Z

ただの私事ですが、本日をもってデジパを辞め、7月1日からフリーランスとして活動していきます。
転職も考えたけど、使ってくれる会社が有るか分からないし、若いうちはちょっと冒険も必要だと思うのでボチボチ考えていければいいなぁとか思ってます。

デジパにはおおよそ3年半勤務してました。
ほぼ未経験だったのでバイトからはじめて、必死だったあの頃。

いや、ホントに必死だった。バカみたいに。

だけど、その必死さ故に今の自分が有るんだろうとか思ったり、
デジパっていう会社だったからボクは成長できたと思う。

会社なのに会社っぽく無い感じとかが好きだったなぁ。
元々あんまり社会に適応しているタイプの人間じゃないので、居心地が良かったのかも。

それでも挨拶とか時間にはすげー厳しい会社だったので、社長に挨拶が出来ないとか色々怒られてた頃が懐かしいっす。
一番最初の頃に「社員になるまでは戦力として認めない」って言われて、なんだか悔しくてすげー頑張ってました。

その甲斐あってか、2ヶ月後には契約社員になってその2ヶ月後に無事社員になれました。

社員になって1ヶ月後、このCSS HappyLifeを立ち上げて、自分の勉強がてらアウトプットしてた訳ですが、Webサイトってカテゴリはネタに困った時に適当なサイト紹介してればいいやとかそんな事考えて作ってました。（当時は週2回エントリーがほぼ義務付けられてたので）

やーホント懐かしい。
辞めたってデジパは大好きっす。
フリーランスになるとは言っても、デジパとはこれからもきっと絡みは有ります。

なのでまぁ、右上のデジパロゴは残ってると思うっす。分かりませんけど（笑

そんな訳で、今後はフリーランスとして活動していくので、仕事ないと飢え死にしちゃいます。
仕事ください（切実

コーディングなら得意っす。JSは書けませんけど・・・
ディレクションやデザインなんかもやっちゃいまっせ。

というか、フリーなんで何でもやりまっせ。

あ、仕事用にこんなサイトも作りました。
happyLine

「Life」じゃなくて「Line」です。えぇ。
同名の株式会社が有るみたいでビックリしましたが関係は一切有りません。（念のため）

実績とか色々載ってるみたいですが、未完成コンテンツも有ったり。
おかしいな、、、7月1日完成予定だったのに、もう明日じゃないか。
何でこんなに時が流れるのが早いのか。

にしてもまだ屋号も取ってないよ。
名刺と封筒は発注したから近いうちに来ると思うんだ！

やー楽しみっす。

生活は不安いっぱいだけど、きっと何とかなる。
むしろ、がっつり稼ぐ！

えっと、そんな訳でフリーランスになっても、このCSS HappyLifeとボクをよろしくお願いいたします。