HOKKAIDO TO GO
日本最北の地、北海道。ここには年間約5,600万人の人が訪れます。そのうち280万人ほどが外国人旅行者で、その数は年々増加しています。 その北海道で、新たなプロジェクトが動きだしました。 ”HOKKAIDO TO GO PROJECT” プロジェクトが目指すゴールは、ユニークな視点で北海道の魅力を新発見・再発見し伝えていくこと。 そのために、このプロジェクトでは2つの取り組みを発信していきます。 ひとつは、道内3地域で販売するお土産品がリデザインされる過程とその結果。国内外のデザイナーと事業者が手を組み、パッケージからブランドが生まれ変わる様子をお届けします。 そしてもうひとつは、ガイドブックとは異なる北海道のディープな情報。3地域を中心に、北海道の面白い人・物・景色を紹介します。 思わず持ち帰りたくなるお土産品も、北海道でしかできない体験情報も、今まで知らなかった北海道がここにあります。
[CSS]多様化したデバイスに対応！CSSで使いやすいブレイクポイントを的確に定義する方法
スマホは年々大型化し、スクリーンサイズは多様化しています。また、タブレットは小型化の傾向ですがさまざまなスクリーンサイズのものが流通しています。デスクトップもワイドスクリーンなど、わたし達が使用しているデバイスは非常に多様化しています。 スマホ、タブレット、デスクトップ、ワイドスクリーンの異なるスクリーンサイズのレスポンシブ用に、CSSで使いやすいブレイクポイントを的確に定義する方法を紹介します。 The 100% correct way to do CSS breakpoints 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 ブレイクポイントで混乱する原因 Tips 1: ブレイクポイントを的確に取得する Tips 2: ブレイクポイントの範囲に分かりやすい名前をつける Tips 3: ブレイクポイントを定義するコード ブレ
![[CSS]多様化したデバイスに対応！CSSで使いやすいブレイクポイントを的確に定義する方法](https://cdn-ak-scissors.b.st-hatena.com/image/square/d19eb7832f21ddf4cde99e17c015e45e093986e9/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201701%2F2017021910.png)
[CSS]レスポンシブ対応のテーブルを実装するシンプルで、賢いアイデア
Webページをレスポンシブ対応にする時、悩ましいコンテンツの一つがテーブルではないでしょうか。単にセルの幅を狭くするだけでは、一行に一文字しかない妙に縦長なテーブルになってしまいます。 省略したり、プルダウンを利用したりなどいろいろなアイデアがありますが、もっとシンプルで簡単に、そして実用的な賢い実装アイデアを紹介します。 Responsive table layout レスポンシブ対応のテーブルのデモ レスポンシブ対応のテーブルの実装 レスポンシブ対応のテーブルのデモ デモでは4x5のテーブルで、さまざまなデバイスのスクリーンサイズでコンテンツが最適になるよう実装されています。
![[CSS]レスポンシブ対応のテーブルを実装するシンプルで、賢いアイデア](https://cdn-ak-scissors.b.st-hatena.com/image/square/756f0468957ea28ca57928b50217267f6ec350ab/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201604%2F2016101105-01.png)
最近のレスポンシブ対応サイトで見かけるナビゲーションのアイデア・実装方法のまとめ
去年ぐらいはレスポンシブ対応のナビゲーションというとハンバーガーメニューばかりでしたが、最近ではスクリーンサイズに合わせるだけでなく、コンテンツや階層構造に合わせたナビゲーションが増えてきました。 Webページやスマホページのレスポンシブ対応サイトで最近よく見かけるナビゲーションのアイデアや実装方法を紹介します。
Owl Carousel
How To Use 1. Load jQuery and include Owl Carousel plugin files To use Owl Carousel, you’ll need to make sure both the Owl and jQuery 1.7 or higher scripts are included. <!-- Important Owl stylesheet --> <link rel="stylesheet" href="owl-carousel/owl.carousel.css"> <!-- Default Theme --> <link rel="stylesheet" href="owl-carousel/owl.theme.css"> <!-- jQuery 1.7+ --> <script src="jquery-1.9.1.min.js"
横並びの要素の高さを揃えるjQueryプラグイン「matchHeight」がレスポンシブでもバッチリ動いて素敵
高さが異なる要素を横並びにした時に、その高さを揃えたい–生きとし生けるもの全ての夢。 でまぁ今までとあるプラグインを利用していたのですが、レスポンシブで上手く動かないということでなんかいいやつ無いんかい、と探していたところjquery.matchHeight.jsというのを見つけました。 jquery.matchHeight.js – a more robust equal heights plugin for jquery 動き 簡単なデモページ作ってみましたのでどうぞ。公式でいいじゃんと思ったけど一応テストで作ったので。 デモページ 使い方 使い方も非常に簡単。liabru/jquery-match-heightからコードをダウンロードして、 [html] <head> <script type="text/javascript" src="http://ajax.googleapis
[JS]一味違ったアイデアでレスポンシブ対応のテーブルを実装するスクリプト -Responsive tables
サイズが変更されても、ハイライト表示はできます。 Responsive tablesの使い方 Step 1: スタイルシート スタイルシートをhead内に外部ファイルとして記述します。 <head> ... <link rel="stylesheet" href="css/rwd-table.min.css"> </head> Step 2: スクリプト スクリプトを</body>の上あたりに記述します。 <body> ... <script type="text/javascript" src="js/rwd-table.js"></script> <script> $(function() { $('.table-complex').responsiveTable({ adddisplayallbtn: true, addfocusbtn: true, fixednavbar: '#n
画像表示をレスポンシブ対応にするjQueryプラグイン「Data Img」:phpspot開発日誌
Data Img - Two Blokes 画像表示をレスポンシブ対応にするjQueryプラグイン「Data Img」 単に横方向に拡大・縮小するだけのレスポンシブ対応ならCSSで出来ますが（Bootstrapのimg-responsiveみたく）、 幅に応じて複数の画像を切り替えたいような場合に、使えます。単なる縮小だと文字が小さくなりすぎて読めないなんて場合に別の画像を使うことも考えられますが、そういったケースに使えるプラグインとなります マークアップ的には次のように複数の画像を指定してプラグイン初期化する感じの使い方みたいです 関連エントリ レスポンシブでモバイルフレンドリなツールチップ実装ライブラリ「Mobile-Friendly Tooltip」 レスポンシブで何でも埋め込めるLightBox実装jQueryプラグイン「VenoBox」 レスポンシブかつフラットなソーシャルボタン
クリッカブルマップもレスポンシブにするjQueryプラグイン「Responsive Image Maps」:phpspot開発日誌
クリッカブルマップもレスポンシブにするjQueryプラグイン「Responsive Image Maps」 2014年03月20日- esponsive Image Maps jQuery Plugin クリッカブルマップもレスポンシブにするjQueryプラグイン「Responsive Image Maps」 クリッカブルマップ、といえばHTML入門時には面白そうと思ったわりに設定が面倒なのであまり使わなくなったという方もいるかもしれませんが、あのクリッカブルマップをレスポンシブにするjQueryプラグインだそうです。 リサイズ時にクリッカブルマップのデータを再計算してマッピングしてくれるようです。 タッチ型デバイスでは意外と使えそうなこの機能。 この際に再度利用法を検討してみるのもよいかも。 関連エントリ レスポンシブで何でも埋め込めるLightBox実装jQueryプラグイン「Veno
新しい picture 要素の仕様が公開、レスポンシブ・イメージ最新動向
HTML5 extension （HTML5 拡張仕様） として策定されている picture 要素に関して、最新の仕様が年明け、1月 2日に公開されましたので簡単に紹介。 所謂、レスポンシブ・イメージ （Responsive images） のお話ですが、HTML5 extension （HTML5 拡張仕様） として策定されている picture 要素に関して、最新の仕様 （Editor's Draft） が年明け、1月 2日に公開されました。 ちょっと時間が経ってしまいました （10日以上、下書きのままで放置されていたのはナイショ） が紹介と、レスポンシブ・イメージ関連の最新動向を簡単にまとめてみます。 The picture Element, Editor's Draft, 2 January 2014 ちなみに、1つ前の仕様は下記になります。 The picture elemen
PARKDESIGN パークデザイン｜店舗設計事務所
PARKDESIGN / パークデザイン 下村真一 代表による店舗設計事務所。カフェ・レストラン・クリニックなどの店舗デザインをメインに活動しています。
css基礎 レスポンシブデザインについて | Stronghold Archive
はじめまして、こんにちは。新メンバーのLanともうします。まだまだ、デザイン・技術ともに未熟なのですが勉強・復習もかね書かせていただきますのでよろしくおねがいいたします！ 早速ですが、今回のtips題名の通り・・・ 今更感漂います【レスポンシブデザイン】についてです。 私も、結構前からその存在は知ってはいたのですが、なんとなーくしか理解していませんでしたので、復習という意味も込めて執筆させていただきたいと思います！！ レスポンシブデザインとは、１つのファイルでどんなデバイスにも対応できる手段のことをいいます。 初めは、リキッドデザインと似ていると思いますが、違いはこちらになります。 なお、レスポンシブデザインについて分かりましたので早速構築方法に移りたいと思います。構築方法は、主に３種類です。 ①CSS3のMedia queryを使う 以前のmedia queryについての記事はこちら ②
【要チェック】使える！レスポンシブプラグイン7選【jQuery】 | Direction | WebNAUT
Category Direction Design Markup Develop Others Tag Ai application CSS Dreamweaver Google Analytics IA icon illustrator JavaScript jQuery photoshop Photoshop Pinterest Ps rich SNS tutorial UI UX WebNAUT WEBディレクション なめぱら はじめて アクセス解析 アンケート調査 インタビュー サンプル有 ショートカット スキルアップ スケジュール タブレット チェック チーム活動 ツール テスト ディレクター デザイナー デザインプロセス プロジェクト管理 モバイル ランキング レスポンシブ ワイヤーフレーム ワークフロー 企画 情報共有 情報設計 新人 組織運営 育成 Archives 201
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Flexboxの特性をうまく使い、Media Queries無しでレスポンシブ対応のレイアウトを作成するCSSのテクニック
レスポンシブ対応のアイコン素材、単にサイズを変えるだけでなく、デザインを最適化した優れもの！
レスポンシブに使えるクオリティの高いサイドメニュー実装「vertical-responsive-menu」:phpspot開発日誌
NavNav+
レスポンシブWebデザイン対応グラフ生成ライブラリ・「CHARTIST」
新着記事
https://keiyasui.com/