CSS3の「ime-mode」プロパティ、廃止ではないが使用は非推奨という形に落ち着く | スラド IT
以前、「CSS3-UIの新ドラフトではime-modeプロパティが廃止に」という話があったが、新しく公開されたCSS3 UI勧告候補ではime-modeプロパティについて、下記のように記されている（CSS3 UIが勧告候補になった（11年ぶり2回目））。 ユーザーエージェントはime-modeプロパティーをサポートすべきでない著者は、ime-modeプロパティーを使用してはならないユーザーが粗悪なサイトやレガシーな実装に対処する必要があるユースケースの修復に対してのみ、ユーザーはime-modeプロパティーを使用してもよい これは、 http://srad.jp/~mnakano 氏がW3CのMLに投稿した意見が反映されている（ime-modeの標準仕様からの削除について）。 タレコミ子は以前のストーリーで出ていた要望がおおむね反映されているように思うが、いかがだろうか。
クリックイベントをCSSで無効化する - Qiita
ポップアップをクリックしたら、下のボタンが反応した時 いや、そこじゃないんだって！！ という時に使ってみるCSSです。Javascriptを使ってうまく制御してやる必要があります。 (ポップアップが開いた時にクラスを付ける) 共通CSSにクラス定義を追加しておくと便利です CSSクラスを定義しておく
[CSS]シンプルなHTMLで、ギザギザのかわいいボーダーをつくるスタイルシートのテクニック
シンプルなHTMLで、シャドウを加えたギザギザのかわいいボーダーをつくるスタイルシートのテクニックを紹介します。 Jagged Border HTML まずは、デモのHTMLから。 デモは3つのギザギザがあるので、3つのdivを使用します。 <div class="jagged-wrap-inner"> <div class="offset"></div> <div class="lightgray-bg jagged-border"></div> <div class="white-bg jagged-border"></div> <div class="darkgray-bg jagged-border"></div> </div> ギザギザを一つにした最小限のセットは、こんな感じです。 <div class="jagged-wrap-inner"> <div class="offse
![[CSS]シンプルなHTMLで、ギザギザのかわいいボーダーをつくるスタイルシートのテクニック](https://cdn-ak-scissors.b.st-hatena.com/image/square/5c725ef9aa750bffbd7f88a5e9c7301be6838f4e/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201403%2F2014082706.png)
TATSUYA-NET.com
CSS flexについて 概要 フレキシブルボックスはCSS3で新たに導入される機能であり、 2013年05年11日現在勧告候補となっています。 画面の大きさに応じて横幅を動的に指定したり、より美しい記述で段組が実装したりできます。 沿革 フレキシブルレイアウトは過去2度大きく使用が変更になっています。 2009年7月にリリースされた草案ではdisplayの値がboxでしたが、 2011年3月にはflexboxとなり、2012年09月の勧告候補ではflexとなっています。 ブラウザの対応状況によっては、昔の草案であるboxのみ認識するものもあります。 一方で、標準化が進むにつれて機能が変更になったり、バグが解消したりしているので、 出来るだけ新しい値を使用したほうが安全です。 主要なブラウザが対応しているdisplayの値を以下に示します。 display: box iOS4以上のsafa
Assistance for Color Generation
本ツールは、W3C勧告のWCAG2.0の指標に基づき、文字と背景の輝度比を計算して示しています。判定不能と表示される場合は、文字と背景の輝度比の機械的判断が技術的に困難な場合ですが、色覚シミュレーターの「輝度比近似グレースケール」で表示して識別可能であれば、少なくとも本ツールを表示しているブラウザでは、色覚特性に依存せず識別可能です。 なお、文字と背景の輝度比の機械的判断が難しい理由は、以下の一方または両方が当てはまるケースがあります。 文字と隣接する箇所のうち、最も輝度比が小さい部分を特定するのが困難であるため。 ブラウザによって表示する色が異なる可能性のあるコードを用いているため。 下図は、同じ意味を持つコードを２つの異なるWebブラウザで表示した結果です。CSS3によって表現できるグラデーション、光彩、影などは、同じ箇所（ピクセル）で見たときに、ブラウザによって表示される色が異なり
CSS Basic User Interface Module Level 3 (CSS3 UI) (W3C Proposed Recommendation, 14 December 2017)
CSS Basic User Interface Module Level 4 W3C Working Draft, 16 March 2021 This version: https://www.w3.org/TR/2021/WD-css-ui-4-20210316/ Latest published version: https://www.w3.org/TR/css-ui-4/ Editor's Draft: https://drafts.csswg.org/css-ui-4/ Previous Versions: https://www.w3.org/TR/2020/WD-css-ui-4-20200124/ https://www.w3.org/TR/2020/WD-css-ui-4-20200102/ https://www.w3.org/TR/2017/WD-css-ui-4
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
CSS3のtransform:rotateおぼえがき -
tableと文字回転でもって将棋盤を再現しようとして <table> <tr> <td><span class="offence">金</span></td> <td><span class="defence">角</span></td> ... </tr> ... </table> みたいに書いたのね。 で、CSSで span.defence { -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg); } という風に書いたら、Firefoxでは文字回転したけどSafariではしなかった。 span.defence { -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); tran
css3のtransitionプロパティでアニメーションサンプルをいろいろ作ってみた - かちびと.net
css3のアニメーションプロパティ、transitionがとても面白いので何となくアニメーションのサンプルを色々と作ってみました。まだ対応ブラウザは少ないですが、将来の為に予習してみたのでシェア。 css3のtransitionプロパティは変化を与えるプロパティです。アニメーションを実装できるプロパティはtransitionとanimetionがあり、後者のほうが「アニメーション」としての位置付けっぽいのですが、今回は何となくtransitionを使用しました。 プロパティ：-webkit-transition 対応ブラウザ：webkit系(GoogleChrome、Safari等) JavaScript：未使用 （※ソース閲覧の部分はjsを使っています） 一応アニメーション以外（角丸など）は-mozも入れています。 サンプルなので「-webkit-transition: *s ease-
Media Queries (W3C Recommendation 19 June 2012)
Media Queries Level 3 W3C Recommendation, 21 May 2024 More details about this document This Version: https://www.w3.org/TR/2024/REC-mediaqueries-3-20240521/ Latest Version: https://www.w3.org/TR/mediaqueries-3/ Latest Editor Version: https://drafts.csswg.org/mediaqueries-3/ Previous Version: https://www.w3.org/TR/2022/REC-mediaqueries-3-20220405/ History: https://www.w3.org/standards/history/media
背景画像をブラウザの枠いっぱいに表示するテクニックの考察
最近のトレンドの一つでもある背景画像をブラウザの枠いっぱいに表示する実装方法はたくさんあります。その中から、理にかなった最新のテクニックや、より多くのブラウザに対応させるテクニックを紹介します。 Perfect Full Page Background Image [ad#ad-2] 下記は各ポイントを意訳したものです。 各デモはページ下部のDownload Files」で、まとめてダウンロードできます。 背景画像をブラウザの枠いっぱいに表示するテクニックとは CSS3を使ったテクニック CSSだけで実装するテクニック：その1 CSSだけで実装するテクニック：その2 jQueryを使ったテクニック 背景画像をブラウザの枠いっぱいに表示するテクニックとは 前提として、下記のポイントが挙げられます。 画像でページをいっぱいにします。 空きは無いようにします。 画像のサイズは必要があれば調整しま
CSSの生みの親、新しいウェブレイアウトの可能性を描く
ノルウェーのオスロ発--ウェブフォーマットの標準仕様であるCSS（カスケーディングスタイルシート）は、知る人の比較的少なかった長い期間を経て真価が認められ、新世代のインタラクティブで洗練されたウェブページの開発技法として中心的な役割を担うようになった。CSSは現在、新たな方向に発展しようとしており、この技術を生み出したHåkon Wium Lie氏は、新たな方向に改良が進めば、CSSを使ってさらに複雑なウェブページのレイアウトができるようになると考えている。 Opera Softwareの最高技術責任者（CTO）でもあるLie氏は、オスロで行われたインタビューで「レイアウトのためには、まだやるべき重要な作業が残っている」と語った。現在策定中の新しいCSS3は多段組みのテキスト配置に対応しているが、「CSSで新聞の紙面を模倣することはできなかった」。 現在、グリッドレイアウトおよびテンプレー
HTML5+CSS3用のブラウザのスタイルをリセットするテンプレートファイル -HTML5 Reset
HTML5+CSS3の環境で汎用的に利用できるHTML・スタイルシート・スクリプトなどのファイルを一式にまとめたテンプレートを紹介します。 ファイル構成：コメント無し版 各ファイルの説明 index.html HTML5の要素を配置した汎用的に利用できるHTMLファイル。各スタイルシートファイルも埋め込まれています。 css/main.css @import用のスタイルシートです。 css/reset.css Eric Meyerの「Reset CSS」です。 css/core.css ベースとなるスタイルが定義されています。 css/_patches 各ブラウザ用のスタイルシートです。 css/_print プリント用のスタイルシートです。 js Modernizrがセットされています。
)
Internet Explorer 8 における CSS の改良点
Internet Explorer 8 は、カスケード スタイル シート (CSS) レベル 2 リビジョン 1 (CSS2.1) の仕様に完全準拠し、CSS レベル 3 (CSS3) の一部の機能をサポートします。 このトピックは、Internet Explorer 8 における CSS サポートの変更点一覧を示します。Internet Explorer の最近のバージョンでの CSS 準拠状況については、「CSS に関する互換性と Internet Explorer」を参照してください。 互換性について @ ルール 擬似クラスと擬似要素 リスト 色および背景 フォントおよびテキスト 生成されるコンテンツ 境界線およびレイアウト フロート マージンの相殺 位置揃え 印刷 ユーザー インターフェイス Internet Explorer 固有の機能 CSS 式 CSS の拡張 データ URI
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
layer8.sh
本文での画像挿入の際のclass付与について - MTQ | Movable Type ユーザーコミュニティ
オープン Web テクノロジーのデモ | MDN
#page
ちょっと使ってみたくなるHTML5/CSS3のUIエレメント集 -Boxtuffs
[CSS]Safariで見かける角丸のにじみを解消するスタイルシート