カテゴリー別アーカイブ: 勉強会

パララックス2

skrollr.jsで背景をパララックスしてみた

皆様、ごきげんよう。

2014-08-01 勉強会
前回、skrollrを実装し、画像やテキストなどの要素をスクロール量に応じて動かす方法を確認しました。そして今回は背景画像の動きを操作して遠近感を出す事によって、パララックスを実現する方法を確認しました。
続きを読む

パララックス

パララックスにしよう!! skrollrの実装方法

みなさま、ごきげんよう。
2014-07-25 勉強会でskrollrの実装方法について、確認しました。

自分のサイトや作品をパララックスにしたい人必見!!

この勉強会では”skrollr”というJavaScriptライブラリを使用しました。パララックスサイトの理解が曖昧な人や、初めてパララックスに挑戦する人は、以下の手順でやってみましょう。

続きを読む

レスポンシブwebデザイン

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

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

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

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

続きを読む

css animationで要素のwidthを%指定

2014-06-13 勉強会

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

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

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

2014-05-16 勉強会

svgアニメーションについて。

  • 線に効果をつけるには?
  • 「css animationが使えないブラウザだと、何も見えず、何も起こらなくなって困る」についての対処法

http://manakaa.com/tips.html

↑「SVG LINE アニメーション・応用編2014-05-15」に追記しました。参照して下さい。

visibility:hiddenとdisplay:noneの違い

visibility:hiddenは要素の高さをキープする。display:noneは要素の高さをキープしない。まあ、やってみて下さい。違いがわかりますよ。

疑似クラス

疑似要素でデザインに装飾を加えたりしていますよね。そして疑似クラスというのもあります。よく使う「:hover」というのは、疑似クラスにあたります。その他に「:target」というのもあります。今回「:target」を使ってどんな事が出来るのかやってみました。下記のファイル参照

疑似クラス:targetはこんな事が出来る。

clearfixについてのまとめ

2014-5-02の勉強会にて学んだclearfixについてまとめます。現在私は初めてのサイトを制作中で、<footer>内のナビゲーションがfooter画像内におさまらないという問題が発生し、先生に質問しました。

image01

→原因は、<main>の高さが0だから。

image02

中身がすべてfloatしている親要素の高さは0になる。floatをかけると別の次元になり、親要素の中にいない状態になる。上の図の場合、2つの<div>は<main>の中にいない状態になる。つまり、親要素の<main>は2つの<div>を覆っていない状態である。

●解決法

  1. 親要素に固定の高さを指定する。 →しかしこれでは、どのくらいの数値かわからない。
  2. 自動的に高さがつくようにclearfixを指定する。
  3. overflow:hidden; を指定する。

2と3はどちらでもよいが、overflow:hidden; を使用すると、幅を超えてしまったテキストや画像を隠してしまうという問題が生ずる。clearfixの方が安全である。※両方指定しないこと。

●clearfixの使い方

・clearfixしたい要素は中身がすべてfloatしている親要素。
・親要素にクラスを指定しておく。ここでは「class=”clearfix”」とする。
今回の例でいうと、
html

css

↑after疑似要素とcontentプロパティを利用して、中身のfloatした要素の後ろに、内容が空のblock要素を生成。そのblock要素にclear:both; を指定している。

image03

これで親要素に高さがキープされ、中身の要素全体を覆うようになった。
ほかにもclearfixが必要な親要素に同じクラス名をつければ、複数回使用できる。

●「:before」「:after」とは

cssの疑似要素。(疑似要素とは、htmlにはかいていないが、cssで作れる要素のようなもの)
:beforeと:after疑似要素は位置を指定するもの。しかしIE7までは非対応。IE8から使用可。

:before →要素の直前にコンテンツを追加
:after   →要素の直後にコンテンツを追加

 

 

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

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

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

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

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

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

SVG LINE アニメーション・基礎編

2014-05-02 の勉強会で「SVG LINE アニメーション」というのをやりました。

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

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

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

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

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

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

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

manakadesign

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

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

どなたかチャレンジを!

2014-02-21 勉強会 デザインとしてのマークアップ

この日の勉強会は、マークアップについてぼんやりなメンバーがいるので基本からやりました。

少々話がそれますが、デザイナーとはなんでしょうか?……..デザインする人のことです。そんなの知ってますよね(笑)

では、デザインとはなんでしょうか?….かっこいいのや可愛いいのを作るのもデザインですが、それだけではありません。便利で使いやすい伝わりやすいを作るのもデザインです。ユニバーサルデザイン(できるだけ多くの人が利用可能であるようなデザインにすること)なんていうのもありますよね。

意外と前者だけがデザインと思ってしがいがちですが、後者あっての前者な訳です。簡単な例ですが、大人の高級感を出したいなら黒と白を基調にするのがいいでしょう(シャネルとか)。子供の元気さを出したいなら原色をたくさん使うといいですよね(トイザラスとか)。何を伝えたいかによってデザインは変わってきます。なので伝えたい事がないのであればデザインは存在しません。伝えたい事などはさておき、自分が可愛いやカッコいいと思ったものを表現するのもアリですが、それはデザインではなくアートです。(まあ、デザインとアートについて話すと長くなるのでここではそうしておきます。)

toysrus

chanel

使いやすい伝わりやすいを作るのがデザインという事なら、正しいマークアップでサイトを作るというのは絶対必要な事です。検索エンジンGoogleにサイトの内容を伝わりやすくすることでGoogleの評価は上がります。評価が上がるという事は検索が上位に来るという事です。検索が上位に来るという事は、ユーザーにこちらの伝えたい情報が伝わりやすくなるのです。

今度は見に来てくれたユーザーの気を引く為に見やすい使いやすいを考慮しながらカッコいいや可愛いを表現していくのです。

ウェブデザイナーとはそんな仕事だと思います。僕もまだまだ未熟ですが、以上の事を知っているのと知っていないのとでは、だいぶ差が出てくるのではないでしょうか。というわけで見た目のデザインだけではなく中身のデザインも頑張りましょう。文字色を赤にしようかピンクにしようか悩むように、ここのマークアップはpかな?それともh2?などと悩んでいきましょう。文字色に答えはありませんが、マークアップには答えがあるので頑張りましょう。

あと、この記事を読んでいて何か違和感を感じませんでしたか?文才がないので読みにくいというのは無しで!(笑)
写真のサイズもそうですが順番が問題です。シャネル、トイザラスの順番で説明がされているのに、写真の順番が逆です。(こういうのはもともと人間工学という分野で研究されてきました。)使いやすさや見やすさを考えるのであれば、説明と写真の順番は同じでなければなりません。

footerで見かける「copyright©hogehoge.com all rights reserved.」のマークアップ

pでやったりaddressでやったりしてましたが、pの方が正しいみたいです。でも、そこが連絡先なのであればaddressがベター。下記サイト参照↓

http://www.html5.jp/tag/elements/address.html

以上勉強会まとめです。(というか僕なりのデザインの考え方かな w)

2014-02-14 勉強会

この日は今年2回目の大雪の日でした。帰宅が困難になると予想して柴崎町学習館での勉強会は中止にしました。その代わり、コードシェアやFaceTime等を使い各自自宅にいながらの遠隔学習にチャレンジしました。

サイボウズや当サイトでもお伝えしていたように、先生は18:00〜22:00まで、みなさんの質問に答える為に自宅でスタンバイしてくれました。

僕は先生に、こんな事を教えてもらいました。
http://nobu-69.com/others.html
あとは、RWDについて少々。

やる気があれば、どんな状況でも工夫次第で勉強会は出来るものですね。

先生、お疲れさまでした。

2014.2.14の勉強会は大雪予報のため中止します

2014.2.14に柴崎学習感で開催予定の勉強会は大雪予報のため中止します。
以下、注意点です。

  • レギュラー参加者の皆さんは、これを読んだら、この投稿にコメントしてください。
  • 各自、安全な場所にて勉学に励んでください。タカハシはSNSやFaceTimeで質問は受け付けます。
  • いつものcodeshareも利用してね。
  • バレンタインのチョコレートは自分で食べてしまわずに、来週まで保管してね。

2014-02-07 勉強会

この日は8人の参加者で賑わいました。

これから初心者の方の参加が目立ってきそうな感じですかね?!そうなるとレベルがバラバラになるので、全員で1つの事をやるのは無理が出てくるかも知れません。
wordpress関数をやっても初心者には理解不能だろうし、idとclassの違いについてやっても初心者以上には退屈でしょう。

来た全員が納得できる勉強会にするにはどうするのが良いか、各自考えてみて下さい。

いくつか考えました。

  1. ある程度出来る人は初心者の方に教えるという立場になる。(ずっとじゃなくても)
  2. 仕事やポートフォリオ等の制作をしていて、困った事があり先生に聞くのはOKです。その為に来ている人もいるので。しかし何十分も先生を独占してしまうと、他の人に迷惑がかかります。かといって質問が出来ないのであれば来る意味がありません。なので、個人的に質問して先生を独占してしまうのはOKとして、そのかわり、その教わった事を必ずこのサイトに3日以内に議事録を書くとういのはどうでしょう。1人の人が何かの解決法を先生に聞いたとしても議事録に書いてくれれば、情報が1人だけのものではなく全員のものになるから。(というか、本来ならこんな事を決めなくてもやるべきだと思いますが….)
  3. とりあえず行けばいいという考え方を止める。今日はこれを先生に質問しよう。初心者の人にこれを説明して上げよう。最近の◯◯は、どうしているのか全員に聞いてみよう。などなど。ぼんやりとして勉強会にいって先生が何かをやってくれて、言われるままにやったら出来ましたー!というのはなくなるかもしれませんね。(そもそも、りんごは学校じゃなく勉強会なんですから!)

先生、みなさん

どうですか。

特定の位置までスクロールしたときにアニメーションさせる(jQueryとcss)

2014-01-31と2014-02-07の2週にわたり勉強会でやった「特定の位置までスクロールしたときにアニメーションさせる」というのを自分なりにやってみました。
オブジェクトの数だけif文を書くという面倒なやり方ですが、理解しました。オブジェクトの数だけif文を書かなくて済む方法も先生に教わりましたが、まだちょっと難しいので理解していません。

とりあえず自分のサイトにアップしました。
http://nobu-69.com/others.html

授業に参加したみなさんは、どれくらい理解しましたか?
僕は理解するのに結構いじくりまわしました。時間も費やしました。授業で先生の説明を聞いただけで技術はモノになりません。聞いた事を基に家でいろいろやらないとダメです。

なので、細かい説明はしません。自分でやってみてつまずいた箇所があったら教えて下さい。分かる範囲でお答えします。

css

jQuery

html