サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
サイズを変更するとアニメーションでパネルが移動するなどの派手な演出は一切無しで、レスポンシブ対応のレイアウトを素早く提供するjQueryのプラグインを紹介します。 jquery.columns -GitHub jquery.columnsのデモ jquery.columnsの使い方 jquery.columnsのデモ 対応ブラウザは、IE9/10, Firefox, Chrome, Safari, Operaです。 まずは、デスクトップサイズとして幅1,200pxでの表示から。 デモページ:幅480pxで表示 jquery.columnsの使い方 Step 1: 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして記述します。 <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.
昨日に続き今日も似たような内容 ですが。グリッドレイアウトの レスポンシブWebデザイン対応の CSSフレームワークですが、こちら はグリッドのカラム数やマージン を指定できます。 どんどん便利になりますね。最近同じ内容の記事ばかり書いてて自分がスパマーみたいな気分になってきましたが気にしないようにします。 グリッドレイアウト x レスポンシブなフレームワーク。DL前にカラム数などをカスタマイズ可能です。 カラム数などを入力してダウンロードします。逆に、数値を入れないとダウンロードできない様になっています。 デモファイルです。ウィンドウをリサイズするとそのサイズを上部に表示してくれますので調整しやすいのでは。 以下より利用できます。 34Grid
レスポンシブWebデザイン制作に便利なFirefoxの「レスポンシブデザインビュー」を紹介します。 「レスポンシブデザインビュー」はFirefox15から搭載されています。 1.「レスポンシブWebデザイン」とは 「レスポンシブWebデザイン」とは、PCやスマートフォンやタブレットなど、あらゆるデバイスに対応するWebデザインのことを指します。 レスポンシブ(Responsive)は、「よく反応して」「敏感な」という意味があるようです。 レスポンシブWebデザインを確認するには、複数のデバイスを用いるか、極端な話、PCでブラウザの幅を変更すればいいのですが、Firefoxの「レスポンシブデザインビュー」を利用すれば、より効率的に確認作業が行えます。 2.「レスポンシブデザインビュー」の使い方 レスポンシブWebデザインのサンプルサイトとして「NHKスタジオパーク」を利用させて頂きます。 N
先日このブログをリニューアルさせて頂いた旨をご報告させて頂きましたが、今回のリニューアルの主目的だったレスポンシブデザイン化について、とにかく効率優先で作業させて頂いた時のリソース関連や情報を一度僕自身の忘備録として抜粋してまとめさせて頂こうと思います!以前別のブログを作った時もそうですが、基本僕はとにかく効率重視派です。細部に渡る美しいデザインや、ガリガリのプログラミング。標準に法ったコーディングとかはその道のスペシャリストが仲間内に居るので、今回も僕は効率化に焦点を当てています! ご紹介させて頂くのは主にFacebookやTwitter周りで共有させて頂いてきたリソースばかりですが、実際に使ってみると見えてくる注意点や、戸惑った部分、周りのデザイナーにも知っておいて欲しい部分等が見え隠れしてきたので、まずはその辺りを中心に、作業ステップ毎に簡単にご説明させて頂こうと思います。 僕と同じ
A Responsive Design Approach for Complex, Multicolumn Data Tables | Filament Group, Inc., Boston, MA レスポンシブなテーブルを作るjQueryプラグイン「MediaTable」 divなブロックだったら、幅を適切に設定しておいてあげれば丁度画面の端で折り返されるところですが、テーブルをレスポンシブにするには? って考えた時に、「う〜ん、どうやろう」となってしまうと思います。そんな際は、重要なものだけに絞って表示しちゃいましょうというスタンスのプラグイン。 幅が狭くなったら9列あったものを3列にしちゃいます。かといって、見れなくなるのは困る、という場合もあるのですが、それも解決策として提案されています。 幅を狭めるとテーブルの表示項目が絞られて見やすいまま。 見たい項目がある場合は、プルダウン
以前の投稿で書きましたが、レスポンシブWebデザインでサイトを制作する際の課題の一つは、データの多いテーブルの見せ方です。その課題をクリアする「この方法なら行けるかも!」と思えるものが2つほどあったのでご紹介します。 どちらも甲乙つけがたい良い実装例で、技術的な問題がなければレスポンシブなテーブルの代表的な実装手法になっていくのでは?と思っています。 ドロップダウンでカラムの表示・非表示を選択 まずは、レスポンシブWebデザインの情報を探していると良く出てくるボストンの制作会社、Filament GroupのMaggie Costello Wachsさんが考案したものをご紹介します。オープンソース(GPL License)で、コードは自由に使って良いようです。 以下の画像のように、ドロップダウンメニューを実装して、カラムの表示・非表示をチェックボックスでコントロールできるようになっています
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
スマホ表示がFC2のデフォルトテンプレート使ってるような私にいわれたかないでしょうが、あくまでも使ってるユーザー側の視点として考えてもらえると嬉しいなと。 決して軽くするのが目的ではない 基本的にCSSでもじょもじょしているわけですから、例えばPC表示でサイドバーに画像があり、その領域をスマホに最適化する為に全て排除したとしても、見えないだけで読み込んでは居るわけですね。 Ethan Marcotte(イーサン・マルコッテ)氏が考案したレスポンシブWebデザインが生まれたのは2010年の5月。読み込みサイズに関してはやはり海外でも色々と議論されているわけでして、なかなかどうして大変ですねと。 そこから1年くらいたったあたりから日本にも広がりつつあります。 広がった理由はとてつもなく単純でして、PC表示、小型のスマホ、タブレットなど、様々なデバイスサイズに対応するために、全て1からCSSを書
【薄型大容量】10000mAhの超薄型バッテリーが登場 今なら60%オフの2779円で変換ケーブル付き! 様々なバッテリーを紹介してきたガジェット通信。今回紹介するのは『Anker Astro PowerBank』というバッテリー。このバッテリーは10000mAhという大容量モバイルバッテリーで更に薄型ボディーとなっている。ポケットやカバンの中に入れて持ち歩くのに最適ではないだろうか。 もはやモバイルバッテリーとしては当然の仕様としてUSBが2ポート搭載されており、同時に2つのデバイスを充電することも可能なほか、『iPad』の充電にも対応している。バッテリー残量は青いLEDにて4段階で把握可能。変換ケーブルまで付属しており、旅行や通勤、出張時に重宝するだろう。 しかし容量が容量なだけに満充電に0%の状態からだと15時間以上掛かってしまう。そんな時に便利なのがバッファローの『BSMPA09B
時間に対応した色のみで時刻を表現するという画期的なデザイン。 もちろん時間がわかりにくすぎるというご意見はあるかと思いますが。。 色しか情報が無いのに普通の時計と同じような面を持っている感じが良いなと。 そこが時計である唯一のアイデンティティを主張しているのであるという感じに萌えます。 一応側面にはメーターの様な時間を確認する窓はありますので、時間はわかるようにはなっています。 すごく欲しい! 本サイトでは事前登録ができるようになっています。 → http://colorclock.ru/ 「Time is color.」というコピーにしびれました。 via: Color Clock by Maxim Mezentsev » Yanko Design
インフォグラフィックやウェブサイトを手がける海外デザイン・スタジオ「oberhaeuser.info」のエクセル、パワーポイントのテンプレート作成事例を紹介します。 MAGNAGLOBAL EXCEL TEMPLATE [サイトで見る] クライアントは「MAGNA GLOBAL」。 サイトのABOUT USページを見ると、「the strategic global media unit」とあり、コンサルタント業務を行っているようです。 MAGNA GLOBAL メディア向け資料をインフォグラフィック・スタイルにしたい、そしてそれをテンプレート化してあとは自分たちで資料作成をしていきたいという要望に対して、「oberhaeuser.info」が応えた事例です。 クライアント・サイドでクオリティを維持したまま資料作成をしてもらえるようにするには、Illustratorのような専門ソフトではなく
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く