スピードアップした！フロントエンジニアがWeb制作のために知っておきたいことまとめ
作成：2014/01/14 更新：2014/11/01 Web制作 > 以前までHTMLコーダーと呼ばれていたフロントエンドエンジニアは、表現の進歩やトレンドに伴って、ＣMSやAPIなどより高度な技術や知識を求められるようになりました。今回は今以上に効率化するために、フロントエンドやWebデザイナーが必要とする知識をまとめました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ マルチデバイス対応 １．フルードレイアウト ２．ドロップレイアウト ３．ワンキャンバスレイアウト ４．可変グリッド ５．ブレイクポイント参考 ６．レスポンシブ対策ライブラリ パフォーマンス改善 ７．ページを高速化する CMS ８．WordPress化 HTML5 API ９．API一覧 クロスブラウザ対策 １０．IE関連 １１．横置き／デバイス対策 １２．Retinaディスプレイ対策
画面サイズに応じてテキストを自動リサイズしてくれるjQueryプラグイン「Responsive Text」:phpspot開発日誌
Responsive Text 画面サイズに応じてテキストを自動リサイズしてくれるjQueryプラグイン「Responsive Text」 そのテキストのコンテナをベースに各デバイス用にレスポンシブにリサイズしてくれるみたい ページ読み込み時にjQueryプラグインを初期化するだけで簡単に使えます 関連エントリ クロス環境で動作するレスポンシブスライダー実装jQueryプラグイン「FerroSlider」 レスポンシブなサイトのワイヤーフレームを作る際に使えるWEBツール「Responsive Wireframes」 レスポンシブでタッチフレンドリーなスライドを作れるjQueryプラグイン「Glide.js」 レスポンシブなナビゲーションメニュー作成用jQueryプラグイン「Naver」 リストをselectに変換してくれるレスポンシブサイト用jQueryプラグイン「Menutron」 タ
レスポンシブWebデザインのリソースをまとめているハブサイト・「Responsive Design Knowledge Hub」
Responsive Design Knowledge HubはRWDの情報を収集したナレッジハブサイトです。定義に始まり、チュートリアルやツール、インスピレーション向上のためのリソース、フレームワーク等がまとめられています。 Responsive Design Knowledge Hub
[JS]ページ上のあらゆる要素を簡単にレスポンシブ対応にするスクリプト -Responsive Elements
最も狭い幅では、テキストのみに。 Responsive Elementsの使い方 Step 1: 外部ファイル head内にjquery.jsと当スクリプトを外部ファイルとして記述します。 <script src="jquery.min.js"></script> <script src="responsive-elements.js"></script> Step 2: HTML レスポンシブ対応にする要素に「data-respond」を加えます。 <div class="quote" data-respond> Step 3: JavaScript スクリプトは特に記述する必要はありません。 Step 4: CSS レスポンシブ用のスタイルを定義します。 ltは未満、gtは以上で、「.lt500」は500px未満、「.gt150.lt300」は150px以上300px未満のスタイルにな
Adobe製超軽量！！レスポンシブCSS フレームワークTopcoat
Adobe製超軽量レスポンシブフレームワークTopcoat デザインしたくないシリーズ、第二弾！最近とっても気に入っているレスポンシブフレームワークTopcoatを紹介します。 Topcoatとは TopcoatはAdobe製のレスポンシブフレームワークで、最大の特徴がとにかくめっさ早い！ってこと。 jQueryMobileを使ってよくスマートフォンサイトを作っていたのですが、「いかにもjQuerymobile」感があったり、重い、デザイン上のカスタマイズがしずらいというものがありました。 ところがどっこい、Topcoatはとにかく軽く、さくさく。フレームワーク元のデザインも「今風」なフラットでシンプルなデザイン。 シンプルだから、後からカスタマイズも非常にしやすいのが特徴です。 流行りのフラットなデザイン ボタンやフォームの一つ一つがフラットで洗練されたデザインというのも特徴で、シンプル
目指せ効率化！レスポンシブWebデザインを制作する際に役立つサイト6選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。デザイナーのももこです。 直近は、雨の降る鎌倉でアイドルに大量の和菓子を渡す忙しい日々を送っております。 今回はレスポンシブWebデザインのサイトを制作する際に役立つツール、Webサイトを6つご紹介します。 The Responsinator iphone・Android・iPad・Kindleの枠にそれぞれWebサイトを嵌めこんで表示してくれます。シンプルなデザインの枠が素敵です、縦横表示を同時に見れるのも利点ですね。 http://www.responsinator.com/ Responsive Web Design Test Tool モニターの大きさを変えてリアルタイムにレスポンシブの動作確認が出来ます。 画面にメモリがついており、右上に画面サイズも出ているので使いやすいです。 スマートフォンからデスクトップまで各製品の画面サイズも用意されており、お手軽に利用できます
レスポンシブ対応サイトを作成する超軽量のスクリプト -skel.js | コリス
スタンドアローンで動作する19KBの超軽量スクリプト。 さまざまなレイアウトに対応できるグリッド。 表示サイズごとのブレイクポイントの設定も簡単。 resetやbox-modelなどの有用なCSSのショートカットを用意。 プラグイン機能も備えているので、拡張にも対応。 skel.jsのデモ デモはシンプルな構成のページが表示が用意されています。 まずはデスクトップサイズとして、幅1200pxで表示してみます。 デモページ：幅480pxで表示 skel.jsの使い方 jQueryや他のスタイルシートなどを用意せずに、すぐに利用できます。 Step 1: 外部ファイル 当スクリプトを外部ファイルとして記述します。 <script src="skel.js"></script> jQueryもスタイルシートも他のファイルは必要ありません。 Step 2: スクリプトのセットアップ スクリプトのセ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
新着記事