[CSS]テキストボックスで表示しきれないテキストを表示するスタイルシート続きがあることをイメージで明示 最初のデモでは「text-overflow:ellipsis」が使用されており、省略されていることを示すために三つの点が表示されます。 ※キャプチャはFxのため非対応 二番目のデモはその代わりにイメージを使用し、省略されているものが無い場合はそのイメージは表示されません。 対応ブラウザは、IE6/7/8, Fx, Op, Safari(PC), Chromeとのことで、現在主流のブラウザのほとんどで動作します。
CSSの@importを動的に1ファイルにまとめて圧縮するPHPのクラス「CSS_DynamicCompressor」 - Rewish
CSSを小分けにして@importで読み込んで管理している方も多いかと思いますが、これではHTTPリクエストがファイルの数だけ発生して、パフォーマンス的に良くありません。 Googleがページの表示速度を検索結果に反映するとか言い出したりもしているので、これはもうリクエスト数を減らすしか無いですね！ でも手動でファイルを一つ一つ連結するのはとても面倒です！と言うわけで、そんな面倒な作業を自動でやってくれるPHPのクラスを書いてみました。 ライブラリについて @importで複数のファイルを読み込んでいるCSSを、動的に解析し、連結・圧縮を行います。また、表示する際にLast-ModifiedやExpiresなどのHTTPヘッダーを送出したり、gzip圧縮を行うなど、リクエストを出来るだけ軽減できるようにしています。 ダウンロード CSS_DynamicCompressor ライセンス MI
MdN Design｜総合情報サイト
ウインドウ幅やサイト全体の横幅に合わせて、複数のカラムやボックスをきれいに並べたい場合の方法はいくつか考えられるだろう。そのひとつとして「SOHTANAKA」の「Smart Columns w/CSS&jQuery」（www.sohtanaka.com/web-design/smart-columns-w-css-jquery/）【1】を紹介しよう。 【1】「Smart Columns w/CSS&jQuery」。ほかにも参考になるtipsが紹介されている この方法ではfloatで横並びさせたそれぞれのカラムの横幅をJavaScriptで変更することにより、カラム同士を等間隔に並べられるようにするものだ【2】。 【2】各カラムが等間隔に並んでいる HTML【3】、CSS【4】、JavaScript【5】を用意しよう。ここではjQueryは「jquery-latest.js」（code.jq
【CSS】CSSレイアウト時のIE6対策まとめ | バシャログ。
Adobe の CS5 はなんか凄そうですね。「でもお高いんでしょ？」「ハイ、とても！」 いま会社で使っているアプリは「Macromedia」の Dreamweaver8 と Fireworks8 です。結構バリバリ制作作業していますが、別に不便に感じてないしなー、と思っている sakai です。自宅では Dreamweaver4 と Fireworks4 です。エヘン。 世間では HTML5 や CSS3 の話題も増えてきた今日この頃ですが、実務では相変わらず IE6 との格闘が続いています。 ただ、長年さんざん IE6 対策に取り組んできたこともあり、今ではそれほど IE6 を意識してコーディングすることもなくなりました。 今回は IE6 をターゲットに含めた CSS レイアウトで気をつけたい点をまとめました。 基本ですが、おさらいまで。 大前提 大前提として、IE6 は標準準拠モード
海外サイトにおけるタイトルと本文のフォントの使い方 – creamu
96636636/ iStockphoto/ Thinkstock CSSでのフォント指定を工夫したい。 そんなときに参考になるのが、『Five Minute Upgrade – Variety in Title and Body Fonts』。海外サイトにおけるタイトルと本文のフォントの使い方です。 タイトルにセリフ体、本文にサンセリフ体を使用した例（例えば、タイトルにGeorgia、本文にArial）や、タイトルと本文どちらもサンセリフ体を使った例（Smashing Magazineでは、タイトルにHelvetica、本文にVerdana）が紹介されています。 欧文書体でよく使われているフォントがわかるかと思うので、一度見てみてください。 和文書体でいうと、明朝体とゴシック体を組み合わせたり、ゴシック体で統一したりと、参考にできそうですね。 Five Minute Upgrade –
:visited の挙動が変更に。制作への影響は？ | Web標準Blog | ミツエーリンクス
次期バージョンのFirefoxのプレビュー版 “Mozilla Developer Preview” ですが、新しいアルファ版が公開されました (プレビュー版ですので、常用のものではありません)。 このアルファ版には、先日より各所で取り上げられている、CSSの:visited擬似クラスに関する大きな修正が現在Firefoxで行われています。詳しくは、次のページをお読みください。 CSS によるブラウザ履歴の漏えいを防ぐ取り組み (原文: “Plugging the CSS History Leak”) CSS の :visited に行われるプライバシー対策 (原文: “privacy-related changes coming to CSS :visited”) (二つ目の記事について、翻訳をMozilla Developers Streetに寄稿させていただきました。) :visit
[CSS]サイズがばらばらで無指定の画像を一定サイズで表示するスタイルシート
画像を大量に配置するECサイトなどに便利そうな、スタイルシートのテクニックをCSSplayから紹介します。 CSS play - F.a.S.T - Fit and Shrink Technique デモ サイズはばらばらで、しかもサイズの指定をおこなっていない画像を一定の幅と高さのボックスにアスペクト比を維持したまま真ん中に表示します。 上記のキャプチャはスケールを変えているので、ぜひ元サイトのデモをご確認ください。 対応ブラウザはIE7/8, Fx, Op, Safari(PC), Chromeなど主要なブラウザのほとんどで動作します。 IE6では画像の元サイズで表示されてしまい、しかもボックスの真ん中には表示されない、とのことです。
ドロップダウンするcssメニューいろいろ - かちびと.net
サイトによっては必要ないかも 知れませんが、メニュー項目が 増えてくるとゴチャ付くので、 ドロップダウンするようにして 隠しておくと見やすくなりますね。 チュートリアルやジェネレーター、フレームワークなど。多すぎるので絞っています。 CSS Navigation Techniques 様々なタイプのメニューのサンプルの中にドロップダウンがいくつか。 CSS Navigation Techniques CSS Drive / Multiple Levels サンプルいっぱい。 CSS Drive / Multiple Levels Free CSS Drop-Down Menu Framework GPLライセンスで配布されるcssドロップダウンメニューのフレームワーク集です。かなり使えます。 Free CSS Drop-Down Menu Framework 38 jQuery And C
CSSUtilities登場、Firebugよりも詳しいCSSインスペクタ | エンタープライズ | マイコミジャーナル
CSSUtilities is a JavaScript library that provides unique and indispensible methods for querying CSS style sheets! 4日(米国時間)、興味深いJavaScriptライブラリCSSUtilitiesが公開された。CSSUtilitiesはCSSに対してクエリを発行するタイプのJavaScriptライブラリ。ダイナミックにCSSを変更する場合に使えるのみならず、WebサイトやWebページの制作段階においてFirebugよりも詳細なCSSデータを取得して分析する場合などに利用できる。CSSUtilitiesの興味深い機能は次のとおり。 CSSUtilitiesの主な機能 CSS1、CSS2.1、CSS3、HTML、XHTML、XMLをサポート Firefox、Opera、Webkit
Mozilla、「CSS による Web ブラウズ履歴漏えい」をブロックする方向へ | スラド セキュリティ
「JavaScriptを使わずにWebブラウザの閲覧履歴を盗む」や「楽天・ドリコムの行動ターゲッティング広告、HTML/CSS仕様の不備を突いて訪問先サイトを調査」などで過去話題に上った「HTML/CSS仕様の不備」について、Mozilla が対策を行う方針で検討を進めるようだ (Mozilla Japan ブログ記事、Mozilla Security Blog の記事、Mozilla Developer Street (modest) の記事) 。 問題となっている「HTML/CSS仕様の不備」というのは、「すでに訪問済みのリンクを別の色で表示する」というもの。これは長らく使われてきた仕様であり、ユーザビリティの向上にも役立っている。しかし、たとえばページ内に大量の隠しリンクを埋め込み JavaScript でその表示状態をチェックする、といった手法を用いることで、URL に対し訪問の有
次期Firefoxでは:visited疑似クラスのスタイルが制限される | 水無月ばけらのえび日記
公開: 2010年4月3日16時50分頃 「visited疑似クラスのビーコンを拾うサービスが登場」という話がありましたが、Firefoxでの対応方針が決まったようで……「CSS によるブラウザ履歴の漏えいを防ぐ取り組み - Mozilla Developer Street (modest) (dev.mozilla.jp)」。 具体的には、訪問済みリンクは、文字、背景、アウトライン、ボーダー、SVG の線と塗りといった、配色のみ変えられるようにします。 (～中略～) 次に、Gecko レンダリングエンジンの実装にいくつかの変更を加え、訪問済みと未訪問リンクの表示にかかる時間の違いを最小限にするため、処理プロセスを均一化します。 (～中略～) Web ページがリンク (とその子孫要素) の算出スタイルを取得しようとすると、Firefox は未訪問リンクのスタイル定義を返すようになります。
MdN Design｜総合情報サイト
第16回（最終回） 最新のデザイン表現を適用する ここまで紹介してきたCSSのレイアウトや装飾テクニックは、現在利用者の多いInternet Explorer 7や8、Safari、FirefoxなどのWebブラウザでほぼ問題なく動作するものでした。本連載の最終回は、未来に向けた準備として現在策定中の「CSS 3」の中からモダンブラウザで既に適用可能なスタイルをいくつか紹介します。 （公開日：2010年4月16日 解説：こもりまさあき） 現在策定中のCSS 3について CSSで指定したスタイル指示は、WebブラウザのCSSサポートの度合いによって適用できるかどうかが異なります。例えば、今現在の主流であるブラウザの多くではCSSレベル2（CSS 2）をサポートしているものがほとんどです（特定のプロパティだけ未サポートも含め）。その一方、現在CSSの次のバージョンにあたるCSSレベル3（CSS
無駄なdiv要素やclassだらけのマークアップから卒業する方法
グリッドベースのレイアウトを作成すると、ついついdiv要素を多用してしまいがちですが、意味のあるデータにはそれに適した要素を使用し、無駄なdiv要素やclassだらけのマークアップから卒業する方法をWebdesigner Depotから紹介します。 Fight Div-itis and Class-itis With the 960 Grid System 下記は各ポイントを意訳したものです。 はじめに CSSのフレームワーク：960.gsの場合 classの乱用を避ける リスト要素の使用 画像とキャプションの使用 複数の見出しとパラグラフの使用 子要素のclassは親要素に はじめに 数年前までウェブページの設計はテーブルがスタンダードでした。そしてCSSはそれを大きく変え、今日ではCSSのフレームワークがウェブページの設計を容易にしてくれています。 しかしながら、このCSSのフレームワ
[CSS]スクリプト無しで、現在位置を表示するナビゲーション
Professional - Dropline with current page override - centered デモ デモでは、現在のページは「Service - Repair」に設定されています。 ナビゲーションのトップレベル・セカンドレベルをマウスでホバーすると、それぞれの箇所がハイライトし、フォーカスをはずすと「Service - Repair」にハイライトが戻ります。 現在のセクションを表示するために、HTMLには二つのclass（「current」「current_sub」を使用しています。 HTML ※該当箇所のみ抜粋。 <textarea name="code" class="html" cols="60" rows="5"> <li class="current">SERVICES <ul> <li><a href="#url">Printing</a></li
CSSビギナーに気をつけてほしい5つのポイント | コリス
スタイルシートは、複数の人間が携わる場合は当然のことながら、自分一人の場合でも長期にわたり携わることがあるので、分かりやすくクリーンなものにしておきたいものです。 スタイルシートを適切に使用し、そして管理しやすくする5つのポイントをSoh Tanakaから紹介します。 CSS Beginners Do's and Dont's Part 2 下記は各ポイントを意訳したものです。 1. classとidは適切に使用する ビギナーは新しいclassをどんどん作成してしまう傾向があります。冗長なものや不必要なclassやidはCSS本来の目的からはずれるものです。 CSSの美しさはデザインをマークアップから切り離すことにあり、それを許すということです。またclassやidを最小限にすることで負荷を減らすことにも繋がります。 Bad p要素それぞれに全て個別のclassを使用しています。 <tex
YOUもCSSプロパティ覚えてJavaScript楽しんじゃいなよ - 三等兵
YOUもJSやっちゃいなよー！ジースジュニア(ジースJr.)に入っちゃいなよー！ええ？どんな活動をするかって？そりゃ決まってるよー、歌をうたったりダンスしながらJavaScriptのコーディングするんだよーアーハー！ さあ今日からキミもジースジュニアの一員だよー！やっぱりダイナミックが売りだからね！最新最先端技術（笑）のDHTMLやるよー！ダサイHTMLじゃないよー！死語じゃないよー！最低限これ覚えておくとジースジュニアとしてダイナミックに活躍できるプロパティ覚えたらどうかなーウーハー！ プロパティはここから選ばさせてもらってるZE☆ http://css-happylifezero.com/property/ ダイナミックに使いがちなCSSプロパティ の前にちょっと注意。moonshellというの使ってみました。横▲んとこ押すと実行されます。あとちょっと読み込みに時間かかるかもしれません
Webにおけるフォントと2004JISなどの諸問題について考えてみた（2010春）。 - 遠近法ノート
細かい話をすると膨大になる（というか自分の手に余る）ので、簡潔に書きます。 とりあえず今後のWeb制作の参考になればと。 結論：font-familyで和文フォント名を指定するのは、もうやめる。 そのかわりに、 font:menu;と書けば、OSのシステムフォント（menu以外にも、icon、message-box、caption、status-barがある）を指定できる。 Mac OS Xの諸問題。 ●OS X（10.5以降）のヒラギノは2系統あることに注意。 ●ブラウザで見るフォントは今でも2004JIS（の字形）になっていない。混在している。なぜか？ ●各サイトのCSSでヒラギノPro（ProNではなく）を指定している。 ●ブラウザのデフォルトにヒラギノPro（ProNではなく）が選択されている場合がある。 ●とあるテキストエディタのデフォルトもヒラギノProだったりorz ●Pro
CSSでマルチカラムレイアウト
はじめに 本連載では、「クロスブラウザに対応したデザインテクニック」をテーマに、保守性や互換性に優れたXHTML+CSSの書き方を紹介していきます。 今回は、本連載の総まとめとして、CSSでマルチカラムレイアウト（段組レイアウト）を実現する方法を紹介します。CSSでマルチカラムレイアウトを実現する方法はいろいろありますが、今回は、最も基本的な方法として、前回の記事で解説した「floatプロパティ」および「positionプロパティ」を利用した、「フロート型」と「ポジショニング型」のレイアウトテクニックを紹介します。同時にページレイアウトで起こりがちな問題とその対処方法についても扱います。 対象読者 XHTMLとCSSの基本を理解している方。 Web標準サイトの実践的な作り方に興味のある方。 必要な環境 （X）HTMLやCSSを記述するエディタと、それを確認するブラウザがあれば、特別な環境は
手軽にWebを彩るCSSコーディングテクニック50 - 海外デザイン事情第7回 - MdN Design Interactive
第7回「手軽にWebを彩るCSSコーディングテクニック50」 2010年03月15日 基本的なCSSを使ったWeb制作はそれほど難しくないが、より高いレベルのデザインを実現しようとすると、難易度はグッと上昇する。そんなときは、世界中のデザイナーやデベロッパーが提供しているCSSテクニックを使ってみるとよいだろう。ここでは、世界各国のデザイナーやデベロッパーが紹介している、ビジュアル表現やレイアウトなどを中心としたCSSのコーディングテクニックを紹介していこう。 翻訳元サイト：Smashing Magazine http://www.smashingmagazine.com/ 原文：50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms) http://www.smashingmagazine.com/2010/0
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[CSS]Firefox 3.0/3.5のCSSのバグ情報のまとめ