配色はセンスじゃない、UIデザインで色をかんたんにキメるメソッド配色はセンスじゃない、UIデザインで色をかんたんにキメるメソッド 最近よくTwitterで知り合った若いデザイナーにお会いしているのですが、どなたにも決まって聞かれることがあります。 「G●●dpatchってぶっちゃけどうなんですか?」 知りません、なんで僕に聞くんだw 2015年に「Dear G●●dpatch」という内容のサイトを作って持っていったところ、「あー、またこれね...」と土屋さんに...
LPの最新デザインまとめ参考サイト｜LP アーカイブ
フォルダを削除 フォルダを削除すると登録されているデザインやメモは 全てお気に入り登録から削除されますがよろしいですか？
CSSの作業をもっと楽に！無料で使える便利なWebツール40選
CSSを使って作業をいているときに活用したい、無料で使えるオンラインツールをまとめてご紹介します。これらのツールは、制作時間を節約、短縮できるだけでなく、CSSのちょっとややこしい問題の解決ツールを想定し作成されています。 CSSをベースとしたアニメーション、レスポンシブに対応したナビメニュー作成ツール、パイチャート作成、CSSの圧縮やユニークなサークル型メニューの作成などさまざまなツールが揃っています。制作に困ったときに読み返してみてはいかがでしょう。 超便利！確認しておきたい最新CSSツール、リソースガイド 2018年度 CSSの作業をもっと楽に！無料で使えるオンライン便利ツール40選 Flexbox Parent Attribute Visualizer CSS Flexbox のプロパティを実際に変更しながら確認できるインタクラティブな方法。 Keyframes.app CSSアニ
「えーと、画像は全部2倍で作ればOKなんだよね？」を卒業しよう — un-Tech
お疲れ様です、大塚です。 Appleの新製品発表会が間近に迫ってきましたね。新しいiPhoneの発表はもちろんのこと、今年の「One more thing」も楽しみです。 しかしながら、新しいプロダクトにドキドキ・ワクワクしながらも、心のどこか冷静な部分で、 「また新しい解像度が出てきたわ…」 と、新しい苦悩を抱えてしまうエンジニアやディベロッパーの方も多いのではないでしょうか？高解像度ディスプレイを搭載したマルチデバイスへの対応は、なかなか骨が折れる作業ですからね。 …え、仕組みがよくわからないままコーディングしていたって？？ そいつぁーまずい。 なぜ、多くのスマートフォンやタブレット向けのWebサイトでは、画像が2倍で作られているのか？ その理由と、ディスプレイや解像度の仕組み、今日ここで覚えていって頂戴。 ディスプレイの仕組み ぼくたちが普段使用している、PCやスマートフォンのディス
デザイナーにおすすめ！写真に文字をうまく入れる、6個の秘訣テクニック完全ガイド
海外デザインブログCanva Design School Blogで公開された「The Complete Guide for How to Marry Text and Images In Your Designs」より許可をもらい、日本語抄訳しています。 あらゆるところで見かけます。Instagram や Facebook などで見かける投稿。またウェブサイトやオンライン向け広告バナーはもちろん、ビルボード広告や名刺など、日常の何気ない生活のなかでも、いつの間にかこのデザインに遭遇しているでしょう。 何の話をしているか分かりますか。今回のテーマでもあり、グラフィックデザインの基本テクニックのひとつ、文字テキストとイメージ写真の組み合わせ方です。キャッチーな文字フレーズを写真に配置するだけの、簡単なデザイン作業にも思えますが、いざやってみると思っていたよりもむずかしいことに気付くでしょう。
無料ダウンロード可能で商用利用もOKな内容が異様に細かいピクトグラム「human pictogram 2.0」
資料や配布物のデザインは悩みどころですが、「早く帰りたい人は利用してさくっと仕事を終えて帰宅しましょう」ということで、「フキダシデザイン」の作者であるTopeconHeroesのダーヤマさんが無料で商用利用も可能なピクトグラムを公開しています。「ピクトグラムはほとんどの場合、公共交通機関や、バリアフリーなどの標識に使われるため、雰囲気が真面目なものが多く、やや面白みに欠けるので、くだらないポーズなど多めにバリエーションを増やしていく事にしました」とのことで、ピンポイントすぎるピクトグラムの内容は、見ているだけでも楽しめます。 human pictogram 2.0 (無料人物 ピクトグラム素材 2.0) http://pictogram2.com/ トップページにはカテゴリ分けされていないピクトグラムがずらっと表示されており、ページ下部のボタンから「どんなピクトグラムがあるのか？」というこ
コピペ自由！美しいグラデーションを180種類揃えた WebGradients
最近のウェブデザインでよく見かける、鮮やかな配色のグラデーションカラーをお探しですか。 WebGradients は、どんなウェブサイトでも利用できる美しいグラデーションカラー180種類を揃えた、無料の配色コレクションツールです。ボタンをクリックするだけで、Internet Explorer や Chrome などクロスブラウザ対応のCSS3コードをコピペできます。使い勝手もよいので、ワークフローに加えたいサービスのひとつです。 詳細は以下から。 コピペ自由！美しいグラデーションを180種類揃えた WebGradients WebGradients では、配色の参考にしたい美しいグラデーションカラーが一覧で揃っており、使い方もとてもシンプルです。各パネルでは、2500x2500pxのPNGファイルをダウンロードできたり、使用している色のHEXコードもまとめて確認でき、Webデザイン制作に便
1行追加でOK！CSSだけで画像をトリミングできる「object-fit」プロパティー
2024年8月19日 CSS 画像の一覧を表示する時などは、画像のサイズが統一されていると並べて表示させてもすっきりキレイに整って見えますが、必ずしもサイズが同じとは限りません。かといってPhotoshopを使ってすべての画像をリサイズできない…ということもあるでしょう。そんな時はCSSでトリミングすると楽です！今回は「object-fit」というプロパティーを使って、画像の縦横比を保ちつつトリミングする方法を紹介します。 ↑私が10年以上利用している会計ソフト！ 画像を中央の位置でトリミングする まずはこの縦長の画像、横長の画像を並べ、縦横250pxの正方形の形で表示させてみましょう。 img { width: 250px; height: 250px; } CSSでこのように画像に対してサイズを指定すると… こんな感じでグチャッとつぶれて表示されちゃいます…。 そこで画像に対して ob
Photoshop VIP ☞ 背景デザインに使える継ぎ目のないオシャレなストライプ柄パターン、400個あつめました。
Webデザインを制作するときに重要なデザインパーツのひとつが背景デザインではないでしょうか。 真っ白の味気ない背景デザインを簡単に、効果的にデザインするにはPhotoshopのパターン素材を利用してみてはいかがでしょう。 Photoshopのパターン素材を利用することで、継ぎ目のない美しいデザインをクリックひとつで表現することが可能となります。 海外デザインブログSmashing Wallで、オシャレなストライプ柄を継ぎ目なくデザインすることができるPhotoshop用無料パターン素材を400個まとめたエントリー「400+ Free Photoshop Stripe Patterns」が公開されていたので、今回はご紹介します。 Twitterなどのオンラインサービスのオリジナル背景画像として利用することもできるので、お気に入りのストライプ柄を見つけてみてはいかがでしょう。 詳細は以下から。
タイトルや見出しで使いたいオシャレなWebフォント20選
CSSで指定するだけのウェブフォントを使用したサイトが多くなってきました。最近ではGoogle Fontsがリニューアルされ、ウェブフォントの見比べやサイズやスタイルの選択などがより容易になりましたが、それでも多くのウェブフォントからイメージどおりのフォントを探すのは依然として大変な作業です。 そこで当編集部では今回「見出しに最適」なフォントをテーマに20点ピックアップしました。 各フォントごとにコードを書いてありますが、記事末尾にはこれらをキュレーションしたGoogle Fontsのページもリンクしておきますので、是非ご利用下さい。 見出しに最適なウェブフォント Alegreya Sans SC
最近見かけるレイアウト・ナビゲーション・スライダー・フォームなどがどうやって実装されているのかのまとめ
Webページやスマホアプリで見かけるレイアウト、ナビゲーション、ボタン、スライダー、フォーム、タイムライン、ボタンなど、CSSを使って実装されたテクニックがまとめられたコンテンツを紹介します。 デザインのアイデアとして、またそれが実装可能かどうか、実装はどうやっているのか、何かあった時にチェックすると便利です。
ホバーが好きすぎるエンジニアが選んだ “至極のホバー表現” 10選 【2016年10・11月版】！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
10枚の同じ服を着まわしているフロントエンド兼ミニマリスト、ザワです。はじめまして。 webでのデザインやアニメーションなどの表現がリッチになっている昨今。今回は、webサイトでのユーザーインタラクションの代表格であるホバー表現に注目し、過去にホバザワとの異名を授かったことのある私がチョイスした、魅力的なサイトをご紹介します。 Space Advisor http://www.space-advisor.ca/en/?experience ホバータイトル： 宇宙はlinear 勝手な解説： 惑星の周りを周回する衛星の様子を表現したアニメーションが、ボタンにホバーすることで表示されます。ボタンを構成する要素にはcss animationのanimation-iteration-countをinfiniteに設定し、イージングをlinearにすることで無重力空間が表現されています。サイトの世界
文字コードの違うサイトへformでの送信で、文字化けの解決 - web-trigger
あるwebサイトをリニューアル(正確には別サイトですが・・)制作していたんですが、 そのリニューアルサイトにあるお問い合わせのフォームから、 既存のサイトにあるフォームの確認ページへ飛ばすということになりました。 普通にformのactionで飛ばしていたら、文字化けが起こってしまいました。 調べてみると、 こちらがutf-8で、あちらはShift-jisでした。 それは文字化けするよね、と思いつつ、調べて、なんとか解決することができました。 以下が参考にさせていただいたサイトです。 »ページの文字コードとは違う任意の文字コードをformから送信する方法｜web bibo 一番参考になったサイトがこちらです。 IEでの文字化けの解消方法も参考にさせていただきました。 »文字コードの違うサイト間のPOST送信 LUNARAVE WEBクリエイターの仕事と休息/ウェブリブログ »JavaScr
【jQuery】簡単！Flashのようなタイムラインアニメーションを実現するテクニック（レスポンシブ対応）｜Tips*Blog｜株式会社コプロシステム
【jQuery】簡単！Flashのようなタイムラインアニメーションを実現するテクニック（レスポンシブ対応） こんにちは、UXデザイン室の松山です。 好きなスタンドは、パープルヘイズです。 前回のTips*Blogでは「背景画像の複数設定と:before、:afterを使ったレスポンシブCSSテクニック」を説明しました。 今回は、jQueryでFlashのタイムラインのように順番にアニメーションを実行するテクニックを説明します。 最近ではFlashを使用しているサイトはほぼ見なくなり、アニメーションならjQueryやCSS3で再現しているサイトがほとんどですが、お客様にむかし流行ったFlashで作るオープニングムービーのようなものを依頼された時にどうやって実装すればいいのか悩んだことはないでしょうか？ そんな時に使えるテクニックをご紹介します。 今回作成したサンプル まずはサンプルをご覧くだ
ディスプレイのサイズに合わせて画面いっぱいに背景画像を表示するCSSやjQueryプラグインいろいろ
ディスプレイサイズ（ブラウザサイズ）いっぱいに背景画像を表示する方法はいくつかありますが、最近見つけた jQuery のプラグインを使って、いろいろ試してみたりしたのでレビューをまとめてみました。 背景に画像を使った Webサイトってたくさんありますよね。大きくてキレイな画像は、見た目にもインパクトがあってとても印象的です。でも Webサイトを閲覧している人の環境は様々で、ディスプレイのサイズが違ったりするもの。ディスプレイ（ブラウザ）のサイズにあわせて、画像を拡大表示する方法はいくつかありますが、その中からいくつかをサンプル付きでご紹介します！ 画面いっぱいに背景画像 目次 CSSのみで画面いっぱいに背景画像 jQuery プラグイン fullscreenr を使ってみた Full Size Background Image jQuery Plugin を使ってみた jQuery max
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
コピペっと copypet.jp｜パーツで探す、web制作に使えるコピペサイト。 - CSS3などで新たに追加された要素･装飾方法など、日々コードを書いていないと忘れてしまったり、ささっとプロトタイプを作る時などちょっとしたことに時間をかけている暇はない。困った自分用のストックブログコピペっと copypet.jp｜パーツで探す、web制作に使えるコピペサイト。
https://www.d-grip.com/sample-page/2482/
1ページサイトのためのjQueryプラグイン4選 | ko.a laboratory
Dashicons
新着記事
