とっても使えるoverflowプロパティ。その使い方色々。
光の4戦士を買ったんすが、売り文句通りレトロな感じがしていいですね。 まぁまだ2, 3時間程度しかやってないんで、これからどうなるか分かりませんが時間を見つけてやって行こうかと。 さて、以前からoverflowプロパティは使い勝手が良いというか、使う場面が多いプロパティの一つですが、考えてみると色んな事に使ってるなぁ～と思ったので自分が良く使うのをまとめてみました。 あんまoverflowプロパティを使った事が無い方は、ビックリですよ！ これで、ソコの可愛いアナタもoverflowプロパティの虜になる事間違い無し！！（わかんないけど サンプルとかは以下よりどうぞ。 サンプルサイトを見る サンプルをダウンロード 基本的に、全てoverflow: hidden; の指定を足す事で解決したり実現出来る感じです。 01 clearfixみたいに使う まずは以前の「clearfixを使わないでやるに
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％
tagAssistプラグイン - MTのエントリーをちょっと便利にしちゃうの
2008年4月10日に追記 最新バージョンは、0.1.6です。以前落とした方はお使いのプラグインのバージョンを確認してもらえると幸いです。 修正箇所 管理画面の「このブログにユーザーを追加」や「権限の付与」をクリックするとlightboxのような動きで表示される、画面が正常に表示されていなかったバグを修正しました。 CSS Nite x (r)evolution Shift to 2008でMT4がくるー！みたいな発言があってちょっと嬉しかったなぁ～。 MTはボクがデジパに入社した時から、CMSツールとして提供していたりしたので。 そうそう、忘年会ではヨモツネットの中の人にご挨拶が出来たのです！ウヒヒ！！ さてさて、主題に。 MT4専用でございますが、MTデフォルトだと、boldやitalicなどがボタンを押すとタグでちょいちょいっと囲ってくれるわけですが、ちょっと物足りないのです。 特に
コメント対応版 絵文字プラグイン（emoddy）
ちょこちょことバージョンアップを重ねてきた、Movable Typeにて絵文字を使用可能にする、emoddyプラグインですが、今回コメント部分にも絵文字が使えるようになりました。 対応しているバージョンは、MT4.0、4.1x、4.2となっております。 管理画面の大きな変更がなければバージョンが上がっても使えると思います。 旧バージョンでも書いておりましたが、このプラグインの特徴などをご紹介。 とにかく使いたいって人は、アップロードするだけで使える！ 絵文字の画像を追加するのがとてもカンタン！ 画像がいっぱいに増えても普段は邪魔にならない！ 好きなディレクトリに絵文字用の画像を設置可能！ 絵文字が最初から88個くらい付いている！ カスタマイズとかも自由にしてOK！ コメントにも絵文字が使える！ モディファイアを使う事で、ブログ記事編集画面にimg要素などのソースが表示されなくなり、すっきり
フッターの背景をコンテンツが少ない時でも下まで表示させる
デジパのベトナムオフィシャルサイトがオープンしました。 さて、今回はこのデジパベトナムを組むのに辺り、最初は無理（もしくは相当厄介）だと思ってたことが思ったよりカンタンに出来たのでご紹介。 Movable Type 4のデフォルトテンプレートもそうですが、コンテンツの内容が少ない場合に、フッター部分は当然上に来てしまい、下がbodyに指定している背景色になってしまいます。 キャプチャみたいな感じです。 コレがイヤでフッターをページ下部に固定する方法とかを使う事もあるかと思いますが、アレはアレでコンテンツ部分が間延びしてしまう感じも無きにしも非ずだったりします。 と、言うか個人的には1サイトに1ページ有るか無いかも分からないような部分に労力を割きたくないのが正直なトコロなので、出来れば見逃して欲しい部分だったりします。 htmlとbody要素にheight: 100%指定して...みたいなの
JavaScriptを使わずにやるimg要素のロールオーバーサンプル
本題の前に、CSS Sprite をグローバルナビゲーションで使うのは何かが違うと思うのはボクだけかしら？（テキストをtext-indentで飛ばして、ロールオーバーさせるタイプの事を指してます） 昔作ったサンプルでそんなようなのがありました。 横並びメニューのロールオーバーをJavaScriptを使わずCSSで実現 CSS Spriteを有効に活用する場面は、あくまでも背景画像として配置されているものを一枚画像にして管理する点にあると思ってて、例えば以下のような場合。 ページタイトルの背景画像がページ毎に変わる場合に全ページのページタイトル用画像を一枚でまとめる。 アイコン＋テキストという組み合わせの場合に、アイコンを背景として使う。 その他、本来背景として使う予定だった画像を一枚にまとめる。 とかが、ぱっと浮かびました。 んで、グローバルナビゲーションに限っては、img要素で配置する事
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！ などなど、思いつく限りの営業文句を浮かべてみました。 仕様に
画像とかの横にあるテキストを上下中央に
←こういう感じで、画像の横にあるテキストを画像に対して上下中央にするってーのは、今まで出来ないと思ってたんす。 だけども、ヨモツネットさんの記事でヨモツネット[日記] ≫ CSS で簡単に上下中央揃えを実現するってが紹介されてたので、試して見ました！ display: table-cell;がポイントになってて、IEはハックで対応みたいな感じです。 デモページ 画像とかの横にあるテキストを上下中央にする。のデモページ ヨモツネットさんとまるっと同じサンプルだとアレなので、ちょっとだけ実用的な感じでつくってみましたよっと。 ちょっと、IE6で確認してないので、ダメだったらご連絡ください。 IE6対応しました。ハックの書き方がいけなかったようです。すみません。 div.centeringTest p { display: table-cell; vertical-align: middle;
ユーザーの動き。｜CSS HappyLife
ボクたちみたいな、ウェブサイトを閲覧するのが当たり前の人間からすると、全く気づかない事に気づかされたりしたので、自分用メモ。 2008年2月14日の22：47頃に追記 ボクのただのメモ書きをもうちょっとちゃんと以下のエントリーで書いてもらってるので、あわせてご覧になって頂くと、良いかと思います。 Webアクセシビリティについての覚書 - ねんがんのWebユーザビリティテストに参加した ロゴクリック＝トップページに戻るという認識は殆ど無い。 トップページに戻る場合は、ブラウザの「戻る」ボタン。 サイドバーのバナーは、認知すらされない傾向が強い。 そもそもバナーとして押せるものではなく、デザイン上の飾りとして見られる場合も。 リストのマークとかのマーク部分をクリックしよーとする人が居る。 それにより、クリックできないと諦めるケースも。 プルダウン（ドロップダウン）型メニューは、近くのボタンを押
Firefoxのスクロールバーの有無でセンタリング位置がズレる件を解消
中央配置のデザインで、ページ移動の際にコンテンツの量によってスクロールバーが出たり出なかったりするFirefoxさん。 あのズレ、気になる人っていますよね？ すぐ分かるように簡単なサンプルを用意しました。 http://css-happylife.com/template/11/ あ、当たり前だけど、Firefoxで見て下さいね。 コレを解消する為に以下のスタイルを適用させればズレがなくなります。 html { overflow-y:scroll; } 簡単っすね。 で、コレOperaじゃ解決出来ないのが難点。 overflow:scrollでズレないようには出来るけど、下が出ちゃうのはいけてない。 height:100%とかでもバーが出っぱなしにはなるけど、びみょーに出てはいけないバーまで出てしまう。 んーこの辺まで解決したかった... Track Back [1] スクロールバーを表示
bodyに設定しておくと便利な3つのポイントとおまけ｜CSS HappyLife
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%; } じゃあ、詳細について色々書
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
