cssやJavaScriptの備忘録サイト

SVGを使ったラインアニメーションの作り方2種 2014/10/1 2016/5/13 Animation, JS/jQuery 最近見かける事が多くなってきたSVGアニメーションですが、今後解像度の高いモニタが増えるので使用する場面も増えてきそうです。今回はsvgのプロパティstroke-dashoffsetを使った作成方法について取り上げてみます。 作り方1：illustratorでsvgを作成して輪郭をアニメーション この方法はイラレで作成したsvgの輪郭をアニメーションさせる作り方です。まずはDEMOサンプルからご覧下さい。 DEMO 作成方法ですが、まずillustratorでsvgにしたいオブジェクトを作成→アウトライン化します。 その後アートボードの設定を「オブジェクトにあわせる」にします。(この対応をしないと余計な余白が出てしまいます。)画像 アートボードの調整が終わったら

管理者のTwitterです。更新情報もお伝えしてます facebookページです。是非いいね！を RSSの登録はここからどうぞ ご連絡の際はこちらか"Contact"へどうぞ

Learn to identify and use the golden rectangle to create harmony in web design projects. The divine proportion is a mathematical concept dating to ancient times that is used as a principle in almost all types of design from architecture to art to websites. Although the exact origins of the formula and shape are not known, examples of its use can be found through history – Egyptians used the shape

TOP  >  Design , Photoshop , WebDesign  >  Facebookページ制作のためのpsdセット「Free download psd Facebook new fan page GUI」 Facebookに関する制作もWEB制作者の方であれば、個人的にでも仕事でも徐々に増えてきたのではないでしょうか？今日紹介するのは3月末にアップデートされる新タイムラインに対応したFacebookページのpsdテンプレートセット「Free download psd Facebook new fan page GUI」です。 新しくなったタイムラインのベースに、変更できる部分がわかりやすく、サイズと共に記載されていて、制作者側の視点で製作された便利なpsdとなっています。 詳しくは以下 タイムラインの他にも新しいサイズになった、アプリ側のpsdなども同封されており、これが

検索エンジンからのトラフィックを増やすためにはサイトに内部リンクを適切に設置することも重要。頭では分かっていても外部リンク頼みのSEOに偏りがちだった日本のSEO業界、Google先生の有料リンク取締り強化で内部リンクの重要性が改めて注目されつつある最近かもしれません。そんなあなたに今回、サーチエンジンランドからSEOに最適なサイト構造と内部リンク設置に関する記事が配信されていたのでここに紹介します。 — SEO Japan ウェブサイトの構造と内部リンクは、SEO業界で意見が最も食い違う分野である。SEO業者同士の意見が食い違うだけでなく、それぞれ目標が異なるため、デザイナー、ユーザビリティのエキスパート、そして、営業部門と折り合わないことが多い。なかなか同意してもらえないのだ。 自分自身で確かめてもらいたい。お気に入りのSEO業者やエキスパートを5人選び、彼らのホームページのナビゲーシ

Webデザインの評価項目というのを、ディレクターやデザイナーの方々はつくっているでしょうか？ 評価項目があると、デザイナーやディレクターだけでなく、クライアントにとってもデザインの基準がわかりやすくなり、目標地点が明確になります。 今までつくったことがなかったという方は、この機会につくってみてはどうでしょうか。 改めて、Webデザインの評価項目をつくるメリットです。 デザイナー、ディレクター、クライアントにとって、デザインを評価する共通認識を持つことができ、三者間で認識のブレが少なくなる デザインの優先すべき項目（もっと企業の色を出したい、など）がわかりやすくなり、それをデザインに反映させることができる デザイナーは、すでに満たされている要素にそれ以上時間をかけることがなくなり、足りない要素に注力できる デザインの評価項目とデザインエレメント一覧表 私はWebデザインの評価項目を、以下のよ

2012年2月16日 福井工業高等専門学校で行いましたデザインセミナーでのスライドです。Read less

『かえりみち 広報Café voi.7 広報担当者がこれだけは知っておきたい！ 視覚マーケティングの基本とトーン・アンド・マナー』という勉強会に行ってきました。 スピーカーはウジトモコさんとクリエイティブディレクター、株式会社コンセント取締役の川崎 紀弘さん。 貴重なお話ありがとうございました！ 目からウロコなお話ばかりだったので、こちらの本をポチッとさせて頂きました。 ▶【Amazon.co.jp】売れるデザインのしくみ -トーン・アンド・マナーで魅せるブランドデザイン

いろんなウェブ広告がありますが、まだまだバナーは主流のひとつです。WEBデザイナーはもちろん、企業サイト担当者などバナーに関して悩むことは多いです。バナー引用元リンク：クリックされるバナー広告を学ぼう！C-teamから学ぶバナー作成術 ブログ名：カッシーのWEBる。

CSS3を使った画像のエフェクトやスタイリングについて、思いつく限り一挙にまとめてみました。 たくさん画像を扱うサイトなどを作る際に、CSSでできる表現のカタログとして使ってもらえたらと思います。 ※ 2/24 「2. めくれた風」を書き忘れていたので追記しました 目次 1. シャドウ 2. めくれた風 3. トイカメラ風トンネル効果 4. カラー調整 5. 回転 6. 角丸 7. 楕円のフレーム 8. 円のフレーム 9. 三角形フレーム 10. 重なった風 11. ぼかし 12. フェード（シャドウ編） 13. フェード（グラデーション編） 14. 反射 15. リボン 16. 差し込んだ風 17. フレームだけを傾ける 18. 半透明フレーム まとめ ※ 実際の表示はこちらから確認できます。 ※ この記事で掲載しているCSSは、シンプルにするためにベンダープリフィックスを付けていません

コーディングで時間のかかる要素の1つとして、id,class名や画像名などの命名規則が挙げられます。 特に中規模、大規模のサイトで、適当な名前を付けると名前が被る確率が上がり、 その結果、画像の上書きや不要なプロパティがかかってしまうなど、よくない結果になることも考えられます。 一つの例として、私の命名規則について紹介してます。参考程度に読んで頂けると幸いです。 カテゴリに分類して、つなげる。 ページのどの位置に属すか分類し、つなげる方法を取っています。 基本的に、CSSや画像名は同じにします。同名にすることで、名前を考える手間も省け、変更箇所の特定がしやすくなります。 例： CSS #top-side-nav 画像 top-side-nav-home.png top-side-nav-company.png 上記のように命名することで、 デザインを見なくても、どのような箇所に使われている

WordPressのブログは一般的に記事タイトルと記事の概要が単純に縦に並ぶだけですが、jQuery Masonry という jQuery プラグインを使用すると、このブログのトップページのように雑誌や新聞のような段組で記事一覧を並べることができます。 jQuery Masonry は WordPress 用に作られたわけではありませんが、WordPress テーマに組み込んでトップページ等で使用することができます。 ただ、公式のドキュメント通りに JavaScript を書いただけでは WordPress テーマではうまく動かないので、やり方をここにまとめておきます。 ここでは、WordPress 3.3 のデフォルトテーマ「TwentyEleven」をベースに解説します。 準備 まず jQuery Masonry 公式サイト のページ中央にある「Download the script

一定期間更新がないため広告を表示しています

結構参考になったので備忘録がてら ご紹介。Webサイトの制作スピードを より向上させるために、汎用的なUI を集めて、マークアップも綺麗な状態 で済むように設計されたスターター キット、というかフレームワークです。 制作スピードを向上させる目的で作られたHTML5フレームワークです。レイアウトだけでなく、汎用的なUIも備わっていて、class名1つ付けるだけでタブやスライドショーを実装出来るようになっています。 そういった仕様にする事で、シンプルで綺麗で可読性の高いソースを保てるように設計されていたりと、結構参考になるスターターキットですよ。フレームワークは自作してるので良い部分を組み込んでみようかなと思いました。 タブやドロップダウン、スライドショーなどを備えているだけでなく、class名1つで実装出来るようになっているので、綺麗なソースを保持する事が出来るようになっています。 いろいろ