これでよく分かる！ 2023年、CSSとUIの新しい機能のまとめ

2023/05/25 181 users CSS カスケードレイヤー ネスト コンテナクエリ 三角関数

2023年もCSSとUIの進化がすごいです！ 先日開催されたGoogle I/O 2023から、各ブラウザにサポートされたCSSの新機能をはじめ、まもなくサポートされる機能まで、CSSの新しい機能を紹介します。 コンテナクエリ、スタイルクエリ、ダイナミックビューポート単位、カスケードレイヤー、ネスト、三角関数、広色域のカラース... 続きを読む

Web制作者は要チェック！現在のWeb制作に合わせて制作された新しいCSSリセット -Reseter.css | コリス

2021/04/12 179 users reset.css コリス アクセシビリティ CSS 既存

現在のWeb制作だと、既存のReset.cssやNormalize.cssには不足を感じると思います。それらの代替手段として制作された新しいCSSリセットを紹介します。 Reseter.cssは各ブラウザの最後から5つ前までのバージョンをサポートし、アクセシビリティにも配慮されており、CSSのテクニックや学びも満載です。 Reseter.css Resete... 続きを読む

Private Class Field の導入に伴う JS の構文拡張 | blog.jxck.io

2019/03/14 175 users jxck.io class 構文 挙動 created_at

created_at: 2019-03-14 updated_at: 2019-03-14 tags: [private,javascript] Intro ECMAScript の Private Class Field の仕様策定と各ブラウザの実装が進んでいる。 これにより、従来の JS にはなかった Class の Private フィールドが使えるようになる。 提案されている構文や、挙動について解説する。 Class Field D... 続きを読む

[CSS]知っておくと便利！スマホで要素を高さいっぱいに表示したいのに、期待通りに表示されない時の解決方法 | コリス

2018/08/08 255 users コリス ビューポート スクロールバー CSS ナビゲーション

ビューポートを使った単位（vw, vhなど）は、特にスマホの各ブラウザにおいて複雑です。例えば、vwのスクロールバーを考慮する必要がありますか？ サイトのナビゲーションやページコントロールはどうでしょうか？ それらは計算に含まれますか？ スマホで要素をビューポートの高さいっぱいに表示したいのに、期待通りに表... 続きを読む

Webブラウザにおける文字のアンチエイリアスの現状の最適解 | dwango creators' blog（ドワンゴクリエイターズブログ）

2017/05/17 612 users アンチエイリアス フォントレンダリング dpi WIn CSS

Winでは基本的にフォントレンダリングをCSSで制御することは出来ません。また、スマートフォンのブラウザもほとんど制御できず、基本的にグレースケールで表示されることが多いようでした。 MacではSafariのみがグレースケールですね、これが原因で「Safariで文字が細く見えてしまう」現象が起こっています。 デバイスのdpiによる見え方 このまま各ブラウザでアンチエイリアスを揃える設定しても良いの... 続きを読む

ES2015で始めるJavaScript入門 - Qiita

2016/09/08 284 users Qiita ECMAscript サーバサイド ナンバリング

JavaScriptとは Webブラウザで実行可能なインタプリタ言語 最近ではサーバサイドのものもある(Node.jsなど) 各ブラウザで独自の実装があるが、標準化されたECMAScriptに準拠している ES5, ES2015(ES6), ES2016, … ES2015からは毎年新しい規格が策定される これによりナンバリングは策定した年に変更 ES5(2011年策定)から4年ぶりに策定されたE... 続きを読む

【CSS】決定版！リセットCSS総まとめ | TONOST

2015/06/01 425 users デフォルトスタイル Firefox Safari CSS 目的

HTML、CSSでコーディングを始めるときに各ブラウザが持っているデフォルトのCSSを一度リセットする目的のリセットCSS。今回は、現在使われているリセットCSSをまとめてみました。 リセットCSS とは？ 各ブラウザ(IE、FireFox、Chrome、safari等)は、タグ毎にデフォルトスタイルをそれぞれ独自にもっており、それらをリセットするスタイルシートは一般的に「リセットCSS」と呼ばれ... 続きを読む

【翻訳】GoogleがWebでのSHA-1の利用停止を急ぐ理由 | POSTD

2015/02/04 218 users POSTD SHA Hilbert SHA-1 各自

Hilbertのハッシュアルゴリズムマップ（Ian Boyd） SHAとは SHA-1への攻撃は十分に可能ではないだろうか 各ブラウザの対応 各自でできること 証明書の変更がここまで大変なのはおかしい 最後に 信用されて […]Hilbertのハッシュアルゴリズムマップ（Ian Boyd） SHAとは SHA-1への攻撃は十分に可能ではないだろうか 各ブラウザの対応 各自でできること 証明書の変更... 続きを読む

Web制作者は要ブックマーク！制作時にいろいろと役立つ便利サイトのまとめ | コリス

2014/09/12 511 users Bootstrap コリス Foundation ライセンス

Web制作時に、あれ？なんだっけな？って時に役立つ便利サイトを紹介します。 HTML5やCSS3の各ブラウザのバージョンごとのサポート状況、スクリーンサイズやデバイスごとのMedia Queriesの書き方、Bootstrap, Foundationなど各フレームワークの対応ブラウザやライセンス、ブラウザの各バージョンごとのCSS Hackなど、いざという時に役立つサイトばかりです。 Can I ... 続きを読む

flexboxの旧仕様、改定仕様、現行仕様の一覧 « NAVER Engineers' Blog

2013/09/10 138 users Flexbox gradient UIT 富田 Blog

暑さもやわらいできたような気配がしてきました。皆様いかがお過ごしでしょうか。 久しぶりのブログ更新です。UIT 富田です。 今回はCSSでのレイアウトをより柔軟にしてくれるflexboxについて解説します。 flexboxは大幅な仕様の変更が過去に2度もあり、各ブラウザとそのバージョンによって実装している仕様が異なるため、後方互換をきっちり対応しようとすると、gradientと並んで2大考えるのを... 続きを読む

各ブラウザに対応するCSSハックやJavaScriptによるハックをまとめているWebサイト・Browserhacks - かちびと.net

2013/03/03 104 users CSSハック バック Opera Safari net

各ブラウザのバージョンごとのCSSハックやJavaScriptによるハック方法をまとめているWebサイト・Browserhacksをご紹介します。CSSハックという言葉自体ちょっと懐かしい気がします・・・ CSSハックやJavaScriptによるハック方法をまとめたサイトです。IEはともかく、OperaやSafariのハックはちょっと助かるかも。 Browserhacks ブラウザ名で検索も出来る... 続きを読む

font-familyの指定はウェイトなしのアルファベット表記のみでほぼよさそう | Culture27

2011/12/05 118 users font-family ウエイト 挙動 フォント 解釈

font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック','MS PGothic',sans-serif; 同じフォントを日本語表記とアルファベット表記の両方で指定しているのは、各ブラウザの解釈や挙動が異なるなどの理由からです。ただ、最近のブラウザはどうなんだろうかとちょっと気になったので調べま... 続きを読む

2011年、スマフォ・デスクトップ用のクロスブラウザ確認ツールのまとめ | コリス

2011/10/23 473 users コリス Media Queries ワイドスクリーン ツール

デスクトップ用の各ブラウザをはじめ、スマートフォン、ワイドスクリーンなど、さまざまユーザー環境を想定して確認できるツールを紹介します。 各ツールで表示しているのは、Media Queriesを使用している「CSS-Tri [...] 続きを読む

CSS3のベンダープレフィックスを自動で付けてくれる手軽で軽量なJavaScriptライブラリ・cssFx.js - かちびと.net

2011/10/05 190 users ベンダープレフィックス プレフィックス jQuery CSS

久しぶりにかなり便利そうな気がした ので備忘録。CSS3で各ブラウザに対応 させるために加えるプレフィックスを 自動で付けてくれるライブラリです。 将来的にCSS3のプレフィックスは付け る必要が無くなるのでそうなったら これを外せばいいだけですね。 使い方もすごく簡単で3.7KBと軽量です。cssが管理しにくくて困ってる方は検討してみてはいかがでしょう。また、jQueryやmootoolsのよう... 続きを読む

JavaScriptの文字列を反転する１０の方法とそのパフォーマンス - 風と宇宙とプログラム

2011/08/21 146 users パフォーマンス 宇宙 文字列 プログラム JavaScript

JavaScript はじめにJavaScriptで文字列を反転する１０の方法を（無理矢理？）思いついたので、ちょっと簡単に紹介したい。また、それぞれについて、各ブラウザでパフォーマンスを測定してみたので、その結果も合わせて載せる。文字列のStringオブジェクトには、部分切り出し(substring, slice)や置換(replace)、連結(concat)など豊富な機能があるのに、反転(re... 続きを読む

サイト運営者なら覚えておきたい便利なサイト・ツール30選まとめ | ラジック

2011/06/17 1327 users tag index ラジック HTMLタグ http

サイト運営者なら覚えておきたい便利なサイト・ツール30選まとめ 2011年06月18日 00:52 役立ち/PC/Webテクニック Tweet Check Browser Compatibility http://browsershots.org/ 各ブラウザでのサイト表示を確認できます。 【HTMLタグの簡単検索】TAG index - ホームページ作成情報 http://www.taginde... 続きを読む

各ブラウザからパスワードを抜き出すフリーソフト「WebBrowserPassView」 - GIGAZINE

2011/05/07 878 users GIGAZINE WebBrowserPassView

Internet Explorer/Firefox/Google Chrome/Operaに保存されている各サイトのパスワードを抜き出して表示してくれるのがこのフリーソフト「WebBrowserPassView」です。極めてシンプルな機能なのですが「あのサイトのパスワードってなんだったっけ？」という時に地味に役立ちます。 使い方などは以下から。 WebBrowserPassView - Recov... 続きを読む

HTML5の勉強に役立つチートシートやリファレンスのまとめ | コリス

2011/02/15 855 users コリス リファレンス 属性 チートシート 要素

HTML5の要素や属性、美しいコードの書き方、各ブラウザの対応状況などをまとめたチートシートやリファレンスを紹介します。 続きを読む

[CSS]IEを含めた主要ブラウザと各スマートフォンに対応した@font-faceの指定方法 | コリス

2011/02/06 170 users コリス iOS font-face font-family

IE6, 7, 8, 9をはじめとする主要ブラウザ、iOS, Androidのスマートフォンに対応させるための@font-faceの指定方法を紹介します。各ブラウザ・スマートフォンに対応させる@font-faceの指定方法各主要ブラウザ、スマートフォンに対応させる@font-faceの記述は、下記のようになります。@font-face {font-family: 'MyFontFamily';sr... 続きを読む

HTML5では何ができるのか、各ブラウザの対応はどうなっているのか、が一目でわかる -What is HTML5? | コリス

2010/09/28 267 users コリス 一目 HTML5

Archive by month 2010年9月 (41) 2010年8月 (59) 2010年7月 (49) 2010年6月 (43) 2010年5月 (35) 2010年4月 (48) 2010年3月 (53) 2010年2月 (51) 2010年1月 (45) 2009年12月 (65) 2009年11月 (38) 2009年10月 (49) 2009年9月 (58) 2009年8月 (35... 続きを読む

HTML5で構築されたテンプレート・フレームワークいろいろ | DesignWalker

2010/06/07 737 users iPhone DesignWalker ウェブデザイン 要素

現在、徐々に各ブラウザの対応が進められているHTML5。動画やオーディオ再生、アニメーションなどの要素が実装されていて、iPhoneやiPadがこのままFlashを採用しないままなのであれば、今後、HTML5が普及してしまえば、Flashは必要なくなる！？なんて意見もあるほどです。 ウェブデザインに関わる方々は、今のうちからちょっとした概要だけでも見ておいて損は無いのではないでしょうか。 というわ... 続きを読む

これでできる！ クロスブラウザJavaScript入門：第2回　完全版：ブラウザとデバッグ環境｜gihyo.jp … 技術評論社

2010/03/29 386 users gihyo.jp 技術評論社 ブラウザ クロスブラウザ 入口

これでできる！ クロスブラウザJavaScript入門 第2回　完全版：ブラウザとデバッグ環境 2010年3月29日 太田昌吾 JavaScript, クロスブラウザ, ブラウザ, デバッグ バージョン, Chrome, インストール, Opera 1 2 3 4 5 こんにちは，太田です。前回はクロスブラウザの入口として，各ブラウザの特徴をまとめつつ，実際にクロスブラウザなコードを紹介しました。... 続きを読む

[CSS]主要ブラウザの特定ブラウザのみに有効なCSSハック集 | コリス

2010/01/27 317 users コリス Opera CSS Safari Firefox

Internet Explorer、Firefox、Safari、Chrome、Operaなど主要ブラウザの中の特定ブラウザのみに有効なCSSハックをbradKELLETTから紹介します。 Documenting the Hacks: CSS Browser Targeting CSSハックは使用しないに越したことはありませんが、必要がある場合には最小限簡潔に記述しておくようにします。 各ブラウザ... 続きを読む

ブラウザチェックに使える無料ツールいろいろ | DesignWalker

2009/03/11 476 users DesignWalker ブラウザチェック クロスブラウザ

各ブラウザやバージョンでデザインをチェックするのは、なかなか大変な作業ですね…。 クロスブラウザのチェックはなるべく時間をかけずに済ませたいものです。今回はブラウザチェックに使えそうなツールをいくつかまとめてみました。 Xenocode Browser Sandbox インストールしなくてもブラウザからクリックするだけで各ブラウザが立ち上がるツール。これは便利ですね。ブラウザだけでなく、他のソフト... 続きを読む

自分のページやサイトが各ブラウザでどのように見えるか確認できる便利なサイトいろいろ - GIGAZINE

2008/10/21 669 users GIGAZINE レイアウ レイアウト 自分 ページ

サイトのレイアウトを変更したり、新しくデザインする際に使えるのがこのクロスブラウザテスト、要するに「それぞれのOSのそれぞれのブラウザで自サイトは正しく見えているのか？」をチェックするサイトです。予算と時間が潤沢であれば、自分で各種OSを揃え、各種ブラウザを導入してチェックできるのですが、あまりにも非現実的な場合が多いため、この手のテストサイトは非常に重宝します。 というわけで、デザインやレイアウ... 続きを読む