TRANS [hatena] - Hkon Wium Lie氏「CSSの10年とこれからの大きな動き」（日本語訳）
タイトルは誇張ではありません。僕も読み始めたときは何のことなのか分かりませんでしたが、途中で出てくるコードを読んで、やっと分かりました。「本当に、これは今のWebデザインやCSSを変えるかもしれない」と。元記事は、A List Apart: Articles: CSS @ Ten: The Next Big Thingより。著者はCSSそのものの草案者であり、今はOperaのCTOを務めるHåkon Wium Lie氏です。 追記 id:iwaimさんのはてブコメントに対する返答を文末に書きました。（2007年9月11日19時ごろ） CSS @ Ten: The Next Big Thing CSS は去年10年の節目を迎えた。このような節目は、過去に立ち返り、未来の計画を立てるための機会である。CSSは構造から見た目を分離することによって、根本的にWebデザインを変えた。CSSはデザイナ
![TRANS [hatena] - Hkon Wium Lie氏「CSSの10年とこれからの大きな動き」（日本語訳）](https://cdn-ak-scissors.b.st-hatena.com/image/square/4d2c6afb5d6abaa426040c38409bd6b5df9565ae/height=288;version=1;width=512/http%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Fa%2Faratako0%2F20070909%2F20070909015823.png)
ウノウラボ Unoh Labs: 「サーバサイドCSS」という選択
miyakeです。突然ですが、CSSって書くの面倒ですよね。何らかのプログラミング言語を知っている人間から見ると、CSSというのは言語としてはかなり貧弱です。 もちろんCSSはプログラミング言語では無いので、それを貧弱だと言われてもCSSもいい迷惑かも知れません。でも、 div#content { ～ } div#content div.entry { ～ } div#content div.entry p { ～ } div#content div.entry ul { ～ } こういう大したことをしていないのに、コードがどんどん長くなっていくのを見ると、もう少し何とかならないものかと思ってしまいます。 コピペするにしても、 コピー元にカーソルを移動 範囲選択してコピー コピー先にカーソルを移動 ペースト という操作が必要になります。数が増えてくるとコピペのミスも発生しかねませんし、id
CSS(スタイルシート)をjavascriptで切り替える色々な方法cookie : 4GALAXYのメモ
19 29 08 2007 CSS(スタイルシート)をjavascriptで切り替える色々な方法cookie jQuery, Css CSSを動的に切り替える方法をいくつか紹介します。全てcookieにより保存されます 1.styleswitch.jsを使う方法 まずGoogleで一番ヒットするのがstyleswitch.jsです。 コード <script src="styleswitch.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="default.css" /> <link rel="alternate stylesheet" type="text/css" media="screen" title="title1" href="css1.css" />
本物のリキッドレイアウト - 補足：Hatena::agenda
Hatena::agenda - 本物のリキッドレイアウトの続き。 リキッドなマルチカラムの実例 Hatena::agendaは実験場ではないけれども、CSS3 Columns - MDCで紹介されているmozilla独自拡張プロパティを使用してリキッドマルチカラムにしてみた。デメリットもかなりあってまだ改善の余地があり余っているものの、場合によっては低解像度から高解像度まで、シングルウィンドウから並行閲覧まで手広くカバーできる。 このプロパティを実装していないブラウザ向けに、一応スクリーンショットを用意してみた。 幅が小さいと1カラム（約50kb） ある程度広げると2カラム（約90kb） 充分広げると3カラム（約110kb） 念を押しておくが、-moz-で始まる独自拡張プロパティは、正しく使えば問題ない。これはCSS validatorを通らない。しかしCSS実装は、不明なプロパティは無
3カラムサンプル18種
本題の前にお知らせ。RSSの登録先をこっちにしてくれるとうれしいです。近々ディレクトリ整理したいので。 http://feeds.feedburner.jp/csshappylife では、本題に。 2カラムサンプル13種で宣言しておいて、放置してましたが重い腰を動かしてようやっと作りました。 というか、エントリー自体も時間が空いてしまい、申し訳ない限りでございます。。。 一度気が抜けると、中々書こうって思えないっすね。 今回は3カラムですが、ネガティブマージンを使ったサンプルが多い感じです。 殆ど経験が無い中作っていたので、なんか楽しくなってました。 個人的にはふいに思いついた、15番のサンプルとかが使えるかも知れないとか思ってます。 広告って載せたいけど、センターの位置をずらしたくない時とか有ると思うのです。 仕様っぽいことと注意事項っぽいこと DOCTYPEは XHTML 1.0 S
ブラウザのデフォルトスタイルをリセットする手段、ユニバーサルセレクタとタイプセレクタの違いは？ | Blog hamashun.com
ブラウザのデフォルトスタイルをリセットする際にユニバーサルセレクタを使用すると、読み込みが遅くなるとか言う話があるんですけど、具体的にどれくらい遅くなるのかという話は聞いた事がありません。 なので、調べてみました。 ソース 使用したソースは以下の2種類です。 なお、2番目のソースはYUIで公開されている物を使用しました。 * { margin: 0; padding: 0; } body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin:0; padding:0; } それぞれを当サイトのcssファイルに書いて、Firebugでcssファイルの読み込み時間を100回づつ計測しました。 計測したのは、2007年9月2日の夜23時頃、ADSL回
第12回：引用（blockquote）をCSSと画像でそれらしく見せる方法 ::: creazy photograph
前回のTipsではブログで頻発する引用作業を簡単にするブックマークレットを紹介しました。 ブログを書く上で頻繁に行う引用の手順を簡単にしてくれるブックマークレットを作ってみようと思う。 via: 第11回：引用（blockquote）を簡単にするブックマークレット 今回はそのblockquoteを、CSSと画像を使ってクリーンなHTMLを維持しつつ「引用符（“”）」で囲ったようなデザインにする方法を紹介します。 最近は良く見かけるデザインだし、方法も色々あるんだろうけど何パターンか作ってみようと思います。 １）左上に「“」を表示させる まずは一番簡単そうな左上コーナー１カ所に引用符を表示してみます。 使用した画像はこちら。 完成したのがコチラ。 HTML例 <blockquote cite="http://creazy.net/" title="creazy photograph"> <p
XHTML+CSS Slideshow Tool の仕組み (plucore.log（プラコア ブログ）)
個人ブログの方で XHTML+CSS Slideshow Tool を紹介しましたが、簡単にこっちでもお話しします。 XHTML+CSS Slideshow Tool とは XHTML+CSS Slideshow Tool Ver 1.0 サンプル ファイル PDF 印刷したサンプル 純粋な XHTML と CSS の組み合わせで PDF 印刷することを前提に作られたプレゼンテーションツールです。 XHTML 文書の中身は S5 と似たような構造になっています（かなり単純化されてますが）。 なので JavaScript によるエフェクトは一切ありません。個人的にそんなのはいらないと思っているし。 とまあそのままコピペですが、目的はあくまで PDF 印刷です。ブラウザ上で見ることも出来ないことはないですが、JavaScirpt を使ってどうこうしなければ、それこそ S5 のようなツールの
可変幅で両側にドロップシャドウ（div一重で）
てんぽ: 可変幅で両側にドロップシャドウ（div一重で） CSSやHTML、FC2ブログのカスタマイズ、共有テンプレートなど background-positionを%単位で指定し、ドロップシャドウ用の画像の大きさを調整することで、 画面の両側に影をつけたリキッドデザイン（画像の使用を極力控えてかっこいいCSSデザインをやってみよう大会のような）を実現できます。 しかも必要となるdivはひとつだけです。 このようなデザインでは divを二重にして一方のdivの左端に左側用の影画像を、もう一方のdivの右端に右側用の影画像を背景画像として指定するのが簡単です。 <div id="left"> <div id="right"> </div> </div> #left { width: 90%; margin: auto; background: url(shadow-left.gif) top
Lifehacker » Blog Archive » Popular Online CSS Tools and Generators
CSS Formatter and Optimizer WordPress Themes – only new and fresh WordPress Themes available for free download. WordPress Themes – a great compilation of appealing and functional WordPress themes under one roof. CSS Compressors CSS Layout Generators Leave a Reply Name (required) Mail (will not be published) (required) Website 4 Responses to “Popular Online CSS Tools and Generators” JTMcNaught Says
TokuLog 改め だまってコードを書けよハゲ - ドコモでも CSS を外部参照を使える HTML::DoCoMoCSS をリリース
Blog Search when-present<#else>when-missing. (These only cover the last step of the expression; to cover the whole expression, use parenthesis: (myOptionalVar.foo)!myDefault, (myOptionalVar.foo)?? ---- ---- FTL stack trace ("~" means nesting-related): - Failed at: ${entry.path} [in template "__entry.ftlh" at line 3, column 25] - Reached through: #include "__entry.ftlh" [in template "entry.ftlh" at
jQueryでブロック要素の高さを揃えてみる - 徒書
ブロックレベル要素の高さを揃えるheightLine.js[to-R]を見て不満に思ったのは、高さを揃える要素を取得するために固定のclass名を使っていることでした。これだと既存のHTML文書に適用するためには、script要素を加えるだけでなく、それ用のclass名も書き加えなければなりません。どうせJavaScriptを使うのであれば、既存のHTMLの構造を生かしつつスクリプト側で目的の要素を取得できたほうがいいのではと思いました。 というわけでまたも自分なりに書き換えてみるシリーズなのですが、今回は要素取得の柔軟さに着目してjQueryを使ってみることにしました。 できたものは以下です。 jquery.flatheights.js 動作サンプル jQueryの$関数ではCSSセレクタの書式で要素を取得できるので、例えば「"box1"というclass名を持つ要素」を集めるのであれば
CSS記述規則「プロパティ別整理法」の提案 : akiyan.com
2005-03-06 はじめに 2005-03-05 提案の目的 2005-03-07 必須ツール 2005-03-06 注意点 2005-03-11 多くのCSSは図書館方式で整理されている 2005-03-06 図書館方式の例 2005-03-07 図書館方式の利点 2005-03-11 図書館方式の欠点 2005-03-04 図書館方式の何が不満か 2005-03-06 プロパティ別整理法とは 2005-03-04 絶対規則 2005-03-04 推奨規則 2005-03-06 プロパティ別整理法の例 2005-03-11 プロパティ別整理法の利点 2005-03-04 プロパティ別整理法の欠点 2005-03-04 プロパティ別整理法に近い例 2005-03-04 機械との親和性 2005-03-04 Grep検索を活用する 2005-03-04 機械が完全に理解できる 2005-
chaloowsスタッフBlog｜テキストを縦幅中央配置する方法
先日、CSSでテキストを縦幅(height)中央に配置する方法を聞かれたんです。 う～ん、そういえば僕もCSSを覚えたての頃は頭を悩ませた部分でした。 よくナビゲーション部分などで引っかかりました。 ここから続き text-alignプロパティを使用することで、横幅(width)の位置を指定できるのだから、 vertical-alignプロパティで縦幅も指定できないかと。 しかし、vertical-alignプロパティが適用できるのはインライン要素とテーブルのセル要素なんです。 じゃあ、どうすれば縦幅の中央にテキストを配置できるかですが、 方法はボックスの高さと同じ数値をline-heightプロパティに指定すれば良いんです。 ---------------- サンプル ---------------- ----【まとめ】----- 高さ50pxのブロック要素内で、縦幅の中
ちょっとしたメモ - CSS2.1の勧告候補と検討事項リスト
CSS2.1がようやく（再度）勧告候補にこぎつけた。今度こそは草案差し戻しなどということなく進んでいくだろうが、テストケースや実装確認もあるので、年内はCRに留め置くということだ。このCSS2.1は、PDF版で405ページ。1998年のCSS2勧告は338ページだから、単純に分量だけでも2割増で、記述の修正なども含めると、実はかなり大きな違いがある。バグ修正やブラウザの実装に合わせただけのものではなく、よりモデルを厳密に定義したり詳しく説明しているので、CSSに関心がある人は、そろそろ2.1の内容を確認しておくのがよいかも。 今回の勧告候補は、昨年11月の草案をおおむね引き継いでおり、かなり安定しているといえるが、多少の修正や明確化もある。11月草案との違いが検討事項リストの形で示されているので、主なものを確認しておこう（以下、項目名の数字は検討事項番号、リンク先は検討事項リストの対応する
Liberty blog windowsXP+IE7のフォントの罠
WindowsXPでIE7をインストールすると、文字表示が今までのIE6とも、WindowsVistaとも違う見え方になってしまう。フォントに問題があるようです。 具体的問題点としては、フォントサイズの指定を、「％指定」にしている場合に、起きました。僕は、各ブラウザのフォントサイズを見比べた時、pt指定やpx指定の場合、違いが大きくなってしまうと感じているため、一番サイズが似ている「%指定」を行っています。 この時、WindowsVista+IE7で見た場合は従来通りのフォントサイズ指定で、IE6/IE7と特に変化はないのですが、WindowsXP+IE7とした場合、デフォルトフォントがMS P ゴシックなためなのか（XPには、メイリオは基本的に無い）、フォントサイズが大きくなってしまうんです。これは、WindowsXP+IE7+メイリオでは問題ないため、理解できます。 また、大きくなると
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://www.freephotoshoptemplates.com/
kawatarou.info domain is for sale | Buy with Epik.com
CSS Juice - Design, Tutorial, Showcase and more » 25 Rounded Corners Techniques with CSS
http://mynotes.jp/blog/2007/08/ie_collapses_padding_and_margin
