実用的なものから実験的なものまで、最近リリースされたものを中心にスタイルシートのテクニックを紹介します。
実用的なものから実験的なものまで、最近リリースされたものを中心にスタイルシートのテクニックを紹介します。
利用しやすいものから、利用シーンを選ぶものまで、jQueryを使って実装したナビゲーションを紹介します。
フォントのサイズの単位に何を使ってますか? px? em? それら2つのよく利用されるテクニックをおさらいし、さらに第3のテクニックも紹介します。 Font sizing with rem [ad#ad-2] 下記は各ポイントを意訳したものです。 はじめに pxを使ったサイズ指定 emを使ったサイズ指定 remを使ったサイズ指定 はじめに フォントのサイズの単位に何を使用するかは、未だに激しい議論の的となっています。それらのテクニックにはそれぞれ長所と短所があるのも現実です。 それらの中で短所が少なく、よく利用されるテクニックは2つあります。 pxを使ったサイズ指定 emを使ったサイズ指定 これら2つのテクニックを再検討し、さらにもう3つ目のテクニックを紹介します。 pxを使ったサイズ指定 ウェブの初期に、私たちはテキストのサイズを定めるために「px」を使用していました。これは一貫しており
CSS Animations Level 1 W3C Working Draft, 2 March 2023 More details about this document This version: https://www.w3.org/TR/2023/WD-css-animations-1-20230302/ Latest published version: https://www.w3.org/TR/css-animations-1/ Editor's Draft: https://drafts.csswg.org/css-animations/ Previous Versions: https://www.w3.org/TR/2018/WD-css-animations-1-20181011/ https://www.w3.org/TR/2017/WD-css-animatio
CSS Image Values and Replaced ContentモジュールのeditorであるTab Atkins Jr.の名前で、CSS WG Blogやメーリングリスト、CSS3.infoに、グラデーションの角度表記とその方向について意見を募っています。 Angles in Gradients linear-gradient()の表記 Image Valuesのlinear-gradient()では、同じグラデーションをいくつかの書き方で指定できます。 たとえば、ボタンなどに浮き上がったように見える効果を与えるため、上に薄い色、下にそれよりも濃い色を指定するケースはグラデーションの最も多いユースケースでしょう。現在の草案で、一番簡単な指定は次になります。 background-image: linear-gradient(#eee, #ccc); 角度による表記を使うと、次の
Spinning spiraling cube using CSS3 3D animation and 3D transforms. Note: Hover the black box or cube to pause the animation. Please view in Safari, iPhone or iPad. If the animation freezes while viewing in wide-screen and at the same time hovering the viewport with the mouse, simply refresh the browser to restart the animation. All images used come from WISE - Multimedia Gallery and are used in th
CSSPrefixer 面倒なブラウザごとのCSS3プレフィックスを自動で付けてくれるツール「CSSPrefixer」 プロパティごとに -moz とか -webkit を全部設定するのめんどくさい、という場合にサブミットすれば自動で付いた結果が出力されるというシンプルだけど便利なツールです。 サブミットすれば次のように -moz とか -o とか -webkit とか全部付けて出力してくれます。 これはいい。 JavaScript とかで、1個指定しとけばJS読み込むだけで全部自動やってくれる的なライブラリがあったらもっと便利な気がしますね。 jQueryとかで比較的簡単に実現できそう。 関連エントリ 便利なCSS3ツール6つ+α IEでもCSS3を使うためのツールやリソース集 HTML5/CSS3に関する便利ツールやチーとシート、リソース25
Mercury is the first planet from the Sun and is also the smallest and densest planet of the Solar System. Mercury has yet to be entirely mapped, making it the least known planet in our system. Venus is the second planet from the Sun and is often called Earth's sister due to its many similarities with the Blue Planet. However, a strong greenhouse effect gives Venus the hottest climate in the Solar
The Internet Explorer 9 Guide for Developers provides a look at the features and improvements in Internet Explorer 9. By using this guide, web developers and designers can take full advantage of these enhancements. Developers can also experience the platform in action using the Internet Explorer Test Drive. Introduction Welcome to Windows Internet Explorer 9. As a developer, you want to know the l
2017年6月29日 Web関連記事, ライフハック 2011年がスタートしましたが、「なんだか調子でないなー」という方!今年の目標はもう設定しましたか?私は毎年「新年の抱負」を考えているのですが、今年は何にしましょう?ということで、Web屋さんが設定できそうな新年の抱負案を考えてみたので、参考にしつつ新年の抱負を考えてみてはいかがでしょう? ↑私が10年以上利用している会計ソフト! 1. CSS3の勉強をする 角丸・グラデーションをはじめ、画像を使わなければできなかった効果がCSS3を使えば簡単に実装できます。デザインの幅がぐんっと広がります。IEで対応していないなどの問題もありますが、CSS3 PIEを使えばIEでも使えるようになりますよ。 CSS3リファレンス CSS3のリファレンスサイト。コードの例もわかりやすいです。 たった一行を追加するだけでIE6/7/8をCSS3対応にする
2010年もあと数日を残すのみとなりました。というわけで、2010年のWeb標準について感じたことをまとめ、来年以降の動きについて考えてみました。 HTML5と周辺技術 2010年は昨年に盛り上がった「HTML5」への注目が、さらに広がった一年であるように思えます。とはいえ、どういった機能があり、どのような展開が見込まれるのかというよい紹介が増えたこともあり、昨年にあった「XHTMLはなくなる」といったような誤解がとても少なくなったのは良かったと感じています。 さらに今年は「HTML5」と括られる技術で構成されたショーケースの登場、スマートフォンの普及もあり、実際のWebアプリケーションでの採用といった出来事が重なりました。これからの基盤技術として「使っていく」技術という認識が固まったのではないでしょうか。今後は「使うこと」にフォーカスした情報が多く出てくるのではないかと思います。 Web
Warning: This is hackier and more dirty than anything I have published in recent years, and only works in WebKit. Use with extreme caution. I’m lazy, show me the end result first! CSS Animations are great – they are a lot less pain for the normal web developer, are rendered more smoothly as the browser can control the framerate, and even become hardware accelerated. You can animate almost everythi
W3Cのインタラクション領域責任者であるフィリップ・ル=エガレ氏が、米ニュースサイトInfoWorldの記事でWebサイトをHTML5化するのは時期尚早であると述べていることが話題になっている。HTML5の仕様はまだ確定しておらず、Webブラウザーの対応状況も各社各様で互換性があるとはいえない状況でWebサイトをHTML5に対応するのは問題だという。 ル=エガレ氏が領域責任者(ドメインリーダー)を務めるW3Cのインタラクション領域は、HTML5やCSS3、Web APIなど、Webブラウザーを通じてユーザーと接する技術の仕様策定を担当している。そのル=エガレ氏が「WebサイトがHTML5に対応するのは早すぎる。動画再生など、Webブラウザー間で互換性の問題が起きているからだ」と述べているのだ。 ただ、ル=エガレ氏が懸念を示しているのはWebサイトへの早すぎる普及であって、HTML5という技
先月のCSS WGのF2Fでは、CSS3やそれ以降の話についても議論が進んでいます。今回は来期のCSS WGの活動についてと、スマートフォン向けサイトで利用されている"viewport"の標準化について紹介したいと思います。 Minutes and Resolutions Oslo F2F Monday 2010-08-23 CSS3時代のCSS WG 現在のCSS WGは2010年11月末で活動期限を迎えます。過去2回「次期のCSS WG」について取り上げていますが、今回のF2Fでも、次期の活動計画に関してディスカッションが行われています。 CSS 2.1が勧告案に進めば、CSSスナップショットで定義される仕様がほぼ一斉に勧告に進むことができるため、それ以外のCSS3モジュールや、CSS4の策定が次期CSS WGの活動になります。 現時点で、High Priorityとされている仕様は次
ベンダー接頭辞つきのプロパティについて、質問をいただきました。 最近ではCSS3を使用したデザインパターンが数多く紹介されています。ボタン要素など簡単なものであれば、画像を用意する事なく表現が出来ると思います。 しかしソースレベルでは(-webkit-)(-moz-)などの接頭辞をつけないとブラウザがうまく処理を行えない現状としては、接頭辞がついたものを業務レベルで実装するべきではないのでしょうか? ※一般的に接頭辞を使用している要素などは納品データ内にあるべきでないのでしょうか? 使うべきでない、あるべきでないとは思いませんが、利用には細心の注意をはらう必要があるでしょう。 使える?避けるべき? まず、CSS仕様には、ベンダー接頭辞の利用は避けるべき(Authors should avoid vendor-specific extensions)と書かれています。仕様が安定して接頭辞を外
デコもじは2016年11月30日(水)をもちましてサービスを終了致しました。 デコもじをご利用中の会員様におかれましては、サービス終了日をもちましてフォントの配信が終了となり、有料プランをご利用の場合はサービス終了日をもちまして課金が停止されております。 ※フォント配信は終了となりますが、Webサイト上に設置した JavaScript コードは会員様ご自身で削除をお願いいたします。 これまで長らくデコもじをご愛顧いただき、誠にありがとうございました。今後もシーサー株式会社の各種サービスのご愛顧のほどよろしくお願いいたします。
What is an IP Address? An IP (short for “Internet Protocol”) address is a unique number assigned to every machine that connects to the internet. Nowadays, you can have multiple computers behind a router that share a single IP using Network Address Transformation (NAT). If you have ever used a wifi hotspot to access the internet, you’ve shared an IP address with someone. What’s the Difference betwe
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く