タグ別アーカイブ: Responsive Web Design

レスポンシブwebデザイン

レスポンシブが曖昧な人は必見!RWDの設定方法

みなさま、ごきげんよう。
2014-07-18 勉強会でレスポンシブWebデザイン(RWD)の実装方法について、確認しました。

自分のサイトや作品をレスポンシブにしたい!

レスポンシブWebデザインの理解が曖昧な人や、初めてRWDに挑戦する人は、以下の手順でやってみましょう。

続きを読む

sm2014

css animationで要素のwidthを%指定

2014-06-13 勉強会

この日の勉強会は、とても有意義な内容でした。内容の一部を自分のサイトにアップしました。

css animationでアニメーションさせる要素のwidthを%指定するとどうなるのか?

manaka designのtipsをご覧下さい。とても為になる事が書いてあります。
manaka design

svg20140515

SVG LINE アニメーション・応用編

2014-05-09 の勉強会で「SVG LINE アニメーション part2」というのをやりました。前回の応用編です。
SVG LINE アニメーション・基礎編

svgはベクター画像なので拡大してもビットマップ画像のようにギザギザにはなりません。レスポンシブデザインに最適です。もちろんアニメーションはcssで実装!FlashやJavascriptを使わないので軽いのであります。

自分のサイトの備忘録「tips」にアップしました。
manakadesign

manaka design/tips
「SVG LINE アニメーション・応用編 2014-05-15」という記事をご覧下さい。

このページにも直接説明を書こうと思いましたが、それは参加されたどなたかにお譲りします。なぜなら議事録などを書くと理解度が増すからです。僕だけスキルが上がっては申し訳ありません。どなたかチャレンジを!
日本語WEBフォントを自作

日本語のWEBフォントを自作してみました。

サイト内のロゴマークや見出し等の限られた文字だけWEBフォントにしちゃおう。レスポンシヴデザインに最適です。

先週の勉強会でやったやつです。

manakadesign

自分のサイトの備忘録「tips」にアップしました。
http://manakaa.com/tips.html
「日本語のWEBフォントを自作(限られた文字だけ)2014-04-25」という記事をご覧下さい。

このページにも説明を書こうと思いましたが、それは参加されたどなたかにお譲りします。
なぜなら議事録などを書くと理解度が増すからです。僕だけスキルが上がっては申し訳ありません。

どなたかチャレンジを!

20080226_IE_logo

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

http://manakaa.com/timo.html

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

メディアクエリは

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

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

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

manakadesign

府中でホームページ制作

自分のサイトができました。キャッチコピーやいろいろと手直ししたいですが、完璧にできるまでをまっていてもその時は来ない(上を見ている以上)なので、一応これで完成です。紙媒体と違い後から何度でも修正、変更できるのがweb siteのいい所。

manakadesign

http://manakaa.com/
http://blog.livedoor.jp/happygolucky1969/archives/52401162.html

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サイトのように表示領域が大きい場合に、この仕組みを利用し遊び心として面白い演出をするのもアリだと思います。

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/

calc

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

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

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

php

今更聞けない!レスポンシブWebで役に立つ!6つのCSSリセット

レスポンシブWebデザインをしていると、スマートフォン向けに指定したCSSの値を、PC向けCSSではリセットしないと上手くいかない(?)のような場面に遭遇します。

そんな時、CSSの値に初期値指定してリセットする方法を知っておくと役に立ちます。
特に目新しいものはありませんがレイアウトをする上で、これからお世話になりそうなので自分用メモです。
これもよく使うとか、知っておくと良いよ!というものが他にもあったら教えていただけると嬉しいです。

「max-width」の初期値が「none」に対して、「min-width」の初期値は「0」です。
プロパティ名が似ているので同じ初期値を指定してしまいがちです。
間違えやすいポイントかと思いますので、注意が必要ですね。

あと番外編メモとして、リセットではありませんがIE6以外のブラウザ向けに指定を行いたい場合、下記のような記述を使うと便利です。
セレクタを「>」で区切る子セレクタを対象とした記述方法は、IE6には対応していないので、結果としてIE6以外のブラウザに向けた指定となるわけです。

Picture 2

レスポンシブWebデザインのモックアップ作成に便利なツール「FROONT」

今日はレスポンシブWebデザインモックアップ作成に良さそうなツール「FROONT」を紹介します。

登録したばかりで使い方も把握してなくて言うのもなんですが(^^;A、上手に使えばかなり便利なツールになるかもしれません。
まずは、Watch video を見てみて下さい。おぉ〜、なんか良さげじゃないですか?
ちなみにこのサイト、今流行りのフラットデザインですね。
しかも、Pantoneの2013年のトレンドカラー、エメラルドグリーンも押さえてます。

よかったら皆さんも試してみて下さい♪

2013-4-12勉強会

今日もお菓子をありがとう!2013-04-12お菓子

勉強会の概要は、

  • 『WP 2012 トップページに投稿ページの一部を表示させたい』について
  • WP カスタム投稿タイプとカスタムフィールドについて
  • モバイルファースト実践

  • です。 続きを読む