「デザイン」に対して興味のあるすべての人を対象に、いつまでも長く利用できるデザインの基礎テクニックを、これまで当サイトで紹介したエントリーの中から、各ポイントごとにまとめました。デザイン入門編として覚えておきたい基本から、サンプル例を見ながら理解できる、より実践的なデザインテクニックまで幅広く網羅しています。
ずっと使える、デザインの基本まとめました。【2020年改訂版】
「デザイン」に対して興味のあるすべての人を対象に、いつまでも長く利用できるデザインの基礎テクニックを、これまで当サイトで紹介したエントリーの中から、各ポイントごとにまとめました。デザイン入門編として覚えておきたい基本から、サンプル例を見ながら理解できる、より実践的なデザインテクニックまで幅広く網羅しています。
CSSフレームワークまとめ - Qiita
自分でもCSSフレームワークを作りたく、 巷にはどんなフレームワークがあるのか、ベンチマークをとる意味も含め、調べてみました。 Twitter Bootstrap 一番有名で一番使われてますね。 CSSフレームワークの王道。 v3.0からフラットになりました。 現在、v4がα版として出ています。 http://v4-alpha.getbootstrap.com/ Foundation こちらも有名。 BootstrapとこちらのFoundationは、幅広く用意されている感じがします。 Primer Github製。もちろん見た目もGithub 。 Pure YUIからでているライブラリ。 クラスのつけかたがシンプルな印象です。 Gumby こちらもなかなかのボリュームです。 Sass製。 Cardinal LESS製。 ミニマムでシンプルです。 INK Sass製。 なかなかクオリティが
2016年総まとめ、JavaScriptのライブラリやjQueryのプラグイン100+α選
毎年恒例のJavaScriptのライブラリやjQueryのプラグインの総まとめを紹介します。 今年リリースされたものから、アップデートされたものまで、これからのWebページやスマホページの制作に役立つJavaScriptを100+αまとめました。 KUTE.js クロスブラウザ対応のさまざまなアニメーション、2Dと3Dの変形、SVGの変形、CSSのプロパティ値の変化、SVGのモーフィング、SVGの描画などネイティブのJavaScriptでアニメーションを実現する軽量スクリプト。 デモページ Choreographer-js 「choreographer」は振り付けという意味、CSSアニメーションのさまざまな動き・振る舞いを簡単に設定できます。 デモページ Barba.js 通常のリンクのアクションによるハードリフレッシュをなくし、HTTPリクエストと描画を最小限に抑え、更にエフェクトを加え
無料で使えるPhotoshopプラグイン20選『Free Photoshop Plugins』 | CREAMU
Photoshopをもっと簡単に使いたい。 そんなあなたにおすすめなのが、『Free Photoshop Plugins』。無料で使えるPhotoshopプラグイン20選だ。 以下にご紹介。 » virtualPhotographer ワンクリックでクオリティの高い、プロのスタイルを適用できる。 » Richard Rosenman 無料のPhotoshopフィルターやプラグインをたくさん紹介しているサイト。（無料でないものもある） » Filter Forge 自分のフィルターを作成できるソフト。 » Harry’s Filters 69もの画像エフェクトをもったプラグイン。 » Auto FX Mosaic モザイクのタイルのようなエフェクトをかけられるプラグイン。 » Auto FX Dreamy Photo 画像に柔らかいロマンティックな効果を与えるプラグイン。 » Telegra
Bootstrap 3(2.xも)を活用する時に役立つリソースのまとめ
Bootstrapは先日リリースされたBootstrap 3rc1で、モバイルファーストのフロンドエンド用のフレームワークに生まれ変わりました。2.xまでは、デスクトップ用のブラウザを想定したインターフェイスのコンポーネントを核にしていました。 Bootstrapをカスタマイズしたり、もっと活用するためのリソースを紹介します。 まずは、本家のBootstrapから。 Bootstrap 3 スマフォやタブレットでの利用を優先したシンプルでパワフルなUIエレメントが揃ったフロントエンド用のフレームワーク。 最新のBootstrap 3rc1（7/27に公開）はリリース候補版です。 Examples Templates for Bootstrap Bootstrap純正のテンプレートやページの仕掛けが揃っています。 Narrow marketing 小さいプロジェクト用の軽量のテンプレート。
JavaScripting.com - The Database of JavaScript Libraries
The definitive source of the best JavaScript libraries, frameworks, and plugins. ▶
【2014】海外で話題のjsライブラリ/フレームワークまとめ76選 - Qiita
HackerNewsやProductHuntなどで今年話題になったjsライブラリ/フレームワーク一覧です。 備忘録として個人でまとめていましたが、けっこう使えそうなものもあったので、Qiitaにまとめてみました。 ＊vue.jsのようなメジャーなものは省いています。 ・Metricsgraphics.js D3の時間軸を必要とするグラフだけに特化したjsライブラリ D3って色々できるけど実際そんなに使いこなせてない人はこっちの方がいいかも！ ・intro.js ささたつさんの記事でおなじみのサイト上で動作するチュートリアルを簡単につくることが出来るライブラリ ・Seriously.js リアルタイムでのWeb用ビデオのコンポジター。 After EffectsやNukeを参考に作られ、高品質なエフェクトを適用できるだけでなく、映像をよりダイナミックに、そしてインタラクティブなものにすること
CSSでアニメーションを作るのがグッと楽になるアニメーションライブラリまとめ
モダンブラウザの普及により、以前に比べるとCSS... / CSSアニメーションライブラリ / Animate.css他...全19件 モダンブラウザの普及により、以前に比べるとCSS3アニメーションを使う機会が増えてきています。CSSを使ったアニメーションは、プレフィックスが必要だったり、アニメーションの流れがコードを見ただけでは直感的に分かり辛かったり、自由に使いこなせるには慣れと経験が必要です。 そういった悩みを解決してくれるアニメーションライブラリが存在するのをご存氏でしょうか？ちょっとしたCSSアニメーションであればライブラリを使うことでいとも簡単に組み込むことができます。 そんなありがたーいライブラリを集めました。
33 Best Websites to Download Free Vectors
Unlike raster images, vector images are flexible and scalable enough to not lose quality when stretched out beyond their original size. This makes it perfect for use for both web and print design. In fact, we have plenty of compilations that feature vector images (you can start with our multipurpose vector icon sets), but in case you want to do your own searches, we have the next best thing. Are y
これ便利！Photoshopであまり知られていない小技テクニック11選 - PhotoshopVIP
2018年8月5日に公開された記事を、サムネイル画像など再編集、アップデートしています。 フォトショップの作業が速くなる秘訣は、ずばりショートカットキーによる時短テクニック。 その理由は、「もっと早く知りたかった」と思うほど、ラクラクな手軽さで、面倒な作業をすぐに片付けてしまうから。 「レイヤーの重なり順を変えたい」 「細かい部分の作業を行いながら、同時に全体表示で確認したい」 「不要なレイヤーを非表示にしたい」 そんな普段からよく行う作業も、効率アップさせる時短テクニック18個が揃いました。 フォトショップがもっとうまくなりたいと思っている人こそ、まずは試してみませんか。
【保存必須】ジャンル別フリーフォント素材228まとめ
自社ホームページの新規ページやランディングページを制作する時、少しでもサービスの雰囲気が出るような画像を選択すると思いますが、画像と同じくらい雰囲気を左右するのがフォントです。 例えば、一番最初に視線に入るキャッチコピーであれば、フォントの印象がそのままコピーの内容にも影響を与えます。 こちらのLINEの公式ディレクターブログでは、フォントを買えることで広告効果に差が出た事例が紹介されています。 100種以上の自社広告運用でわかった！バナー広告クリエイティブ4つの基本 : LINE Corporation ディレクターブログ どのような内容でもすぐに対応できるよう、フォント素材のストックは多いに越したことはありません。 今回は、ジャンル別に高品質なフリーフォント素材をご紹介します。 デザイナーの方もディレクターの方もぜひチェックしてみてください。 1.和風な日本語のフリーフォント40選 h
2015年総まとめ、jQueryのプラグインとスクリプト100選
毎年恒例のjQueryのプラグインとスクリプトの総まとめを紹介します。「100選」の名称は恒例なので、実際は100以上あります。 今年目立ったのは、ランディングページなどの縦長ページ系、スクロールエフェクト系・CSSやSVGのアニメーションでしょうか。あとレスポンシブ周りも単にサイズ変化に対応させるだけでなく、ユーザビリティを向上させるものが充実していました。 背景関連 SVG関連 縦長ページ関連 スクロール連動・パララックス関連 その他スクロール操作・補助関連 レスポンシブ関連 ナビゲーション関連 レイアウト関連 コンテンツ生成関連 コンテンツ紹介・ツアー関連 ソーシャル関連 スライダー・カルーセル関連 画像拡大・配置・キャプション関連 アニメーション関連 エフェクト関連 テキスト関連 タブ・アコーディオン関連 テーブル・リスト・チャート関連 フォーム関連 パネル・ボックス関連 モーダル
CSSフレームワーク30選！デザイン含めて一括総まとめ
CSSフレームワークを使うのは、すでに一般的になっている。 CSSはよくできたWebページデザインシステムだが、大規模なアプリケーションに弱い、車輪の再開発のような部分も多いという弱点がある。 そんな弱点を補ってくれるのがCSSフレームワークだ。フレームワークを使うことで作業時間は大幅に減り、品質も上がる。 しかし、一方で同じCSSフレームワークを使うと、同じようなデザインになりがちという欠点もある。 そこでこのページではCSSのフレームワークを30種類ご紹介する。人気のものからマイナーなものまで幅広く揃えてみた。 CSSフレームワークを選ぶときに参考にしてほしい。 CSSフレームワーク大体の使い方 CSSフレームワークの使い方は大体どれも同じだ。 ステップ１ CSSを読み込む サイトに行って、CSSとあればJavaScriptをダウンロードする。link rel でサイトに組み込んで準備
気になるWebデザインのアイデア・テクニックが使われてる！2016年になってでてきた5つのトレンド
Webデザインのトレンドは実際に使うかどうかは別にしても、それらを見るのは非常に楽しく、インスピレーションが刺激されます。 2016年上半期、最近見かけるようになったWebデザインの5つのトレンドを紹介します。 5 Actual Web Designs Trends for 2016 以下、各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 1. ブラウザいっぱいに表示して、スクロール無し 2. 固定表示は見出しをサイドに 3. ロゴをローダーとして使う 4. 今までは違った背景の使い方 5. 圧倒させるアニメーション ボーナス 1. ブラウザいっぱいに表示して、スクロール無し スクロールを必要としないサイトが、ついに勢いを増してきました。 縦長ページで次々にコンテンツを無限スクロールで表示させたり、リンクが配置されたヘッダを上部に固定表示させ
Web界隈で最近気になるWebサービスとか集めてみた【2016年7月版】 - Brian'z Imagination
2016年もいよいよ下半期突入。 歳を取るごとに1年が過ぎるスピードがますます加速するように感じるけれど、全然悲観的じゃない。むしろ毎日新しくて新鮮なことが向こうからどんどん飛び込んできて、毎日エキサイティングだ。 そんなわけで、今回も先月に引き続き最近気になるWebサービスやアプリケーションなどを紹介していきたい。前回は海外サイトを中心に紹介したけれど、今回は海外編・国内編と2本立てで紹介していく。ほとんどのサービスは無料だけれど、とんでもなく便利なものも多いので、きっとあなたの役に立つはずだ。 ちなみに前回の6月版の記事はこちら。 海外編 Real Time Users Real Time Usersは、1分(60秒)以内にサイトを閲覧しているひとの数を表示するカウンターのjavascriptプラグインだ。CSSで表示部分をカスタマイズすることができる。数行のコードではてなブログにも設
[CSS]最近のWeb制作でよく使う、Sassのmixinのまとめ
15 essential Sass mixins 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 Sassやってみたい、と考えてる人には下記の本をオススメします。 Sassの初心者からもっと使いこなしたい人まで、Sassを確実にマスターできるオススメの本 -Sassの教科書 box-sizing（ボックスサイズ） opacity（不透明度） column-width（カラム幅） circle（円形） font-size（フォントサイズ） box-shadow（ボックスシャドウ） xPos（要素の座標） vertical-align（天地の中央に配置） flexbox（フレックスボックス） flex（モダンブラウザの旧仕様にも対応したflexの指定） flex-order（表示の順番） flex-direction（表示の方向） gra
![[CSS]最近のWeb制作でよく使う、Sassのmixinのまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/41a2e814247663ad1040b747f3c634ccd698a028/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201404%2F2014111701.png)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSの参考になるアイデアが満載！2016年スタイルシートを使ったテクニックのまとめ
国内限定、商用利用無料のフリー素材の総まとめ -日本語フォント、写真素材、イラスト素材、マンガ素材など | コリス
PhotoshopやIllustratorの最近気になったチュートリアルのまとめ
http://triangre.net/archives/category/wordpress
