コーディング前に確認しておきたいこと。 - CSS HappyLife
CSS HappyLife ZERO が移転したのでお手数ですが、消えちゃう前にブックマーク等変更してもらえるととても嬉しいです。 制作会社でコーディングする場合、社内のガイドライン的なのが有ったりデザイナーもある程度固定されてると思うので、毎回似たような事を確認したりとか、このデザインはどういう意図なんだろう？ってのも、何度か同じ人とやってれば見えてくる訳ですが、フリーランスの場合だとデザイナーは毎回違っていたり、当然ディレクションをする人も違うので最初に確認しておきたい事が有ったりします。 って事で、その辺りをまとめてみたり、デザインを渡されたときにこのデザインの意図は？って思う事とかもばーっと書いてみます。はい。 なので、デザイナーさんもコーダーにデザインを渡すときに気をつけて欲しい点とかもわかってしまうすばらしい内容（だと良いな）！ じゃあまずは最初に確認しておきたい基本的なことか
ページ送りのサンプル4種+2
ず、随分間が空いてしまった・・・何て言う現実。 気付けば冬間近ですね。 久々の更新が、特別目新しくもなんともないんですが、自分なりのページ送りサンプルを作ってみました。 ホントは最初のだけ有れば事足りてるんですけど、ボリューム感を出す為に4種類+2にしてみました。 サンプルサイトを見る サンプルをダウンロード 地味にサンプル作ってたら時間取られたので、解説は軽めですが続きにて。 今回作っておきたかったのは、センタリングさせたページ送りっす。 とても似たようなエントリーが有るので、下記も参考にしてみるといいかと。 ページ送りナビゲーションには display:inline-block が超便利 | バシャログ。 不特定の数の横に並ぶブロック要素をセンタリングさせる | CSS-EBLOG 各サンプル共通で以下のスタイルが当たってます。 #main ul, #main ul li { marg
HTML5のimg要素のalt属性の仕様は読んでおくべきだと思う。
読んでおくべき。で終わってるタイトルが、自分っぽくなくて違和感有り有りだったの何となく変更。 都道府県選択するやつ。がもしかしたら一日辺りの過去最高のアクセスを稼いだかも知れないという現実。 7月16日のアクセスが17,000PVオーバーって何だ・・・おかしいな、ウチはCSSネタが主力なのに・・・あぁ複雑。 本題ですが、HTML5のimg要素のalt属性に関する仕様がすごい事になってますね。 ちょっと読んでて泣きそうになるくらい事細かに書かれています。 これは、コーディングを生業としている人間なら覚えていなければならないと思うので、必読すべき内容です。 4.8.2.1 Requirements for providing text to act as an alternative for images 4.8.2.1 イメージの代替として作用するテキストを提供するための要件 ざっくりまとめ
a要素が2行になった場合に背景下にテキストが来ないように。
目新しいネタは全く見つからないとか色々を言い訳に、月1書けばいい方になってる今日この頃・・・うぅ。 そういえば、web creatorsの5月号（たぶん）に参考にしているサイトでウチのサイトの名前があったとかどーとか聞いたんですがマジっすか！？読んでないーorz あと、7月号（Vol.91）にちょろっと記事書いてるので良ければ買ってくだしあ。 タイトルがa要素になってますが、インライン要素でもいいです。 背景下にとかも書いてますが、リストとかでマーカーの変わりにbackgroundをa要素に指定した時なんかの場合です。 タイトルって難しいですねorz さて、時間もあまりないので本題に。 サンプルページを見る 以前に書いた、ユーザーの動き。にもあるように、リストのマーカー部分をクリックして、クリック出来ない的な人が居たりするってのもありますが、li要素にbackgroundの指定をしてpad
IE6で閲覧すると。
hamashunさんがTwitterで、 IE6を使って閲覧すると右上に『アナログ』って出るようにしようぜ。 って言ってたので、CSS HappyLifeでやってみた。 ボクが出来る2008年最後の大仕事でした。えぇ。 使いたい方は是非是非。 ちなみに、ボクが使った画像はコレです。自分のモニタで出るやつを参考にしました。 ご自由にお使いください。 IE6だけに表示させるにはどんなやり方でもいいっすけど、手っ取り早いのだったらハック使ってやるのがいいかと。 .analog { display: none; } * html .analog { display: block; position: absolute; top: 10px; right: 30px; } こんな感じで。 であ。 16日のお昼頃追記 ウチのアクセス解析を久々に確認してみたら、全体の50％くらいがFirefoxで40％
新規でサイトを作るのに使えそうなの一式。Ver 3
随分前に、Ver2の見直しをして3になってたんですけど、公開してなかったので今更ながら公開です。 中身は2を使ってみて、社内のマークアップエンジニアからフィードバックもらったり、自分でも違和感が有った部分を調整してます。 それなりの期間使ってみて、問題をあんまり感じていないので、完成度としては大分良くなったかなぁって思います。 新規でサイトを作るのに使えそうな一式。Ver 3をDL（zip：40kb） Ver 3を見る Ver.3の中身ご説明 主な変更点を。 style.cssのwidthなどのプロパティをまとめていたのをVer1と同じに。 default.cssに書かれていた、p要素のmargin-bottomの指定をstyle.cssに移動。 default.cssのfont-familyの指定を若干変更。 index.htmlにGoogleカスタムサーチ用に使えるソースを記入。 Ja
clearfixを使わないでやるには。
2008年11月11日お昼頃 overflow部分を一部加筆しました。 ウチのとあるページのコメント数が28になって、何となく嬉しい今日この頃。 さて、今回はこんなタイトルですけど、こんなエントリーをしようと思ったのは、floatを指定した要素の親要素の高さが算出されない時の解決手段として、clearfixでぐぐれみたいなのをよく見かけたり、あまりにもclearfixが有名だから、最近CSS覚えた人とかは、もしかしたら知らないのかなぁ～なんて思ったのです。 なので、一応基本に戻ってみましょうということで。 最近、「CSS Nite ビギナーズ」とかもやってますしね。 あ、clearfixを知らない方は、clearfix｜CSS HappyLife辺りか適当にぐぐってくださいませ。 何か、久々に書いてる気がして、どうやって書いてたか思い出せない... えっと、そもそもどんな状況の時かっていう
今よりちょっとだけクオリティを上げるために。
執筆が終わったと思えば、主業務が激務でネタがちらほら浮かんでたのに書けない今日この頃。 でも、どこぞのiPhoneネタと宣伝ばかりになってしまったブログよりいいかも知れません。えぇ。 さて、CSSってある程度覚えてしまえば思った以上に簡単に組めたりして、何となく組めている気がするって思ったりしないっすかね。 もしくは、その逆になーんかイマイチ成長してないようなって感じてる時とか。 そんな状況のときに、今よりちょっとだけコーディングのクオリティや効率を上げるのに意識する事とかやっておくべきこととかを思いつくままに上げてみます。 仕事としてってのがベースなので、個人サイトやブログレベルだと当てはまらないかも。 ボクが昔はやってなかったけど今は当たり前な事とか、今でも忘れがちな事とか、何かそういう感じのことを書いていくので、人によっては当たり前だし、ちょっとした発見がある人も居るかも？ よく分か
Movable Type 4.x 本格的CMSサイトを構築するためのMTスーパーテクニック クリエイターが身につけておくべき新・100の法則。
Movable Type 4.x 本格的CMSサイトを構築するためのMTスーパーテクニック クリエイターが身につけておくべき新・100の法則。 この度、Movable Type をCMS的に使っちゃおうぜ！みたいなノリの本を書かせていただきました。 去年、共著の形で (X)HTML、CSS 関連の書籍、「Web標準XHTML+CSSデザイン クリエイターが身につけておくべき新・100の法則。」 を出版させていただきましたが、今回も同じメンバーでやりました！ 前回も長いタイトルでしたが、今回も異様に長いです。 Movable Type 4.x 本格的CMSサイトを構築するためのMTスーパーテクニック クリエイターが身につけておくべき新・100の法則。 略称は、MT100本とかでしょうか。 いやー今回も長かった。 前回以上に長かったっす。ホントに苦労した... そんな苦労話と、書籍の紹介を続き
フッターの背景をコンテンツが少ない時でも下まで表示させる
デジパのベトナムオフィシャルサイトがオープンしました。 さて、今回はこのデジパベトナムを組むのに辺り、最初は無理（もしくは相当厄介）だと思ってたことが思ったよりカンタンに出来たのでご紹介。 Movable Type 4のデフォルトテンプレートもそうですが、コンテンツの内容が少ない場合に、フッター部分は当然上に来てしまい、下がbodyに指定している背景色になってしまいます。 キャプチャみたいな感じです。 コレがイヤでフッターをページ下部に固定する方法とかを使う事もあるかと思いますが、アレはアレでコンテンツ部分が間延びしてしまう感じも無きにしも非ずだったりします。 と、言うか個人的には1サイトに1ページ有るか無いかも分からないような部分に労力を割きたくないのが正直なトコロなので、出来れば見逃して欲しい部分だったりします。 htmlとbody要素にheight: 100%指定して...みたいなの
【動画】 10分くらいで作るお手軽2カラム
GIGAZINEさんで紹介されていた「カムタジア スタジオ」を試してみたくて、ボクが実際に2カラムレイアウトのサンプルを組んでいる画面キャプチャを作ってみました。 これといった編集を行わずにやったのに、とっても素晴らしい出来でびっくりです。 2カラム作成ムービーを見る 動画自体は音も無く面白味がないですが、人の作業の様子を見るってのは、あんまりないので、そういった意味じゃ面白いかも？ 取りあえず、誤字が多いのは仕様なんです。笑って見逃してやってください。 しかし、こういう動画って需要があるのかしらー
JavaScriptを使わずにやるimg要素のロールオーバーサンプル
本題の前に、CSS Sprite をグローバルナビゲーションで使うのは何かが違うと思うのはボクだけかしら？（テキストをtext-indentで飛ばして、ロールオーバーさせるタイプの事を指してます） 昔作ったサンプルでそんなようなのがありました。 横並びメニューのロールオーバーをJavaScriptを使わずCSSで実現 CSS Spriteを有効に活用する場面は、あくまでも背景画像として配置されているものを一枚画像にして管理する点にあると思ってて、例えば以下のような場合。 ページタイトルの背景画像がページ毎に変わる場合に全ページのページタイトル用画像を一枚でまとめる。 アイコン＋テキストという組み合わせの場合に、アイコンを背景として使う。 その他、本来背景として使う予定だった画像を一枚にまとめる。 とかが、ぱっと浮かびました。 んで、グローバルナビゲーションに限っては、img要素で配置する事
新規でサイトを作るのに使えそうなの一式。Ver 2｜CSS HappyLife
新しいdigiper staff blogが始まりました。 PICTOGRAM CHANNEL - ピクトグラム チャンネル タイトルまんま、ピクトグラムを扱ってるサイト。社員ブログに型は無いので書きたいのを自由に書けるんです。 何気に、同じ職種なので負けないように頑張ります。っていう宣戦布告。 さて、以前公開した新規でサイトを作るのに使えそうなの一式。（あの人のパクりじゃないんだからっ！）を自分も使ったりしてたのですが、なんだかいけてない部分が目立ってきたので、修正してみました。 Ver2って言うのは、区別したいだけでたぶん中身はそこまで変わってません。 むしろ人によっては前のが相性が良いかもしれませんので、お好きなのを使ってもらえると幸いです。 えっと、ダウンロードは以下よりお願いします。 新規でサイトを作るのに使えそうな一式。Ver 2をダウンロード（zip：18kb） ちなみにダウ
デザインを見てて「？」が浮かぶこと。
最近思う、デザインに関する「なんで？」を書きたいと思うので、デザイナーな方とか、答えられそうな人は答えてくれると嬉しいんす。 この「なんで？」の想定しているサイトは、コーポレートサイトとか、学校のようなサイトとかの、ヘッダー、ナビ、メイン、サイドバー、フッターがある様な感じです。 フラッシュばりばりな感じのキャンペーンサイトとかは無しで考えてます。 ちゃんと伝えている事もあれば、明確な理由付けが出来ないために言えなかった事もあったりします。 トップページとトップ以外のページの関係性 ココで言いたいのは、全部「トップだけ違う」っていう部分だと思うです。 グローバルナビゲーションの位置が変わる 横ナビが縦ナビに変わるのは極端にしろ、トップではメイン画像（フラッシュ）が来て、その下にグローバルナビ。トップ以外のページは、上部にグローバルナビっていうパターン。 よく聞くのは、「トップだけ他のページ
IE6のfloatしたボックスのmarginの値が2倍になるバグ対策の件
IE6で、floatで指定した値と同じ方向にmarginの指定をすると、指定値の倍程度になってしまうっていう有名なバグ。 その対策として、marginの代わりにpaddingを使うとか、親要素でpaddingを取るとかあったりしますけど、一番手っ取り早い感じで、問題が無さそうなdisplay: inline;を指定する方法がありますよね。えぇ。 何となく他のブラウザに影響ないの！？って思ってしまうかもですが、 こういう矛盾しちゃいそうな指定がされた時はどーしたらええの？っていうのがちゃんと仕様で決まってるので仕様通りに動いてくれるブラウザさんなら問題ないわけです。 そうなんですよ。仕様通りにね、動いてくれるブラウザさんならね。 仕様通りに... そこで登場するのが、IE7。 IE6に比べればだいぶ良くなったもののやっぱり色々問題があるIE7。 そんなIE7さん、こんなトコロにも影響があった
CSSで組むことのメリットとか
テーブルレイアウトじゃなく、正しいHTMLとCSS使ってサイトを作ることのメリットって何だろー？ そんな事をたまに思いつつ、古いサイトの修正を依頼されて、ソースを覗いて、ガチテーブルだとものすごいテンションが落ちるので、それだけとってもCSSはいいんすよ！とか思うけど、もうちょっとだけ考えてみたりググってみたのです。 とりあえず、内容被り気味だけど以下のようなのがあると思う！ ソースがとてもシンプルになる。 容量が軽くなる。 エコなんです！っていう表現も使える。 大規模サイトならトラフィック軽減になるぽい。 ちょっとCSSを編集すれば、サイト全体の修正が出来る。 メンテナンス性が向上する。 HTMLを変えなくてもデザインをガラッと変える事ができたりする。 あんまり考えてなくても、アクセシビリティ面がよくなる。 デザイン要素が邪魔な人は切れる。 テキストエディタオンリーでもいける。 今後表現
JavaScript色々まぜまぜ。主にjQuery使ったヤツ｜CSS HappyLife
Two I'm the two's tab content. ほげほげほげほげ ほげほげほげほげ ほげほげほげほげ ほげほげほげほげ ほげほげほげほげ ほげほげほげほげ ほげほげほげほげ ほげほげほげほげ ほげほげほげほげ ほげほげほげほげ ほげほげほげほげ ほげほげほげほげ ほげほげほげほげ ほげほげほげほげ ほげほげほげほげ ほげほげほげほげ ほげほげほげほげ Three Guess who am I -- says the three's tab content.ほげほげほげほげ ほげほげほげほげ ほげほげほげほげ ほげほげほげほげ ほげほげほげほげ ほげほげほげほげ ほげほげほげほげ ほげほげほげほげ ほげほげほげほげ ほげほげほげほげ ほげほげほげほげ ほげほげほげほげ ほげほげほげほげ ほげほげほげほげ ほげほげほげほげ ほげほげほげほげ ほげほげほげほげ <div class
Vista（64bitも）で動く、IETesterを入れてみた
待ってました。心底待ってました。 本気で待ってました！ Vistaの64bitでもIE6とかがチェック出来ちゃう素敵なアプリを！ IETesterのサイト これ一つで、IE5.5、IE6、IE7、IE8 beta1 の確認が出来てしまうんです。 インストール方法もとても簡単で、Download IETester v0.2 を押してダウンロードして実行。 後は、OK押して進んでいけば完了！ 基本的なレンダリングチェックには問題ないっぽいですが、まだアルファ版なので、ちょこちょこバグがあるっぽいです。 リサイズした時に内容が消えてしまう時がある ( 次バーションで修正予定 ) Previous/Next のボタンが動作しない Focus が動作しない まぁすぐに修正されるんじゃないでしょうか。 続きは、IETesterの使ってみての簡単な感想と、雑記です。 IETesterを使ってみて とりあ
画像とかの横にあるテキストを上下中央に
←こういう感じで、画像の横にあるテキストを画像に対して上下中央にするってーのは、今まで出来ないと思ってたんす。 だけども、ヨモツネットさんの記事でヨモツネット[日記] ≫ CSS で簡単に上下中央揃えを実現するってが紹介されてたので、試して見ました！ display: table-cell;がポイントになってて、IEはハックで対応みたいな感じです。 デモページ 画像とかの横にあるテキストを上下中央にする。のデモページ ヨモツネットさんとまるっと同じサンプルだとアレなので、ちょっとだけ実用的な感じでつくってみましたよっと。 ちょっと、IE6で確認してないので、ダメだったらご連絡ください。 IE6対応しました。ハックの書き方がいけなかったようです。すみません。 div.centeringTest p { display: table-cell; vertical-align: middle;
MT4.0、4.1専用 emoddy（絵文字プラグイン）｜CSS HappyLife
2008年8月23日追記 コメントにも対応した最新版を公開しました。最新版のダウンロードページへ 2008年4月11日追記 ちょこちょこバグがあったので、修正しました。最新バージョンは2.0.3になります。 以前から公開していた、エントリー時に絵文字が挿入出来るようになるプラグイン、emoddy（絵文字プラグイン）が4.0、4.1に対応しました。 なお、4.0、4.1専用となっているので、3.x系は、以前のをお使い下さい。 このプラグインのウリとしては、、、 とにかく使いたいって人は、アップロードするだけで使える！ 絵文字の画像を追加するのがとてもカンタン！ 画像がいっぱいに増えても普段は邪魔にならない！ 好きなディレクトリに絵文字用の画像を設置可能！ 絵文字が最初から88個くらい付いている！ カスタマイズとかも自由にしてOK！ などなど、思いつく限りの営業文句を浮かべてみました。 仕様に
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
