リキッドデザイン問題は max-width と IE6 用 expression で解決 - eclucifer blog
Date 2009-01-15 19:06 Category blog / Web 関連 Tags blog / CSS / JavaScript / push!! / tips / Web 関連 / Webデザイン / Web制作 / 考え方 Navigation Link Newer Older 使用中の Firefox アドオンまとめ Comments / Trackbacks Comment Form Name URL Add Your Comment Trackback URL http://eclucifer.net/blog/web/2009011501.html/trackback/
「サイトの横幅」再論：950px時代のウェブデザイン［絵文録ことのは］2009/01/14
以前、サイトの横幅を640ピクセルにする理由――統計と現状に基づく結論［絵文録ことのは］2006/11/25で、「実際にサイトを閲覧している人のブラウザーの横幅と、ブラウザーによる印刷上の制約から、特に画像は左端から640ピクセルくらいに収まるようにした方がよさそうだ」という結論に落ち着いた。これには、一行字数が多すぎると読みづらい、という、紙媒体の扱いも多いわたしの経験的な見方もある。 もちろん、これにはリキッドデザイン主義者の方から「ページ幅を指定するようなデザインであること自体が悪」という反応があったり、「印刷用CSSを使おう」といった反応があったりしたのだが、「印刷時のことを考えれば640pxという制約がある」という結論は特に揺るがなかった。 その後、今まで約2年経った。閲覧者の環境も変わり、当時主流だったIE6にはなかった「用紙サイズに合わせて印刷」機能を備えたIE7ユーザーも増
2007年度のCSSデザインベスト50発表
CSSとFlashのデザインでインスピレーションを得るためのサイト「Best Web Gallery」が選んだ2007年度のCSSデザインベスト50が発表されています。どれもこれもなかなか秀逸なデザインなので、来年度の新しいデザインに向けて、今年度の総復習を行って新たなインスピレーションの糧を得たい人や、ウェブサイトやブログのデザインを新しくしたいので参考になるデザインを探している人に最適です。 というわけで、ベスト50は以下から。 Capture the Valley - A project to benefit Habitat for Humanity http://capturethevalley.com/ Squawk http://www.squawkdesign.com/ Emeril's Holiday to Go : Home http://www.emerils.com/
ホームページのデザイン本を買う前に見ておくとお得なエントリまとめ 見本サイト数135程*ホームページを作る人のネタ帳
（このイメージは、このブログの記事内容をイメージするもので、実在しません） 先日書店に、ホームページのデザイン集なるものがおいてあったので、買ってみた。 2000円出して買った本ですが、どうも損した気分に陥る。 そんな損した気分に陥る人が他にもいるかもしれないので、ホームページ、及びブログのデザインのインスピレーションをここにまとめておく事にします。 30ブログデザイン 最近話題になったエントリ。 30 More Excellent Blog Designs 良質なブログデザイン30サイトのまとめエントリ。 Simplicity and Whitespace（シンプルと空白のデザイン）からはこのブログデザインが好き。 すごくすっきりしているというのとさっぱりしていて、ちょっとクドイ。 Theocacao Weblogs Which Don’t Look Like Weblogs（ブログのよ
いまさら聞けない“Web標準”、そしてXHTML＋CSS
いまさら聞けない“Web標準”、そしてXHTML＋CSS：いまさら聞けないリッチクライアント技術（4）（1/3 ページ） 前回の「いまさら聞けない、“Ajax”とは何なのか？」の説明の中で、Ajaxの定義の1つとして「XHTMLとCSSを使った標準規格のプレゼンテーション」というのがありました。前回の記事では、この部分をしっかり解説できなかったので、今回はこれについて解説をしましょう。 といっても、Ajaxの補足説明が今回の目的ではありません。HTML／XHTMLとCSSを使った「Web標準」について紹介します。 「Web標準」という単語はよく耳にしますが、具体的にどんなものか？ HTML／XHTMLとCSSとどのような関係があるのか？ さらに、HTML／XHTMLやCSSって何？ といった点について見てみましょう。 「Web標準？ Webを標準化することかな？」 AjaxやXML、Jav
WEBデザインの際に参考にできる水平メニューサンプル集:phpspot開発日誌
nclud's Sketchbook | Horizontal Navigation; nine ways to skin a cat In an attempt at being unique and innovative, deciding on your navigation structure and presentation can sometimes seem like the most challenging.WEBデザインの際に参考にできる水平メニューサンプル集。 タブ風の水平メニューのサンプルが色々と紹介されています。 どれもシンプルですが、邪魔にならず見栄えのするデザインなので、デザイナーの方は、一度見ておきたいですね。
モジュール化で変わる XHTML1.1 と CSS3
去る 2月1日に開催された 「XHTML+CSS (r)evolution, 2nd」 。残念ながら私は参加できなかったのですが、どうやらサイバーガーデン益子さんのプレゼン内 （スライド資料 / 音声データが公開されています） で、当サイトの 「CSS3 セレクタ チートシート」 を参考資料として取り上げてくださったようで恐縮至極な今日この頃。 公開されているスライド等は CSS3 に関してとても勉強になる内容が詰まっていますので、ぜひアクセスしてみることをオススメしますよ。 で、プレゼンの中で益子さんもおっしゃってますが、CSS3、及び XHTML1.1 からの変更点として最も大きいのが、モジュール化という概念を取り入れ、各構成要素が細分化される形で定義されているということ。 XHTML にしても CSS にしても様々な機能を盛り込んでいった結果、その仕様はかなり重たい仕様となっています
第４回 HTMLからXHTMLへの移行方法（1）：ITpro
HTMLからXHTMLにスムーズに移行するには、「書式の違い」をきちんと押さえておくことが不可欠。今回は「XML宣言」「文書型宣言」「XML名前空間と言語コード」「MIMEタイプ」「style要素とscript要素」について見ていこう。 HTMLよりも書式が厳格なXHTML XHTMLはHTMLをXMLで再定義したマークアップ言語であり、HTMLの簡便さを残しつつXMLの論理的厳密性を備えている。そのため、HTMLのようにルーズなコーディング（たとえば終了タグがないなど）でもブラウザで問題なく表示される、ということはほとんどない。したがって、書き方にエラーがないかどうか少し神経質にならなければならない。 また、CSSがきちんと適用されないというトラブルも、実はXHTMLが正しく書かれていないことに起因していることが少なくない。 これらの問題を避けるべく、エラーのないソースにするには、バリデ
【特集】CSS実装徹底検証! そこが知りたいInternet Explorer 7 (1) 01-01 Internet Explorer 7 beta2のCSS実装 (MYCOMジャーナル)
米Microsoftから2006年5月、Internet Explorer 7(IE7)beta2がリリースされた。IE7は2001年にInternet Explorer 6(IE6)がリリースされて以来、5年ぶりのアップデートとなる。このメジャーアップデートでは、CSSの標準規格への準拠やバグの修正、未対応だった機能への対応などが期待されている。 IE7 beta2では、CSS2.0のセレクタや「fixed」による固定位置表示、すべての要素に対する「:hover」の指定などに対応しつつ、XML宣言の記述によって発生していた問題が修正されるなど、要望の大きかった部分への対応・修正が行われている。 しかし、フロート(回り込み)関連や、プロパティを組み合わせたときに発生する細かなバグに関しては修正されていない部分も残っており、正式版リリースまでにどのぐらい修正されるかが注目される。 一方で、
毎日考ブログ -Web屋のウェブログ- | Web標準に進路を取れ 第5回「テーブルレイアウトは罪なのか」
テーブルレイアウトとはテーブルタグを、左のようにセルを切ってレイアウトするもの。そもそもはテーブルタグは表に使われるものであって、レイアウト目的で使うべきではないという意見はごもっともなものの、きっちり幅指定や余白指定ができてブラウザ依存しにくいことから、企業サイトはもとよりいろいろなサイトに使われておりました。いや、今でも立派に使われています。 対してCSSレイアウトは、上と同じレイアウトをHTML（XHTML）＋CSSで表現するもの。こんな感じです。記述は一例として適当に書いてるんで、アテにしたり突っ込みいれたりしないでくださいね(笑)。 【HTML】 <div id="header"> <h1>毎日考ブログ（ヘッダ部分）</h1> </div> <div id="main"> <div class="menu">メニュー部分</div> <div class="contents">本
CSSクロスドメインの情報漏えいの脆弱性「CSSXSS」とは ― ＠IT
あるWebページにアクセスしたら、自分のYahoo! JAPAN IDやHatenaのID、mixiで使っている名前などが表示された。何の縁もゆかりもないページにこれらのプライベートな情報がなぜ表示されてしまったのだろうか。 これは「CSSクロスドメインの情報の漏えいの脆弱性（CVE-2005-4089）」という、Webブラウザがスタイルシート（CSS）を呼び出す機能にある脆弱性を利用した攻撃だったのだ。この脆弱性は通称「CSSXSS（CSS Cross Site Scripting）」とも呼ばれている。 CSSインポート時にCSS以外のファイルがテキストとして読み込める 最近のWebページは、文書の構造をHTML形式で記し、フォントや色やレイアウトなどの視覚的な表現をスタイルシートで記述するというHTMLの仕様に従っていることが多い。 HTMLファイルから外部のスタイルシートを呼び出すた
CSS3に関する情報をまとめたサイト「CSS3.info」
次のIE7やFirefox、Opera、Safariなどでサポートされる「CSS3」に関する情報をまとめたサイトです。テーブルの角を丸くするとか、文字に影を付けるとかの効果を確認できる実際にCSS3を使ったサンプルもあります。 Everything you should know about CSS3 - CSS3.info http://www.css3.info/ プレビューいろいろ。 CSS3 Preview - CSS3.info http://www.css3.info/preview/ 例としては以下のような感じです。なお、FirefoxなどのCSS3に対応したブラウザで見ないと効果がわかりませんのであしからず。 角を丸くする、四隅の内2つとか、上だけとか下だけとかも可能 http://www.css3.info/preview/rounded-border.html 文字に影
世間はまだまだテーブル・レイアウトが主流? | スラド
kirara(397)曰く、"東京webデザイナー日記で、日経平均銘柄225社サイトの脱テーブル率調査という興味深い報告が掲載されている。同報告では日経平均銘柄225社の全サイトのトップページを調査してあり、レイアウトがCSSかテーブルか、文書型宣言は何か、などが一覧できる。 また、調査結果がグラフにまとめられたレポートがPDFでダウンロードできる。 これは5月18日、銀座で開催されたイベント「CSS Nite」にて発表された資料との事。 PDFを読んでみると、なかなか衝撃的な結果が報告されている。225サイトの調査結果は以下の通り。 「100% pure CSS」なのは28社(12.4%) -->この内「XHTML+CSS」なのは15社(6.6%) 「CSS/テーブル混在（ハイブリッド）」なのは32社(14.2%) 「テーブルのみ」なのは155社(68.9%) 非CSSのうち「100%
GIGAZINE - CSSで角をもっと丸くする方法いろいろ
「スライディングドア」と呼ぶ方法で全体をヘッダー、ボディ、フッターの3つに分割して、コーナー部分などはオーバーレイとか使ってみましょう、という方法。 Another attempt at CSS rounded-corner dialogs using the sliding doors technique http://www.schillmania.com/projects/dialog/ 使用しているコードと画像のダウンロードはこちらから http://www.schillmania.com/projects/dialog/dialog.zip また、こちらに透過PNGを利用したバージョンもあります。 Another attempt at CSS rounded-corner dialogs using the sliding doors technique http://www.s
GIGAZINE - 使えるCSSコードいっぱい「Dynamic Drive CSS Library」
CSSを使ったタブ型の各種メニューとか、CSSによる画像のポップアップとか、ドロップシャドウやページカールの作り方などのコードが実際の例と一緒に置いてあります。実例を見てから選ぶことができるので、希望通りのものが手に入りやすいです。 Dynamic Drive CSS Library- Practical CSS codes and examples http://www.dynamicdrive.com/style/ RSSもあるので新しいコードが追加されればすぐにわかります http://www.dynamicdrive.com/style/csslibrary/rss/ コードの種類としては以下のような感じでカテゴリ分けされています。 横型のメニュー http://www.dynamicdrive.com/style/csslibrary/category/C1/ 縦型のメニュー h
webデザインに使えるメニュー・アイコン：Goodpic
This shop will be powered by Are you the store owner? Log in here
CSSレイアウトのサンプル集:phpspot開発日誌
Layout Gala: a collection of 40 CSS layouts based on the same markup and ready for download! In November 2005 I presented on pro.html.it a three-part article on creating CSS layouts using techniques like negative margins, any order columns and in some case opposite floats. CSSで段組デザインをする際に、とても参考になるサイトを発見。 ＣＳＳでの段組レイアウトのサンプルがサムネイル付きで４０種類紹介されています。 お好みのデザインを見つけてソースを開いてコピー＆ペーストすればお好みのデザインを素早く作れますね。 ＣＳＳも
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ITmedia(itmedia.co.jp) clean up | userstyles.org
i d e a * i d e a - 使える2.0系カラーパレット
fromdfj.net