フリーのCSS編集に使えるエディタ色々:phpspot開発日誌
7 Free CSS Editors, Which Is the Best? You Choose. : Speckyboy - Web Design, Web Development and Graphic Design Resources フリーのCSS編集に使えるエディタ色々。 エディタは秀丸やDreamWeaverでOKという方も一度試してみるとよさそう。 Simple CSS - Mac OS X, Windows に対応しているシンプルなCSSエディタ。GUI感覚でCSS記述できる A Style CSS Editor - HTML構造をツリー表示できるのが嬉しいかも。 CSSED - “A GTK-2 CSS Editor” - キーワード保管やブロック折りたたみ機能、など高機能 ELEDO - Eledicss - ブラウザベースの編集ツール。直でいじれるので便利。セキュリ
複数カラムの高さをそろえるクロスブラウザなCSS – creamu
複数のdivの高さをそろえたい。 そんなときにおすすめなのが、『Equal Height Columns with Cross-Browser CSS & No Hacks』。複数カラムの高さをそろえるクロスブラウザなCSSだ。 このエントリーでは、↑のようにdivの内容によって高さが違ってしまう場合に、高さをそろえるテクニックが紹介されている。 The method shown here is 100% CSS hack-free, image-free and JavaScript-free so it can even be used on the most strictly coded websites とあるように、CSSハックや画像やJavaScriptは使用していないとのことだ。 2カラムから5カラムのデモページが用意されている。 複数カラムの高さをそろえるクロスブラウザなC
8 CSS Techniques for Charting Data
President of WebFX. Bill has over 25 years of experience in the Internet marketing industry specializing in SEO, UX, information architecture, marketing automation and more. William’s background in scientific computing and education from Shippensburg and MIT provided the foundation for MarketingCloudFX and other key research and development projects at WebFX. There are many ways you can present nu
ウノウラボ Unoh Labs: CSSを書くときに使っているツールの紹介
yamaokaです。 今回は、ぼくが普段CSSを書くときに使っているツールを紹介します。 Firebug 入手先: Firebug :: Firefox Add-ons Firebug posted by (C)フォト蔵 もはやJavaScriptの開発には欠かせなくなった感のあるFirebugですが、CSSを書くのにも使えます。 ボックス要素を調査（inspect）、CSSを書き換えてレイアウトを考える参考にしたり、 HTMLを書き換えてid属性やclass属性を書き換えて適用するスタイルを変更した場合の変化を試してみたりします。 IE Develper Toolbar 入手先: Download details: Internet Explorer Developer Toolbar IE Developer Toolbar posted by (C)フォト蔵 前述のFirebugと同
ブロックレベル要素をセンタリングする方法 - Web標準普及プロジェクト
ブロックレベル要素をセンタリングする方法 一昔まえはcenter要素やdiv要素にalign属性を付けてセンタリングするという手法が当たり前でした。 しかし、最近では見た目はHTMLではなく、CSSで指定するべきである、と言われだし、 現にcenter要素はHTML4.01 Strictや、最新のXHTMLでは使用できません(HTML4.01的には非推奨)。 そこでCSSによる正しいセンタリングの仕方をここで解説します。 正しいセンタリング方法 テーブルやdiv要素のようなブロックレベル要素をセンタリングするにはtext-alignは使いません。 text-alignプロパティはインライン要素の位置揃えを指定するためのものだからです。 Bugzilla-jpにも報告された多くのサイトでは"text-align:center;"を使ってセンタリングしようとしていましたが、 これによってブロッ
"display: block"なリンク - CSS Dencitie
よく、左そでにコンテンツの一覧を並べます。当サイトも例外ではありません。 当サイトはCSSを用いているのみであり、JavaScript等は用いておりません。しかし、ソースから見えるのは普通の ul と li 、それと a のみです。 このページでは、そのカラクリを簡単に紹介致します。完成型は以下の図のとおりです。 勉強する気のない人は、適当にコピーしてちゃっちゃと出ましょう。 メリット デザインにメリットというのも変な話ですが、幾つかあります。 まず、CSSそのものの利点ですが、プレーンでストリクトなHTML宜しく、ul、liとaのみですので、ソースがとても簡潔で、編集がとても楽だという点が上げられます。 また、お気付きの方もいらっしゃるでしょうが、行全体が選択範囲となっており、幾分アクセスしやすくなっております。 作ってみよう では、実際に一から作ってみましょう。 普通にHTMLを書きま
CSSでのフォント指定、それは戦い。 - Rewish
font-family: Verdana, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', osaka, 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif; 以下戦いの記録。 OSと戦う まずOSを上げるとすると、WindowsとMacintoshは当然外せない存在。他にも色々あるけれど、今回は敵を減らす為、WindowsとMacintoshおまけでLinuxをちょいす。 ブラウザと戦う 特筆すべきはSafariとMac IE5。まずSafariは、日本語を含むフォントを読み込まない為、アルファベット表記で指定する必要がある。そして、Mac IE5は第一候補で指定したフォントしか読み込まない（対象のフォントがインストールされていない場合はデフォルトフォント）。 以上をふまえた戦いの結果 Ver
[CSS]さまざまな指定方法によるフォントの見え方を比較 -メイリオ・ＭＳ Ｐゴシック・ヒラギノ角ゴシック | コリス
スタイルシートを使用してフォントサイズの指定を行う場合、いくつかの方法があります。 absolute size キーワードで指定、フォントサイズはUAに依存 ex.)small, medium relative size 親要素に対しての相対指定 ex.)smaller, larger length 正数で指定、使用できる単位は「in, cm, mm, pt, pc, em, ex, px」 ex.)10pt, 1em percentage 親要素に対してのパーセント(%)指定 ex.)100%, 120% この中から、キーワード、em、pt、px、パーセントで指定をし、主要フォントでどのように表示されるかを比較しました。 フォントスタイルは、上から「メイリオ」「ＭＳ Ｐゴシック」「ヒラギノ角ゴシックW3」「Osaka」の順番で、「メイリオ」はWindows Vista、「ＭＳ Ｐゴシック
CSSで使われるフォント / もうパンツはかない
チェック対象は、HTML文書内のstyle要素とstyle属性のCSSの指定と外部CSSファイルです。およそ12,000ページを調べました。あまり正確な調査にならなかったので雰囲気程度にとらえてください。 左側の数字は調べた範囲での出現数、右側がフォント名です。フォント名のうしろの印は次の通り。 Windowsの標準フォント / Macの標準フォント / Webフォント ここでは実際にそのフォントでフォント名を表示するようにしました。フォントがあればそれで表示されるはずですが、ブラウザによっては表示されないこともあります。 さて、Webフォントでは、「Roboto」「Open Sans」はGoogle制作のsans-serif系欧文フォント、「Source Code Pro」はソースコード表示のためにAdobeが作った等幅欧文フォント、「FontAwesome」はアイコンフォントです。また
CSSでブログに影をつける（ドロップシャドウ）
ブログのサイドバー部分に影（ドロップシャドウ）を作成するカスタマイズを紹介します。 ブログを閲覧されている方なら、1度はこのドロップシャドウデザインのサイトをご覧になったことがあると思います。当サイトでも以前よりこのデザインを用いてますが、最初はどのようにしたら影をつけられのかがさっぱり分からず（そのテクニックが紹介されている記事もなく）、適用されているサイトのソースやCSSを眺めて勉強した想い出があります。 最近、いくつかのブログで紹介され始めたようで、このサイトでも取り上げたいと思います。 このエントリーでは固定レイアウトでのドロップシャドウとリキッドレイアウトのドロップシャドウについて説明します。サンプルには当サイトのテンプレートを使用しますが、仕組みがお分かりになればどのテンプレートでも適用可能です。なお、ドロップシャドウ画像自体の作成方法についても別途エントリーしたいと思います。
デザイン性に優れたCSSメニュー集:phpspot開発日誌
Hidden Pixels - Ultimate CSS Menus デザイン性に優れたCSSメニュー集。 これは、と思うようなかっこいいＣＳＳメニューが特集されていました。 Professional drop-down Professional dropline Space Drop Down Menu Flyout hybrid menu Professional drop-down - shadow menu Brooke Case Drop Down Tech Radar mouseover tabs つい押したくなるようなメニューですね。 参考にクールなメニューを作ってみましょう。 関連エントリ クールなナビゲーションメニューを作成するCSS＆HTMLサンプル アニメーションするドロップダウンメニュー作成ＪＳ「Sliding JavaScript Dropdown Menu」 J
CSS のフォントサイズ指定が table に反映されない問題
CSS で px 指定のフォントサイズ等を設定している場合、IE.5.5/IE6.0 ではその子要素として記述された table（th/td）にフォントサイズが反映されないという問題があります。 この不具合を回避するには2通りの方法があります。 １．ページ先頭のXML宣言を削除する ひとつめの方法は、テンプレート1行目にあるXML宣言 <?xml version="1.0" encoding="utf-8"?> を削除します。 XML宣言が記述されているとブラウザが「後方互換モード」として動作するため、これを削除して「標準準拠モード」として動作するようにします（「後方互換モード」と「標準準拠モード」については後述）。 ２．th 要素、td 要素に直接プロパティを設定する 後方互換モードのままでも、例えば th, td { font-size: 10px; } と設定することで、プロパティの
HTML&CSS、プログラミング、データベースなどのチートシート集
Webmasters by Designのエントリーから、HTML, CSS, XML,やプログラミング、データベース、htaccess、DOCTYPE、SEOなどウェブ開発者のためのチートシートを紹介します。 The Best Developer Cheat Sheets Around HTML & CSS HTML HTML Cheat Sheet (PNG, PDF) HTML Help Sheet. Panic Over. (PDF) XHTML cheat sheet (HTML) CSS CSS Cheat Sheet (PNG, PDF) CSS Cheat Sheet (PDF) CSS Cheat Sheet (HTML) XML XML Quick Reference (PDF) XSLT Quick Reference (PDF) XML Syntax Quick R
ウェブデザイナーのための16のFirefoxのアドオン | コリス
Mashableのエントリーから、ウェブ制作に役立つ、16のFirefoxのアドオンを紹介します。 Another 16 Firefox Add-ons For Web Designers Font Finder テキストに指定されているスタイルシートを表示します。 Link Evaluator ページのリンクをチェックします。 LiveHTTPHeaders ヘッダ情報を表示します。 OperaView Operaでのレンダリング確認用に。 Pagediff 別々の2ページの差分をチェックします。 Python Sidebar for Mozilla サイドバーにPythonのリファレンスを表示します。 RankQuest SEO関連の各種情報を表示するツールバー。 SEOforFriefox GoogleやYahoo!の検索結果ページに、SEO関連の情報を表示します。 SEOQuake
CSSでイメージをオシャレに修飾するサンプル集「CSS Decorative Gallery」:phpspot開発日誌
CSS Decorative Gallery I’m using the same trick to show you how to decorate your images and photo galleries without editing the source images.CSSでイメージをオシャレに修飾するサンプル集「CSS Decorative Gallery」。 イメージにＣＳＳをあてることで、次のように、セロハンテープで貼り付けたり、画鋲でとめたりといった効果を出すことができます。 デモページはこちらでＩＥ６でも問題なく動作。 沢山種類があって、色んな場面で使えそうです。 これは久しぶりに感動しました。
指定した文字数くらいでテキストを切ってみる。
iddyがバージョンアップし、ブログパーツな感じで貼り付けれるようになりました。 参照：http://iddy.jp/blog/log/2007/03/000025.php このブログだとサイドのカテゴリの下に追加してあるプロフィールがソレです。 iddyは、ボクは開発に直接関わっている訳では無いので、1ユーザーとして使っている訳ですが、今回ブログに貼り付けるに辺り、標準で用意されているデザインでは浮いてしまい「如何にもiddy」みたいな感じがしたので、CSSが自由にいぢれるという事で色々いぢってみました。 その時に、自由入力のプロフィールの内容が多いと、ブログに貼った場合邪魔じゃん！と思い、希望した量でテキストが消えるようにしてみました。 んで、ボクが自分のサイト専用に書いたスタイルは下記。 @charset "utf-8"; /*iddy Style*/ .iddyprofile {
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
タイトル・見出しに使えるデザインまとめ - DesignWalker
http://www.stylish-style.com/csstec/base/font2.html
Travellers Tale: スタイルシートでのフォントの名前
CSSハックしない、JavaScript使わないCSSの教科書みたいなテンプレ*ホームページを作る人のネタ帳
