div要素で配置した矩形に、シンプルなボーダーや角丸、フェードのボーダーをスタイリングするスクリプトをroydukkeyから紹介します。 DivCorners デモページ ボーダーは矩形の内側と外側に指定して配置することが可能で、ボーダー自体の幅や高さを指定してスタイリングすることができます。 上記キャプチャは、外側（outside）のデモです。 スクリプトの現在の仕様では、角丸やフェードのボーダーには画像が使用されており、下記のイメージで実装されています。
[JS]div要素に角丸やフェードのボーダーをスタイリングするスクリプト -DivCorners
div要素で配置した矩形に、シンプルなボーダーや角丸、フェードのボーダーをスタイリングするスクリプトをroydukkeyから紹介します。 DivCorners デモページ ボーダーは矩形の内側と外側に指定して配置することが可能で、ボーダー自体の幅や高さを指定してスタイリングすることができます。 上記キャプチャは、外側（outside）のデモです。 スクリプトの現在の仕様では、角丸やフェードのボーダーには画像が使用されており、下記のイメージで実装されています。
CSS display:inline-blockを活用する方法と注意点 | エンタープライズ | マイコミジャーナル
Robert’s talk Webページの制作で水平リストが必要な場合にはフローレイアウトを使って要素を配置していくということがある。しかし、水平フローにさらに可変の高さを持った要素が入っていたり、それを垂直方向に複数行展開するということになると、なかなか面倒なことになってくる。ブラウザの幅に対応したり、ブラウザごとにデザインを揃えるということになると、頭を抱えることになる。 Robert Nyman氏がそうした場合の代替方法のひとつにdisplay: inline-blockを使う方法があるとし、CSS display: inline-block: why it rocks, and why it sucks - Robert's talkにおいて簡潔な説明とサンプルコードおよびその欠点を紹介している。display: inline-blockは要素をブロックとして作成しつつ、インライン
MdN Design｜総合情報サイト
第16回（最終回） 最新のデザイン表現を適用する ここまで紹介してきたCSSのレイアウトや装飾テクニックは、現在利用者の多いInternet Explorer 7や8、Safari、FirefoxなどのWebブラウザでほぼ問題なく動作するものでした。本連載の最終回は、未来に向けた準備として現在策定中の「CSS 3」の中からモダンブラウザで既に適用可能なスタイルをいくつか紹介します。 （公開日：2010年4月16日 解説：こもりまさあき） 現在策定中のCSS 3について CSSで指定したスタイル指示は、WebブラウザのCSSサポートの度合いによって適用できるかどうかが異なります。例えば、今現在の主流であるブラウザの多くではCSSレベル2（CSS 2）をサポートしているものがほとんどです（特定のプロパティだけ未サポートも含め）。その一方、現在CSSの次のバージョンにあたるCSSレベル3（CSS
CSS3 「gradient」と「@font-face」
CSS3 「gradient」と 「ウェブフォント（@font-face）」 このページは背景画像を一切使用していません。 背景のストライプ模様はCSS3のbackground-image:gradient、フォントはCSS3の@font-faceでサーバー上に置いたフォントを読み込んで表示しています。これによって、閲覧者のパソコンにインストールされていないフォントも表示する事が出来ます。また、画像文字ではないのでコピーする事も可能。 SEOの一環としても有効です。 2010年1月現在、InternetExplorerとOperaではまだgradientに対応していない為、これらのブラウザでは背景は単色になります。フォントファイルはうっかり領収書５部ダメにできる筆圧を誇るふいさんの作った「まきばフォント」をお借りしています。 フォントの為のスタイル指定 @font-face { font
150 Amazing Examples of CSS Animation & Effects
We have put together a smart collection of cool CSS effects to help you learn the nitty-gritty details so that you can use it to create more beautiful web sites. Enjoy! Unlimited Downloads: 500,000+ Fonts, Stock Photos, Themes & Design Assets DOWNLOAD NOW 1. Swatch Book Tutorial with CSS3 & jQuery [Demo] 2. 3D Thumbnail Hover Effects [Demo] 3. Stunning Menu Tutorial in CSS3 [Demo] 4. Collection of
[CSS]レイアウトのベースを設定する超軽量のフレームワーク -EZ-CSS
1カラム、2カラム、3カラム、ヘッダ、フッタなどレイアウトのベースを設定する超軽量のCSSのフレームワークを紹介します。 EZ-CSS_ An easy to use, lightweight, CSS framework. フレームワークにはあらかじめ多種なモジュールが用意されており、多彩なレイアウトを簡単に利用できます。 レイアウトのサンプル 各カラムは、HTMLでの記述の順番も変更可能です。 3カラムのモジュールのパターン EZ-CSSは既存のスタイルシートと共存が可能で、カラムの幅もどんなサイズでも対応が可能となっています。 利用方法は簡単で、ダウンロードしたスタイルシートファイルを外部ファイルとして指定し、レイアウトのサンプル通りに記述します。 EZ-CSSの使い方 レイアウトのサンプル
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
css-lecture.com