月別アーカイブ: 2014年1月

sm2014

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本体をリンクして下さい。

anime-ringo

css図形

cssでインベーダー

こちらのサイトに載ってました。The Shapes of CSS

sm2014

2014-01-17 勉強会

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

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

やってみた
参考サイト

css

html

質問

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

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

sm2014

2014-01-10 勉強会

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

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

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

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

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

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

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

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

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

cw

お仕事

遅くなりましたが、明けましておめでとうございます。
今年の初投稿です。

フリーランスでの仕事探し、ちょっとしたお小遣い稼ぎ、腕だめし、etc….
おもしろそうですよ。

日本最大級のクラウドソーシング

“クラウドワークスなら、アプリ開発・ホームページ・ロゴ・ライティングなど全国のプロフェッショナルと企業がお仕事を気軽に受発注できます!”

という事らしいです。サイトより。