タグ

レスポンシブに関するnffsjjのブックマーク (14)

  • 渋谷再開発と東急建設|東急建設

    『渋谷』ーそれは、わたしたち東急建設が更なる高みをめざして挑戦できるフィールド 1959年、渋谷の地において産声を上げた私たち東急建設は、創業以来、建設を通じて渋谷のまちづくりをお手伝いしてきました。「街のライフサイクルに末永く関わりその新たな価値を創造したい」という思いとともに、いま、渋谷再開発を通じて、わたしたちの新たな挑戦がはじまっています。

    nffsjj
    nffsjj 2015/04/09
    きれいな仕上がりだなー。レスポンシブwebデザイン。使われているアイコンもほっそりしていていま風だ。
  • 静的なHTMLサイトをモバイル対応サイトに変換する手順

    [レベル: 初・中・上級] 英語版のGoogle公式ヘルプフォーラムでGoogle社員のZinebさんが、CMSへの移行が難しい静的なHTMLサイトをモバイルフレンドリーなサイトに変換する際に考慮すべきことをアドバイスしました。 参考になるので日語に訳して紹介します。 なおリンク先ページは日語のものも英語のものもあります。 静的サイトをモバイルフレンドリーに転換する方法 Chromeのデバイスエミュレーションモード(※このブログでの解説はこちら)を使って、異なるスクリーンサイズと解像度でウェブサイト(がどのように表示されるか)をテストする。 viewport(ビューポート)を設定する。このタグによって、ページのコンテンツをさまざまなスクリーンで拡大縮小できるようになる。ビューポートがないと、PCで見たときのようにコンテンツが表示されてしまう。 <font>タグや他のインラインHTML

    静的なHTMLサイトをモバイル対応サイトに変換する手順
    nffsjj
    nffsjj 2015/04/02
    要点だけをうまくかいつまんでる。
  • 目黒通りのワインショップ オルニス(ornis)

    ワインをもっと身近に ワインの販売・試飲を行う「オルニスワインショップ」と、店舗向けのワインインポートを行っています。 また、アメリカ国内のワイン輸出を目的とした現地法人も設立。そのほか、一般向けにネット販売やUBEREATS、店舗向けの販売促進ツールご提案といったさまざまなご要望に応じています。 Learn More

    目黒通りのワインショップ オルニス(ornis)
    nffsjj
    nffsjj 2015/03/19
    パララックスでレスポンシブでオンラインショップもあり(準備中)。スゴイ!参考にしたい。
  • フォントジャンプ率のセオリーを考える | フォントの話 | つみきブログ

    株式会社つみき UI/UX事業終了のお知らせ 拝啓 時下ますますご清祥のこととお喜び申し上げます。 平素より格別のご高配を賜り、厚く御礼申し上げます。 この度、弊社は創業以来続けて参りましたUI/UX事業(受託制作事業)につきまして、2024年4月30日をもって終了することを決定いたしました。 今後は、弊社の主力事業であるFilmarksをはじめとした、映像関連事業に注力して参ります。 ご愛顧を受け賜りました皆様には、深く感謝申し上げますとともに、ご理解賜りますようお願い申し上げます。 敬具 株式会社つみき 代表取締役社長 鈴木 貴幸 事業終了予定日:2024年4月30日 biz@tsumikiinc.com

    フォントジャンプ率のセオリーを考える | フォントの話 | つみきブログ
    nffsjj
    nffsjj 2014/12/13
    キリギリスは知らなかった。使い所わりとありそう。
  • しっかりと理解しておきたい!レスポンシブWebデザインを使いこなすための9つの基本原則

    レスポンシブWebデザインは、デスクトップやスマホやタブレットなどさまざまなサイズのスクリーンの問題に対する素晴らしい解決方法です。 レスポンシブWebデザインをより深く理解するための基原則を紹介します。 9 basic principles of responsive web design 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 レスポンシブWebデザインのツールもリリースされているので、ぜひ! FROONT -Responsive Web Design Tool レスポンシブとアダプティブ Webデザイン フロー 相対的なユニット ブレイクポイント 最大限と最小限の値 オブジェクトのネスト モバイルファースト or デスクトップファースト Webフォントとシステムフォント ビットマップ画像とベクター レスポンシブとアダプ

    しっかりと理解しておきたい!レスポンシブWebデザインを使いこなすための9つの基本原則
    nffsjj
    nffsjj 2014/11/18
    役立つ記事の日本語解説がうれしい。
  • レスポンシブ・デザインを説明するGIFアニメ | ビジュアルシンキング

    「レスポンシブ・デザインとは?」を説明する9つのGIFアニメーションが、FastCompanyが運営するCo.Designの記事に掲載されていました。 9 GIFs That Explain Responsive Design Brilliantly | Co.Design 見習いたい表現なので、取り上げます。 たとえば、画面幅の考え方は。 image by Froont デスクトップファーストとモバイルファーストの違いは? image by Froont それぞれのGIFアニメーションのサイズは、数百キロバイトに抑えてあり、アニメーションは9つありますが表示するのにストレスは少ないです。 わかりやすく情報を伝えられるだけではなく、記事を読む側の利便性からしても、動画を9つ使うよりもGIFアニメーションを使うことに意味がありますね。

    レスポンシブ・デザインを説明するGIFアニメ | ビジュアルシンキング
    nffsjj
    nffsjj 2014/11/15
    理解しやすい。共有しとこう。
  • レスポンシブ Web デザインの一般的なテクニック

    このブラウザーはサポートされなくなりました。 Microsoft Edge にアップグレードすると、最新の機能、セキュリティ更新プログラム、およびテクニカル サポートを利用できます。 レスポンシブ Web デザインの一般的なテクニック Rahul Lalmalani | 2013 年 5 月 13 日 前回、 Web はレスポンシブ デザインに対応できるようになり、サイト所有者はユーザーのデバイスと画面領域のコンテキストを調べ、PC、携帯電話、コンソールなど、どのようなサイズの画面でも コンテキストに応じたエクスペリエンスをユーザーに提供できることを紹介しました。 今回は、レスポンシブなサイトのレイアウトとエクスペリエンスを構築するための最もよく使われる手法をいくつか調べます。まず、新たに登場した利用可能なサイト レイアウトのテクニック ("流動的なグリッド") について説明します。これは

    レスポンシブ Web デザインの一般的なテクニック
    nffsjj
    nffsjj 2014/10/24
    あとでよむ
  • Youtubeの動画を背景に

    Introduction In the ever-evolving landscape of web browsing, staying abreast of the latest technologies is crucial. HTML5, the fifth and current version of the Hypertext Markup Language, has revolutionized the way we experience the web. With its advanced features and enhanced capabilities, HTML5 has become the cornerstone of modern web development, offering a more seamless and interactive user exp

    Youtubeの動画を背景に
  • レスポンシブなサイトを一発でデバイス確認できる便利ウェブサービス - あなたのスイッチを押すブログ

    最近、レスポンシブウェブデザインのサイトも増えてきましたね。このブログもレスポンシブ対応していて、色んなデバイスで閲覧できるようになっています。 ただ、制作会社のディレクターとしては、作ったレスポンシブのページをデバイス確認するのが非常に面倒なのです。 PCのウェブブラウザのウインドウサイズを伸び縮みさせてもいいのですが、それでは "どのデバイスで、どんな風に見えているか" が分からない。サイズ感が掴みにくいのです。 かと言って、検証機を5台も6台も並べて確認するのは非常に時間がかかってしまいます。 そこで私が利用しているのが「Responsive Checker」というウェブサービス。 URLを入力するだけで、擬似的に様々なデバイスでサイトを確認できます。また、任意のサイズに変更することもできるので、使い勝手も良い。オススメのウェブサービスです。 レスポンシブなサイトを一発確認 冒頭でお

    レスポンシブなサイトを一発でデバイス確認できる便利ウェブサービス - あなたのスイッチを押すブログ
  • 【2014年2月度】無料で使えるレスポンシブ対応のWordPressテーマ10選

    10 Best Free WordPress Themes for February 2014で無料で使える高品質なWordpressのテーマが公開されていたのでこちらでご紹介したいと思います。 無料で使えるレスポンシブ対応のWordPressテーマ10選 1.Tesla シンプルな企業用サイトに使えそうなテーマです。特にこだわりはなくとりあえずWordPressで企業用サイトや店舗サイトが作りたい!という方はまずこちらのテンプレートを使ってみてはどうでしょうか。レスポンシブデザインです。 View DemoDownload 2.Bearded アパレルのECサイトなどに使えそうなWordPressのテーマです。カートも実装されてるようなのでWordPressでECサイトを作りこもうとされていた方はマニュアルを熟読の上使用してみてはいかがでしょうか。 View DemoDownload 3

    【2014年2月度】無料で使えるレスポンシブ対応のWordPressテーマ10選
    nffsjj
    nffsjj 2014/05/07
    とりあえずメモ。
  • HTML5でレスポンシブなWordPressテーマ(12テーマ) - いぬらぼ

    壁紙・写真8953 webデザイン3925 デザイン3291 絵画・イラスト・アート2193 動物1745 3D1724 UI1291 photoshop1083 フリー1004 風景834 自然821 かわいい689 wordpress679 素材652 テーマ632 チュートリアル626 フォント617 幻想的548 動画530 お洒落524 建築物501 犬430 テンプレ400 イラスト397 psd396 384 ロゴ331 jquery297 ブラシ296 プレミアム285 プラグイン274 テクスチャ260 CSS249 ミリタリー221 タイポグラフィ217 名刺213 gif212 都市風景210 インテリア206 宇宙203 エフェクト200 SF188 ポスター186 ファンタジー186

    HTML5でレスポンシブなWordPressテーマ(12テーマ) - いぬらぼ
  • レスポンシブWebデザインで成功するUI/UXのポイント5つ - ECサイト構築運営に役立つ情報発信|モバイルファーストマーケティングラボ

    レスポンシブWebデザインでサイト構築をする際に、今までのWeb構築で「当たり前」や「こうすべき」と思っていた感覚とは少し異なった設計でサイトを構築しなければなりません。 これまでのWebにおけるUIUX これまで、PCのブラウザをメインにネットをする層が中心だった時代では、マウス操作が基になっていました。 当たり前ですが画面上のマウスを操作して、クリックをしたり、ドラッグ・アンド・ドロップで対象を動かしたりする動作がメインになります。 UIUXで言えば、ボタンをクリックするにしても、マウスでカーソルを移動させればボタンの色が変わったり、カーソルの矢印が人の指に変わったりするマウスオーバーアクションと言われるものです。 テキストリンクであれば、カーソルを対象に持って行くと、テキスト下線が消え、カラーが変わるなどの変化が当たり前になっていました。すべてはマウスでの移動させることが中心に

    レスポンシブWebデザインで成功するUI/UXのポイント5つ - ECサイト構築運営に役立つ情報発信|モバイルファーストマーケティングラボ
    nffsjj
    nffsjj 2014/04/09
    モバイルデバイスが主流になる流れ加速。
  • 横メニューの作り方

    レスポンシブに対応した横メニューを作る機会があったので、せっかくですし作り方を紹介したいと思います。お役に立てばうれしいです。 【追記 2014.03.19】 元々のタイトルは「レスポンシブWebデザインに対応した横メニューの作り方」でしたが、よく考えるとスマホ対応になったら縦メニューになりますのでタイトルを変更しました。 id名「toggle」の部分は横幅が480px以下の場合に表示するボタンです。481px以上の場合表示させません。その他はごく普通の横メニューです。 CSS 続いてCSSです。まずは全体を載せます。 #menu{ width: 100%; max-width: 960px; margin: 0 auto; padding: 0; } #menu li{ display: block; float: left; width: 12.5%; margin: 0; paddi

    横メニューの作り方
  • 今からでも間に合う!レスポンシブWebデザイン作り方のまとめ

    photo by Scolirk 地方でもマルチデバイス対応を求められることが多くなってきました。 徐々に対応しているところが増えてきたためだと思います。 私も昨年からレスポンシブWEBデザインについて、 対応する必要がありましたので、調べたものをまとめてみました。 もくじ レスポンシブWebデザインとは? ギャラリーサイト レスポンシブWebデザインの作り方 画像の切り替え・最適化 レスポンシブ対応のフレームワーク レスポンシブ対応のライブラリ サイトの高速化 レスポンシブWebデザインとは? 2年程前から流行し始めたレスポンシブWebデザイン。 基的な考え方、メリット・デメリットを理解しておかないとトラブルの元になります。 レスポンシブWebデザインの基 レスポンシブWebデザインの基礎 必読!5分でわかる流行のレスポンシブWebデザインまとめ | 株式会社LIG 5分で分かるレス

    今からでも間に合う!レスポンシブWebデザイン作り方のまとめ
    nffsjj
    nffsjj 2014/01/20
    コレは良いまとめ。しかしもっと楽に作れる時代が来ないかなあ。
  • 1