Review Of Cross-Browser Testing Tools — Smashing Magazine
Regardless of the tool you choose, testing early and often during the Web development process can save you from a lot of headaches later. Find a tool that fits your workflow with a little help from Cameron Chapman. At some point in the future, the way that all major browsers render Web code will likely be standardized, which will make testing across multiple browsers no longer necessary as long as
クロスブラウザテストツールまとめ - Smashing Magazine
Smashing Magazine - WE SMASH YOU WITH THE INFORMATION THAT WILL MAKE YOUR LIFE EASIER, REALLY. すべてのブラウザがWebの標準技術を適切に実装した場合、制作したWebページやWebサイトを複数のブラウザを使ってチェックする必要はなくなる。どれかひとつのブラウザで試験すれば、それ以外のブラウザでも同じように表示され、同じように動作するからだ。 たしかに、最新のブラウザとHTML5以降のWeb技術を使ったサイトではそうした傾向が強まっている。しかしながら、古いブラウザは依然として影響力のあるシェアを確保し続けているし、現実問題として、クロスブラウザテストを無視したサイト制作は現実的ではないという状況にある。この状況はまだ数年は続きそうだ。 そうした場合に利用できる有償および無償のクロスブラウザテストツ
もしも10分の1の行数でHTMLが書けたら
Zen-Codingとは 1年ほど前から、Zen-Codingが話題になっています。Zen-Codingを使うと、特定の省略された記法を展開できます。この展開が非常に強力で、ちょっとしたHTMLを記述するのであれば、Zen-CodingでHTMLやCSSのマークアップを効率的に行えます。 Zen-Codingはさまざまなテキストエディタに対応したプラグインとして提供されています。プラグインには、公式対応しているものと、サードパーティの開発者が作成したものがあります。 それぞれのプラグインによって、実装機能が異なる場合があります。これらのプラグインの詳細はZen-Codingの公式サイトから確認できます。 基本的な使い方 ここからはZen-Codingの基本的な使い方を解説します。Zen-Codingをテキストエリアで利用できるサンプルを用いて、実際に試しながら読み進めてください。テキストエ
HTML5 × CSS3 × jQueryを真面目に勉強 – #8 jQueryプラグインの作り方について詳しく | DevelopersIO
僕は人の名前を覚えるのが苦手です。それはさておき、jQueryプラグインの作成方法について頻繁に忘れるので、手順をここにまとめておくことにします。コレさえ読めば急にプラグインを大量に作れといった無茶ぶりをされても大丈夫。 多い日も安心♪（ゝω・）vｷｬﾋﾟ はじめに - jQuery プラグインの構成 細かい差はあれど、基本的にjQueryプラグインは以下のような構成で成り立っています。 // 匿名関数で全体をラップ - (5) (function($) { // このプラグインの名前 - (1) $.fn.name_space = function() { //要素を退避 - (2) var elements = this; // 要素をひとつずつ処理 - (3) elements.each(function() { // 具体的な処理をここに記述 }); // method chain
【Webデザイナ－・コーダー向け】すぐに使えるSCSS入門｜Mixinsを作ってみよう編 | DevelopersIO
はじめに。 基礎編、compass編、知らないと損する機能編と今回の「Mixinsを作ってみよう編」で第4回目になります。 全部読んで理解すれば、もうSCSSをがっつり使えるようになっているんじゃないでしょうか！僕もこのシリーズ記事を書きながらドキュメントを読んで色々知ることができました。 今回はプログラムを書いたことのない方にはほんの少し難しいかもしれません・・・でも、投げ出さずに使ってみてください。理解できたときには少しプログラミングが好きになると思います。 それでは、第4回目「Mixinsを作ってみよう編」いってみよー。 SCSS（Sass） Mixinsとは SCSS（Sass） Mixinsとは簡単に言うとSCSS全体で再使用することができ、多種多様なスタイルを生成できる機能です。 引数を使い生成するスタイルを制御することもできます。 Mixinsの基本 Mixinsを使うには2
1分でわかるUIとUXをわかりやすく説明する写真とお話 | インタラクションとデザイン
ユーザインタフェース 使いやすいように、 わかりやすい画面に、 間違えにくいように、 美しい情報デザイン、 丁寧な説明。 すばらしいユーザインタフェースができた。 ユーザエクスペリエンス しかし、そのATMは少し時間がかかった。 結果的にお客さんは並ぶことが多くなった（気分を害す、イライラ）。 「お金を引き出す、預ける」という銀行の体験は悪くなってしまった。 解説（UIからUXが重要と言われようになった理由） この場合、良いユーザインタフェースを設計できたとしても、並んでしまうことを問題として扱わなくなる。ユーザインタフェースの設計としては、最高のATMを提供することはできるだろう。しかしユーザエクスペリエンスからみると、最高の預金・引出体験にはらない。つまり、最高のUIを提供しても、ユーザの問題を解決したことにならない。だから「ユーザの体験という視点からUIを設計していこうよ！」という流
いきなりホームページ！: サクラエディタ用Zen-Coding CSS用スニペット・テキストまとめを作っておいた
ホームページを作る(53) HTML(18) CSS(17) エディタ(90) Meryﾃｷｽﾄｴﾃﾞｨﾀ(19) HTMLエディタ(9) CMS(26) SEO(8) 画像関係ソフト(6) ウィルス(5) スパイウェア(5) PC(48) ブラウザ(55) ソフト(22) ブログ(8) php備忘録(9) ニュース(13) サーバーの知識(6) 迷惑メール(3) 正規表現(1) 気になる話(4) Linux(13) スクリプト言語(1) 個人的な話(12) Xserver 名前:アラフォー親父 年齢:アラフォー世代でいいのか？ 誕生日:免許更新で気が付くレベル 性別:親父 職業:親父 ウェブサイトURL:http://web-edit.jimdo.com 今年はPC歴やっと5年目に突入、あと２年で５０かよ… 未だ未知の領域が多いPCの世界です。 現在は、プログラミングにも興味が出てきてい
Zen-Coding、0.7のすすめ
Zen-Coding、0.7のすすめ 2012-07-01 / 2013-02-27 HTML/CSSのコーディング速度が3倍上がる、といわれるZen-Coding。 使いこなしてコーディング速度が3倍になっていますか？ SassとかLessとか流行ってる中、あえてZen-Codingを紹介します。 (Zen-Codingの現在のバージョンは0.7です。 古いバージョンを使用している方はアップデートをお勧めします。) 追記 Zen-Codingとは Zen-Codingは様々なエディタに対応しており、Webデザイナーでも導入が容易なのが魅力です。 エディタのサポートは、3つの分類に分かれます。 公式サポート Aptana/Zend Studio/Eclipse (Win/Mac/Linux) TextMate (Mac) Coda (Mac) Espresso (Mac) Komodo E
知らない人は損してる？コーディングが3倍速くなるZen-Codingを導入してみた - EC studio デザインブログ
最近になって急に盛り上がってきているZen-Codingをみなさんご存知ですか？ Zen-CodingはHTML/CSSをショートカット＋スニペットで簡略化してコードを書くことができるライブラリです。 独立したテキストエディタソフトではなく、既存のHTML/CSSエディタにプラグイン的に導入するものです。 Zen-Codingというのもがどういうもので、どんなすごいものなんだ、というのはこちらの動画を見てください。 ※音が出ますのでご注意ください。 Zen Coding v0.5 from Sergey Chikuyonok on Vimeo 一体何がおこわれているのか？という感じだと思われますが、今回の記事ではこのZen-Codingの導入方法と使い方の一例を紹介します。 Zen-Codingに対応しているエディタは色々あるのですが、今回は弊社の開発環境しているAptana Studio
ブラウザで動くZenCodingEditorを作りました！ | kzms2 – html,css,javascript
動画デモ Zen-Codingをブラウザ上で触って、リアルタイムプレビューが出来るものを作成してみました。 エディター持って無くてもブラウザだけあればOkですよ！ kzms2 zen-coding editor 対応ブラウザなど 見た限りですとIE、Firefox3.5、Chrome4、Opera10、Safari4などで動くようです。 ※ただし、Webkit系はHeader内に書いた要素がうまくリアルタイムにプレビューされない模様です。styleタグをbody内に書けば表示されます… 使い方や詳細は続きから Zen-codingの概要 Zen-codingはショートカットキーを用いることでコーディングする時間を早めることが出来るソフトのようなものです。 TextMate-and-ZenCoding from komori, masaaki on Vimeo. 以下のリンクが詳しいで
マークアップ効率化 - zen-codingでコーディングを倍速に
HTMLの記法について 基本的には「div」の様に要素を省略せずに記述して、それを展開すると「<div></div>」という形に展開されます。 このときに展開できる要素は以下の公式ドキュメントに明記されていますのでそちらを見るとよいです。 Zen HTML Elements Zen HTML Selectors Zen CheatSheets 基本的な記法 ひとつずつ順番に記述して説明していきます。しばらく初歩的な説明になるのである程度知っている方は飛ばしていただいて良いかと思います。 まずものすごく基本的な記法である、単独タグの記法について説明を行います。 cssのセレクタをイメージしながら見ていくと納得しやすいと思います。 タグだけ変換 変換前 div 変換後 <div></div> デモ 文末でtabを押してください div 変換後、div要素の間にカーソルが移動するので、すぐにテキ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://junyakuwabara.com/?p=1105