サイトタイプ別40事例！スマホサイトのメニューデザインに困ったときに役立つ事例まとめ
みなさん、サイトのスマートフォン対応できていますか？ スマートフォンサイトを作る時は、PCサイトと色々と勝手が違うのでいちいち迷ってしまいますよね。 今回はその中でもスマートフォンサイトのメニューの部分に着目し、傾向と対策を紹介したいと思います。 スマートフォンサイトの事例を 「メディア系サイト」「ECサイト」「コーポレートサイト」「サービスサイト」 の4つのタイプに分けて10個ずつ用意しました。 それでは一気に見て行きましょう。 メニューの定義：「ドロワー」「ハンバーガー」とは スマートフォンのメニューのこと 今回のテーマであるメニュー部分とはどの部分をさすのかを、まずご紹介します。 上の画像は当サイト（プロモニスタ）のスマートフォンサイトです。 今回注目しているメニューとは、上図の右上に設置している「menu」部分、PCサイトで言うグローバルナビゲーションの部分です。 タップによってメ
レスポンシブデザインの基礎と制作時の注意点を解説
ferret編集部：この記事は2015年11月2日の記事を再編集しています。 ここ数年で定着してきた「レスポンシブデザイン」。 Webデザインに関わる人であれば、この言葉を耳にしたことがあるのではないでしょうか。 iPadなどのタブレットや、スマートフォンの表示に最適化されたページと理解されている方も多いかもしれません。 では従来のモバイル対応ページとはなにが異なるのでしょうか？ スマートフォンが一般に普及し、タブレットも次々に上位機種が発売される今、ますます需要が高まってくると見られるレスポンシブデザインについてまとめました。 レスポンシブデザインの定義 レスポンシブは日本語だと「反応が良いさま」と訳され、レスポンシブデザインは「単一のURL（HTMLファイル）であらゆるデバイスに最適化されるデザイン」を指します。 従来は、パソコン、スマホ、タブレットなど、表示サイズの異なるデバイス毎に
レスポンシブ化する時に知っておきたいCSSテクニック | くろひつじのメモ帳
今年の夏もCSSでうにょーんとなっていました。 （毎年いただくお仕事なんですが、毎回頭をひねる…。お陰で勉強になっていますが） 今回は普通に組まれたHTML（元々レスポンシブする予定じゃなかったやつ）をレスポンシブ対応する作業がおおくて、ああこうすればいいのか…！というのが多かったので、まとめておきます。 レスポンシブデザインとは？ 1つのHTMLで、画面サイズによってレイアウトなどが変わってしまうデザイン。 PC画面サイズやタブレットサイズ、スマホサイズなどで切り替える事が多いです。 切り替え方法としてはCSS Media Queries を使って切り替えます。 この方法も２つあって、link要素のmedia属性で読み込むCSSファイルを分ける方法と、CSSソース内に書き込む方法とあります。 link要素のmedia属性でCSSファイルを分ける方法 CSSを読み込む際に、media属性を
CSSで出来るレスポンシブ対応を考えた table レイアウト | ウェブ戦略・コンサルティング UNIONNET Inc.
2014.08.18 ▼2021年最新版 【コピペOK】制作会社が実際に使っている、レスポンシブ対応のtableレイアウト スマホ対応・レスポンシブが当たり前になってきてるこの時代、コーダーさんにとって table がなかなかやっかいものになってきてますね… 会社概要くらいならまだ良いんですが、情報量が多い table はそのままでは 320px で閲覧した際、なかなか悲惨な事に… 対応方法としては『responsive-table.js』を代表に、様々なやり方がありますが、今回はCSSで出来る事を紹介したいと思います。 目次 2セルの場合の使用した例 横に長い場合 overflow-x と inline-block を使用した例 リスト風にした場合 list-item を使用した例 最後に 2セルの場合の使用した例 2セルでよく作られてる、会社概要やフォームなどで使えるかと思います。 『
今からでも間に合う！レスポンシブWebデザイン作り方のまとめ
photo by Scolirk 地方でもマルチデバイス対応を求められることが多くなってきました。 徐々に対応しているところが増えてきたためだと思います。 私も昨年からレスポンシブWEBデザインについて、 対応する必要がありましたので、調べたものをまとめてみました。 もくじ レスポンシブWebデザインとは？ ギャラリーサイト レスポンシブWebデザインの作り方 画像の切り替え・最適化 レスポンシブ対応のフレームワーク レスポンシブ対応のライブラリ サイトの高速化 レスポンシブWebデザインとは？ 2年程前から流行し始めたレスポンシブWebデザイン。 基本的な考え方、メリット・デメリットを理解しておかないとトラブルの元になります。 レスポンシブWebデザインの基本 レスポンシブWebデザインの基礎 必読！5分でわかる流行のレスポンシブWebデザインまとめ | 株式会社LIG 5分で分かるレス
地域の魅力を広げるデザイン事務所｜ローカルデザインなら包むデザイン
地域には『何もない』に思えて実はたくさんの良きところがあります。良き点は日常に埋もれてしまい、その地域の人以外の人が知って初めて「へーすごいんだ！」なんて気づく事があります。 厳かなお祭りや絶景の大自然といってイベントだけではなく、よく通っているお店や毎年続いている地域のイベントなども良きところになりえます。 そんな地域の良きところをデザインやホームページ制作を通してスポットを当てる力なることを信念としています。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
高品質でしかも無料！すごい使えるレスポンシブ対応のHTML5/CSS3のテンプレートのまとめ