固定幅ベースの elastic レイアウトサンプル
elastic レイアウトと言っても、固定幅ベースか可変幅ベース（とは言っても min、max-width による半固定だけど）のどちらかからのアプローチになるとは思う。当サイトでは、ここ1年半ほど可変幅ベースの elastic レイアウトを採用しているんだけれども、ちょっと思い立って固定幅ベースの elastic レイアウトのサンプルを 3 つほど作ってみた。 文字サイズの変更に追随する elastic レイアウト 作ったのは 600px（640×480向け）、780px（800×600向け）、960px（1024×768向け）の幅をデフォルトで持っていているレイアウト。それぞれ、だいたいどれくらいの幅を指定すれば良いのか調べたかったってのがサンプルを作った主な理由。ブラウザの表示メニューなどから文字サイズを変更すると、それに追随してレイアウトの大きさも変化する。内包するカラムを黄金比
はてなダイアリーデザイン管理機能リリース - はてなダイアリー日記
はてなダイアリーで、自分のヘッダ、フッタ、スタイルシートで記述した内容を保存し、また公開することで他のユーザーと共有することができる「デザイン管理」機能をリリースしました。デザイン管理機能へは、「管理ツール」の「デザイン」メニューからアクセスしてください。またこれに伴い「かんたんデザイン」と「詳細デザイン」の切り替えを画面左上のタブで行うようにしました。 今回の機能追加の内容をわかりやすい動画でご覧いただけます。以下のプレーヤーから再生してください。 以下、詳細な説明です。 デザイン管理機能 デザイン管理画面では、すでに現在利用中のデザインセット( 「ユーザー名さんのデザイン」 )が保存されています。変更したいデザインを選択し、「デザインを適用する」をクリックすることで複数のデザインを使い分けていただくことができます。 現在のデザインを編集するには アイコンを、新しくデザインを作成するには
Lucky bag::blog: ピュア CSS なプレゼン用スライドショー
前回の「CSS3 の target 疑似クラスで脚注を動的に表示する」に引き続き、:target 疑似クラスを使ってスライドショーみたいなんを作ってみた。ひとつの HTML 文書なんだけど、画面が切り替わっていくかのように見せる。ピュア CSS とか言いつつも、前回同様、:target 疑似クラスに未対応な IE でも動くように JavaScript を使っている。純粋に CSS のみで動くのは、Firefox、Safari あたり。Opera は動かない。 ピュアCSS なプレゼン用スライドショー サンプル <div id="section-01" class="section"> <!-- 1ページ目 --> … </div> <div id="section-02" class="section"> <!-- 2ページ目 --> … </div> <div id="section-0
ファイル保存時に ERb でコンパイルして保存 - 2nd life (移転しました)
ちょっと CSS で変数が使えたらなぁ、などと思うことが多々あります。そんなとき、適当なテンプレートエンジン使って CSS 記述しちゃえば！とか思うのですが、わざわざそんなことするまでもないし、と思いとどまってそれ以上何かすることはありませんでした。 CSS に限って云えば、Lucky bag::blog: CSS の値に変数を使用する の方法でサーバサイドで生成したり、その他アプローチで動的、静的に生成など、様々な手法があると云えます。 ちょっと話は変わって ERb。皆さんご存じの方も多いと思われる、ruby 1.8 標準添付のテンプレートエンジンです。ERb を使ってテンプレートファイルをコンパイルしたい場合、 ruby 1.8 以降さえあれば $ ruby -r erb -e "puts ERB.new(ARGF.read).result" file.template > fileの
グリッドレイアウトのための背景画像 - lucky bag
ウェブページをグリッドレイアウトするのであれば、あらかじめ CSS で背景画像にルーラーみたいな画像を指定しておけば制作時に便利じゃね？ってアイデア。 Subtraction: Grid Computing… and Design Airbag - Ruler. Using a Background Image Grid to Lay Out Your Web Site | Smiley Cat Web Design つうことで、自分が使いやすいと思う方眼画像をちゃちゃっと作ってみた。 gif画像（ご自由にどうぞ） grid.gif (GIF 画像, 200x200 px) 実際に適用してみたサンプル グリッドレイアウトのための背景画像のサンプル ルーラーの最小単位は 5px で、それより若干濃い線が 10px 、さらに濃い線が 50px、んでもって薄いグレーの背景が 100px 単位って
IE 6.0 - memo.xight.org - Clean CSS - CSSの最適化，ファイルサイズ削減ツール
Summary テキストフィールドにCSSを入力するか，CSSが置いてあるURLを指定して，"Process CSS" をクリック． 使用前 (196byte) #example { color: rgb(0,0,0); background-color: #ffffff; font-weight: bold; margin-top: 5px; margin-bottom: 5px; margin-left: 5px; margin-right: 5px; padding: 10px 5px 10px 5px; } 使用後 (Compression: Low) #example { color:#000; background-color:#fff; font-weight:700; margin:5px; padding:10px 5px; } 入力 196 byte 出力 99 byt
カラー関連の情報を CSS 内に記述 - lucky bag
CSS ファイル内に Color Glossary を記述しておくってのは、複数人で CSS を管理する際はもちろん、自分にとっても明快なんで、とても良いアイデアだと思う。 Garrett Dimon / CSS Maintenance Tip: Use a Color Glossary Glossary をもとに CSS ファイル内を検索・置換で色の変更なんかも簡単にできるし、メンテナンス性が高まるのは言うまでもない。こういった記述は、自分（またはグループ）が分かりやすいように関連づけて明記しておくのが良いと思う。例えば、ヘッダの色とか、見出しの色とかのパーツ単位でも構わないんじゃないかと。 んでもって、ウチの場合はちょっと拡張して、CSS 内に下記のようにカラーネーム、Hex 値と RGB 値の記述をしている。 /*================ColorScheme========
CSS3 の否定疑似クラスの使いどころ - lucky bag
CSS3 の否定疑似クラス :not() って、使う機会があまり無さそうとか思ってたんだけど、Bite Size Standards で属性セレクタと組み合わせた使用例が紹介されてて、なんかそのピンポイントで指定できてる感がクール！つうか、そうか、そういう使い方かぁ。 input[type="text"]:not([size]) { width: 15em; } 上記コードを解説すると、type="text" な input 要素で size 属性が指定されていないものは width: 15em; ってことになる。うーん、これをユーザスクリプトで指定しておくのも良いかも。size が指定されてなくて入力欄の幅が狭いのって意外とストレス感じるし。 自サイトでも、クラスや ID をわざわざ付与してなくても否定疑似クラス使って指定できるもんって他にもありそう。例えば、(X)HTML の方で wi
line-height の値には単位なしが良いとされる理由
CSS で行ボックスの高さを指定する line-height 値に、em(length) や %(percentage) などの単位を付けて指定しているサイトを意外と見かける。それは間違いではないし、例えばナビゲーションとかでブロック要素の垂直センターに配置するために意図的に指定しているんであれば良いんだけれど、そうでないなら line-height 値には単位なし (number) で指定した方が良いのにとか思ったりする。その理由は Eric's Archived Thoughts: Unitless line-heights でも分かりやすく説明されているんだけど、ちと劣化コピーしてみる。 単位ありと単位なしの違い 手っ取り早く説明するために、サンプルを作ってみた。p 要素があって、その中にインライン要素の em で一部分を強調している。分かりやすいようにそれぞれの font-size
なぜCSSXSSに抜本的に対策をとることが難しいか - いしなお! (2006-03-31)
_ なぜCSSXSSに抜本的に対策をとることが難しいか CSSXSSの説明について、その脅威を過剰に表現している部分がありました。その部分について加筆訂正しています。 @ 2006/4/3 tociyukiさんによる「[web]MSIE の CSSXSS 脆弱性とは何か」および「[web]開発者サイドでの CSSXSS 脆弱性対策」には、より正確なCSSXSS脆弱性の内容およびそれに対するサーバーサイド開発者で可能な対策について紹介されていますので、是非そちらもご覧ください。 @ 2006/4/4 今までも何度かこの辺の話はあまり具体的ではなく書いてきたけど、そろそろCSSXSSを悪用したい人には十分情報が行き渡っただろうし、具体的な話を書いてもこれ以上危険が増すということはないだろうから、ちょっと具体的に書いてみる。 ちなみに私自身は、CSSXSSの攻撃コードなどを実際に試したりといった
SEO業者ですら感動する驚異のCSSテクニック - 不定期更新 SEOコラム
急にお金が必要になってしまいました。キャッシングをするのに、レイクかモビット、どっちを利用するか迷っています。借りるならどっちがお得ですか？ お得という点から言えば、初めてならレイクがよりお得です まず、それぞれの特徴を見ていきましょう。レイクは銀行系で、総量規制の対象外、１万円からお借入可能で、最大500万の限度額、年率4.5～18％、200万まで30日間無利息、または5万までなら180日間無利息、初めてのお借入なら有利な条件ですね。届く封筒は「新生銀行」の名称です。 一方、モビットは消費者金融で、総量規制の対象となります。限度額は500万、年率4.8～18％です。特に無利息期間の指定はありません。WEB完結型なら、審査の電話が入りません。 最高・最低金利だけで見ると、レイクのほうがお得に見えます。また、期間無利息などの点からも、初めての方はレイクのほうがお得な印象です。 反面、新生銀行
Javascriptで動的にアンチエイリアスな角丸を設定する:phpspot開発日誌
More Nifty Corners | Web Design | PRO.HTML.IT Nifty Corners are a combination of CSS and Javascript to get rounded corners without images. The technique is made up of four essential parts: 「Javascriptで指定のHTML要素を動的に角丸デザインにする方法」で紹介したNiftyCornersですが、このページで紹介されている方法を使えば、アンチエイリアスな角丸を設定することが出来るようです。 使い方はちょっと変わって、 Rounded("div#nifty","all","#FFF","#D4DDFF","smooth"); のようになっています。 第二引数と第五引数が追加される形になっています。
長文記事を読んでもらいたい人は印刷向けスタイルシート設定した方がいいよ - 檜山正幸のキマイラ飼育記 (はてなBlog)
ずいぶん前に、id:nak2kさんに教えていただいて、僕は日記のスタイルシートに次の設定を加えています。 @media print { div.sidebar, div.myHeader {display:none;} .main, .day, .body {margin: 0 0 0 0;width:100%} } これで（少なくとも僕が使っているテーマでは）、まずまずのレイアウトで印刷できます（なんなら、印刷プレビューで確認をどうぞ）。 単なる個人用メモじゃなくて、他人に読んでもらうことを意識していて、長文のブログ・エントリーを書く人は、@medeia printの設定を加えたほうがいいと思いますよ。 まー、僕の個人的な嗜好と体験に基づく話ではありますが； よさげなエントリーでも長いと画面で読むのは辛い、あとそれと、これから外出するときとか、印刷して読みたいのよね。でも、サイドバーみた
JavaScript/HTML5, iPhone/Android, ハイビジョン映像, 自動化関連：[OpenSpace]
Web関連およびアプリケーション、映像関係、静止画素材、自動処理、4K/8K/ハイビジョン素材関連などを扱っています。 誤字脱字等、お気づきの点がありましたら、お気軽にメールをください。 この目次にないアプリケーション等の使い方などに関してはその他のリファレンス／アプリケーション...のページを参照してください。
大藤幹 『世界の「最先端」事例に学ぶ CSSプロフェッショナル・スタイル』 - モジログ
MYCOM BOOKS - 大藤幹 『世界の「最先端」事例に学ぶ CSSプロフェッショナル・スタイル』 http://book.mycom.co.jp/book/4-8399-1907-0/4-8399-1907-0.shtml 『Web Designing』誌に連載されている、大藤幹氏のCSS記事をまとめた本。 これは早く本になってほしいと以前から思っていたが、本になってみれば、連載に加えて特集記事などのオマケもついて、予想以上に充実した素晴らしい内容になっている。 この連載（本書）がいいのは、CSSの文法を教科書的に解説するのではなく、CSS界で名高いトップデザイナーが作ったサイトを題材に、そのCSSコードを実際に解析して、詳しく解説している点だ。 プログラミングでも、語学でもそうだが、文法を解説することが主眼の教科書は、「This is a pen」式の味気ない例文で学ばされることが
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Amazon.co.jp: CSS Zen Garden Book: Webデザインのベストプラクティスに学ぶ、CSSクリエイティブ・テクニック (Web Designing BOOKS): Dave Shea (著), Molly E.Holzschlag (著), 森本眞吾 (翻訳): 本
Lucky bag::blog: Appendix
caramel*vanilla - 色に関する便利ツールいろいろ
caramel*vanilla » Web制作に役立つFirefoxの拡張(1) - HTML/CSS関連
CSS Vault » The Web's CSS Gallery & Site