カテゴリー別アーカイブ: study

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

mac 解凍ソフト

マック初心者です。
.sitという圧縮ファイルが解凍できません。なにか解凍ソフトをインストールする必要があるようですが、いくつかやってみたがインストールできません。

このフリーソフトいいよ、というのがあれば教えて下さい。

FireFox Javascript有効

なにかいじっていたら、いつのまにかFireFoxのJavascriptが無効になったらしい。有効にする為に検索したら、ツールのオプションをクリックとあるが、ツールにオプションがない。あと、Firefoxから環境設定でコンテンツにjsについてのチェックボックスがあると書いてあるが、チェックボックス自体がない。

imac osx 10.9.1
Firefox 26.0

です。

jQueryのエラーチェック

2014-01-31 勉強会の議事録です。

この日もいろいいろな事を学びました。その中の1つをまとめました。

jQueryのスムーススクロールってありますよね。ページ内リンクで、しゅるしゅる〜って移動するやつ。私がずっと前から使っていたものは、jQuery本体とトリガーのみで実装する簡単にできるやつでした。それを設置しているページに別の新しいjQueryを入れました。そしたら、それが動きません!jQuery本体のバージョンが古いのかなあ?と思い最新版にしました。jQuery本体1.5.1を1.10.2にバージョンアップしました。それで、新しいjQueryは動きましたが、今度はなんと!スムーススクロールが動きません。

そういう場合は、FireBugのコンソールでチェックです。先生にチェックの仕方を教わりましたが、こちらのサイトにもありますので、見て下さい。Firebugでできること: ソースコードのエラー解析

これで、エラーが出ていたらその箇所を修正すれば良いのです。

コンソールチェックで下から4行目の $.browser がエラーですよ!と出ていたので。それを直します。
先生のアドバイスで、下から4行目を下記のように書きかえました。

これで直りました!やったー。

jQuery-1.9から「jQuery.browser」が完全にサポートされなくなっていたようです。jQuery $.browseで検索すると出て来ます。

jQueryがうまくいかないという事はよくあります。原因はさまざまですが、今回紹介したようにまずはエラーチェックをするのが良いでしょう。

jQuery (triggerのみ)とcss3で実装するscroll switchアニメーション

2014-01-24の勉強会でやった事を現在製作中の自分のサイトにやってみました。

質問1
1つだけならうまくいきますが、2つ設置するとうまくいきません。(同時に作動してしまう。)

質問2
jQuery本体ですが、index.htmlにしゅるしゅるスムーススクロールをやる為に、
src=”http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js”
で本体を読み込んでいました。

しかし今回のアニメーションをやるにはversionが古すぎるようで、動きませんでした。
なので、最新の本体をダウンロードしてサイト内に設置しました。そしたらアニメーションは
動きましたが、しゅるしゅるスクロールが動作しません。

こういう場合の対処法については、どうしたらいいでしょうか?
新しいのに対応しているスムーススクロールを見つけるのがいいのかなあ。

製作中のサイトです。トップページにアニメーションあります。あと、何度もいいますが制作途中です。w
manakaa.com

先生が作ったサンプルサイト
ringo20140124
※ダウンロードしてjQ本体をリンクして下さい。

2014-01-17 勉強会

今回は先生から急遽病気で行けなくなったとの連絡をもらいましたので、先生ぬきでの勉強会でした。

サイトを見ていて気になるエフェクトってありますよね。そんなときはFireFoxのFireBugでhtmlとcssをコピってしまおう。そんでもってcssの値をかえたり、プロパティ自体をオフにしてみたりする事で理解を深める。「編集ボタン」でhtmlをコピー、cssをコピーしてhtmlファイルにペースト。どのcssをコピーするかは各自のセンスで。知らないプロパティとかが出て来てもとりあえずコピる。動けばとりあえずOK!

やってみた
参考サイト

css

html

質問

・フォントの太さが参考サイトと違うのはなぜ?
・IE/Firefox だと文字の高さをキープするけど、Mac/Firefoxだと文字の高さが(幅も)キープされないのはなぜ?

今日の勉強会は謎をのこしつつ終了しました。

2014-01-10 勉強会

今年最初の勉強会はジェイコさん、キイさんが仕事で製作中のサイトやこれから取りかかるサイト制作の質問など。

あと、前からあるのに意外と知らないテーブルレイアウトについて。

今日ではサイトの見た目をいじるのはCSSでやるのが当たり前ですよね。テーブルでレイアウトした昔のサイトを見ると古くさく思いますよね。テーブルでレイアウトするのは、良くない!とされています。理由は「SEOに有効なマークアップが出来ない」「タグが入れ子になりすぎて見にくい」「面倒くさい」などなどです。

しかし、コンテンツに出てくる内容が表組の場合、テーブルはありです。
例えばhttp://juicyeyes.com/access.html(この場合はdl, dt, ddでも良いと思う)

そのテーブルのレイアウトについてです。

役職 氏名 所属
会長 山田 一郎 営業
副会長 山田 次郎 営業
幹事 野比 ノビタ 営業
幹事 小山 順三郎 営業
幹事 岸野 太郎 営業
幹事補佐 来如意 営業

以下のようにtheadとtbodyに分けると見やすいです。ちなみにtfootというのもあります。

こちらのサイトに詳しく解説してあります。

——————————–
ご覧の皆様、今年もよろしくお願いします!

2013-12-20 勉強会議事録

2013-12-20 勉強会議事録
今回は、大きく時間をとって新しい技術に挑戦!という事はせず、基本的な事などを色々やりました。

  1. CMSを人に説明する時にどう言うか
  2. 最近のウェブサイトのフォントサイズは16pxが主流らしい。(以前は12px)
  3. インライン要素とブロック要素についておさらい
  4. text-overflow: ellipsis;

続きを読む

HTML5 canvas

HTML5 canvas

に盛大に開催された勉強会の議事録です。
今回は、かおりんごさんのリクエストでHTML5 canvasをやってみました。
とりあえずこんな感じです。

sample

HTML5の新要素canvasというものとjavascriptで実装します。要素というのはh1とかpとかの事です。HTML要素です。

” 簡単に言うと、絵を描く為の画用紙がHTML5 canvasです。
絵を描く為の筆がjavascriptです。”

今回こちらのサイトを参考にさせて頂きました。
nezz*script

こんな感じです。javascriptのいろいろな数値を変えてみると、何がどう変化するのか分かると思います。僕もまだ詳しい事は分かりません。とりあえず、たくさんいじったりして理解を深めるしかないですね!

*勉強会当日参加メンバーへ
この記事について勉強会でやったのに不足している部分がありましたら補足しておいて下さい。

css3でmacのスクリーンセーバー風なものを作ってみました

11/22の勉強会の議事録です。
今回はmacのスクリーンセーバー風なものをcss3で作ってみました。
まずは完成形をご覧ください。↓

screensaver-01

それでは作成のポイントを説明致します。
どうぞ、下のソースもあわせてお読み下さい。

目次

続きを読む

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

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

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

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

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

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

css3-3D-Box

続・cssで3D Box(立体図形)を作り、さらに回転させる。

cssで3D Box(立体図形)を作り、さらに回転させる。
2013-11-08の勉強会でやった事をまとめました。
2013-11-08の勉強会

の続編です。

今度は、回転の際に遠近感を出す方法です。cssのperspectiveを使います。現在はプロパティでも値でもあるようです。そのうち統一されるのかな?
サンプルかこちら↓
http://nobu-69.com/others.html
上記のサイトに行きましたら”cssで3D BOXを作る。さらにhoverで回転。 2013/11/08″をクリックして下さい。

【1つ質問】
perspectiveを指定すると表示画像の大きさが変わってしまうのはなぜですか?