ちゃんと勉強してちゃんとマークアップしてるはずなのに、ブラウザによって表示に違いが出てしまう；； なんて事がWeb制作してるとたくさんあります。 ってか無い時のが少ない＞＜ 特に日本だとIE6の普及率が異常に高いです。 他のブラウザ（IE7とかFirefoxとかOperaとかSafariとか）に比べるとIE6はWeb標準への準拠度が比較的低い為、ちゃんとマークアップしても色々と問題が起きてしまいます。 IE6だけでなく他のブラウザも多少問題を持ってます。 そんなバグに出会った時、各々のブラウザにのみ対応したCSSを分けて記述出来たら便利だと思いませんか？ それがCSSハックです。 CSSハックの多くは各々のブラウザのバグを利用して適用させたいブラウザのみ（または適用させたくないブラウザをはじく）事で問題が起きたブラウザへのCSSの対処を実現させてはいますが、あくまでバグを利用しての

仕事のメモ帳ブログ。いまのところActionScriptメイン。たまにCSSとかJavaScriptとか。 AS2版のほうはこちらのサイト様を参照しました。 テキストくるくるライブラリ - pandajustice.jp ソースを読めば以外と簡単。 もうちょっと簡潔＆仕様追加してAS3に移植してみました。 package { import flash.display.DisplayObjectContainer; import flash.text.TextField; import flash.events.Event; public class RandomText { private var sourceTxt:String = "_/-=+%&$#!?ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890

PNGとは？ 画像にはビットマップ、JPEG、GIF、PNGとフォーマットがいくつかあります。 その中でPNGはJPEG、GIFに代わってウェブ上で使われる事を目的として開発された画像フォーマットです。 PNGはかつてGIFで特許問題が起こった際に、GIF形式のフリーな代替フォーマットとして開発されました。 その為GIFによく似てます。 以下にJPEG、GIF、PNGを特徴分けにしてみました。 写真や、写真的なグラデの多い画像の圧縮はJPEGに分があります。PNGだとファイル容量がおおきくなりがち。 GIFとPNGは似ているがPNGはアニメーションが出来ない。 GIF、PNG共に透過画像をつくる事が出来るが、PNGのみアルファチャンネルをつかって半透明の画像をつくる事が出来る。 PNGを上手に使うと文字以外の部分が綺麗に透過しているロゴ画像や、半透明で背景をすかしたコンテンツ背景など

CSS ファイル内に Color Glossary を記述しておくってのは、複数人で CSS を管理する際はもちろん、自分にとっても明快なんで、とても良いアイデアだと思う。 Garrett Dimon / CSS Maintenance Tip: Use a Color Glossary Glossary をもとに CSS ファイル内を検索・置換で色の変更なんかも簡単にできるし、メンテナンス性が高まるのは言うまでもない。こういった記述は、自分（またはグループ）が分かりやすいように関連づけて明記しておくのが良いと思う。例えば、ヘッダの色とか、見出しの色とかのパーツ単位でも構わないんじゃないかと。 んでもって、ウチの場合はちょっと拡張して、CSS 内に下記のようにカラーネーム、Hex 値と RGB 値の記述をしている。 /*================ColorScheme========

ブラウザ間のアレなんだから、あんまり CSS 書くこと自体を面倒くさいことにしないほうがいいよね、って思うんだ。 ところで自分が CSS を書くときに気をつけていることを書くよ！ 必ずルールをインデントする (TAB インデント) セレクタを複数書く場合は最後以外改行する 規則のあとには必ずセミコロンを入れる (最後も) 最後のルールのあとも改行する 宣言ブロック間はホワイトラインを入れる border, border-style, border-color, border-width 以外の border 系プロパティを極力使わない font プロパティを使わない。 list-style 以外の list 系プロパティを極力使わない margin, padding 以外の margin, padding 系プロパティを極力使わない background 以外の background 系プ

2006-07-11T19:56:28+09:00 会社ではやっているのだけれど、自分のウェブサイトでもやってみよう。と簡略記述を利用する場合の値の順序やらもまとめとく必要があるのかもしれないけれど、セットフォーマットルールやプロパティの順番だけをサクッとまとめて資料にしてみました。課題は残したもののこれだけでも相当すっきり。詳細やセットフォーマットルールに関しては、ダウンロードできるようにしている資料を参考にしていただくとして、このエントリーではプロパティの順序についてまとめることに。自分自身が実際に作業を進めていくことを考慮し、その考えに基づいて設定したモデル別の順序は以下の通り。 生成 内容, 自動番号付け及びリスト (Generated content, Automatic numbering, and Lists) 利用者インターフェイス (User Interface) ビジュ

実践 Web Standards Design が電子書籍になりました 概要 拙著「実践 Web Standards Design」通称ホップ本の電子書籍版が改訂新版として10月3日に発売になりました。 公開日 2011-10-03T19:31:53+09:00 URI https://www.lucky-bag.com/archives/2011/10/wsd-epub.html カテゴリ Misc タグ Book CSS HTML XHTML NAVER Japanにジョインしました 概要 10月1日付けでネイバージャパン株式会社に入社してましたというご報告です。 公開日 2009-11-01T17:56:23+09:00 URI https://www.lucky-bag.com/archives/2009/11/joined-with-naver.html カテゴリ Misc タグ

wg:Maintainable CSS CSS を維持・管理していく上で、保守性の高い CSS を作成するにはどういったことを意識して作成するだろうか。上記サイトでは個人的な好みと前置きし、いくつかアイデアを述べている。コメント欄なんかでもちょっと盛り上がってて、激しく同意できる部分もあったりそりゃ違うなとか思ったりと、色々と考えさせられた。 CSS を作成する際に自分が考えること 自分でも改めてまとめてみると何か新しい事が見えてくるかもしれないし、コメントで何かヒントやアイデアを教えてくれる人も居るかもしれないなぁとか思ったんで、ちょっとまとめてみた（上記サイトと被ってるのが多いけど）。 CSS ファイルの肥大化を抑えるよう、作成中にボツになったスタイルは必ず削除しておく。頻繁にスタイルを変えるような場合は、指定する必要のないスタイルが残っていないかチェックする。 どれだけ些細な事でも、

CSS の可読性を高めるためのアイデアってのは人それぞれ色々とあるんだろうけど、最近つらつらとその辺のアーティクルを見て廻った中で特に取り入れてみようかなと思わされたのが、入れ子の状態をブロック単位でインデントして分かりやすくしておくって方法かなぁ。例えば、下記のような感じ。 /*----ラッパー----*/ #wrapper { } /*----ヘッダー----*/ #head { } /*----ナビゲーション----*/ #nav { } #nav ul { } /*----ナビゲーション END----*/ /*----ヘッダー END----*/ /*----ラッパー END----*/ (X)HTML だけじゃなく、CSS の方でも入れ子の状態を視覚的に分かりやすくするためにインデントさせるってのは意外と思いつかなかった。そうか、ブロック単位だけじゃなくて、ブロック内での階層を

CSSで見やすくメンテナンスしやすいコードを記述するための自己流ルール 2006-05-11T02:03:32+09:00  Tag: code, CSS, guideline CSS の記述において、ある１つのセレクタに対して複数のプロパティを記述することは日常的に行われますが、プロパティを記述する順番がセレクタの種類によってバラバラになってしまいがちです。 例えば、このような感じです。 ul li { font-size: 90%; list-style-type: square; margin: 0; padding: 0; } ol li { padding: 0; margin: 0; font-size: 90%; list-style-type: decimal; } バラバラになって特に問題が起きるわけではありません（同一セレクタ内に同一プロパティが複数存在する場合は後に記

いまだに私自身「これだ ! 」という答えを見出していないのですが、 CSS の記述ルールって絶対的な正解ってありませんよね ? ちょっと私が知っている範囲で明文化されている CSS の記述ルールを集めてみましたので、それを元に絶対的な正解のルールではなく、最大公約数的なルールを模索してみたいと思います。 ちなみに、今回模索するのは Lucky bag::blog: CSS を作成する際のお約束やデフォルトスタイルの差異を無くすCSS のような Tips ではなくて、あくまで .css ファイルを書き上げる際のルールのことです。 それと、取り上げた記事は順不同です。 書き上げてから、公開日時順にした方が良かったかなあとも思いましたがもうこのままで公開。 Type selectors を XHTML Abstract Modules の順番に沿って記述 - hxxk.jp ガイドラインを作成お

使えそうなCSS3等を使ったサンプルや各種CSSリソース集をまとめてみました。 CSS3に関しては対応ブラウザはまだ主流ではないとはいえ、CSS3等も徐々に学んでいきたいですね。 Text Blocks Over Image | CSS-Tricks 画像上にかっこよく文字を合成するチュートリアル →デモページ ZURB ? Super Awesome Buttons with CSS3 and RGBA css3の機能を使ってリッチなボタンを作成するチュートリアル Carsonified ? 30 Essential CSS3 Resources CSS3を学ぶのに使えるリソース集 CSS Gradients via Canvas | Weston Ruter Canvasを使ったCSSグラデーション作成 The Definitive Guide to Using Negative Ma

Here is a chart that will help you find the conversion of pt,px,ems and %. The chart is good for an approximation, font size can change based on font, and operating system. Points Pixels Ems Percent 6pt 8px 0.5em 50% 7pt 9px 0.55em 55% 7.5pt 10px 0.625em 62.5% 8pt 11px 0.7em 70% 9pt 12px 0.75em 75% 10pt 13px 0.8em 80% 10.5pt 14px 0.875em 87.5% 11pt 15px 0.95em 95% 12pt 16px 1em 100% 13pt 17px 1.05

PHPからOffice・Photoshop・PDF等の各種ファイルを操作するためのライブラリまとめ 2009年07月30日- PHPからOffice・Photoshop・PDF等の各種ファイルを操作するためのライブラリを過去に紹介したものを含め、まとめてみました。 PHPから別フォーマットを生成・読み出し等を扱う場合に使えると思います。 MS Office系 MS Office形式のファイルもPHPから読み書きが出来てしまいます。 PHPからWordやPowerPointのファイルを作る方法 PHPからWord、Excel、PowerPointのドキュメントを生成するサンプル PHPでDOCファイルをPDFファイルに変換する方法 PHPでWordのdocファイルやPDFをテキストとして読み取る方法 PHPでExcel2007のファイルを扱えるクラスライブラリ「PHPExcel」 PHPEx

スタイルシートのmarginで使用する「ネガティブマージン（マイナスマージン）」について理解しておくべきこと、ネガティブマージンを使用したテクニックなどをSmashing Magazineから紹介します。 The Definitive Guide to Using Negative Margins 1. ネガティブマージンの理解 2. ネガティブマージンの使い方 3. ネガティブマージンのテクニック集 4. ネガティブマージンのバグフィックス 5. 終わりに 1. ネガティブマージンの理解 スタイルシートを使用する際、必ずといっていいほどマージンを使用するでしょう。しかし、ネガティブマージンになると意見は分かれ、それは悪魔の仕事であると考える人たちもいます。 ネガティブマージンをは、例えばこういうのです。

PHPからOffice・Photoshop・PDF等の各種ファイルを操作するためのライブラ... 次の記事 ≫：アプリケーションを有無を言わさず終了させるAlt+F4の強力版が使える... 最近話題になった、デザインに役立つ美麗サイトデザイン集やロゴデザイン・写真集をまとめてみました。 沢山にあるのですが、参考にできそうなものばかりです。 サイトデザイン・サイトの特定部分のデザイン集 15 Creative WordPress Header Designs | Web Design Tutorials | Creating a Website | Learn Adobe Flash, Photoshop and Dreamweaver クリエイティブなWordPressのヘッダーデザイン集。どれもインパクト大なものばかり 25 Inspiring Examples of Sign-Up P