2015年、Web制作者が押さえておきたいCSSの各種リセット、アニメーション、フレームワーク、アイコンのまとめ
制作時に欠かせないリセット用のCSS、ページのグリッドやレイアウト・コンポーネントが用意されたフレームワーク、クリック・タップやホバーやスクロールを楽しませるアニメーション、モバイルにもフレンドリーなCSSでつくられたアイコンなど、ゼロから用意するのはかなり大変なCSSの便利なフレームワークを紹介します。 リセット用のCSSはこの3種類 レスポンシブ対応の定番フレームワーク Material Designに対応したフレームワーク さまざまなアニメーションが簡単に実装できるCSS かわいいアニメーションを使ったローダー 使いやすいアイコンフォント・Pure CSSのアイコン リセット用のCSSはこの3種類 HTMLの各要素のブラウザごとに異なる差異をなくし、意図した通りに実装できるようスタイルをリセットするスタイルシート。 Reset CSS 2.0 HTMLの各要素のmarginやpadd
Bootstrapの使い方超入門 (1/4) - ＠IT
話題のレスポンシブWebデザインも簡単にできる、CSSフレームワーク「Bootstrap」の概要と基本的な使い方をサンプルとコードを交えて紹介します。 最近はやりのHTML5、JavaScriptライブラリ、CSS3、APIの紹介、またそれらを組み合わせたサンプルアプリケーションの紹介と解説を厳選して紹介、解説していく本連載「HTML5アプリ作ろうぜ！」。今回紹介するフレームワークは「Bootstrap」です。 話題のレスポンシブWebデザインも簡単にできる、CSSフレームワーク「Bootstrap」とは 現在のWeb制作、開発では、ともにスピードが重視されています。「Bootstrap」を使用すると、既に用意されているスタイルを適用するだけで、格段に速く見栄えを整えられます。事実、Webシステムの管理画面などでBootstrapを使用するケースも増えてきました。 Bootstrapは最近
フリーの iOS 向け音声認識／音声合成ライブラリ『OpenEars』の使い方 - その後のその後
OpenEars は Politepix 社より提供されているフリーの iOS 向け音声認識／音声合成（Text to Speech, TTS）ライブラリです。 OpenEars 話した言葉を認識したり、入力した文字列を読み上げたり（mac の say コマンドみたいなもの）することができます。 試してみたところ超簡単に使えたので、自分のアプリに OpenEars を導入する方法を紹介します。 音声合成の導入方法 フレームワーク追加、ヘッダインポートといった一般的なライブラリの導入手順をのぞけば、基本的にはメソッドを1つ呼ぶだけで導入できます。 1. フレームワークをプロジェクトに追加 解凍したフォルダ配下にあるFrameworkフォルダごとプロジェクトに追加します。フォルダには OpenEars.framework、Slt.framework ほか、言語モデルや辞書が入っています。 また
Pure を使って 5分でレスポンシブな Blog テンプレートを作る
Pure は Yahoo! が公開した CSS フレームワークですが、試しに使ってみましょうということで、自分で書くスタイルは極力少なくして、簡単に Blog のテンプレートっぽいものを作ってみました。 さすがに 5分はウソです すいません。でも簡単でしたよ。 Pure ： A set of small, responsive CSS modules that you can use in every web project. Pure とは Pure は、簡単に言ってしまえば Twitter が公開している Bootstrap などと同じ、CSS のフレームワークですが、CSS のみに絞ることで、その容量は最大で 5.7KB とかなり軽量。Yahoo! の CDN から読み込めば、gzip された状態で読み込めます。 また、各機能を個別に読み込むことも可能ですので、必要な機能だけを選択す
クライアントサイドJavaScriptでのビューの作り方4つ - id:anatooのブログ
追記: 指摘により、UIオブジェクト型を追加した(thx @kanreisa)。 クライアントサイドJavaScriptでのビューの作り方を大別すると、3つ4つある。 DOM操作型 テンプレートエンジン型 UIオブジェクト型 データバインディング型 ここでいうビューの作り方とは、有り体にいうとJavaScriptからどうやってDOM要素を生成したりするかどうか。イベントリスナーの登録とかも含む。 DOM操作型 昔ながらのやり方。jQueryとか使って直接DOM操作してビューを作る。 // 例えば、<div class='hoge'>fugafuga</div> みたいなDOMを表示する var myView = $("<div class='hoge'/>"); myView.text('fugafuga'); // body以下に挿入 $(body).append(myView); 長所
Pythonを始めるなら、１ファイルの軽量Webフレームワーク「Bottle」がおすすめ - モジログ
「全てのwebエンジニアがPythonを勉強するべき2013年到来」（2013-01-01）という記事が人気を集めているようだ。巳年（ヘビ年）にひっかけて、これからPythonを勉強したい人を対象に、書籍やライブラリなどを紹介している。有益な情報が多数含まれているが、ちょっとPythonを試してみたいという程度の人には、これだと敷居が高すぎるように思う。 Pythonに限らないが、あたらしい言語をはじめるとき、もっとも障害になるのは「環境構築」だろう。Pythonの場合、LinuxやMacであれば、Pythonインタプリタは最初から入っているので、Pythonそのものをインストールする必要はない。しかし、「そのあとどうするのか？」というのが、なかなかむずかしい。例えば、「Hello, World!」を出すWebアプリを書くには、そこからどうすればいいのか。なんらかのWebフレームワークを使
JavaScriptテストの基礎知識と使えるフレームワーク6選
JavaScriptテストの基礎知識と使えるフレームワーク6選：フレームワークで実践！ JavaScriptテスト入門（1）（1/3 ページ） しっかりとJavaScriptの“テスト”を行うために、最近のJavaScript事情やテストを取り巻く環境、今注目のテストフレームワークを6つ紹介する JavaScriptでもテストを書こう ＠ITの読者の方たちのほとんどは、どのような言語を主に利用しているのかなどの違いはあるにせよ、日常的にプログラムを書いている方たちが多いかと思います。 アプリケーションを作る、ライブラリを作成する、オープンソースプロジェクトに貢献するなど、皆さんがプログラムを書く場面はそれぞれいくつかあるはずです。それらプログラムを書く場面に共通して大切な習慣の1つとして、「作成するプログラムに対しては必ずテストコードを書く」ことがあるのは、誰にでも同意してもらえることでし
JavaScript MVCフレームワークはすでに十種類以上、その比較や最新情報などのまとめ
グーグルが開発したJavaScript MVCフレームワーク「AngularJS」を紹介した1つ前の記事の反応が予想以上に大きく、1日たたずにブックマークが500以上もつきました。 本記事では、AngularJS以外にもすでにたくさん存在するJavaScript MVCフレームワークに関する情報をまとめて紹介したいと思います。 JavaScript MVCフレームワークの比較記事 既存のJavaScript MVCフレームワークを比較した記事が「The Top 10 Javascript MVC Frameworks Reviewed」です。Top10と書いてありますが、12種類のフレームワークの比較です。これは公開当時は10種類だったものが、その後11種類になり、今回のAngularJSの公開で12種類になったためです。 上記のような比較表を載せた上で、12種類すべての利点と欠点を説明し
iOSとAndroidに最適化したJavaScriptフレームワーク「jqMobi」登場。jQuery Mobileより小さくて高速
iOSとAndroidに最適化したJavaScriptフレームワーク「jqMobi」登場。jQuery Mobileより小さくて高速 jQuery Mobileと同様に、HTML5のマークアップでモバイルアプリケーション開発を実現するオープンソースのJavaScriptフレームワーク「jqMobi」のβ版が公開されています。 jqMobiのコンセプトは、jQueryとjQuery Mobileの機能のサブセットを、iOSとAndroid向けに最適化したものといえるでしょう。 すでにjQueryやjQuery Mobile、あるいはSencha Touchなど、さまざまなモバイル向けHTML5/JavaScriptフレームワークが登場する中で、jqMobiの特徴はどこにあるのか、ブログで次のように説明しています。 jQuery - still focuses on the desktop.
アイデアを大量生産できる最強のフレームワーク「オズボーンのチェックリスト」 | お土産屋さんブログ
若かりし頃、上司から「アイデアを出せ」「次の会議までにアイデアを考えておけ」と言われ、 そのたびに「またアイデアかよ・・・。」「全然思いつかない・・・。」と悩んだものです。 アイデア本を片っ端から読んで試してみましたが、そう簡単にはアイデアは出ないもので、上司へのアイデア報告は大変苦痛だったことを思い出します。 そんな当時の自分に「オズボーンのチェックリスト」を教えることができれば、ずいぶん状況は変わっていたのではないかと思います。 「オズボーンのチェックリスト」は、「入れ替えてみたら」「大きくしてみたら」「逆にしてみたら」などと、１つのお題からアイデアを大量生産することができるフレームワークです。 アイデア出しに困っている方、ぜひ「オズボーンのチェックリスト」を試してみてください。 「オズボーンのチェックリスト」は、どんなツールなのか？ ９つの視点から、アイデアを発想できるツールです。
クロスプラットフォーム開発ができるQt「キュート」とは
スマートフォンやタブレットPCのクロスプラットフォームのフレームワークである、Qt（キュート）を使ったアプリケーション開発の方法を紹介する クロスプラットフォームのフレームワーク「Qt」 昨年から、スマートフォンやタブレットが多数発売され、クロスプラットフォームな開発環境への関心が高まっています。 そこで、これから3回にわたり、特に最近注目を集めているクロスプラットフォームのフレームワークである、Qtを使ったアプリケーション開発の方法を紹介します。 Qtでは、1つのソースコードで開発したものをコンパイルし直すだけで、複数のプラットフォームで動かすことが可能です。 正式サポートしているプラットフォームだけでも、デスクトップではWindows、Linux、Mac OS X、モバイルでは、Windows CE、組み込みLinux、MeeGo、Symbianと多数存在しています。 他にもコミュニテ
Javaで軽快に使える「軽量フレームワーク」特集～リッチなGUIを構築する「Vaadin」（1）
はじめに フレームワークと言うと、多くの人は「アプリケーション全体を設計するもの」というイメージでとらえているかもしれません。しかし、もちろんそれだけがフレームワークではありません。例えばHibernateのように特定の機能に特化したものも存在します。 最近になって見られるようになってきたのが、「Ajax利用のためのフレームワーク」です。例えば、「Google Web Toolkit（GWT）」などのことです。Javaを使って、Ajax利用のWebアプリケーションを構築するフレームワークです。素のHTMLだけでは実現できないリッチなGUIを、JavaScriptの複雑なコードを書くことなく実現できるフレームワークとして、GWTは広く使われつつあります。 これまで、サーバーサイドのことばかり考えていた感のあるフレームワークの世界に、こうした「クライアントサイドの構築」を重視したものが登場する
効率的なWebアプリ開発の定石 ～Perl/Ruby/PHPユーザーのためのMVCフレームワーク入門～
はじめに 一般的なWebアプリケーション開発では、「Webクリエイター」と「Webプログラマ」という役割が存在します。Webクリエイターは画面表示に関するデザインやマークアップを担当し、Webプログラマは、動的処理機能の構築を担当しています。最終的にそれぞれのリソースの結合が行われ1つのサイトが完成します。 最近では、“リッチクライアント”というキーワードで語られる豊かなユーザーインターフェースを持ったWebアプリケーションの開発がトレンドとなっており、かつてサーバサイドでの技術を発揮していたプログラマにもクライアントサイドの知識や技術が要求されるようになってきています。こうした状況の中で、Webプログラマが効率的な開発を行い、新しい技術に挑戦するために今までの構築手法や開発工程を見直す必要がでてきました。 本稿では『システムの構造的に優れた設計』だけではなく、『あらゆるユーザーに配慮され
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
TechCrunch | Startup and Technology News
今年流行りのフラットなデザイン制作に役立つCSSフレームワークやPSD素材
Charming Python: Functional programming in Python, Part 3
ウェブ制作の時間を大幅に短縮する、今時のUIコンポーネントが簡単に実装できる -Chico UI
本格派エンジニアの工具箱 記事一覧 | gihyo.jp
syboos.jp
言語別フレームワークの比較 ～Perl/Ruby/PHPユーザーのためのMVCフレームワーク入門～ (1/6)：CodeZine（コードジン）