2008年03月01日14:15 カテゴリTips CSS - 縦方向にセンタリングする 以下で紹介されていた、縦方向にセンタリング表示するためのCSSです。 Vdot Media - Vertically center content with CSS 縦方向にセンタリングするという需要は私には結構あります。たとえばスライドを作る時とか。 結論だけいきなりまとめてしまうと、以下のようになります。 http://www.dan.co.jp/~dankogai/blog/vcenter.html ここではあえてpaddingをつけてそれぞれのdivタグの位置関係を明示するようにしました。 これで、セルが一つだけ入ったtableを使う必要がなくなりました。 が、はっきりいってめんどいなあ。divタグを三重に使うというのがねえ。原理も、CSSでtableを再現しているに過ぎないし。IE用のテクニ

高まるゼロトラストの気運 妥協のない安全のために適材適所で組合せ トップ4社によるゼロトラストセキュリティ 激変するビジネス環境の中でのDX モダンアプリケーション戦略への取り組みが 市場の競争力の源泉となる ともにDXを推進する コンテナ化されたワークロードを管理 継続的な価値を生みだす「協創」への挑戦 オープンソース活用はあたりまえ！ そんな今だからこそ改めて考える 企業ITにおけるOSS活用のメリットとリスク 時代はサーバ仮想化からコンテナへ あらためて整理したい企業ITにおける コンテナ活用の基礎と採用メリットを紹介 データ活用は次のステージへ トラディショナルからモダンへ進化するBI 未来への挑戦の成功はデータとともにある ITインフラ運用からの解放 HCI＋JP1による統合運用による負荷激減で 次世代IT部門への役割変革へ一歩前進 RPAによる自動化を年30万で実現 小さな投資

CSSとFlashのデザインでインスピレーションを得るためのサイト「Best Web Gallery」が選んだ2007年度のCSSデザインベスト50が発表されています。どれもこれもなかなか秀逸なデザインなので、来年度の新しいデザインに向けて、今年度の総復習を行って新たなインスピレーションの糧を得たい人や、ウェブサイトやブログのデザインを新しくしたいので参考になるデザインを探している人に最適です。 というわけで、ベスト50は以下から。 Capture the Valley - A project to benefit Habitat for Humanity http://capturethevalley.com/ Squawk http://www.squawkdesign.com/ Emeril's Holiday to Go : Home http://www.emerils.com/

通常、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

フッター部分のメニューなどを区切る際のサンプルを適当に。 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

何かと便利な定義リスト。 用語集や、Q&Aなど使いどころは沢山あるけれど、同じ行にしたいと思うことがしばしば有るかと思います。 しかし、中々思うように横並びが出来ないのが定義リスト。 今回はそんな厄介な定義リストのサンプルを作ってみました。 まずはスタイルシート。 dl { border:1px solid #999; width:390px; } dt { float:left; width:100px; padding:5px 0 5px 10px; clear:both; font-weight:bold; } dd { width:260px; margin-left:100px; padding:5px 5px 5px 10px; border-left:1px solid #999; } こんな感じです。 そして、実際の画面では↓こんな感じで表示されると思います。 もっとテーブ

class名やid名って付ける時悩みませんか？ 今でもボクは結構悩むんですが、そんな悩みを解決する為に、人さまのソース覗きまくってよくあるclass名とid名を拾ってきました。 これで、チョットだけ作業効率アップ！？ 2010年6月10日追記： この記事自体、2007年 1月15日に書かれてるんでかなり古いです。 あくまでも参考程度に留めてもらうのが良いかと思います。 今だったら、html5の要素を参考にしたりして付けるのが、今後の事を考えると良いのかなーと思います。 また、善し悪しの判断はせずに公開しているものですが、位置に関するのは仕様変更に弱くなるのでオススメはしません。 全体に使えそうな感じ wrap wrapper top-wrapper wrapperAll frame mframe all-frame container page pagetop all allContent

CSS を扱う上でセレクタの存在はとっても重要です。特に CSS3 Selectors ではかなり複雑な条件分岐ができるようになっていますので、スマートな (X... CSS を扱う上でセレクタの存在はとっても重要です。特に CSS3 Selectors ではかなり複雑な条件分岐ができるようになっていますので、スマートな (X)HTML、CSS コーディングを行う上で、セレクタを理解しているとそうでないのでは生産性に差が出ます。 CSS3 は現在 Working Draft の段階ですので、まだ正式な勧告はなされていませんが、多くのモダンブラウザにおいてそのほとんどが先行実装されていることから、現状でも利用価値が高いといえます。 ということで、ここでは自分へのメモの意味も込めて、CSS3 で定義されているものも含めた各 CSS セレクタについてリファレンスしてみようと思います。 今回の解説