GoogleがWebフォントサービスを開始 - フォントブログ
Webフォントが一般に広まった全盛期には国内外含め様々なWebフォント配信サービスが登場しましたが、まさに戦国時代そのもので、数年後には多くのサービスが終了となってしまいました。 2023年現在、利用されているWebフォントサービスをまとめてみました。 Google Fonts 完全無料で誰でも利用可能ということもあり、現在一番利用されているGoogle Fonts。定番のNoto Sans以外にも、ZEN 角ゴシックやBIZ UDゴシックなど、プロ仕様の日本語フォントも使えます。デスクトップ用のフォントもダウンロード可。 Adobe Fonts Adobe Creative Cloud契約者なら誰でも使えるAdobeのフォントサービス。かつてはTypekitの名でサービス展開されていました。完全に日本語化され昔に比べるととても使いやすくなりました。デスクトップ用のフォントもダウンロード可
リデザインとborder-radiusとtext-shadow
でっかいロゴに飽きてきてヘッダをコンパクトにしたくなったので、少し前からサイトのスタイルを色々いじっていた。ナビと検索フォームとロゴを一段に並べるのはかなり難しかったので、ロゴをアイコンにして無理やり詰め込むことにした。border-radiusまくり。緑の流行はまだまだ続くらしいので色はこのままで。次はオレンジだな(適当)。 ヘッダ ロゴ・アイコンとナビをfloat: left;、検索フォームとTwitterとフィードのアイコンをfloat: right;。それぞれにborder-radiusを使って少し丸みをつけて、丸いロゴ・アイコンと並べてもあまり違和感が無いようにした。アクティブなナビはtext-shadowでエンボスっぽくしてみたんだけど、背景色の明るさがアレでうまくへこんでいるように見えない……。 最初、display: table-cell;で検索フォームの横幅をうまいこと可
安全な@font-faceの書き方(抄訳)
Internet Explorerではかなり昔からあった埋め込みフォント(@font-faceによるフォントの参照)の機能は、Safari 3とFirefox 3.5で有効になったことから急速に話題になることが増えた。ようやく時代がMicrosoftに追いついてきた感じですね。その書き方は大筋では一緒なのだが、細かな仕様の違い、というかIEがEmbedded OpenTypeしかサポートしていないことから工夫が必要になる。その工夫をBulletproof、つまり将来にわたって安全であろうという観点で短くまとめたBulletproof @font-face syntaxというすごく参考になったエントリがあったので訳しておく。語調などは超訳なので、原文とニュアンスが変わっているかもしれない。 安全な@font-faceの書き方 以下は訳注と私見。 条件付コメント 面倒くさいというのはわからなく
CSSに関する記事 - builder by ZDNet Japan
CSS 3におけるテキストの自動改行と禁則処理の定義 マイクロソフトはIE8「Lite」を作るべきか？ 今回は、前回に続いて自動改行の設定を行うword-breakプロパティと、禁則処理の設定を行うlin... 2008/09/26 21:17:01 -ms- -ms-line-break -ms-word-break CSS CSS 3 2人 Firefox3がtransformをサポート といっても少し、まだ先の話だ。ただし、確実にtransformをFirefox3はサポートする。ただ、そ... 2008/09/23 11:19:52 -moz Apple CSS CSS 3 Chrome 4人
文字にドロップシャドウの効果をつける--FirefoxとSafariのCSS対応 - builder by ZDNet Japan
text-shadowプロパティを利用すると、文字に影をつけて表示することができる。これまではSafariが対応しているだけだったが、Firefox 3.1（アルファ版）とOpera 9.5が対応した。 また、Firefox 3.1（アルファ版）は本連載の「ボックスにドロップシャドウの効果をつける」で紹介したbox-shadowプロパティにも対応したので、それについても紹介したい。 文字に影をつけて表示する text-shadowはCSS 2で定義されたプロパティだが、CSS 2.1では削除され、CSS 3のTextで復活している。 text-shadowプロパティで文字に影をつけて表示するには、次のような形で4つの値を指定する。 text-shadow: ［横方向のオフセット］ ［縦方向のオフセット］ ［ぼかしの半径］ ［影の色］ たとえば、赤色の文字にグレーの影をつけると次のように表示
CSSバグリスト＠CSSバグ辞典スレッド
『CSSバグ辞典スレッド』の要約 ここは、2ちゃんねるweb制作管理板内のCSS/DHTMLのバグを扱うスレッドで挙げられた、各ユーザエージェントのCSSやDHTMLの実装上のバグをまとめているサイトです。 更新履歴 WinIE171, 172、NN031、Opera091を追加。WinIE151を修正。（2004-11-29） WinIE169, 170、Moz085を追加。WinIE030, 039、Moz070、Opera048を修正。（2004-10-09） NN029, NN030、Moz084を追加。Moz033を修正。（2004-08-23） WinIE168、Moz082, 083を追加。WinIE022, 166を修正。（2004-08-08） Moz081、Opera090、Safari022, 023を追加。（2004-07-26） 以前の履歴 本拠地スレッド CSS
CSSレイアウトの定石 WinIE6バグ回避法
CSSを使ったレイアウトをする際にWinIE6のバグを回避するための「定石」をまとめておきます。 とくに重要だと思うものは強調してあります。参考としてバグ辞典へのリンクも用意しました（つまり回避法を用いない場合にどんなバグが発現するか）。 フォントサイズ関係 font-sizeは%かpxで指定する。 キーワードで文字サイズを指定すると標準モードと互換モードで文字サイズが変わる(IE6) em単位で指定した値が文字サイズ変更後に正しく反映されない(IE6) ボックスモデル関係 widthと同時に左右borderや左右paddingを指定しない。heightと同時に上下borderや上下paddingを指定しない。 ボックスの幅や高さを算出するときにパディングやボーダーのサイズを含めてしまう （ブロックレベル要素を内包するボックスにはpaddingを指定しない。） 左右ボーダーとパディングを設
CSS Sprite Generator, Editor, and Code
What are CSS Sprites CSS sprites are a way to reduce the number of HTTP requests made for image resources referenced by your site. Images are combined into one larger image at defined X and Y coorindates. Having assigned this generated image to relevant page elements the background-position CSS property can then be used to shift the visible area to the required component image. This technique can
最新Webブラウザ、Web標準への対応度は？ | OSDN Magazine
2008年になり、主要なWebブラウザのバージョンアップが相次いで行われている。これらのバージョンアップでは、Webブラウザ自体の機能強化が行われているほか、レンダリングエンジンについても積極的に改良が行われ、新たな機能が取り込まれている。そこで本記事では、最新Webブラウザが搭載しているレンダリングエンジンについて、それぞれが備えている機能やWeb標準規格への対応状況について比較していく。 2008年8月末、Internet Explorer（IE）8のベータ2がリリースされた。IE8ではパフォーマンスの向上や、多数の新機能が追加されており、正式版リリースへの期待も高まっているのではないだろうか。しかし、大規模な改良が加えられているWebブラウザはIEだけではない。今年6月にはFirefoxの新版であるFirefox 3がリリースされているほか、同じく6月に公開されたOpera 9.5や
Firefox 3が対応したdisplayプロパティの値（1） - builder by ZDNet Japan
Firefox 3は、displayプロパティの値である「inline-block」と「inline-table」に対応した。これで、CSS 2.1で定義されたdisplayプロパティの値に一通り対応したことになる。そこで今回は、displayプロパティの基本と「inline-block」について紹介していきたい。また、SafariやOpera、Internet Explorerの対応状況も紹介する。 displayプロパティと基本的なボックスの種類 displayはボックスの種類を指定するプロパティだ。まずは、基本的なボックスの種類を再確認しておこう。 HTML/XHTMLではタグでマークアップした部分が四角形のボックスとして扱われる。ボックスにはいくつかの種類があり、タグごとに標準でどのボックスになるかが定義されている。 基本となるボックスの種類は「block（ブロック）」と「inli
Firefox 3が対応したdisplayプロパティの値（2） - builder by ZDNet Japan
今回はinline-blockボックスを利用して段組みのレイアウトと横組みのメニューを作成してみたい。なお、displayプロパティやinline-blockボックスについては、前回の記事を参照して欲しい。 inline-blockボックスを利用した段組みのレイアウト 「display: inline-block」と指定すると、HTML/XHTMLタグでマークアップした部分をinline-blockボックスで表示することができる。inline-blockボックスを利用すれば、floatやpositionプロパティを利用せずに段組みのレイアウトを作ることが可能だ。 段組みのレイアウトは、一般的には で構成したblockボックスを横に並べて作成する。しかし、blockボックスはそのままでは横に並べて表示することができないので、floatプロパティで回り込みを指定したり、positionプロパテ
Firefox 3が対応するwidthプロパティの新しい値 - builder by ZDNet Japan
アプリケーションモダナイズ 求められている背景にあるビジネスの今 そして、成功の鍵を握るDevOpsの真の意味 エンドポイントセキュリティの転機 情報セキュリティ戦略が問われる今 重要インフラ事業者としてANAが考えること 単純なインフラ製品の販売ではない DX、コンテナプラットフォームの実証など 自社の取り組みで得られた知見を顧客に提案 対談：クラウド時代のネットワーク DX推進の要であるクラウド活用 レガシーなネットワークがボトルネックに 現場業務のデジタル化を促進 リモートワークが生んだ課題をアプリで解消 ベネッセのデジタル変革を紹介 次の一手はこれだ！ ZDNet×マイクロソフトが贈る特別企画 今、必要な戦略的セキュリティとガバナンス みんなが使うMySQLの企業活用 なぜ有償サポートがあったほうが良いのか？ 有名テクノロジー企業もOracleに頼む理由 コンテナをエンプラITに！
ルビ表示はユーザスタイルシートで! - 徒書
なんだか最近になってMozillaでルビ表示3の記事(個別ページ)がブックマークされているなと思っていたのですが、404 Blog Not Found:css - ルビもCSSでで紹介されていたからのようでした。 それにしてもその紹介記事のブックマーク数が200以上ってすごいな。やはりウェブでは作った人よりも紹介した人の方が注目される、ということなのでしょうか。それはいいとしても、トラックバックで「プログラマーの小飼弾氏のアイデアと技術には……」と書かれているのを見てしまうと釈然としないものを感じてもいいでしょうか。(←誤った疑問文) それはそれとして、404 Blog Not Foundではルビ表示用のスタイル定義をサイト用のCSSに組み込んでいますが、これはあまりよくありません。あのスタイル定義は(2001年当時のMozilla用に作った、)あくまで擬似的な表示を行うスタイルです。製作
IE、Firefox、Safari、OperaのCSSに関する互換性 - builder by ZDNet Japan
今を知り、未来を見据える 培ってきたノウハウを最新技術へ対応させる レガシーシステムのモダン化実現への道 ビジネスのためのデータ基盤構築 DX時代の企業成長はデータ活用が鍵 新たな展開を後押しするSQL Server活用 VMware modern App Days特設企画 VMware Tanzuによって拓かれる未来 これからアプリケーション戦略の道しるべ オラクルスペシャリストが語る！ 多くの企業で利用されるオラクルDBの課題 アセスメントの重要性とコスト最適化 DX推進を阻害する3つの要因 プロフェッショナルが語る データ分析・データ活用の実現 激変するビジネス環境の中でのDX モダンアプリケーション戦略への取り組みが 市場の競争力の源泉となる 内閣官房やラックが登壇 ゼロトラストが官民一体で サイバーセキュリティを定義する クラウドネイティブの実現 モダンインフラの構築・運用の課題
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Yahoo! UI Library
http://www.project-h2.com/yattemotors/css_test/note_css00.html
unmht.org
サービス終了のお知らせ