以前、CSS3 セレクタをまとめたエントリーを 3回にわたって上げましたが、それらをまとめる意味で CSS3 セレクタのチートシートを作ってみました。 本当は、サンプルソースとか、セレクタに関する説明とか色々入れようと思ったんですけど、A4 サイズ 1枚にまとめるのはスペース的に不可能だったので、単純な CSS3 セレクタ一覧になっちゃいました。残念。 CSS3 セレクタチートシート (PDF) ※PDF ファイルは URI が変わる可能性がありますので、ブクマする際はできればこのエントリーにして頂いた方が安全です。 今回、チートシートのフォーマットは、Microformats Cheat Sheet を参考に作らせてもらいました。右サイドに IE7、IE6、Firefox、Opera、Safari それぞれでの各セレクタ対応状況を簡単にまとめてあります。 なお、対応状況のチェックには、c
Webプログラムを手がける企業であっても,必ずしもWebデザイナが存在しているとは限りません。プログラマが自分でデザインを適用しなくちゃならないことも少なくありません。 技術者の人と会話をすると「僕にはデザインのセンスがなくてね」という自嘲的な発言をよく耳にします。しかし,Webデザインにセンスは必ずしも不可欠ではありません。ちょっとしたポイントを学習することで,誰にでもしっかりデザインされたページが作れます。HTMLとCSSによる実装を通して,デザインの基礎を学んでいきましょう。 第1回 Webデザインに必要なのはちょっとした知識と訓練 第2回 Webデザインの基礎はHTMLの構造にあり 第3回 文書を装飾するのはCSSの役目 第4回 Webデザインの基本を学ぶための環境について 第5回 HTML文書を装飾するCSSの基礎(その1) 第6回 HTML文書を装飾するCSSの基礎(その2)
idea * ideaでエントリになっていたので、言及されていることだしうちのサイトのことだけちょっと書こうかなとか考えてみたら結構色々あって、エントリのネタになりそうだったのでまとめてみた。どっかにもちょろっと書いたけど。 実際にスタイル指定を書く前に抑えておくべき知識として以下のようなものが挙げられると思う。 ほとんどのブラウザでpreは等幅フォントで表示される ほとんどのブラウザでpreのwhite-spaceはpreになっている フォント・ファミリを指定する場合は最後にGeneric font familiesが必要になる overflow: scroll;では縦横どちらにあふれた場合でも縦スクロール・バーと横スクロール・バーが両方とも出る overflow: auto;ではあふれた方向にのみスクロール・バーが出る Internet Explorerではoverflow: auto
【はてなブックマーク】面白いデザインカスタマイズをしているはてなブックマークユーザーさんをご紹介下さい。 この質問は、6月12日(日)21:00ごろ締め切り予定です。 URLは http://b.hatena.ne.jp/ユーザーID/ でご回答下さい。 自薦他薦問いません。 参考) はてなブックマークデザインガイド http://b.hatena.ne.jp/help?mode=design はてなブックマークの構造 http://d.hatena.ne.jp/kamioka/20050609/1118324980 とほほのスタイルシート入門 http://www.tohoho-web.com/css/index.htm 困った時のカラーイメージ_WEBデザイナーのすすめ http://www.wd-susume.com/color/index.html
なんかCSSNiteとかWEB標準の日々とか絡みであちこちで何かが飛び交ってる中、ハテブのコメントとか「Lism.in * blog 一連のCSS Nite騒動について雑感」とかでちょこちょこ言われてるんだけど”デザイナーとエンジニアの溝”とか”デザインとシステムの戦い”的なことを言われていて超違和感ありまくり。 以前WEBデザイナーはWEBって付くくせにWEB上で存在感ないよね、みたいなエントリをみた記憶があったりもするので誰も期待してない中、エロ動画のダウンロードを待ちながらちょっと一言。 コーディングする人はデザイナーでは無くね? エンジニアとは明らかに違って、面を実装する側にいるのでデザイナーってくくりになってるのかもしれないけど、UIの設計もするしデザインもするしコーディングもWEB標準がどうした的なこともする何でも屋な自分からするとCSSNiteの真ん中辺りにいる人たちは明らか
オンラインでBasicやC++、JavaScriptの開発&実行が出来る「codeide」 次の記事 ≫:.htaccess ファイルを簡単作成「.htaccess Editor」 JavaScriptist を作る際に活用したツールや素材あれこれ。 先日、JavaScript 情報サイトの JavaScriptistを公開しましたが、その際に利用したツールや素材のサイトを紹介しておきます。 Silk Icon サイトに使ってるアイコンは殆どこれを使っています feed icons RSS用のアイコン ドリームラインジェネレーター 一部、画像生成のためにドリームラインジェネレーターを使わせていただきました。 参考:「ドリームラインジェネレーター」で誰でも簡単に目を引くクールな画像を作る方法 dp.SyntaxHighlighter JavaScriptのみでコードの色分け表示が可能なライブ
プロミスの女性向けサービス・プロミスレディース 女性のためのキャッシングサービス プロミスレディース 詳細はこちら プロミス プロミスとは、SMBCコンシューマー・ファイナンス株式会社が運営している消費者金融会社です。プロミスではキャッシングに加えて、貸金業法に基づくおまとめローン、自営者カードローン、目的ローンの4つの商品が展開されています。メイン商品であるフリーキャッシングは、18?69歳までの安定した収入がある方が対象です。会社員はもちろんのこと、アルバイトやパートの方でも利用できる可能性があります。 プロミスはサービス内容が豊富なのが特徴です。プロミスの審査は最短即日融資が可能となっています。即日融資を利用したい場合は、Web・アプリや自動契約機で申し込むのがおすすめです。ただし、審査内容や時期によっては時間がかかる場合があるので注意してください。30日間無利息で利用できるサービス
MDCの記事用にGeckoのReflow(レイアウトを組み立てる処理)の過程をアニメーションGIF↑にしましたが、これが思ったより良い画になったので、トゥイーニングをつけてムービーを作ってみました。 まず、みんなの好きなGoogle。あんまり面白くないです 続いてWikipedia。スクロールバーが出て表示域が狭まったために、サイズを再調整している様子が見えます。 最後に、Mozilla.orgのトップ。floatの扱いがよくわかります。ここでもスクロールバーの出現に伴う再配置が発生しています。 作り方は大体以下のような感じです 各frameのrectが変化したところで位置、大きさ、this pointer値および親のthis pointer値をログに書き出すコードをMozillaに仕込む Rubyスクリプトでログを舐めて、frame treeを再構成する もう一度最初からログを舐めて、各
特集「オープンソース×10年」 予算ゼロからのIT環境整備2014/01/30 特別寄稿:センチメンタル・ジャーニー ~OSSはまだ16だから~2014/01/30 EC-CUBE – オープンソース・Eコマースの雄の進化を見る!2014/01/30 Zabbix Japanに聞いたオープンソース×ビジネスを成功させるための3つの基本2014/01/30 MOONGIFTの運営で大事にしている3つのこと2014/01/30 2007〜8年の大きな変動まとめ!2014/01/30 なぜプレミアム?そこから得られた経験教えます2014/01/30 2006〜09年、各年の人気オープンソース・ソフトウェアベスト52014/01/30 狙われやすいサイトはどんなサイト?オープンソース×セキュリティについてペンタセキュリティシステムズに聞く2014/01/30 aegifが考える企業でOSSを開発す
Chris Casciano氏の選んだCSSティップス10選 Chris Casciano氏が「Ten Simple CSS Tips」という記事のなかで、知識レベルを問わずスタイルシートを書く誰にとっても便利であろう10のヒントを公開していました。個人的にナルホドと思った部分があったし、もしかすると参考になると思う人もいるかもしれないので、以下に訳文を晒しますね。原文はCreative Commonsライセンスでしたが、一応Chris本人から訳文掲載の許可も得ています。あーちなみに例によって英語は苦手なので(おい)、誤りとかあったら指摘してください>誰 スタイルを適用し始める前に、文法チェックによりマークアップを妥当なものにしましょう。 基本となるスタイルシートは* {margin:0; padding:0; }という規則集合で書き始め、(マージンやパディングは)それが必要な箇所に必要な
ここ最近エントリーさぼり過ぎてたんで、ちょいネタでも上げていこうっていうスタンスで。 発生条件がイマイチわかってないんですけど、フラッシュを設置した際に、下にpaddingっぽい余白っていうか隙間っていうかが5px~10pxほど空くことがありませんか。IE以外のブラウザで。 こんな風に↓ 図みたく、分かりやすい枠線が有ると露骨に気づくわけですが。 で、まぁコレは画像でも発生するベースラインのアレと同じなんで、解決方法は以下のように。 object, embed { vertical-align: top; } 値は、bottomでもダイジョブです。 embed に指定が無いと、Firefoxで余白が発生して、object に指定が無いとSafariで発生するんで、どちらも指定すると良さげです。
Scott Jehl, Designer/Developer, Boston, MA | Process: StyleMap: Visual Sitemap If you've ever had to produce a sitemap for a client using tools like Visio or OmniGraffle, you know that it can be tedious to visual organize a complex hierarchy of pages. Having experienced this myself, I developed a simple and efficient way to make a sitemap through the benefits of standards-based HTML and CSS. HTMLの
デザイナーをしています。おもしろいコト大好き。イベントに参加したりカンタンなwebサービスを作ったりもときどき。twitterだけがとりえです。twitter id ; woopsdez Category Archives Monthly Archives January 2008(14) December 2007(22) November 2007(33) October 2007(21) September 2007(18) August 2007(24) July 2007(19) June 2007(40) May 2007(30) April 2007(97) March 2007(20) February 2007(11) January 2007(18) December 2006(26) November 2006(35) October 2006(50) Septemb
IEには様々なバグが報告されていますよね。 もうコーダーからしたら勘弁して下さいって泣きが入りそうになるくらいに... 背景色が指定された要素内でfloatがある時、要素内の文字が消えるとか、floatに後続するmarginの値が無視されるとか、widthを指定しているとボックスの中身にfloatしている要素があっても、自動的に高さが伸びるとか。 こういったIEのバグに有効な手段として、IE6まではheight:1%を指定する事で回避したり、IE7でもwidthを指定して回避したりと色々やってると思います。 その他、IE独自拡張のzoomを使った方法なんかもあります。 今まで理由とかは分からないけど取り合えず解決するんだって事で、widthやheight、zoomを指定しておけばいいんだ。 と認識していましたが、つい先日ちょっと気になる内容をみつけましたのでご紹介。 ソレはhasLayou
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く