2015年、Web制作者が押さえておきたいCSSの各種リセット、アニメーション、フレームワーク、アイコンのまとめ
制作時に欠かせないリセット用のCSS、ページのグリッドやレイアウト・コンポーネントが用意されたフレームワーク、クリック・タップやホバーやスクロールを楽しませるアニメーション、モバイルにもフレンドリーなCSSでつくられたアイコンなど、ゼロから用意するのはかなり大変なCSSの便利なフレームワークを紹介します。 リセット用のCSSはこの3種類 レスポンシブ対応の定番フレームワーク Material Designに対応したフレームワーク さまざまなアニメーションが簡単に実装できるCSS かわいいアニメーションを使ったローダー 使いやすいアイコンフォント・Pure CSSのアイコン リセット用のCSSはこの3種類 HTMLの各要素のブラウザごとに異なる差異をなくし、意図した通りに実装できるようスタイルをリセットするスタイルシート。 Reset CSS 2.0 HTMLの各要素のmarginやpadd
Gulp.js入門 - コーディングを10倍速くする環境を作る方法まとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
普通に使う分には全く困らないほどの数のプラグインがGulpにはあります。 Githubでのstar数からも明らかなように、GoogleのWenStarterKitでもGulpが採用されるなど、注目度はますます高くなっています。 Gruntとの比較 Gruntと比較してのメリット・デメリットは以下のようになります。 メリット Gruntより設定ファイルが記述しやすい StreamAPIを利用することでファイルを毎回書き出すGruntより高速でエコ デメリット 記述がよりNodeに近くなるため、複雑なことは敷居がやや高め プラグイン開発のためのドキュメントが少ない 今日のゴール Gulp.jsを使ってコーディング作業を10倍速くする！ そんな環境を作りたいと思います。 1. Node.jsをインストール まずはNode.jsをインストールしましょう。 Node.js http://nodejs
テンプレートエンジン「EJS」とタスクランナー「Gulp.js」で爆速HTMLコーディング | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは！ LIGフィリピン支社代表のせいと(@seito_horiguchi)です。 突然ですがみなさん、EJSってご存じですか？ EJSっていうのはですね、なんかもう、こう、すんごいツールでして！ とにかく、使うとコーディングがめっちゃ早くなるんですよ！！ 今回はそれを使って、爆速でコーディングするテクニックの入門編を紹介したいと思います。 EJSとは？ EJSはテンプレートエンジンと呼ばれるツールの1つで、JavaScriptのような書き方を取り入れつつHTMLが書けるという特徴を持っています。 ざっっっっくり言い表すと、SassとCSSの関係に近いです。 「EJSデータでより楽な書き方をして、HTMLに変換して出力する」ことができます。 これが使えるようになると、例えばheaderやfooterなどのパーツを分割して共通化させたり、JSのfor文のような命令がHTML上で使えます
Yeoman で AngularJS ＆ UI Bootstrap の開発環境構築 - Qiita
これから AngularJS でアプリケーションを作るぜ！という方向けの、環境構築メモです。 モダンな開発をするために総合開発環境として Yeoman を利用 おすすめとされる AngularJS アプリケーション構成も適用 最低限のUIライブラリはいるだろうということで UI Bootstrap(AngularJS用のBootstrap)を導入 IDEとして WebStorm を利用 ただこれは私がたまたま使ってるだけなので、使わなくてもOK ちなみに私が試した環境は、つぎのとおりです。 Mac OS X 10.9.1 node v0.10.25 npm 1.3.24 YeomanとAngularJS雛形ジェネレータをインストール もしお使いの環境にまだ導入されてなければ npm でインストールします。
ブックマークレット – Feelingplace
何度かバージョンアップを繰り返している自作のブックマークレットですが、どれが最新版かわかりにくくなってきていたので、こちらに最新版を常に置いておきたいと思います。 ブックマークレットの種類 当ブログが現在公開しているブックマークレットは以下の2種類です。 Flickr2HTML Flickrの単一画像またはsetからブログに貼りつけるタグを取得します。 Video2HTML, Insta2HTML, YouTube2HTML はoEmbedブックマークレット への統合により、今後のメンテナンスを行いませんのでご了承ください。 Tweet2HTML, FocusHtml NEO は Twitter API v1.1 への移行により使用できなくなりました。 Tabelog2HTML は食べログ利用規約に抵触しているので、公開終了としています。 『Flickr2HTML』とアプリの説明に書いてあ
初めて1人でOkinawaGramというウェブサービスを作ったので色々調べた事とか書いてみる。 | Last Day. jp
初めて1人でOkinawaGramというウェブサービスを作ったので色々調べた事とか書いてみる。 最終更新日： 2013/08/04 HTML/CSS はじめに タイトルの通りに初めて1人でウェブサービスを作ってみました。ウェブサービスって言っても凄く簡単なものです。iPhoneアプリを初めて作った時もそうなのですが、最初は簡単なアプリから作り始めました。 OkinawaGram – Instagramから沖縄タグの付いた写真を集めてみました。 (参考:C言語すら知らなかった私が２ヶ月でiPhoneアプリをリリースするまでにやった事。 | Last Day. jp) 簡単なアプリケーションでもやっぱり完成すると嬉しいです。一回出来るようになれば大きな自信になるし、２個目からはもっと作りこんだアプリを制作すれば良いと思うのです。最初から複雑な処理があるアプリケーションに挑戦して頓挫するのが一番
Web開発に覚えておきたい便利なチートシート 16選 - ウェブシステムの構築＆運営
Web開発を行う際に、知らないものをインターネットで一々を調べるのも一つの手ですが、よく使うものを手元に置くと便利でしょう。本文はWeb開発者向け、絶対に覚えておきたい便利なチートシート 16選を紹介したいと思います。 原文：The Best Cheat Sheets for Web Developers | Web Resources | WebAppers １、jQuery Cheat Sheet jQueryライブラリのコア関数やイベント関数などのチートシート。 ２、Mootools Cheat Sheet Mootools チートシート ３、Ruby on Rails Cheat Sheet Ruby on Rails（RoR）のチートシート ４、Django Cheat Sheet Django のチートシート ５、YUI Cheat Sheet Yahoo! User Inte
無印良品、「持ってる」「ほしい！」をポチっとできる ソーシャルコマースサイト「my MUJI」オープン
『MarkeZine』が主催するマーケティング・イベント『MarkeZine Day』『MarkeZine Academy』『MarkeZine プレミアムセミナー』の 最新情報をはじめ、様々なイベント情報をまとめてご紹介します。 MarkeZine Day
Mac の Web 制作者向けおすすめアプリケーションまとめ
Macbook 購入した人に私がおすすめしたいアプリケーションをまとめておきました。 Adobe Web Premium 毎日使います。これは必ず入れておきたいソフトですね。Macbook だと心なしか高速です。 Adobe Creative Suite 5 Web Premium Macintosh版 ClamXav ウィルスチェックです。特定のフォルダの監視や新しいファイルのウィルススキャンができます。 ClamXav CleanArchiver .DS_Store などのファイルを含めずに圧縮フォルダを作れるので便利です。 Sopht Square – CleanArchiver AppCleaner アプリケーションのアンインストールが簡単にできます。 AppCleaner Evernote 打ち合わせの際に便利です。 すべてを記憶する | Evernote Corporation
WordPressをカスタマイズするなら覚えておきたいアクションフックとフィルターフック
WordPressのカスタマイズコードでよく見かける add_filter、add_action という関数。これは WordPressのプラグイン API という仕組みを利用したもの。プラグイン API - アクションフックやフィルターフックについて、大雑把ですがまとめてみました。 WordPress を使ってWebサイトを作る時、デフォルトの WordPress の動きを変更したいなーという時が多々あります。WordPress のデフォルトの動き（WordPress Codexでは振る舞いという言い方がされています。）でよく知られてるのは、記事を書くと自動的に <p> タグが入る … とかでしょうか。とにかくそういう WordPress の振る舞いを、何とかしたい場合ってありますよね。 こういった WordPress 独特の振る舞いは、WordPress のコアファイルと呼ばれてるとこ
| ＾＾ |秒刊SUNDAY | Firefoxで『感動した！』ってアドオン１５個
2008年09月17日 Firefoxで『感動した！』ってアドオン１５個 WEBの仕事をしていると、様々なアプリを駆使して作業をこなすという事が多いのですが、わざわざアプリを立ち上げなくてもよい、Firefoxのアドオンがこれだ。 ◆IE Tab ■IE Tab :: Firefox Add-ons もはやIEは確認用でしかない！IEをFirefoxで確認するアドオン ◆Style Sheet Chooser II ■Style Sheet Chooser II :: Firefox Add-ons スタイルシートを切り替える場合に使える。 ◆CSSViewer ■CSSViewer :: Firefox Add-ons マウスオーバで指定した箇所のCSSのパラメータを確認できる。 ◆CSS validator ■CSS validator CSSのW3Cチェック。すんごい厳しいコーディ
Firefoxでモバイル端末をシミュレートする独自アドオン「FireMobileSimulator」を公開します - 遙かへのスピードランナー
★重要★2008/11/15追加：公式サイトFireMobileSimulator.org開設にともない、この記事の更新はストップします。今後のアップデート情報は公式サイトで行いますのでよろしくお願いします。 モバイルサイトをPCで閲覧するために、従来からある方法として、キャリアの提供するシミュレータの使用、Proxyの使用、Firefoxのuseragentswitcher+modify headersの組み合わせ等、色々と手段はありましたが、これらの方法は、それぞれに不足している機能があったり、またITに詳しくない人とかだと導入段階でつまづいてしまったりします。 そこで、もっと簡単にモバイルサイトをPCで見るために便利なツールを作成しました。 Firefoxを簡単に携帯シミュレータにできるアドオンです。モバイル端末のHTTPリクエストや絵文字表示をシミュレートすることができます。３ヶ月
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Feelingplace