[CSS]CSS3のMedia Queries（メディアクエリ）の使い方と実装例
CSS3 Media Queries 下記は各ポイントを意訳したものです。 はじめに CSS2のMedia typesではscreen, printなどのように特定のメディア用のスタイルシートを設定することができました。CSS3ではクエリを加えることで、さらに効率的にスタイルシートを使用できます。 Media Queriesはユーザーの状態を調べ、それにあった特定のスタイルシートを適用することができます。例えば、大きいディスプレイ用と小さいモバイル用にそれぞれ異なるスタイルシートを指定することができます。 Media Queriesの使い方 まずは、デモページをみてください。 ブラウザのサイズを変更すると、スタイルが変更されます。
[CSS]border-radiusを使って、角丸ではなく落書き風にボーダーをデザインするテクニック
角丸を指定できるborder-radiusで、ボーダーを落書き風にすることもできます。 色によっては、蛍光ペンや絵筆みたいにもできますね。 デモページ ※リンク切れ 実装は、こんな感じです。 HTML 要素はdivだけ、入れ子もラッパーも必要ありません。 <body> <div> This is my paragraph. Like my border? This is my paragraph. Like my border?This is my paragraph. Like my border?This is my paragraph. Like my border?This is my paragraph. Like my border? </div> </body> CSS 落書き風のボーダーを実現しているのは、border-radiusです。 スラッシュで区切ることにより、水平
CSS Box Shadow | CSS-Tricks
Used in casting shadows off block-level elements (like divs). .shadow { box-shadow: 3px 3px 5px 6px #ccc; } The horizontal offset of the shadow, positive means the shadow will be on the right of the box, a negative offset will put the shadow on the left of the box.The vertical offset of the shadow, a negative one means the box-shadow will be above the box, a positive one means the shadow will be b
Opera News
Mindfulness, Opera Air Opera Air’s redesigned Boosts now smoother, more intuitive June 4th, 2025 Hey all, Today we have another update for Opera Air, our browser built around the concept of mindfulness: we’ve redesigned... AI Meet Opera Neon, the new AI agentic browser May 28th, 2025 Opera Neon is our first AI agentic browser designed for the next generation of the web. Desktop, Opera for iOS Oper
Adobe HTML5 特設サイト Dreamweaver® CS6 と HTML5 で始めようスマートフォン＆タブレット対応| Adobe - 日本
Dreamweaver CS6 と HTML5 で始めようスマートフォン＆タブレット対応 HTML5 特設サイトは、HTML5/CSS3 やモバイルデバイスの活用を検討している方に最新情報をお届けするアドビ公式サイトです。 事例から Adobe®Dreamweaver® CS6 を始めとする制作環境まで、幅広い観点から Web の新しい方向性をお伝えします。 本文へ 本サイトについて 本サイト自体が、マルチデバイス対応のレスポンシブなデザインの事例として制作されています。表示される画面の大きさに応じて、閲覧し易い様にレイアウトが変化します。詳しくは「互換化とは」をご覧ください。 jQuery Mobile を使ったスマートフォン向けの専用サイトも公開中です。
[CSS]「background-clip」を使って、テキストの下に画像を表示するスタイルシート
CSS3の「background-clip」を使って、テキストの下に画像を表示するスタイルシートを紹介します。 また、CSSの特定のプロパティに対する、サポートブラウザと非サポートブラウザへの対応方法も解説されています。 Show Image Under Text (with Acceptable Fallback) デモページ [ad#ad-2] デモはWebkit系ブラウザ（Chrome, Safari）でご覧ください。 マウスホバーでCSS3アニメーションも楽しめます。 マウスホバー時のキャプチャ 「background-clip」は背景の適用範囲を指定するプロパティで、対応していないFirefox 3.6で表示すると下記のようになります。 ※Firefox 4では対応予定 非対応ブラウザでの表示 [ad#ad-2] アイデアのベースとなったスタイルシートは、下記のようになります。
Using CSS Text-Shadow to Create Cool Text Effects
Learn how to use the CSS text-shadow to create cool text effects, by following this easy, step by step tutorial. Check it out and start learning! The CSS3 text-shadow property has been around for some time now and is commonly used to recreate Photoshop’s Drop Shadow type shading to add subtle shadows which help add depth, dimension and to lift an element from the page. This isn’t all the text-shad
[CSS]CSS3グラデーションの表示サンプルと指定方法のまとめ
現在、Firefox, Safari, Chromeで利用できるCSS3グラデーションの表示サンプルと指定方法のまとめをDynamic Driveから紹介します。 CSS Library:CSS3 Linear Gradients 下記は各ポイントをピックアップしたものです。 CSS3グラデーションの基礎知識 CSS3グラデーションをサポートしているブラウザは現在のところ、下記の三つです。 Firefox 3.6+ Safari 2+ Chrome CSS3グラデーションの対応エレメントは、下記の二つです。 background background-image CSS3グラデーションの指定方法はmoz系（Firefox）とwebkit系（Safari, Chrome）で異なり、下記のようになります。 moz系
[CSS]CSS3アニメーションの効果的な使い方
CSS3のアニメーション機能「CSS Transitions」をウェブサイトのどこにどのように使うのがよいかを検証するチュートリアルをCarsonifiedから紹介します。 Sexy Interactions with CSS Transitions 「CSS Transitions」の対応ブラウザは、WebkitベースのブラウザであるChrome、Safariとなっています。 下記にさまざまなサイトに利用できる、CSS Transitionsを使用したテクニックを紹介します。 1. アニメーションで背景色を変更 <textarea name="code" class="css" cols="60" rows="5"> #example-1 .example-area blockquote { background: #eee; ⋮ transition: all .3s linear;
WebKit系のブラウザで使えるTextStrokeサンプルCSS集:phpspot開発日誌
Adding Stroke to Web Text | CSS-Tricks WebKit系のブラウザで使えるTextStrokeサンプルCSS集。 -webkit-text-strokeプロパティを使うことで次のような効果を得ることが可能で、iPhoneやSafari/Chrome等で画像を使わず次のようなフォントを描画することが出来ます。 数年前であれば、通常実装しようと思うと画像で実現するしかなかったわけですが、なかなか便利なプロパティですね。 他のプロパティと組合わせて色々と高度なことができそうですね。 ソースのダウンロードも可能です。 関連エントリ CSS3のジェネレーター１４種 IE6-8でもCSS3に対応するライブラリまとめ
[CSS]コピペで使える、テキスト周りをかっこよくするCSS3のエフェクト集
CSS3 Cookbook: 7 Super Easy CSS Recipes to Copy and Paste [ad#ad-2] 対応ブラウザはCSS3を使用しているため、CSS3をサポートしているブラウザのみで、一部のものはWebkit系（Chrome, Safari）のみとなっています。 Letterpress（レタープレス） Small Caps（スモールキャピタル） CSS Coupon（クーポン券） Stitched（ステッチ） Gloss（グロス） Stroked Text & @font-face（@font-faceを使ったストローク） Double Stroked Text（二重のストローク） Letterpress（レタープレス） レタープレスのエフェクトには、3つのカラーが必要です、背景のbackground、テキストのcolor、テキストの影のtext-sha
第10回 CSS3で自由なボーダーデザインを実現する | gihyo.jp
神は細部に宿る 「おっ」と思わせるようなデザインにするためには「大胆なレイアウトをする」「バランスのよい配色にする」などたくさんの要素がありますが、一見目立たなくてもよいデザインに共通するポイントがあります。それは、「ディテールまでデザインされている」ということです。 近代建築の三大巨匠の一人である「ミース・ファン・デル・ローエ[1]」の言葉だと言われる「神は細部に宿る（God is in the details）」というフレーズがあります。細部にまできめ細かく配慮して作られたものこそ美しく、「細部」が「全体」の完成度に大きな影響を及ぼす、といった考え方を表したものです。 Webデザインにおいても、細部を丁寧にデザインして作り上げていくことがやはり大切。 人がやっていないようなところに手が施されたデザインは、人の目を惹き付けます。 たとえば、画像をボーダーで囲む際に、従来のCS
積極的に取り入れたい9つのCSS3（+jQuery）テクニック
CSS3（+jQuery）を使った、ちょっといいかも！と思うエフェクトを集めてみました。 まだまだ非対応ブラウザが多い CSS3 ですが、できるだけ積極的に使ってみたいなーとも思ってます。 まずはいろいろ試してみることからはじめてみましょう！ CSS3 の登場で、いろんな CSS のトリックを使ったエフェクトが考えられてます。まだまだ CSS3 に非対応のブラウザも多いので、全てを CSS3 で表現する訳にはいかないのが現状ですが、私的には積極的にどんどん取り入れていきたいなーとも思ってます。 海外ブログなどで、色んな CSS3 を使った Tips が紹介されているので、その中からいくつかご紹介します。どれもサンプルを作って試してみたものばかりです。以下の環境で動作確認もしています。 Mac : firefox、Safari、Chrome Win : firefox、IE8、Safari、
[CSS]実例から学ぶCSS3の効果的な使い方
CSS3の角丸、テキストシャドウ、ボックスシャドウ、RGBA、グラデーションなどを効果的に使用したサイトをSix Revisionsから紹介します。
CSS3だけでつくるWebボタン！押さずにはいられないボタン簡単3ステップ
インターンシップにきています。 こんにちわ。(・`д・ノ)ノ 面白法人カヤックでインターンシップ中のどうもぽんたです。 先週、鎌倉本社から自由が丘支社に移りました。 自由が丘に来たのは初めてなので、「丘ないなぁ。」って思いました。 そしてこちらはインターン研修で、書いているエントリーです。 どうか柔らかいまなざしで見守って下さいませ！ 今回は画像を使わず、CSS3だけでWebボタンをつくる方法を紹介したいと思います。 といっても僕自身つくったことがないので、一緒に挑戦しましょう！！ つづきからどうぞ！ すごいよ！CSS3 ≫ CSS3のみでつくっているボタンを紹介している凄いサイトがあります。 ラムネのようなテイストのボタンですな。 これを画像なしでつくってるっていうからスゴイ！ ここまでレベルの高いボタンはつくれないので、 基本重視のシンプルなCSSボタンをつくろうと思います。 まずはC
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Site Under Maintenance
CSS3の3D transformationを使ったすごいサンプル:phpspot開発日誌
ちょっとした簡単なサイトを作るにはHTML Instantで十分かも
http://www.designwalker.com/2010/05/css3.html
[CSS]CSS3を使用した素敵なボタンを実装するチュートリアルの決定版