RedLine Magazine : 印刷用CSSのお話
印刷用CSSのお話 最近担当したサイトでは印刷用CSSをたいがいセットにしてます。同業者の方だと経験あるかもしれないですが、昔の鬼級テーブルレイアウトの頃は言われた事なかったんですがCSSを使い始めてから「背景が印刷できない」と、よく言われました。「ブラウザの設定で『背景も印刷する』にチェック入れると出てきますよー。デフォルトではインク節約仕様になってるんすねー（嘘かホントかは知らない）あはははー」とか返してました。 デフォルトの状態で印刷できないってのは問題あるだろってのはもちろんちゃんと分かってたんですよ。ここは背景扱いにしたらデフォ状態で印刷したらエラい事になるぞ、とか使い所の選別はしてましたし。まぁでも「あなた、なんでもかんでも画像化するの大好きなクセに検索対策っ！検索対策っ！さっさと検索対策～！って言うじゃん」とか鬱憤も溜まってました。 印刷用のCSSを用意するようになってからは
これは驚きの、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 {
スタイルシートをすっきりと見やすくしてくれる『styleneat』 | 100SHIKI
シンプルで素敵なツールだったのでご紹介。 styleneatはCSSファイルを見やすく整形してくれるツールだ。 これを使えばセレクタの親子関係がインデントされて見やすくなる。複雑な階層構造もこれならわかりやすい。 またそれぞれのスタイルの属性をアルファベット順に並べたり、一行でまとめたり、といったオプションもある。 スタイルシートがごちゃごちゃしてきたなぁ、というときに試してみるのはいかがだろうか。
Remember The Milk キーボード・ショートカット・キーを忘れてもいい裏技 - Forgot the Milk.
Remember The Milk と Firefox のユーザースタイルシートをコラボすると、Remember The Milk の画面上にキーボードのショートカット・キーを表示することができるんです。 これがコラボ後の Remember The Milk の画面です。↓ (ショートカット・キーが表示されています) Firefox のユーザースタイルシートを利用することで実現できます。通常の Remember The Milk のページ情報HTMLを取得した後、Firefox で指定したスタイルシートを適用することで、キーボードのショートカットキーを追加表示しているんです。 実は、マルチタブに惹かれて Sleipnir を利用し始めてからはどのブラウザにも浮気していなかったため、Firefox を利用する機会はあまりありませんでした。でも、今回のこの記事を書くにあたっていろいろ調査してみ
Nice and Free CSS Templates
You see this page because there is no Web site at this address.
Even More Rounded Corners[角丸][css]
Even More Rounded Corners With CSS (Another technique for the pile.) 2009 update: CSS 3 and border-radius can do rounded corners without any images, and support for RGB/alpha opacity and gradients with opacity is also on the way. Check out CSS 3 and the future for newer, shinier examples! There's an increasing desire (at time of writing, February 2007) to provide rounded corner dialogs with variou
Dynamic Drive DHTML(dynamic html) & JavaScript code library
This innovative script uses CSS flexbox to create cards that when clicked on expands to show copious amount of information in a compact, manageable manner. Think of it as an expandable cards based layout. Ken Burns is a type of panning and zooming effect commonly used in video production to bring still images to life. This image slideshow adds an awesome Ken Burns effect to each image during trans
便利なＣＳＳテクニック３０選:phpspot開発日誌
30 Exceptional CSS Techniques and Examples | Six Revisions In this article, I’ve pieced together 30 excellent CSS techniques and examples 便利なＣＳＳテクニック３０選ということでエントリがまとまっていたので紹介。 特に気になったものを以下にまとめました。 Hoverbox Image Gallery - 画像ギャラリー上でマウスホバー時に画像拡大 デモはこちら CSS Photo Zoom - 文書に添付の画像にカーソルを合わせると画像拡大。テキスト位置も自動調整 デモはこちら whatever: hover - windowsのスタートメニュー風の階層メニュー デモはこちら Content Overlay with CSS - オーバーレイでdescr
100個近いCSSギャラリーサイトをまとめて閲覧できる「GALLERY GALLERY」
CSSによってデザインされたサイトをまとめるサイトはかなり多く、それらすべてを網羅しようにもなかなか大変だったわけですが、そういったCSSギャラリーサイト自体をまとめたサイトが出現しました。その名は「GALLERY GALLERY」、さまざまな条件で並び替えることも可能で、100個近いサイトを見ることができます。 詳細は以下から。 GALLERY GALLERY http://www.triangling.net/gg/ この記事の執筆時点では98個のサイトが登録されており、それぞれのサイトについてRSSはあるか、タグによる分類はあるか、ユーザーによる投票は可能か、などの情報が簡潔にアイコンで示されています。 また、各種条件で並び替えることも可能となっているため、自分の入手したい情報をまとめたCSSギャラリーサイトを見つけることも簡単にできます。なかなかいい感じです。
ウノウラボ Unoh Labs: CSSによるデザインワークと相性のよいHTMLって？
yamazakiです。最近だいぶあたたかくなってきましたね。おかげで日中眠くて仕方ないわけですがいかがお過ごしでしょうか。 ウノウに入る以前も含めてそれなりに長いことHTMLとCSSを書いてきたわけですが、今回は試みに、「だいたいこういうところに気を使われたHTMLだと、CSSでのデザイン適用やレイアウトがやりやすいな」というこれまでの経験則を簡単ですがまとめてみたいと思います。 まあ、このあたりはCSS書く人とHTML書く人の間でちゃんとルールを決めておけばいいだけの話なので、そもそも何の役に立つのか疑問といえば疑問ですが（笑 たとえばユーザがCSSを書いてスキンを作れるようなサービスを作る際、どういったHTMLにするかを決める、みたいな時には少し参考になる、かもしれません。 ID、クラスを適切に割り振って、要素がCSS側から一意に特定できるように たとえばグローバルナビゲーションとカ
CSS の「値」とは何か - IT戦記
この前 以下のようなエントリを書きました CSS の名前の整理 - IT戦記 今回は CSS における この「value（値）」という言葉の意味、そして曖昧さについて書きたいと思います。 6 つの値 CSS において「値」は曖昧な言葉です。 なので、「値」という言葉を使って CSS の説明をするのは非常に効率が悪かったりします。 たとえば、「ここの値って、 hogehoge の意味の値？」「いやいや、ここの fugafuga の意味の値が piyopiyo なんだよ」というように、まったく無駄な会話が繰り広げられるわけです。 ですので、今日からはちゃんと CSS の「値」をちゃんと説明できるように、「値」に以下の 5 つの名前を付けましょう。 Declared values Cascaded values Specified values Computed values Used valu
やる夫がはてなブックマークを始めたようです。 - 朱雀式
僕は、はてなブックマークというソーシャルブックマークサービスを、単なる自分向けのブックマークメモとしてだけではなく、プチニュースサイト的な、このサイトのコンテンツのひとつとして捉えています。 となると、それなりにオリジナルなデザインにしたいかな。でもあんまり大掛かりなのとかオシャレなのとか作れないお…。と悩んでいたら、ピコーンとひらめきました。 「本当はかっこいいデザインにしたいお…」 「でもあんま凝ったのは難しいお…」 「だからやる夫にするお！」 というわけで、やる夫スキンができました。 はてなブックマーク – 朱雀式ブックマーク これにすれば、どんなに適当なタグや失礼なコメントをつけても、「～とやる夫が言っているようです」でごまかすことができるという、魔法のライフハック！ （ただし、自分のアカウント以外のところでは関係ないので注意が必要です。素人にはオススメしません） 自分も使いたい、
[CSS]テキストにグラデーション効果をつけるスタイルシート
Web Designer Wallにエントリーされている、テキストにグラデーション効果をつけるスタイルシートの紹介です。 CSS Gradient Text Effect 仕組みは、見出し要素(h1)に空のspanを記述し、グラデーションの背景画像を表示しています。 デモページでは、下記のようなさまざまなグラデーションをつけたテキストがあります。 CSS Gradient Text Effectのデモページ 利点としては、下記のような点が挙げられています。 テキストなので、ブラウザからのサイズの拡大・縮小が可能。 背景画像を変更することで、グラデーションを変更することが可能。 見出し画像をいちいち作成する必要がない。 数が多い場合、作成時間・帯域の節約になる。
新規でサイトを作るのに使えそうなの一式。（あの人のパクりじゃないんだからっ！）｜CSS HappyLife
08年6月4日追記： コレの新しいの作りました。 新規でサイトを作るのに使えそうなの一式。Ver 2 11月7日追記： contens.cssの56行と60行目の#contents部分でスペルミスしておました。 ごめんなさい... 現在は修正版になっております。 修正後のcontents.css --- SO905iがやば過ぎる件。JOGですよ！じょぐ！！！すげー待ってた。アナタを心から待っていた。 さて、一行駄文はお終い。本題です。 毎回新規サイトを作成する場合は、以前組んだのからコピって来て使うケースが多くて何かと面倒だと思っていたわけです。 んで、自分仕様のが欲しいと思ったので、仕事そっちのけで作ってみました。 以前からソレっぽいのは公開したり、なんやかんやだったんですが、11月2日Verって事で。 どうせ新規サイト作成の際にちょっとずつ見直しが入っていくので、すぐに古くなってしまう
Tag Cloudのスタイル - 3ping.org
タグクラウドの必要性についての是非はここでは置いておいて、このアイテムのデザインって色々考えさせられますね。 Vicuna CMSでも真面目に対応しようと重いケツを上げましたので、とりあえずサンプルとなるCSSスタイルを色々と書いてみました。 表示例とCSSファイルを置いておきましたので、気に入った表示があったらどうぞ使って下さい。 2007.10/21 追記・編集 Tag Cloud 10,11,12で.level5のフォントサイズが.level4と同じになってたのを修正 応用編としてTag Cloud 13を追加 単純に該当する記事が多いタグが他より目立てばいいだけなので、大抵のスタイルは大小の区別で表示しているけど、それだけじゃちょっと味気ない気もするので サイズ 色 明暗 彩度 色彩 形 というところでタグの強弱をより強調してみました。 HTMLは以下のような要素とクラス名で作って
Web2.0な画像、CSS、カラー等のジェネレーター集１００＋:phpspot開発日誌
More than 100 Web 2.0 Online Generators Web2.0な画像、CSS、カラー等のジェネレーター集１００＋。 Grid Layout Javascript - グリッドレイアウト作成 Web20generator web2.0テンプレートジェネレーター Roundedcornr - 角丸コーナージェネレーター Web 2.0 Badges - web2.0バッジジェネレーター Ajaxload.info, Loadinfo - 読み込み画像ジェネレーター 続きを見る ドメイン名、E-Mail、Favicon、フォーム、メタタグ、パスワード、robots.txt、RSS、SiteMapなど多数のジェネレーターが紹介されています。 サイト作りに役立てましょう。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSハックしない、JavaScript使わないCSSの教科書みたいなテンプレ*ホームページを作る人のネタ帳
シンプルでセンスの良い、WordPressのテーマファイル集 | コリス
[CSS]リストをストライプ状のアコーディオンにするスタイルシート
TableとCSSいろいろ - DesignWalker
