コーディング前に確認しておきたいこと。 - CSS HappyLife
CSS HappyLife ZERO が移転したのでお手数ですが、消えちゃう前にブックマーク等変更してもらえるととても嬉しいです。 制作会社でコーディングする場合、社内のガイドライン的なのが有ったりデザイナーもある程度固定されてると思うので、毎回似たような事を確認したりとか、このデザインはどういう意図なんだろう？ってのも、何度か同じ人とやってれば見えてくる訳ですが、フリーランスの場合だとデザイナーは毎回違っていたり、当然ディレクションをする人も違うので最初に確認しておきたい事が有ったりします。 って事で、その辺りをまとめてみたり、デザインを渡されたときにこのデザインの意図は？って思う事とかもばーっと書いてみます。はい。 なので、デザイナーさんもコーダーにデザインを渡すときに気をつけて欲しい点とかもわかってしまうすばらしい内容（だと良いな）！ じゃあまずは最初に確認しておきたい基本的なことか
とっても使えるoverflowプロパティ。その使い方色々。
光の4戦士を買ったんすが、売り文句通りレトロな感じがしていいですね。 まぁまだ2, 3時間程度しかやってないんで、これからどうなるか分かりませんが時間を見つけてやって行こうかと。 さて、以前からoverflowプロパティは使い勝手が良いというか、使う場面が多いプロパティの一つですが、考えてみると色んな事に使ってるなぁ～と思ったので自分が良く使うのをまとめてみました。 あんまoverflowプロパティを使った事が無い方は、ビックリですよ！ これで、ソコの可愛いアナタもoverflowプロパティの虜になる事間違い無し！！（わかんないけど サンプルとかは以下よりどうぞ。 サンプルサイトを見る サンプルをダウンロード 基本的に、全てoverflow: hidden; の指定を足す事で解決したり実現出来る感じです。 01 clearfixみたいに使う まずは以前の「clearfixを使わないでやるに
ページ送りのサンプル｜CSS HappyLife
ページ送りのサンプル 01 display: inline;の宣言が有ったりしてセンタリングしたサンプル。 コードの改行によって生じるすき間対策が必要。 « 前123456次 » « 前123456345634563456次 » HTML + <ul class="pageNav01"> <li><a href="1.html">« 前</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">次 »<
都道府県選択するやつ。
メモ。 誰かの役にも立つかもしれないしってことで、いつも過去の案件のソースとか探してペタペタしてるけど、何処で使ったのか忘れたりするのでここに貼っておこう。 - コメントにて使用条件を書いてほしいとの事だったので念の為追記しておきます。 特別記載が無いエントリー以外は、どう使うのも自由です。 自分のブログにそのままソース掲載してもらっても、仕事で使ってもいいですし、あらゆる用途に対して自由に使ってください。 もちろん、改変・配布とかも自由です。 ただ、ウチで公開しているソースやサンプルに対して何らかの問題が生じても責任は負いません。各自の責任でご利用ください。 大体こんな感じです。 select要素でマークアップ済みの都道府県のやつ <select name="都道府県"> <option value="">都道府県をお選びください。</option> <optgroup label="北
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％
MT 4.2x系の基本的な操作方法に関するマニュアル by CSS HappyLife
Movable Type 4.2x（以後：MT）の基本的な操作方法に関するマニュアルです。 お使いのMTによっては、若干仕様が異なっていたりしますが基本操作は共通です。 下記のメニューより、調べたい内容を選択してください。 また、右上の「メニューを表示する」より、いつでも他のページへ移動できます。 ログイン方法 Movable Type へのログイン方法のご説明です。 システムメニュートップ 初めてログインした際に表示される、システム画面のトップページです。 このページは、通常他のブログを選択する以外の用途はありません。 ブログ一覧画面 編集可能なブログの一覧が表示されます。 ブログトップ 各ブログのトップページ（ダッシュボード）についてのご説明をおこなっています。 他のブログとも共通していますので、MTを使う上での基本であり、 他のブログを編集する際にも必要な事が書かれていますので必ずお
フッターの背景をコンテンツが少ない時でも下まで表示させる
デジパのベトナムオフィシャルサイトがオープンしました。 さて、今回はこのデジパベトナムを組むのに辺り、最初は無理（もしくは相当厄介）だと思ってたことが思ったよりカンタンに出来たのでご紹介。 Movable Type 4のデフォルトテンプレートもそうですが、コンテンツの内容が少ない場合に、フッター部分は当然上に来てしまい、下がbodyに指定している背景色になってしまいます。 キャプチャみたいな感じです。 コレがイヤでフッターをページ下部に固定する方法とかを使う事もあるかと思いますが、アレはアレでコンテンツ部分が間延びしてしまう感じも無きにしも非ずだったりします。 と、言うか個人的には1サイトに1ページ有るか無いかも分からないような部分に労力を割きたくないのが正直なトコロなので、出来れば見逃して欲しい部分だったりします。 htmlとbody要素にheight: 100%指定して...みたいなの
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！ などなど、思いつく限りの営業文句を浮かべてみました。 仕様に
それなりに使い勝手が良さそうなヘッダーのサンプル4種｜CSS HappyLife
17日から下書き状態だったエントリー、、、沢山用意する予定だったけど色んな都合で増えない予感なんで公開。 ずいぶん昔にフッターの区切りっぽいサンプルを作ったけど、ヘッダーは作ってなかったので、ヘッダーのサンプルを作ってみましたよっと。 というか、ヘッダーのサンプルって見かけたことがほっとんど有りません。（必要とされてないから？ ヘッダーって作るの大変というか、厄介だったりしませんかね。 全部画像ならがっちり固定しちゃえば、文字サイズ変更されても耐えられますけど、一部テキストがあったりした場合とかに文字サイズ変更するとレイアウト崩れてしまったりっていうアレが厄介だったりするのです。 文字サイズ変更しても崩れないようにする事を、DDTT対応っていうんでしたっけ。 今回のサンプルデザインは、一部弊社デザイナーにお願いしてつくってもらいました。 感謝感激でございまする。 デザイン提供してくれた方は
tagAssistプラグイン - MTのエントリーをちょっと便利にしちゃうの
2008年4月10日に追記 最新バージョンは、0.1.6です。以前落とした方はお使いのプラグインのバージョンを確認してもらえると幸いです。 修正箇所 管理画面の「このブログにユーザーを追加」や「権限の付与」をクリックするとlightboxのような動きで表示される、画面が正常に表示されていなかったバグを修正しました。 CSS Nite x (r)evolution Shift to 2008でMT4がくるー！みたいな発言があってちょっと嬉しかったなぁ～。 MTはボクがデジパに入社した時から、CMSツールとして提供していたりしたので。 そうそう、忘年会ではヨモツネットの中の人にご挨拶が出来たのです！ウヒヒ！！ さてさて、主題に。 MT4専用でございますが、MTデフォルトだと、boldやitalicなどがボタンを押すとタグでちょいちょいっと囲ってくれるわけですが、ちょっと物足りないのです。 特に
コンテストの結果とLP3を終えて
LP3が終わり、コーディングコンテストの表彰も行われました。 ご参加いただいた皆さんお疲れ様です。 今回は取り急ぎ、結果のみの発表をいたします。 最優秀賞 にんさん »サイトへ 鷹野賞 HILCAさん 益子賞 User Centered Designさん »サイトへ 小久保賞 OK computerさん 河内賞 小山田晃浩さん »サイトへ 神森賞 スーパー肩パッドさん »サイトへ 長谷川賞 Complexさん »サイトへ 伊藤賞 haifunさん »サイトへ 鬼頭賞 Atsuya Kawashimaさん »サイトへ 植木賞 ごぼさん 浜賞 koseiさん »サイトへ 以上のようになっております。 入賞された方、おめでとう御座います。 後ほど、審査員の方々からのコメントをまとめたりなんやらして、入賞者の方へのご連絡などが一通り完了してから、順次公開していきますので少々お待ち下さい。 追記は雑
CSSに見惚れてばかりじゃなくて、もっと私（HTML）を見てよっ！
と、htmlさんが嘆いている気がしたので、こんなサイトですがhtmlさんに付いて書きます。 ウチのサイトの一番の目的は「CSSって面白い！」って思ってもらい、興味を持ってもらう事にある訳ですが、次のSTEPに進む為にやっぱり通らなければならない道である（X）HTMLの正しい記述方法。 もちろん、CSSの勉強の前に（X）HTMLの理解をしてからが理想だと思いますが、ボクはソレがベストだとは思っていません。 何かを覚えるのに、「この順番で覚えなければ絶対にいけない。」なんて事は無いと思います。 ホントのビギナーさんは、CSSビギナー向けから、取りあえずCSSに触ってみるっていうのがボクのオススメです。 楽しんでナンボっす。 で、まぁ今回の対象となる方々は、テーブルレイアウトからCSSに移行した人で、（X）HTMLについては特に触れなかった人とか、Blogで初めてCSSに触れた人とか、CSSの魅
フッターとかの区切り『｜』のサンプル4種｜CSS HappyLife
フッター部分のメニューなどを区切る際のサンプルを適当に。 p要素でやるとこんなヤツです。 Home｜アバウト｜イラスト｜BBS サンプルに使うhtmlは、ul要素を使った下記をベースに使用してます。（サンプルに寄ってid名とか変わりますが） <ul id="sampleFooter"> <li><a href="/">Home</a></li> <li><a href="/">About</a></li> <li><a href="/">Gallery</a></li> <li><a href="/">Blog</a></li> </ul> んでは、いってみますか。 一番書きたかった内容は最後に書いてます。 普通に縦線を書いた感じ 実際の表示です。 Home｜ About｜ Gallery｜ Blog 普通にhtmlに｜を記述しているのでソースは当然下記のように。 <ul id="samp
ボクが良く使うMovableTypePlugin
コーディングをする上で、いまや必須なのがMT。 クライアントからの要望に答える為だったり、より便利にしてくれる為に、MTプラグインも必要とする時が多々あります。 ソレなのにいつも、「何処だっけ。。。あのプラグインは・・・」と無駄に探してしまうので、私的メモとして個人的によく使うプラグインだったり、利便性を強く感じたプラグインを、最低限の説明とともにリストアップしておきます。 より詳しく探したい人は、小粋空間さんのプラグイン一覧とかが非常に便利。いつも使わせてもらってます。 ※リンクは全て別窓で開かれまする CatEntries ・MTEntriesで特定のカテゴリーを表示・非表示 <MTCatEntries exclude="CategoryName1,CategoryName2"> ・・・ </MTCatEntries> <MTCatEntries include="CategoryNa
パンくずリスト（Topic Path）を作成する際に使えそうなサンプル8種｜CSS HappyLife
普通のエントリー久々な気がする今日この頃。 今回はトピックパスとかパンくずリストなんて呼ばれてる、ちょっと規模の大きいサイトでは日常茶飯事で見かけるアレのサンプル色々です。 サンプルの前に #main .entryBody #topicPath_01 とかってなってますけど、#main .entryBody はウチのサイトの都合で優先順位上げの為にやってるんで、コピったりする場合はいらない感じです。 #main .entryBody #topicPath_01 { margin:10px 0; } #main .entryBody #topicPath_01 li { display:inline; line-height:110%; list-style-type:none; } #main .entryBody #topicPath_01 li a { padding-right:10
clearfixハック｜CSS HappyLife
通常、floatさせている画像やボックスなどがある場合何らかの形でclearするか、その親要素にfloatを指定しないと、親要素からはみ出してしまいます。 コレはCSS2.0の仕様なんで正しい表示なんですが、どうしても親要素にfloatなどが使えず、やむなくclear:bothをbrなりdivにクラス指定して解決してたりって事があったかと思います。 IEの場合はwidth、もしくはheightを指定する事で解決できますが、コレはバグなんで他のモダンブラウザでは解決できません。 ソコでかなり便利に使えるテクニックが、clearfix。 使い方は、clearしたい親要素に下記のように記述。 div:after { content: "."; display: block; visibility: hidden; height: 0.1px; font-size: 0.1em; line-hei
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
