[CSS]印刷用のスタイルシートがグッとよくなる、3つのポイント
既存の印刷用のスタイルシートや新規に作成する場合でも有用な、印刷用のスタイルシートの3つのTipsをLine25から紹介します。 Handy Tips for Creating a Print CSS Stylesheet 印刷時のテキストをデザインする 見出しやパラグラフ、リンクなどのテキスト箇所を印刷用にデザインします。 下記の例では、見出しを中央寄せにし、斜体にしています。 また、リンクのカラーをパラグラフと同じにし、下線を削除するのもよいでしょう（リンクのスタイルについては後述）。 <textarea name="code" class="css" cols="60" rows="5"> #header h1{ text-align: center; font-size: 42pt; font-style: italic; margin: 0; } #header h2{ text
[CSS]フォームのlegendのテキストを複数行にするスタイルシート
フォームのlegendのテキストを複数行にして表示するスタイルシートを456 Berea Streetから紹介します。 Line wrapping text in legend elements demo デモではテキストが3行で頭でっかちになっていますが、適度なバランスとマージンがあると見た目も更によくなると思います。 複数行にするスタイルシートは、下記のようになっています。 <textarea name="code" class="css" cols="60" rows="5"> /* For all browsers */ legend{white-space:normal;} /* For Internet Explorer only - put in a separate file and load it with conditional comments or find a C
[CSS]特定の範囲からはみ出さないドロップダウン型ナビゲーションを実装するスタイルシート | コリス
ドロップダウンするパネルが特定の範囲から左右にはみ出さないナビゲーションを実装するスタイルシートをCSSplayから紹介します。 Any width dropdown/flyout menu with left and right dropdown/flyouts v2 demo デモではドロップダウンするパネルが、通常（2, 3番目）は左端を基準に展開しますが、一番右の（6番目）ははみ出してしまうので右端を基準に展開します。 また、配下もキャプチャのように特定の範囲内に表示されます。 対応ブラウザはIE5.5/6/7/8, Fx, Op, Safari(PC), Chromeで、IE8はIE7エミュレーションモードの必要はないとのことです。
[CSS]実用的なものからマニアックなものまでリスト要素をスタイルするベストプラクティス
実用的なものからマニアックなものまでリスト要素をスタイルするベストプラクティスをDev Snippetsから紹介します。 Styling your Lists: 20+ Brilliant How to's and Best Practices
CSSで作る素晴らしいナビゲーションテクニック「30 Exceptional CSS Navigation Techniques」
TOP > WebDesign > CSSで作る素晴らしいナビゲーションテクニック「30 Exceptional CSS Navigation Techniques」 サイト構築には書かせないナビゲーションメニュー。頻繁に使う部分だけにデザインや使い勝手でサイトのクオリティーにも影響を与える重要な要素の一つです。今日紹介するのはCSSで作るナビゲーションのテクニックとサンプルをまとめたエントリー「30 Exceptional CSS Navigation Techniques」です。 The Menu menu 様々な種類のCSSを使ったナビゲーションが公開されていますが、今日はその中からいくつか気になったものをピックアップして紹介したいと思います。 詳しくは以下 ■CSS Blur Menu 選択されていない部分はピントがボケたように見えるCSSメニュー。 ■CSS Naviga
[CSS]うっかりでは済まないスタイルシートの記述の間違い集
スタイルシートが意図した通りにブラウザに表示されない時、ブラウザのバグが原因の場合もありますが、ここでは主に制作者のタイポや勘違いでうっかりやってしまいそうなスタイルシートの記述の間違いをCSS newbieから紹介します。
1枚の画像を切り出すテクニックCSS Sprite、便利ツール登場 | エンタープライズ | マイコミジャーナル
Chris Brainard - Web Developer Extraordinaire Webページに表示される画像をひとつの画像にまとめ、表示する際にCSSで切り出して使うテクニックがある。通称「CSS Sprite」と呼ばれるテクニックで、Ed Eliot氏およびStuart Colville氏が2007年9月28日(ドイツ時間)にCSS Sprite Generatorを公開してからとくに広がりを見せたテクニックだ。CSS Sprite Generatorは複数の画像を1枚の画像にするとともに、それぞれの画像にアクセスするためのCSSを生成する。CSS Spriteを実施するためのツールだ。 Sprite Creator 1.0動作画面 これと似ているが、逆に1枚の画像から特定の画像を取り出すCSSを作成するためのツールSprite Creator 1.0がChris Brain
[CSS]外部スタイルシートの指定は@importとlinkでどちらがいいか
外部スタイルシートの指定は@importとlinkでどちらがいいかと、書籍「ハイパフォーマンスWebサイト ―高速サイトを実現する14のルール」の@importはパフォーマンスに悪影響を与えることについてのフォローアップを紹介します。 don't use @import 内容は、IEでは@importで外部スタイルシートを指定すると、パフォーマンスに悪影響を与えるので使用しないでください、というものです。 下記は、外部スタイルシートを@importとlinkを組み合わせて、それぞれのパフォーマンスを比較したもので、キャプチャはそのサイトのものと、参考に当環境でIE7/Fx3(XP)を検証したものです。 @import @import 2つの外部スタイルシートを@importで指定。 <textarea name="code" class="html" cols="60" rows="5">
[CSS]パネルをさくさく切り替えるドロップライン型のナビゲーション
スクリプト無しで実装する、複数の画像を配置したパネルをさくさく切り替えるドロップライン型のナビゲーションを実装するスタイルシートをCSSplayから紹介します。 Professional drop line menu with images demo デモでは各タブにマウスをフォーカスすると、対応したパネルが表示されます。 パネルに配置できる画像の枚数は一枚だけでなく、多くの画像を配置することが可能で、その際は上記キャプチャのように横スクロール状に表示されます。 対応ブラウザは、IE6, IE7, Firefox, Opera, Safari (PC) and Google Chromeとのことです。
これは驚きの、CSSだけで作れる吹き出しボックス:phpspot開発日誌
Fun With CSS Shapes - Nettuts これは驚き！CSSだけで作れる吹き出しボックス。 次のような吹き出しが、画像を一切使わずにCSSだけで実現できてしまうようです。 HTMLコードをちょっと分かりやすいようにダイエットしてみたものが以下。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <style type="text/css"> blockquote {
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[CSS]複数のカラムのパネルを表示するドロップダウン型ナビーションのスタイルシート
[CSS]画像を使用しないで、Apple風のナビゲーションを実装するスタイルシート
[CSS]要素をボタン風にスタイリングするスタイルシートのテクニック集
[CSS]半透明のパネルを使ったドロップダウン型ナビゲーションのスタイルシート
[CSS]floatを使用しないで、リストを水平に並べるスタイルシート
[CSS]パネルの幅をテキストの成り行きに合わせたドロップダウン型のナビゲーション
[CSS]クリッカブルマップっぽいものを実装するスタイルシート
[CSS]スクリプト無しで、ナビゲーションの背景全体を変更するスタイルシート
[CSS]対になるテキストと画像をハイライトさせるスタイルシート
[CSS]実用的なレイアウトが揃っているフリーのテンプレート集 -Best Free Templates