タグ モダンブラウザ
新着順 10 users 50 users 100 users 500 users 1000 usersHTML5で組んでるならこの魔法のjsも入れておけっていう話 | [M] mbdb
2012/12/01
1460 users
Tweet
挙動
mbdb
目安
IE8
HTML5で組んでるならこの魔法のjsも入れておけっていう話 Hacks Web Technical Please Share! Tweet この記事を読むのに必要な時間の目安: 約 6 分 現在、A!＠attripさん発で話題になっている｢たった2行でIE5.5～IE8をモダンブラウザの挙動にする魔法のJS｣という記事読みましたか? Webデザイン界隈では当たり前のものですが、実はもうひとつ追加... 続きを読む
もし、HTMLのテキスト周りでデザイナーからこんなお願いをされたら... - Qiita
2017/11/20
1121 users
Photoshop
プロパティ
融通
カタカナ
CSS
HTMLのテキストはPhotoshopのように融通が効かないから、デザイナーからの細かいお願いはだいたい断っている...なんてことありませんか？ モダンブラウザは色んなプロパティが対応してきているので、できることも増えています。 今回は、知っているといざというとき便利なテキスト周りのCSSを集めてみました。 「日本語、文字詰めできないかな？ほら、このカタカナとかキモい。。」 「Webで文字詰めだと... 続きを読む
たった2行でIE5.5～IE8をモダンブラウザの挙動にする魔法のJS | A!@attrip
2012/11/30
955 users
attrip
挙動
魔法
IE8
IE5.5
たった2行でIE5.5～IE8をモダンブラウザの挙動にする魔法のJS 続きを読む
CSS - そろそろ真面目に、HTMLで帳票を描く話をしようか - Qiita
2015/10/05
883 users
SPA
page
台頭
Qiita
PDF
帳票といえばPDFとして生成するのが一般的でしょうか? でも、2015年の今、あえてHTMLで描くのがホットです(個人的に)。ミリ単位で設定された高度な帳票も、CSSを駆使して簡単に作ることができます。業務システムでもモダンブラウザを選択することが増え、@pageなども積極的に使えるようになったこと、SPA(Single Page Application)の台頭、いろいろと条件が揃ってきました。 ... 続きを読む
CSSでのフォント指定について考える（2014年） - DTP Transit（Mac OS X, OS X Mavericks, Web Fonts, Web制作, iPhone, フォント）
2014/02/14
842 users
游明朝体
ウエイト
iPhone
併記
Safari
結論1：アルファベットでウエイトなしだけでも、すべてのモダンブラウザに対応可能です。ただし、旧バージョンのSafariやFirefoxでは対応がまちまちであったため、それらに対応するには併記します。 游ゴシック体と游明朝体はWinodws 8.1では日本語名、OS X Mavericks（10.9）ではアルファベット名のみの対応であるため、両名の併記が必要となります。 疑問2：「ヒラギノ明朝 Pr... 続きを読む
IE7/8/9, 全てのモダンブラウザ、iPhone, iPad, Androidのクロスブラウザチェックができるソフトウェア -BrowseEmAll | コリス
2012/06/10
723 users
iPhone
コリス
クロスブラウザ
クロスブラウザチェック
デスクトップ・スマートフォン・タブレットの主要なブラウザの古いバージョンから最新版までに対応した、クロスブラウザのチェックに使えるWindows用のソフトウェアを紹介します。 BrowseEmAllのサポートブラウザ BrowseEmAllの主な特徴 BrowseEmAllの使い方 BrowseEmAllのダウンロード BrowseEmAllのサポートブラウザ デスクトップ 主要ブラウザの最新版に... 続きを読む
CSS セレクタに関するおさらい | WWW WATCH
2007/01/11
674 users
セレクタ
Working Draft
勧告
CSS
おさらい
CSS を扱う上でセレクタの存在はとっても重要です。特に CSS3 Selectors ではかなり複雑な条件分岐ができるようになっていますので、スマートな (X)HTML、CSS コーディングを行う上で、セレクタを理解しているとそうでないのでは生産性に差が出ます。 CSS3 は現在 Working Draft の段階ですので、まだ正式な勧告はなされていませんが、多くのモダンブラウザにおいてそのほと... 続きを読む
CSSリセットはこれで決まり！モダンブラウザによる相違を吸収するようカスタマイズされたスタイルシート -ress | コリス
2016/07/04
610 users
GitHub
コリス
Normalize.css
デフォルト
ブラウザごとに異なるHTMLの各要素のスタイルの相違を吸収し、各要素のデフォルトのスタイルが定義されたCSSリセット用のスタイルシートを紹介します。 normalize.cssを最近のWeb制作にあうようカスタマイズされたもので、対応ブラウザはすべてのモダンブラウザ、IEは8+対応です。 ress -GitHub 参考: normalize.cssの特徴とコード 2015年、Web制作者が押さえて... 続きを読む
【2017年版】HTML/CSSで表現できる、すごいテキストエフェクト66選 - PhotoshopVIP
2017/01/25
563 users
PhotoshopVIP
hmtl
CSS
HTML
進化
ほとんどのモダンブラウザがCSS3対応となったことで、これまではPhotoshopなどのデザインアプリで再現していたようなデザインスタイルも、HMTL/CSSで表現できるようになってきており、その進化はますます加速しています。 今回は HTML と CSS、わずかな JavaScript で実装できる、表現力の高い テキストエフェクト用コードスニペット をまとめてご紹介します。コードニペットは各エ... 続きを読む
いま Web サイトを作るときにおさえておきたい10のこと(2015年版) - monoe's blog - MSDN Blogs
2015/02/06
526 users
MSDN Blogs
monoe's blog
標準準拠
Internet Explorer は、バージョン 9 から Web 標準準拠へと舵を向けました。 Internet Explorer 9、Internet Explorer 10 と、2 つのバージョンを経て、最新の Internet Explorer では、他のモダンブラウザと比較しても顕色のない Web 標準ブラウザーとなっています。 そのため、それまでの長い間 Internet Explo... 続きを読む
たった一行でブラウザをシンプルなメモ帳に変える方法 | IDEA*IDEA
2013/01/30
498 users
text
Data
IDEA
IMG SRC
一行
あぁ、なるほど。確かに。モダンブラウザでしか使えませんが、たった一行を指定するだけでタブ全体がメモ帳になってくれます（保存とかできないけど）。 その魔法の一行はこちら。新しいタブを開いて、URLバーに次をコピペすればOKです。 data:text/html, <html contenteditable> ↑ このHTMLは編集可能ですよー属性を与えていますね。 <img src="http://w... 続きを読む
ロゲ会長ジェネレータ
2013/09/10
421 users
canvas
ジェネレータ
ロゲ会長
HTML5
かなり
ロゲ会長ジェネレータです。ロゲ会長が発表してくれます。ロゲ会長のジェネレータです。かなり急ごしらえでつくったので出来は荒いです。IEとかちゃんとテストしてません。ちなみにHTML5でcanvasがチャント動くモダンブラウザじゃないとダメです。 続きを読む
[JS]高性能で設置も簡単、ブラウザ枠いっぱいに背景画像を配置するスクリプト -bgStretcher | コリス
2012/02/09
388 users
bgStretcher
コリス
スクリプト
スライド
斜め方向
デモページ：Super Slider スライドのスーパー版で、斜め方向のスライドで画像を切り替えます。 bgStretcherの主な特徴 セットアップはシンプル 全てのモダンブラウザをサポート 画像は一枚だけでなく、複数枚にも対応 対応ブラウザ Internet Explorer 6, 7, 8, 9 Firefox 2, 3, 4 Opera 9+ Safari Chrome bgStretch... 続きを読む
CSSを使ったレイアウトのテクニックがしっかり学べる良コンテンツ -Learn CSS Layout | コリス
2013/01/10
326 users
コリス
プロパ
CSS
レイアウト
displayプロパティ
全部英語ですが、CSSを使ったレイアウトのテクニックがしっかり学べるコンテンツを紹介します。 Learn CSS Layout コンテンツは最新のモダンブラウザでご覧ください。 以下、簡単な説明を添えて紹介します。 no layout まずはレイアウトが無い状態から、ここではブラウザのサイズを変更して一行の長さを考えてみましょう。 displayプロパティ レイアウトをコントロールする最重要プロパ... 続きを読む
古いCSSリセットからはもう卒業！モダンブラウザに適した新しいCSSリセット -A Modern CSS Reset | コリス
2019/10/07
261 users
CSS
知見
リセット
ターゲット
コリス
モダンブラウザをターゲットにしたWeb制作では、CSSにおけるブラウザの互換性の問題はIE6の頃に比べるとはるかに少なくなりました。無理なリセットやすべてをリセットする必要は全くありません。 現在のWeb制作に合わせて制作された新しいCSSリセットを紹介します。 CSSの知見やテクニックも満載です！ A Modern CSS Res... 続きを読む
CSS3アニメーションを使ったボタンホバーの12種類のかわいいエフェクト | コリス
2013/06/19
227 users
コリス
アニメーショ
かわいいエフェクト
Firefox
デモ
CSS3アニメーションを使った、ちょっと素敵なかわいいホバーエフェクト12種類のデモを紹介します。 12 fancy buttons デモはChrome, Safari, Firefoxなどのモダンブラウザでご覧ください。 12種類の中から、特に気に入ったものを下記にピックアップしてみました。 ※各CSSはエフェクトの箇所のみで、ベンダプレフィックスは省略しています。 demo 4 のアニメーショ... 続きを読む
HTML - IEユーザーを撲滅させるためのjavascript。さぁ今すぐWEBサイトに組み込もう！ - Qiita [キータ]
2013/06/20
225 users
confirm
キータ
false
アラート
Qiita
結論-IEを判別してアラートを出し、モダンブラウザのダウンロードページに移動させる そのためのコードがこちら。headタグ直下にでも配置しましょう。 <script language="javascript"> var isMSIE = /*@cc_on!@*/false; if (isMSIE) { if(confirm('〇〇〇〇*はInternet Exprolerに対応しておりません。本サ... 続きを読む
[CSS]デザインは美しく、かわいいアニメーションを備えたナビゲーションを実装するデモ | コリス
2013/04/22
211 users
MENU
半透明
コリス
グラデーション
アニメーション
シンプルなリストを使って、アイテムがホバー時に吹き出し状にポップアップするかわいらしいアニメーションを備えたナビゲーションを実装するスタイルシートのデモを紹介します。 アニメーションもかわいくて素敵ですが、半透明のグラデーションもとても美しいナビゲーションですね。 デモは、最新のモダンブラウザでご覧ください。 Menu 実装は下記のようになっています。 HTML シンプルなリストで実装されています... 続きを読む
古いリセットCSSからはもう卒業！ モダンブラウザに最適化された新しいリセットCSS -A (more) Modern CSS Reset
2023/10/05
201 users
知見
MORE
CSS
リセットCSS
ターゲット
モダンブラウザをターゲットにしたWeb制作では、リセットCSS自体が必要ないかもしれません。とは言っても、設定しておきたいスタイルや一部のブラウザ用に設定しておきたいスタイルがあります。 現在のWeb制作に合わせて制作されたリセットCSSを紹介します。なぜそうするのか、なぜそれを使用しないのか、CSSの知見やテ... 続きを読む
CSSの数学関数が便利すぎる！min(), max(), clamp()の使い方を詳しく解説 | コリス
2020/05/28
182 users
CLAMP
Calc
コリス
ＭＡＸ
min
CSSの数学関数と言えば、calc()が便利ですよね。 しかし、便利な数学関数はcalc()だけではありません！ 先月、Firefoxにサポートされたことにより、すべてのモダンブラウザにサポートされたCSSの数学関数「min()」「max()」「clamp()」の使い方を紹介します。 最大幅や最小幅を計算式で定義できる「min()」「max()」、フ... 続きを読む
[JS]動画をブラウザいっぱいやエレメントの背景として配置できるスクリプト（スマホにも配慮） -Vide | コリス
2014/07/25
171 users
jQuery
div
WebM
vide
代替
,mp4, .webm など、動画をブラウザいっぱいやdivなどのエレメントの背景として配置できるjQueryのプラグインを紹介します。 デスクトップでは動画が再生され、スマホでは仕様のため代替の静止画像が表示されます。 Vide Vide -GitHub Videのデモ Videの使い方 Videのデモ デモでは、動画がブラウザいっぱいの背景として表示されています。 モダンブラウザ、IEは9+で... 続きを読む
いいこと聞いた！ CSSのデフォルトとして記述しておくと便利、img要素に設定するスタイルのまとめ
2023/12/12
159 users
CSS
img要素
リセットCSS
デフォルト
ターゲット
最近ではモダンブラウザをターゲットにした場合、リセットCSS自体は必要ないかもしませんが、設定しておきたいスタイルや一部のブラウザ用に設定しておきたいスタイルがあります。 その中の一つとして、img要素に設定しておくと便利なスタイルを紹介します。 最近のリセットCSS、また設定しておきたスタイルや一部のブラ... 続きを読む
[CSS]斜めのダイヤモンド状のグリッドを実装するスタイルシート | コリス
2013/01/14
157 users
レスポンシブ
コリス
チュートリアル
スクリプト
グリッド
画像やスクリプトを使用せずに、スタイルシートだけで斜めのダイヤモンド状のグリッドを実装するチュートリアルを紹介します。 Who Says the Web is Just for Squares? デモ 実装 デモ スタイルにはCSS3を使用しているため、モダンブラウザもしくはIE9+でご覧ください。 デモページ：1,200pxで表示 グリッドはレスポンシブにも対応しています。 デモページ：800p... 続きを読む
シンプルなデザインが嬉しい、IE7もサポートしたレスポンシブデザイン用のHTML5フレームワーク -Wirefy | コリス
2012/07/16
147 users
コリス
robots.txt
jQuery
フレームワーク
HTML, CSSだけでなく、jQueryやmodernizrなどJavaScriptやrobots.txtなど、ウェブサイトを構築する際の基本セットが揃ったレスポンシブデザイン用のフレームワークを紹介します。 Wirefy Wirefyの対応ブラウザとデバイス Wirefyのデモ Wirefyの対応ブラウザとデバイス WirefyはIE7をはじめ、すべてのモダンブラウザ、スマートフォンデバイス、... 続きを読む
IE8以上ならもうスクリプト無しでOKのモーダルウインドウを表示するスタイルシート -CSS Modal | コリス
2013/05/13
146 users
コリス
iOS
モーダルウインドウ
スクリプト無し
配置
テキストや画像などのリンクをクリックすると、画像をはじめあらゆるHTMLの要素が配置可能なモーダルウインドウを表示するスタイルシートを紹介します。 CSS Modal CSS Modal -GitHub CSS Modalのデモ CSS Modalの使い方 CSS Modalのデモ デモはIE9を含む、すべての最新のモダンブラウザでご覧ください。モバイル系は、iOS, Android2/3/4のM... 続きを読む