タグ別アーカイブ: レスポンシブWebデザイン

20080226_IE_logo

IE6,7,8でmediaqueries.jsが効かない

http://manakaa.com/timo.html

headに以下の呪文を入れたが効きません。

メディアクエリは

こんな感じでリンクしてあるのですが、これだとダメなんでしょうか?

なんかリンクに問題があるような…..
いろいろやりましたが問題解決に至らずです。

明日の勉強会でお願いします。

fluid

レスポンシブデザイン・画像の問題

レスポンシブデザインにする場合、パソコン用サイトの知識だけでは、いろいろな問題が出てきますよね。

まずは画像です。大きい画面で見るとちょうどいいのに、小さい画面で見ると、はみ出したりしてしまいます。
何事も、はみ出してしまうのは恥ずかしいですよね。

そんなとき便利なのが、画像を画面のサイズに合わせて変化させる「Fluid Image」という手法です。

くわしくは、各自ググって下さい。Fluid Imageでたくさん出てきます。

nobu001

レスポンシブ デザイン

こんばんは。

自分のサイトを製作中です。パソコン用のサイト(横幅1000px)を作り、スマホやタブレットなどはそのまま縮小されたのが表示されればいいや〜と思っていました。完成を間近にして、実際スマホなどで確認したところ不具合がありました。細々と修正しているうちに「こりゃダメだ〜サイトをレスポンシブデザインにせねば!」とレスポンシブデザインに開眼。
パソコン用のサイトとして、いくらカッコいいと思うものを作っても表示領域の小さいものでうまく表示されないのでは、人は見てくれません。極論ですが見てくれないものは存在しないというのと同じです。大学で勉強した哲学で言う所のエッセ・エルト・ペルキピ(注1)です。

以前、仕事でwordpressでサイトを作りました。テーマ2012をカスタマイズしました。その時はもちろんレスポンシブデザインでした。半分以上はテーマが対応しているので、自分がメディアクエリを書いたのはちょっとでした。

今回は全部自分でやるので、頑張ります!

あと、サイト全体のフォントサイズも16pxにしました。以前までは小さい方がおっしゃれ〜と思っていたのですが、大きく見やすい方が人に優しいかな。

「見やすい」「使いやすい」「伝える」などを形にするのがデザイン。
人がどう見ようと感じようと関係なく自分のイメージした物を形にするのがアート。(完全にそうとは言い切れないけど、とりあえずここでは対比の為に分かりやすくそうしておきます。)

仕事としてやっていくならウェブのデザイナーでなければいけません。
ウェブのアーティストというのもなんだかカッコよさそうですが、依頼がこなそうです。w (来たらうらやましい)

僕はデザインとアートの境界線を分かっているつもりでいるけど、時々その境界線が曖昧になってしまいます。一人前のデザイナーになるには、この境界線をきっちりと知る事だと思い自分の為に記しておきます。

1からやり直し中のサイト
マナカデザイン
先生、
・ページの右上のロゴfluid imageやってみました。
・なるべく横幅は数値指定しないほうがいいですよね?(する時は%がよいですよね。)
・フォントサイズも、もちろんemがよいですよね。
・以前りんごでやったドロワーメニューにも挑戦しようと思います。wordpressの2012(りんご)のように、たたんで1つにしてタップで全部が下に表示という風にしたい。この議事録をもとにできますか?僕の議事録cssとjQueryの2種類がありますが、現在実用的にはどちらがよいですか?あとドロワーは1000px以下で出現しようと思いますがどうおもいますか?

その他レスポンシブについてのアドバイスあれば、お願い致します。

注1
エッセ・エルト・ペルキピとは、18世紀の哲学者ジョージ・バークリーの有名な言葉で「存在しているという事は、知覚されていること」という意味のラテン語である。事物は知覚された時に初めて存在し始める。そして、その事物についての意識外では、事物は全くの無であるというのだ。その知覚は私の精神だけでなく人間性を築き上げている精神の共同体によって知覚されているという事なのである。例えば現実とは、私達みんながそこに参加し、様々な仕方や観点で関わりあっているものといえる。(僕の大学レポートを抜粋)

ドロワーメニュー・css/jQ

ドロワーメニュー・css/jQ

2013-11-15 勉強会の議事録です。

cssでドロワーメニュー をやりました。(jQuery versionもやりました。)

僕のサイトhttp://nobu-69.com/others.htmlに書きましたのでご覧下さい。
「cssでドロワーメニュー(jQuery versionもあるよ!) 2013/11/15」をクリックして下さい。

Drawer(ドロワー)とは机とかの引き出しという意味です。基本的には表示領域が小さいスマホ対策と言えると思いますが、PCサイトのように表示領域が大きい場合に、この仕組みを利用し遊び心として面白い演出をするのもアリだと思います。

swipe

スマートフォン向け jQuery touch slide swipeで画像表示させる

Android、iphone、ipadなどで、スワイプ(フリック)操作による画像切り替えをしたいです。
2013-10-18 Friday 勉強会の議事録
jQuery Slide Panel
真中さんのサイトを参考に、jQuery本体を読み込む方法をやりました。
jQuery carousel

スワイプの参考サイトはhttp://www.idangero.us/sliders/swiper/demos.php
DemosのDefaultを参考にしています。
スワイプ(フリック)操作による画像切り替えをするまではできました。
作業中のページは商品詳細ページ
できれば、スマホで見て下さい。m(-..-)m
.device(外枠の黒い部分)width 100%にしました。
画像を読み込んだのですが、画像サイズの指定がうまくいきません。
画像をきちんと表示させるには、%で指定するのでしょうか?
CSSの問題ですよね?その場合、paddingやmarginの事を考えて指定しなければいけないですよね?
雑ですみませんが、画像でまとめてみました。(~_~)

他のサイトを色々見て、スマホを横にした時に表示範囲で画面に均等に画像が表示されるのも良いと思ったのですが、どうでしょうか?これだと、表示画像が小さくなりますよね?

宜しくお願いします。

icomoon

icomoon/アイコムーン

2013-08-23の勉強会でアイコムーン「シンボルフォント」についてやりました。

アイコンを画像ではなく文字情報として扱うので大きく表示した場合に画像だとギザギザになるのが、これだとギザギザになりません。

http://icomoon.io/だいたい無料

  1. 上記のサイトにアクセス
  2. menuのapp→start the app→アイコンがたくさん表示
  3. 矢印ツールで好きなのを好きなだけ選択
  4. フッターの「font→」クリックすると、Downloadとなるのでクリックしてダウンロードする。
  5. あっ、そうだ!ダウンロードの前にPreferenceをクリックして選んだアイコンをまとめたファイルに任意の名前つける。チェックboxは特になにもチェックしなくていい。
  6. ダウンロードすると任意の名前の後にアイコムーンがつけた数字のファイルができましたよね。例えばnobuyasu2041みたいなの。
  7. zzz01

  8. 実際に使用するのは、style.cssとfontフォルダです。ie7以下にも対応させたい人は、Ite-ie7.jsも必要です。
  9. index.htmlをテキストエディタで開いてみましょう。div class=”glyph”の中に

    が、ありますよね。
    それを使いたいHTMLにコピペすればつかえます。その際にHTMLとstyle.cssとfontフォルダのパスの位置に注意して下さい。パスの位置はindex.htmlを参照。あと、index.htmlをブラウザで開くとどんなアイコンが入っているか見る事ができます。

ie対策の人は、index.htmlのheadにある以下の文を自身のheadに貼りつけて!

icomoon使い方でググると色々出てきます。僕の説明だけじゃ????の人は、それらも参考にしてみて下さい。もちろんコメントしてくれれば、お答えします。

自分でイラレなどで作ったアイコンもシンボルフォントにしてくれる機能もあります。それについて、勉強会で実際にやっていた、kanedaさん、ジェイコさん、かおりんごさん、どなたかこの記事の議事録の続きをお願いします。

↓↓↓↓↓↓↓↓

かおりんごさんが別記事で書いてくれました。
http://clubringo.com/longshadow-icon/

flat-multi-color

流行に終わらないフラットデザインのポリシー

フラットデザインって何?

最近のブームのはじまりはWindows8の「モダンUI(Metro UI)」あたりから。見た目の特徴としては、

  • 平面的:ドロップシャドウなどの3次元的な処理はしない
  • ミニマルな表現。グリッドや形状は正方形、長方形、正円などで構成され、角丸もグラデーションもほとんど使わない。
  • カラフルな色使い
  • タイポグラフィーを重視

ということ。ただし、見た目だけなら、似たデザインはありました。

続きを読む

calc

css3で簡単横並びレスポンシヴデザイン

2013-06-14の勉強会で、やりました。
width:calcとsizing:border-boxという新しいものであります。
こんな感じ↓

僕のサイトにサンプルと説明をアップしました。
http://nobu-69.com/study/cluc_201306/cluc.html

image01

レスポンシブWebデザインだから迷う?IEと共存するためのポイント!

レスポンシブWebデザインを考える際に、IE8以前(IE8~6)の古いブラウザについて、どのように対応するかを考えてみました。
どうすれば、手間が少なく古いブラウザへの対策ができるのか?
レスポンシブWebデザインを作る際の覚書です。

制作のための前提条件

考えるにあたって、下記の条件のクリアを前提としました。

  • 旧ブラウザはIE8~IE6を含める。
  • IE8~IE6でもCSS3使ったデザインを行う。
  • IE6でもpng画像を使用する。
  • デバイスはスマートフォン、タブレット、PCの3種類を想定する。
  • CSSはモバイルファーストを考慮にいれた記述方法とする。

日本ではまだまだWebページを見るためにIEを使う人が多いです。
デザイン面を考えるとCSS3を使っている場合、ChromeやFirefoxとIEを比べたときに見た目が変わってしまうことがあります。
その辺りの事情は、見る人にはなかなか理解してもらえない現状もあるので、jsライブラリの利用で透過png画像やある程度のCSS3を使えるようにして解決してしまおうというワケです。
また、制作者としてはモバイルファーストも意識したいという気持ちあったりします。

レスポンシブに「必要なこと」「不要なこと」

レスポンシブWebデザインと言うと、デバイスごとに異なるデザインになることに意識が向きがちです。
過度に「レスポンシブ」というキーワードに振り回されていないか、制作の際に必要なこと不要なことをざっくりと切り分けてみました。

「必要なこと」
スマートフォン、タブレット、PCの異なるデバイス間で、それぞれに適したデザインで表示される。
「不要なこと」
PCでブラウザ幅を変えたときに、デザインが変わる。

異なるデバイス間での表示に適したデザインにすることは必要なことですが、PCでブラウザを幅を変えた時にデザインが変わることは必ずしも必要なことには思えませんでした。
その理由としては、PCではわざわざブラウザの幅を狭くして、タブレット用のデザインでWebページを見ることはほとんどないからです。

レスポンシブの対象は@media queryに対応しているブラウザ

「必要なこと」「不要なこと」の切り分けができれば、闇雲なレスポンシブに走ることもなく、デザイン、技術の面で必要な対応が見えてきます。

  • PCでは、PC向けのデザインを見せる。(固定幅のデザインを見せることが出来れば良い)
  • IE8以前のブラウザを搭載したスマートフォン、タブレットがない。

「不要なこと」で切り分けたことを元に、PCでは固定幅デザインを見せるようにします。

また、IE8以前のブラウザを搭載したデバイスは、PC以外には無いことも考慮すると、無理にjsライブラリでIE8以前の環境で@media queryに対応する必要はなくなりますね。

制作の際はIE8以前ブラウザ向けに、固定幅の専用CSSを用意して条件分岐コメントを使って読み込めば大丈夫です。
(モバイルファーストなCSSの記述にしなければ、固定幅専用のCSSを用意する必要はなくなりますが、この辺は個人的なこだわりです。)

画像の扱いから気づいたこと

他に気づいたこととしては、@media queryに対応していないブラウザは「background-size」にも未対応です。
そのため、フルードイメージへの対応も難しく中途半端になってしまいます。

Webサイトを制作する上で、画像を全く使わないということもほとんどないので、フルードイメージに対応出来ないブラウザは、@media queryにも対応しないという制作方針にしてしまうのも1つの方法かなと考えました。(でも、border-radiusなどのCSS3は使いたいので、その辺はjsライブラリで何とかしてしまいます)

画像について考えると、「Retinaディスプレイとか高解像度ディスプレイはどうするの?」という疑問が出てきますが、長くなりそうなので、他の記事としたいと思います。

2013-5-10勉強会

今日はランサーしょうじさんがお休みです。でもお菓子は確保。
勉強会の概要は

  • cssアニメーションでパラパラアニメを作る方法
  • 画像スライドアニメーション
  • Facebookとwordpressを連携させたいのですが…
  • レスポンシブWebデザインの覚え書き

です。 続きを読む