レスポンシブ・イメージ的に今使えそうな部分と、WordPressでの扱い方 | バニデザノート
レスポンシブ・イメージ。 ざっくり言うと、「retinaなど高解像度なディスプレイも増えてきたし そろそろPCビューでも@2xと@1xと両方の画像を処理しましょうかね。」 ・・という処理と、 レスポンシブレイアウトの際にさらに 「どうやって高解像度画像とノーマル画像を扱っていくの？」 っていう課題みたいなところのことかなと思っています。 そんなレスポンシブ・イメージ的なコーディングのしかたと ついでのWordPressで「今」どうやって扱うといいかなぁという考察です。 「retina.js」は、「/images」 などのフォルダに「a.jpg」 と 「a@2x.jpg」 を放り込めば自動でretinaな場合にのみ@2xに変えてくれる便利なjsです。 →わたしが使ったタイミングがだいぶ前なので、今はよくわからないのですが なんとなく重い、あと、なんか変換されてるのか不安になるので、設定が簡単
Bootstrapの新バージョン3のRC1がリリース！デスクトップからモバイル優先に、IE7, Firefox3.6はサポート外に
Bootstrap 3のRC1がいよいよリリースされました。 RC1はリリース候補版で、可能な限り広範囲でテストをすることを目的としたものです。 Bootstrap blog: Bootstrap 3 RC1 Bootstrapは今まではデスクトップ寄りのよく使うインターフェイスをまとめたフレームワークでしたが、Bootstrap 3ではモバイルファーストになり、CSS/JavaScriptなど1,600項目以上、ファイルも300以上が変更されました。 WIP: Bootstrap 3 ブラウザはIE7, Firefox3.6のサポートが中止されます。これはIE7は「*」と「zoom:1;」のハックを削除したこと、Firefox3.6は「-moz-box-shadow」のハックを削除したことによるものです。 また、スタイルシートをレスポンシブ用も含め一つのファイルにまとめたり、ライセンスが
話題のサークルデザイン｜展開可能なソーシャルボタンをjQueryで実装できる「ClassySocial」
スマートフォン用に作られたアプリのうち、今年はサークルが広まっています。 同時にフラットデザインなんかと併用して使われることがあり、今回はこうしたサークルデザインのアクセントとして使うことが出来るサークルボタンをご紹介致します。 これはjQueryを利用して、比較的簡単に設置出来るのが利点です。 以下からダウンロード可能。 ClassySocial | Class.PM とりあえずイメージとしては以下の様な。 中心から周りに展開。 ボタンから右へ展開。 今回の紹介されているものは、ソーシャルボタンですが、使い道はいろいろですね。 設置 jQueryお決まりのコレ。<head></head>内に記述。 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 続いて、CSS
要素を天地左右中央に配置できる簡単超軽量スクリプト -Midway.js | コリス
デスクトップやスマフォ・タブレットのレスポンシブ対応で、画像やテキストなどを天地左右の中央に簡単に配置できる超軽量（1KB）のスクリプトを紹介します。 作業は、HTMLに2つ追加するだけです。 Midway.js Midway.jsのデモ Midway.jsの使い方 Midway.jsのデモ 天地左右中央配置は表示サイズを変更しても、変わらずに天地左右中央配置になります。 デモは、ブルーの矩形の中に、ホワイトの要素を天地左右中央配置にしています。 まずは、デスクトップサイズから。 デモページ：IE7モードで表示 Midway.jsの使い方 使い方は簡単で、ステップは2つです。 Step 1: 外部ファイル head内に、スクリプトを外部ファイルとして記述します。 <head> <script src="http://code.jquery.com/jquery-latest.js"></s
[JS]コンテンツをデスクトップ時はタブに、タブレット・スマフォ時はアコーディオンにするスクリプト
シンプルなHTMLで、デスクトップ時は水平・垂直のタブに、タブレット・スマフォ時はアコーディオンに自動変更（指定も可）するレスポンシブ対応のjQueryのプラグインを紹介します。 Easy Responsive Tabs to Accordion Easy Responsive Tabs to Accordion -GitHub 特徴 デモ 使い方 特徴 レスポンシブ対応のタブをシンプルなHTMLで簡単に実装可能。 デスクトップ時はタブ、スマフォ時はアコーディオン。 同じページに複数のタブをセット可能。 IE7+を含むクロスブラウザ対応。 デスクトップ、タブレット、スマフォのクロスデバイス対応。 デモ デモはIE7+を含むデスクトップ、タブレット、スマフォでご覧ください。 まずは、デスクトップサイズで表示してみます。 デモページ：幅1200pxで表示 デスクトップ時はタブで、上：水平型、下
IEの古いバージョンをサポートしつつ、モダンブラウザ用のサイトを制作する時の20のアドバイス
Microsoft公式のIEのデベロッパサイト「modern.IE」から、古いブラウザをサポートしつつモダンブラウザ用のサイトを制作する時に役立つアドバイスをクロスブラウザの観点や、HTML, CSS, JavaScriptの実装時ごとに紹介します。 20 tips for building modern sites while supporting old versions of IE 下記は、各ポイントを意訳したものです。 クロスブラウザ HTML CSS JavaScript クロスブラウザ ウェブサイトはすべてのブラウザで同じように見える必要はありません。 例えば、最新のブラウザではよりリッチなUIを提供し、古いブラウザではソリッドに機能させます。 開発をシンプルにするために、堅実なテンプレートを利用しましょう。 動作が安定しているスタンダードにフォーカスを合わせて制作する。 スタ
次のレベルまでWEBサイトを引き上げてくれるCSS、javascriptテクニック集
CSSやjavascriptを利用してサイトをよりリッチな表現に変えていくというのは、WEB制作の現場では常に行われていて、様々なスニペットやライブラリが日夜リリースされています。今日紹介するのは次のレベルまでWEBサイトを引き上げてくれるCSS、javascriptテクニック「CSS and JavaScript tools to take your website to the next level」です。 Countable.js 様々なCSSやjavascriptによるテクニックがまとめられていますが、今日はその中からいくつか気になったものを紹介したいと思います。 詳しくは以下 iCheck クリックしたラジオボックスやチェックボックスから、返り値をとれるjavascript。それをキーにして何かを動かしたいときに。 Almost Flat UI フラットデザインUIを簡単に実装で
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
