最近の実装に合わせた最新版HTMLテンプレート、基本構造に使用するすべての要素とその役割も解説 | コリス

2021/04/27 783 users コリス プログレッシブエンハンスメント preload 実装

最近の実装に合わせた、Webページ用のHTMLテンプレートを紹介します。 レスポンシブ用のHTML、ソーシャルメディア用のHTMLをはじめ、高速表示に欠かせないrel="preload"なども含まれています。IEなどの古いブラウザはプログレッシブエンハンスメントで対応しています。 HTMLテンプレートはすべての要素の役割を各行ごと... 続きを読む

これで完璧！CSS GridとFlexboxの違いと使い分け方、よく見かけるUIコンポーネントを実装するテクニックのまとめ | コリス

2020/06/25 351 users Flexbox コリス フォールバック UIコンポーネント

CSS GridとFlexboxのどちらを使った方がよいか悩んだことはありませんか？ CSS GridとFlexboxの違い、使い分け方、CSS Gridの実装例、Flexboxの実装例、CSS GridとFlexboxを組み合わせた実装例、フォールバックと古いブラウザのサポート方法を解説します。 Grid for layout, Flexbox for components by Ahmad Shadeed 下... 続きを読む

HTMLとCSSも進化している！JavaScriptを使用せずに、HTMLとCSSだけで実装できるUI要素のまとめ | コリス

2019/11/21 434 users コリス CSS サポート 新しい機能 HTML

以前まではJavaScriptでないと実装できないと思われていたものも、最近ではHTMLとCSSのみで実装できるものが増えてきました。HTMLとCSSには新しい機能が追加され、そして古いブラウザのサポートも必要なくなり、より簡単に実装できます。 実はJavaScriptを使用せずに、HTMLとCSSで実装できるUI要素を紹介します。 You ca... 続きを読む

[JS]数字をくるくる回転させて、指定した数字を表示させるスクリプト -odometer | コリス

2018/06/25 59 users コリス スクリプト パフォーマンス 数字 ブラウザ

数字をくるくる回転させて、指定した数字を表示させるスクリプトを紹介します。 サポートするブラウザはIE8+を含むモダンブラウザすべてで、古いブラウザでは自動的にフォールバックされ、非常にパフォーマンスの高いCSSアニメーションで表示されます。 odometer odometer -GitHub odometerのデモ odometerの使い方 odom... 続きを読む

normalize.css 8.0.0がリリース！古いブラウザはサポート対象外になり、大幅に軽量化 | コリス

2018/02/16 55 users Normalize.css コリス 2KB 3kb サポート

利用しているWeb制作者も多いと思います。 normalize.cssがアップデートし、8.0.0がリリースされました。 IE9以下をはじめとする古いブラウザのサポートがなくなったので、大幅に軽量化されています。v6.0.0は2.2KB、v7.0.0は2.3KBだったのが、v8.0.0で1.8KBです。 normalize.css -GitHub normalize.css 8.0.0の変更点 2... 続きを読む

SPA + サーバーサイドレンダリング、そのダルさに関する私見 ::ハブろぐ

2017/06/14 202 users サーバーサイドレンダリング 私見 SPA 概観 ダルさ

いわゆる SPA + サーバーサイドレンダリングがダルい 唐突ですがおさらいです。 なぜサーバーサイドレンダリング（SSR）が嬉しいかと言えば 初期表示の Critical Rendering Path を短縮できる SEO における保守信仰にやさしい（） 古いブラウザ・低性能マシンにやさしい yahoo/fluxible による SPA + Server Rendering の概観 ::ハブろぐ... 続きを読む

いくらユーザが古いブラウザを使っていてもサポートしちゃいかんよ - albatrosary's blog

2017/01/31 95 users ユーザ albatrosary's blog 方々 タイトル

2017 - 01 - 31 いくらユーザが古いブラウザを使っていてもサポートしちゃいかんよ タイトルの通りです。「いくらユーザが古いブラウザを使っていてもサポートしちゃいかんよ」です。以前から方々で言われている通りで記事も多くあります。よく言われるのが「ある程度動けば」とか「機能が落ちても」というような話が出て来ますが、そういう問題では無いです（下記を読めばわかる）。 なぜサポートが終了した W... 続きを読む

2016年に取り入れていきたい、CSSのテクニック・ライブラリのまとめ | コリス

2016/01/05 318 users コリス イラスト IE8 古いバージョン JavaScript

2016年は、1月12日に古いバージョンのIEのサポートが終了します。 IE8, 9, 10などの古いブラウザへの対応に時間を割く必要がなくなり、今まで躊躇していたCSSやJavaScriptが多くの人に利用されるようになると思います。 これからどんどん取り入れていきたいCSSのテクニック・ライブラリを紹介します。 イラスト: Girls Design Materials 2016年1月12日から... 続きを読む

jQueryは有害なのか | プログラミング | POSTD

2015/06/01 132 users jQuery POSTD 本題 ネイティブ 両面

jQueryはWeb業界の発展に大いに役立ってきました。しかし、ネイティブのJavaScriptが高度化し、かつマーケットシェアの縮小した古いブラウザをサポートする必要の薄れた現代において、jQueryを本当に使う必要があるでしょうか？必要性と危険性の両面からjQueryについて考えてみます。ずっと「～は有害なのか」という記事を書いてみたかったんです1。 まず本題に入る前に、1つ言わせてください。... 続きを読む

[JS]タッチデバイス対応、古いブラウザもカバーするシンプルで快適なスライダーの軽量スクリプト -Glide.js | コリス

2013/09/06 88 users コリス jQuery スライダー Glide.js スワイプ

シンプル・軽量で、レスポンシブ対応、タッチデバイス対応、スワイプもキーボード操作にも対応したカスタマイズにも優れたOOCSSベースでマークアップされたスライダーを実装するjQueryのプラグインを紹介します。 Glide.js Glide.js -GitHub Glide.jsのデモ Glide.jsの使い方 Glide.jsのデモ デモはスマフォ・タブレットをはじめ、最新のモダンブラウザでご覧く... 続きを読む

IEの古いバージョンをサポートしつつ、モダンブラウザ用のサイトを制作する時の20のアドバイス | コリス

2013/05/21 308 users コリス クロスブラウザ デベロッパサイト CSS アドバイス

Microsoft公式のIEのデベロッパサイト「modern.IE」から、古いブラウザをサポートしつつモダンブラウザ用のサイトを制作する時に役立つアドバイスをクロスブラウザの観点や、HTML, CSS, JavaScriptの実装時ごとに紹介します。 20 tips for building modern sites while supporting old versions of IE 下記は、... 続きを読む

XHR XSS の話． - ほむらちゃほむほむ

2012/03/15 123 users ほむらちゃ XSS 起点 jQuery Mobile 大阪府警

概要 CORS が「幾つかのブラウザの先行実装」の状況から「古いブラウザではサポートされない機能」に変わりつつある頃合いなので，XHR2 が XSS の起点になりますよってお話． そもそも XHR XSS って何よ 簡単に言うとXHR2 による XSS のことのつもり．身近なところだと，jQuery Mobile がやらかしたり，大阪府警がやらかしたりした． 具体例1 jQuery Mobile ... 続きを読む

CSS3をサポートしていないブラウザでどのように見えるか簡単に確認できるブックマークレット -deCSS3 | コリス

2012/02/01 166 users コリス ブックマークレット 箇所 ブラウザ CSS3

CSS3でスタイルした箇所をサポートしていない古いブラウザ、まぁ主にIEなのですが、でどのように見えるのか簡単に確認できるブックマークレットを紹介します。 deCSS3 deCSS3の使い方は簡単です。 上記サイトでde [...] 続きを読む

HTML5に踏み出せない人に捧げる、HTML5を使う10の理由 | コリス

2011/12/04 615 users インタラクション コリス ストレージ オーディオ HTML

HTML5、使ってますか？ このサイトも未なのですが、これからHTML5を使い始めるぞっとなる10の理由を紹介します。 下記は各ポイントを意訳したものです。 10. アクセシビリティ 9. ビデオとオーディオのサポート 8. Doctype 7. よりクリアなコード 6. ストレージ 5. インタラクション 4. ゲームの開発 3. 古いブラウザのサポート 2. スマートフォンへの対応 1. これ... 続きを読む

古いブラウザも考慮した角丸実装jQueryプラグイン「DivCorners」:phpspot開発日誌

2011/08/02 52 users Demo border-radius div 連番 プラグイン

Demo | jQuery DivCorners | Product of roydukkey 古いブラウザも考慮した角丸実装jQueryプラグイン「DivCorners」 border-radiusで角丸は実装できるようになりましたが、古い非対応ブラウザだとうまく表示されないということで、やっぱりdivでやろうという方は必見のプラグイン。 連番の画像を用意しておくだけであとは簡単に初期化できます... 続きを読む

407個のwebデザイナー＆デベロッパーズ向けフリーアイコンとアイコン配布サイト2サイト - YATのBlog

2011/06/01 577 users YAT website Name デザインテンプレート 申し訳

407個のwebデザイナー＆デベロッパーズ向けフリーアイコンとアイコン配布サイト2サイトコメントをお願いします Name（お名前） (必須項目) Mail（メールアドレス） (サイト上には記載されません) (必須項目) Website（サイトURL） YATのBlog　一言メッセージ デザインテンプレートをオジリナルで作成しました。申し訳ありませんがie6以下のブラウザはすでに古いブラウザとなるた... 続きを読む

ペンキの跳ねを表現するPhotoshop用ブラシ15選 - YATのBlog

2011/05/04 61 users YAT ペンキ デザインテンプレート バナー 申し訳

YATのBlog　一言メッセージ デザインテンプレートをオジリナルで作成しました。申し訳ありませんがie6以下のブラウザはすでに古いブラウザとなるためサポートを行なっておりません。新しいブラウザにてご閲覧ください。 BLOGのバナーを作成しました。リンクを張っていただける際、必要であればご利用ください。 最近の記事 ペンキの跳ねを表現するPhotoshop用ブラシ15選 ユーザーとサイトの距離を縮... 続きを読む

たった１行でIEでも使えるブロックの角丸を実現できるjQueryプラグイン「Pina」:phpspot開発日誌

2010/11/26 150 users クロスブラウザ対応 jQueryプラグイン ブロック 角丸

Pina たった１行でIEでも使えるブロックの角丸を実現できるjQueryプラグイン「Pina」 pina(20, 'blue', 'classname1'); のようにするだけで角丸が実現できます。 IE6のような古いブラウザにも対応しているのが特徴。 CSS3になって対応ブラウザでは便利になったとはいえ、クロスブラウザ対応というと１行では実現できないので、利用を検討してみてもよさそうです。 p... 続きを読む

ここまでできる！CSS3を使ったチュートリアルまとめ | DesignWalker

2010/05/17 1175 users ウェブデザイン DesignWalker デザイナー 皆さん

ここ数年でたくさんの情報が揃ってきたCSS3。古いブラウザでは対応されていないため、まだまだ一般に普及するまでは時間がかかってしまうのかもしれませんが…。 CSS3を使えば、ウェブデザインの可能性をさらに広げてくれることは間違いありません。 デザイナーの皆さんは、是非CSS3でどんなことができるの？って事だけでも今のうちから知っておいても損はないと思いますよ。 今回は、そんなCSS3を使えばここま... 続きを読む

古いブラウザでもCSS3セレクタを使ってWebページをデザインできるようにしてみた - latest log

2009/06/24 387 users latest log CSS3セレクタ Webページ

JavaScript, CSSuuCSSBoost.js は uuAltCSS.js に名前が変更になりましたが、一部の説明が記事を書いた当時の古い名前のままになっています。最新版では、uuCSSBoost.revalidate() は廃止され uuAltCSS() を呼び出すように変更になっています。コードの解説を追記しました。「最新の規格を実装したブラウザが登場しても、IE6 のせいで諦めるし... 続きを読む

スクリーンショット.jp - 複数のブラウザ環境でサイトのレイアウトチェックツール

2007/04/24 737 users 複数 ブラウザ環境 スクリーンショット 一括 Mac環境

複数のブラウザ・ＯＳのスクリーンショット無料取得ツール[スクリーンショット.jp]。スクリーンショット画像を一括で簡単にダウンロードできます。これからはMac環境や古いブラウザのバージョンを揃える必要はありません。スクリーンショットを撮るURL　※無料お試しショットは、機能に制限がございます。引き続きご利用の場合は、会員登録を行ってください。 続きを読む

古いブラウザや低スペックな端末に対応したAjaxライブラリ:LoJAX:phpspot開発日誌

2006/06/15 80 users LoJAX Ajaxライブラリ prototype.js

[brothercake] LoJAX LoJAX is a re-creation of the window.XMLHttpRequest object, designed for low-specification and legacy browsers古いブラウザや低スペックな端末に対応したAjaxライブラリ。 Prototype.jsなんかは、IEの場合、IE6のみサポートだったりします... 続きを読む