よこ並びのCSS。

2017/02/15 569 users CSS レスポ タブ ナビゲーション 昨今

ナビゲーションやタブやアイテムリストなど、「よこ並び」にレイアウトするためのCSSについて、お馴染みの方法から最近の方法まで、順番に見ていきます。スマホサイトが優勢な昨今、要素をよこ並びにする機会は減ってきているのかな。とも思いますけれど、大きい画面で見るサイトでは、ナビゲーションやタブや、アイテムリストなど、よこ並びにレイアウトする機会はまだまだあるんじゃないでしょうか。もちろん画面幅にはレスポ... 続きを読む

スマホのメニューデザインに悩んだらこれを見る　徹底収集36選！

2014/10/09 511 users スマホ メニューデザイン メニューアイコン ユーザ タップ

スマホはメニューバーが命！！ スマホでもっとも重要な動作は「タップ」ですが、その重要な役割を引き受けるのがメニューアイコンやリストです。ユーザが求めるコンテンツにスムーズにつなげられるよう、最適化していくことが必要です。 ただそのデザイン、「なんとなく」のものになっていませんか？ 違和感なくスムーズにコンテンツにつなげるためには、最適なデザインを選択する必要があります。 今回は100のスマホサイト... 続きを読む

たった1行！スマホサイトのコーディング時に役立つ小技8（サンプルあり） | Design Color

2014/06/09 664 users Design Color コーディング時 サンプル 小技 1行

もくじ 幅をデバイスサイズに合わせる スマホを横にしたときに文字が大きくならないようにする 電話番号に自動的にリンクが付かないようにする リンクを押したら電話をかけられるようにする リンクを押したらGoogleマップアプリを起動させる リンクエリアを広げる paddingやborder分を気にせずwidth/heightの数値を指定する 長い文字列でも途中で改行させる 1.幅をデバイスサイズに合わ... 続きを読む

ぜんぶ無料！スマホサイトを素人でも制作会社に頼らず作成できるツール6個

2013/06/06 770 users 素人 制作会社 無料 好例 見栄え

無料で使えて、誰でも簡単にPCのブラウザから見栄えのいいスマホサイトを作れるツールを6個厳選しました。好例の「Webサイトを自分で作ってみようシリーズ」第三弾！ 今回は、スマホサイトを素人さんでも簡単に制作できる「スマホサイトビルダー」を紹介します。「ちょっ、こりゃ便利すぎる」と、思わず唸ってしまうものだけを6つ厳選しました。 ぜんぶ無料で使えて、PCさえあれば、ブラウザから見栄えのいいスマホサイ... 続きを読む

ASCII.jp：日本のスマホサイトは2年間でこんなに変わった (1/4)

2013/03/27 660 users ASCII.jp ２年間 日本

スマートフォンやタブレット端末といった、いわゆる「スマートデバイス」を意識したWebサイト制作はもはや常識となっている。各企業のWebサイトは、次のような方法でスマートデバイスに対応していることがほとんどだろう。 スマートフォン向け専用サイトを構築する レスポンシブWebデザインで Webサイトを構築する viewportを調整する Web Professionalでは、2011年2月、有名企業の... 続きを読む

スマホサイトに入れると使いやすくなる！おすすめjQuery4選！ | デザイナーブログ | 株式会社LIG

2012/09/21 1065 users 株式会社LIG デザイナーブログ

どうも、はやちです_(:3」∠)_ スマホに使うとよりサイトが見やすくなるjQueryをまとめてみました。 アコーディオン アコーディオンみたく開閉式のメニューが実装できるjsです。 記事の多いコンテンツをまとめるのに便利ですね。 ■動きをみる HTML </p> <dl class="acordion"> <dt class="trigger">アコーディオンメニュー<span class="o... 続きを読む

ソースコピーですぐ使えてスマホ専用サイト作成に便利！PC・スマートフォンサイトの振り分けJavaScript作りました。 | HTML5でサイトをつくろう

2012/05/28 930 users JavaScript HTML5 ユーザーエージェント 内容

PCとスマートフォンで違うページを閲覧させたい場合は、ユーザーエージェントを判別して切り替えることができます。 メディアクエリなどを使用したレスポンシブWEBサイトの場合は1ソースでそれぞれのデバイスに振り分けますが、PCサイトとスマホサイトで内容なども変更させる場合は、それぞれサイトを作って振り分ける必要があります。 ユーザーエージェントを判別するには、PHPやJavaScriptや.htacc... 続きを読む

スマホサイト、20代女性から好まれる商品画像の表示方法は？ :ベンチャーニュース：Venture Now（ベンチャーナウ）

2012/03/31 1034 users Venture Now ベンチャーニュース 商品画像

スマートフォン向けサイトにおけるインタラクティブ UI の受容性や好まれる表現は年代、性別によっても異なってくるようだ。 IMJモバイルが30日に発表した「スマートフォンサイトの情報表示方法に関するユーザビリティ調査」によると、サイト内に複数のバナーを表示する場合、フリック＋自動送りでバナーを切り替える「サイト A」、フリック操作のみでバナーを切り替える「サイト B」、自動送りのみでバナーを切り替... 続きを読む

jQuery MobileでGoogle Mapsの表示からお問い合わせフォームの作成まで「jQuery Mobile」でスマホサイトを作ってみよう【実践編】 | HTML5でサイトをつくろう

2012/01/05 508 users jQuery Mobile www.html5-memo

HTML5＋CC3 を勉強しながら調べたサイト情報やサンプルの作成。そのほかweb 制作に役立つ情報をまとめました。 http://www.html5-memo.com/ デザイン作成のヒントになるサイトや制作に便利な無料素材、かっこいい映像やアプリなどをまとめました。 http://webdesignmatome.com/ 都内の小さなWEB制作会社にてWEBサイト制作全般、WEBスクールやセミ... 続きを読む

スマートフォン向けフレームワーク注目の「jQuery Mobile」でスマホサイトを作ってみよう【基本編】 | HTML5でサイトをつくろう

2011/12/07 676 users jQuery Mobile jQuery HTML5 基本編

jQuery Mobileってなに？ jQuery Mobileは、javascriptのフレームワークです。スマートフォン向けの直観的で使いやすいUIを瞬時に作成できます。 JavaScriptをWebデザイナーでも扱える身近な存在に変えた「jQuery」。そのjQueryと同じ開発元からリリースされていることもあって、スマートフォン向けフレームワークとして注目のjQuery Mobile、文法... 続きを読む

ASCII.jp：絶対見ておきたい有名企業のスマホサイトまとめ

2011/02/21 2152 users ASCII.jp 有名企業 iPhone iOS レイアウト

iPhone、Androidの普及を背景に、スマートフォンのブラウザー向けにコンテンツや表示を最適化した「スマートフォンサイト」（スマホサイト）を開設する企業が増えている。当初はiPhone（iOS）の標準UIに倣った画一的なデザインが多かったが、最近では独特のレイアウトや斬新な色使いの個性的なスマートフォンサイトも増えてきた。ここでは、Web制作者が見ておきたいスマートフォンサイトを紹介する。実... 続きを読む

スマホサイト：Webアプリモードで意外と書かれていない落とし穴 - Kaleidoscope

2011/02/18 542 users iPhone Kaleidoscope metaタグ 注意点

ちょっと今回はまめ知識的な内容です。最近、「iPhoneでWebアプリを作成」といった記事をよく見かけます。（jQuery Mobileなどを利用した開発方法は置いといて）HTML5+CSS3+JavaScriptで一から作成する方法について、意外と肝心な注意点が抜けてるように思います。 とくに、よくmetaタグを使った「Webアプリモード（フルスクリーンモード）」にする方法が書かれていたりします... 続きを読む

スマホサイトの作り方で、あんまり書かれてないことを書いてみた - Kaleidoscope

2011/01/26 619 users iPhone Kaleidoscope 縦スクロール 内側

スマホサイトの作り方関連のブログとかを見てて、viewport周りの基本的な設定は書かれているのですが、個人的に重要だと思うポイントが、なかなかどなたも書いてらっしゃらないような気がするので、まとめてみました。それは、とにかく内側のHTML要素をハミ出さないように作るどうしてか？ふつうは、スマホサイトというのは縦スクロールしかさせたくないですよね。例えば、iPhoneで言うPortrait（縦）表... 続きを読む

pxt | 考察：Appleはスマホサイトを作らない。

2010/11/24 1013 users ウェブデザイン 本質 主張 mobile Safari 自社

今まで気づかずにいたが、Appleはスマホサイトを作っていない。それは何故か。 予算がないとか、(どこぞのメーカーと違って)ウェブデザインや自社製品についての理解度が低いとか、おそらくそういったネガティブな理由ではない。Appleのウェブサイトには、自社のプロダクトデザインに通じる主張が表現されている。 Mobile Safari のUIデザインの本質を垣間見るウェブデザイン 自社のプロダクト(こ... 続きを読む