Discover — Art & Design Inspiration at ColRD.comAll code and text © 2024 Colrd.com. All other content subject to license listed on detail pages.
「埋め込みタグ」一発でWebコンテンツを激変させる至高のサービス総まとめ！ - paiza times
どうも、まさとらん（@0310lan）です。 みなさんは、「YouTube」の動画をWebサイトやブログなどに貼り付けたことがあるでしょうか？ 「埋め込みタグ」をコピペするだけで、簡単に動画コンテンツを利用できるわけですが、最近は他にも多彩なコンテンツが埋め込めるようになっています。 そこで今回は、特にユニークなWebコンテンツを埋め込める無料サービスだけを厳選してみましたので、ぜひ参考にしてみてください！ ■リッチな情報を盛り込んだ「画像」を埋め込む！ 【 ThingLink 】 Webページに「画像」を挿入する機会は多いと思いますが、１枚の画像で伝えられるコトには限界があります。 そこで、「ThingLink 」を使うと、ごく普通の画像内に「動画」「音楽」「リンク」「テキスト」…など、さまざまな要素を埋め込むことが可能になるのです。 まずは、以下のサンプル画像をチェックしてみてください
これは凄い！Web制作が捗るモーフィング系の最新スニペットまとめ
作成：2016/04/25 更新：2016/06/29 Web制作 > ある形から別の形に連続で変化をかけていくモーフィングのような、視覚的な変化を表現できるスニペットをまとめました。トレンドをおさえた最新スニペットを厳選してピックアップ。 エンジニア速報は Twitter の@commteで配信しています。 背景色に合わせて、テキスト色をリバースさせる DOM要素の重なりを指定するCSS3のブレンドモードmix-blend-mode: differenceを使って、背景色と同時にテキストカラーを反転させていく方法。CSSだけでこれができるのは驚き。 進捗を示すプログレスバーなどで使うと、コントラストがはっきりするので見やすくなりそうです。 mix-blend-modeの「 difference」についてはCSS3のブレンドモードが素敵！ 新プロパティmix-blend-modeを使いこな
インスピレーションがもらえてデザインの参考になる、国内外のデザインギャラリー - NxWorld
デザイン制作時の参考にしたりインスピレーションがもらえる、主にwebデザイン向け国内外のデザインギャラリーを紹介します。 主にwebデザイン向けになりますが、一部デザイン全般で参考になるサイトもあります。 中には特定のテーマやパーツに絞ったデザインのみを紹介しているギャラリーもあるので、日頃デザインしていて「この雰囲気のデザインをいつも悩む」とか「この部分の引き出しを増やしたい」という人は、そういったサイトを日頃からチェックするのがおすすめです。 過去にもこういったデザインギャラリーをまとめて紹介したエントリーを書きましたが、クローズしたサイトが目立ってきたり見つけた当時とは収集しているデザインが異なるテーマになっているサイトなどもあったので、それらの編集・削除も兼ねつつすべてひとまとめにしました。
ブラウザで表示が崩れた時の検証に便利！IE6-11, Edge, Chrome, Safari, Firefoxなど各ブラウザのCSSハック -Browser Hack Mixins
特定のブラウザで挙動がおかしい、期待通りにならない、そんな時の検証用に役立つ、IE6-11, Edge, Chrome, Safari, Firefoxなど各ブラウザのCSSハックがまとめられたSassのMixinを紹介します。 いざという時に、備えておきたいですね。 Browser Hack Mixins for Sass Browser Hack Mixinsの使い方 「_hacks.scss」をインポート。 コード: @import "hacks"; Mixinの使い方 基本書式: @include [Mixin_Name]{ selector, property, value } 記述例: @include only_ie9_below { .my_div, background-color, red } CSSハックの各ブラウザは、下記の通り。 そのブラウザのみ、バージョンのみ、
CSSのみ！動きのあるデザインをコピー＆ペーストで実装できるサンプルコード集
自由度の高い表現が可能になったCSS3は、簡単なアニメーションや動きをつけることもできます。 今回は、CSSだけでできる動きのあるデザインをピックアップしてご紹介します。 フロントエンジニアの方にとっては、CSSテクニックのレパートリーが増えるだけでなく、コピー＆ペーストで手軽に利用できますので、動きのある表現をしたいという時に取り入れてみてはいかがでしょうか。 CSSだけで表現できる動きのあるテクニックまとめ 1.CSS3フルスクリーン背景スライドショー DigitalSkill CSSのみでフルスクリーン背景のスライドショー、タイトル表示をおこなうチュートリアルです。 アニメーション部分は、複数パターンのサンプルデモを公開しています。 2.Fullscreen Overlay Effects codrops クリックすると、フルスクリーンのオーバーレイがかかるエフェクトのサンプルです。
Web制作者は要チェックです！新バージョンのnormalize.css V4はモダンブラウザ・スマホ・HTML5に完全対応 | コリス
2016年3月19日に、モダンブラウザ、スマホ、HTML5に完全対応した「normalize.css」の新しいバージョン「normalize.css v4.0.0」がついにリリースされました！ v3から細かい改良が重ねられたv4で定義されている各スタイルが、どのように機能しているか紹介します。 normalize.css normalize.css -GitHub Changes to normalize.css normalize.cssの特徴 html, body, :rootなどの全体系の定義 HTML5の新要素用の定義 リンク系の定義 テキスト系の定義 埋め込みコンテンツ系の定義 グルーピングコンテンツ系の定義 フォーム系の定義 normalize.cssの特徴 normalize.cssとはブラウザごとに異なる要素のスタイルの相違を吸収し、各要素のデフォルトのスタイルを提供する小
CSSのvw, calc()を使用した、レスポンシブ対応のフォントサイズを指定するこれからのテクニック
本文や見出しなどのフォントサイズをスマホ時やデスクトップ時で変える時、通常はMedia Queriesでスクリーンサイズごとに文字サイズを指定していると思います。 ここで紹介するフォントサイズの指定方法はちょっと新しいアプローチで、最初にベースとなるフォントサイズを設定し、スクリーンサイズが大きくなるにつれ、Viewport Unit（ビューポートの単位）で加算してサイズを大きくします。 Viewport Unit Based Typography 以下、各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 Viewport Unit（ビューポートの単位）とは？ フォントのサイズ指定のためのビューポートの使い方 他の文字の要素をビューポートで指定 縦のリズムとモジュラースケールをビューポートで指定 フォントサイズの指定の精度をアップする さらに精
ERRP | Expired Registration Recovery Policy
Please notice: This domain name registration has expired and renewal or deletion are pending. If you are the registrant and want to renew the domain name, please contact your registration service provider. Bitte beachten Sie: Diese Domainregistrierung ist abgelaufen und die Verlängerung oder Löschung der Domain stehen an. Wenn Sie der Registrant sind und die Domainregistrierung verlängern möchten,
レスポンシブデザインにすぐ使える！すごいアイデア30個 | コリス
サイトをレスポンシブ対応にするには、デバイスごとのスクリーンサイズ、フォントや画像のサイズだけでなく、クリックとタップ、スクロールとスワイプなどの機能性、そして見た目もサイズだけでなく、配置やトリミングなど、さまざまな取り組みがあります。 レスポンシブデザインにすぐに使える制作テクニックのすごいアイデアを紹介します。 Responsive web design: What the Internet looks like in 2016 以下、各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 01. 空白スペースを効果的に使う 02. ロゴの配置を一貫させる 03. 縦置きと横置きを考慮したデザイン 04. 縦長スクロールページの素晴らしいアイデア 05. 指のタップに合わせた形と大きさ 06. レイアウトにレスポンシブ用の微調整 07. 一行
新人Webデザイナーさん乙！素人デザイン脱却の為のサイトと記事まとめました | コックピット
Webデザイナーなりたての時期って、自分のデザインに自身が持てなくて苦労しますよね。 「おかしなデザインだ…」とか思うものの、明確な改善点が見つからず、ただただ悩む日々を送っていることと思います。 そんな悩める新人デザイナーさんの為のバイブル的サイト、ならびに記事をご紹介します。 これを読めば、明確な改善点を見つけ出すことができ、脱ダサデザイン出来ることを保証します。 脱ダサデザインにおすすめな記事 5選 デザインを勉強したことがない人でもデザインできるようになるかもしれない4つの基本原則 配色パターンからWebデザインを考える ずっと使えるデザインテクニック。すっきり美しく見せる『余白』と『文字』の使い方。 良いデザインって？技術を学ぶ前に知っておきたいデザイン・レイアウトの基本的なこと 「素人っぽいデザイン」から抜け出すために、デザイン制作時に心がけたい5つのポイント 脱ダサデザイン
「やりすぎデザイン」を改めて、脱・素人臭を目指そう | 日本VTR実験室
どうもこんにちはJBです。 「年末にPCフォルダの整理でもしようかね」となりまして、昔のデザイン練習ファイルとかがまあ発掘されたのですが… 「だっさ…」と軽くおののく様なレベルでした。アレを人に見せていたと思うと叫びながら走り出したくなりますよ、マジで。 走り出したい気持ちを抑えて「だっさいわー」というデザインを見直してみたところ、共通していたことがありました。それは、 これ、やりすぎだったな… ということ。 そんなわけで、デザイン初期にありがちな「やりすぎデザイン」を今一度見直したいと思います。 今はあの頃に比べて、多少良くなっているはず。そう思いたい。 デザインの仕事をしてなくても、パワポとか資料作成のときにちょっと意識するといい感じになるかもしれないし、ならないかもしれないです。 めざせ！脱・素人臭！それでは行ってみましょう！ ありがち①：やりすぎグラデーション 何となく寂しいときに
これからのデザインの未来を示す15の変化 デザイン会社 ビートラックス: ブログ
デザインとテクロノジーの融合がこれまでに無い程に進んでいる現在、テクノロジーよりもデザインが重要性が高まってきていると感じる。 新しい技術が開発されるたびに話題になるが、それが継続的に世の中に受け入れられるかどうかはデザインが担う部分が非常に大きい。それに伴い、私達デザイナーの仕事の内容と、ビジネスや社会に対するその影響力もどんどん広がっている。 そして、”デザイン”という言葉自体の概念も時代と共に変化している。 グラフィックデザインやWebデザインなど、これまでのいわゆる”絵を描く”ことからデザイン的考え方を事業の為の一つの戦略スタイルとして活用するケースが増えている。 特にアメリカでは、大きな企業からもデザインの重要性への注目が高まっており、今後は業績に直接影響を与えるレベルになると考えられている。 一つの時代の節目ともなる2020年に入りこれからデザインの役割とそれを取り巻く環境の変
デザインについて語れる批評をするコツ
批判ではなく批評 個人プロジェクトでない限り、公開前に誰かにデザインを見せる機会があると思います。相手はクライアントかもしれませんし、同僚・上司なのかもしれません。デザイナーの中には見せるのを躊躇している方もいるのではないでしょうか。知恵とスキルを出し切って作り上げた子供のような存在なので、万が一批判されたのであれば自分自身も批判されているように感じるのではないでしょうか。IDEOの Time Brown 氏が TED の講演で「デザインはデザイナーだけに任せるには重要過ぎる」という言葉を残しているとおり、デザインを皆で考える機会を作るべきです。デザイナーは早い段階から他の誰かとアイデアを共有するべきですが、会話が批判的なものになりすぎているのであればデザイナーも積極的に参加もしてくれませんし、デザインを前提とした会話にはならないでしょう。 「この色は違う」「使いにくそうだ」「分かっていな
バナーデザインの参考になるサイト9選
限られたスペースの中でターゲットに訴求しなければならない「バナー」のデザイン。「つい似たようなデザインばかり作ってしまう」「いまいち広告としての訴求力がない仕上がりになる…」など、バナー制作に悩むWebデザイナーの方もいるはず。今回は、そんなときにデザインの参考にしたいバナーまとめサイトをご紹介します。 ＜この記事に関連する記事＞ クリックしたくなるバナーを作るためのコツまとめ Webデザイナーに求められるスキルレベルは？未経験でも最低限必要なのは？ Webデザイナーは副業にできる？案件獲得の方法も解説 バナーデザインの参考になるサイト9選 Retrobanner http://retrobanner.net/ 7000種類以上（2017年3月現在）の広告バナーを集めて一覧表示しているサイト。サイズ、色、業種、テイスト（シンプル、かわいい、など）でカテゴリ分けできるので、制作するバナーのデ
Web制作のクオリティを飛躍的に高めるJavaScriptライブラリ10選を一挙公開！ - paiza times
どうも、まさとらん（@0310lan）です。 みなさんは、「JavaScriptライブラリ」を活用しているでしょうか？ Webサイト制作はもちろんのこと、さまざまなWebアプリやサービスなどを開発する時に、大幅な時間短縮やクオリティを飛躍的にアップすることが出来るようになります。 そこで今回は、国内外で人気が高くて誰でも簡単に扱える「JavaScriptライブラリ」を厳選してご紹介しようと思います！ ■多機能な「写真ギャラリー」を組み込めるライブラリ！ ◆1.Viewer.js 複数の画像を表示する際に、オシャレな「ギャラリー風」に変換してくれるライブラリです。 類似のライブラリはいくつか存在しますが、「Viewer.js」は使い方が非常にシンプルで扱いやすいのに、多機能性も備えているスグレモノとなっています。 基本的な使い方としては、HTMLファイルに表示させたい画像を「リスト要素」で指
見やすい！わかりやすい！伝わる！プレゼンに役立つ資料まとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、人事からWebディレクターに異動したなっちゃんです。 上司であるそめひこから「なっちゃん、いいプレゼン資料のつくり方をまとめた記事書いて！」と言われたので、この記事を書き始めました。わたしにタスクを課したそめひこは、現在進行形でプレゼン資料をつくっています。それ、今自分が欲しい記事ってことですよね？ ということで、プレゼン資料づくりから発表の場まで、参考になる資料をまとめました。 デザイン編 ビジネスマン必見！キレイな提案書を作るためのデザインの基礎知識 資料のキレイさ ★★★★★ 読みやすさ ★★★★★ シンプルさ ★★★★★ まず、この資料自体がシンプルかつオシャレで、非常に読みやすくまとめられています。色をうまく使うための基礎とコツが、資料の中にふんだんに盛り込まれています。また、余白の取り方、文字フォント選びについても触れられており、全部読まずとも、重要なポイン
Photoshopを使う時に欠かせない、絶対オススメのプラグイン・機能拡張のまとめ
Photoshopはデザインに欠かせない便利なツールですが、そのまま使っているだけではもったいないです！ Photoshopでの作業がさらに捗る便利なプラグイン・機能拡張を紹介します。 ここで紹介するものは、当方の日本語環境（Win/Mac, CC 2015）で利用しています。 よく使うドキュメントはテンプレートとして管理 レイヤー数が多くても目的のレイヤーにすぐにアクセス ガイド引きの定番「GuideGuide」は大幅バージョンアップ ガイド引きは「QuickGuide」も欠かせない スクリーントーンや集中線を生成する「Comic Kit」 磨りガラスのようなエフェクトを与える「Blur Like Jony」 カラー・テキスト・フォントサイズなどに変数が使える「Ditto」 ガイドライン作成に欠かせない「Ink」も大幅バージョンアップ 複数の要素を変形させる時に位置はそのままで レイヤー
2013年、絶対に流行るwebデザイントレンド まとめ
参考サイト アクセントカラーまたは背景のテーマの変更 | Windows Phone の使い方(日本) 目次に戻る フラットデザイン フラットデザイン とは シャドウ や グラデーション を使い立体的に見せる所を フラットな表現 をする デザイン方法 です。一番身近な フラットデザイン はGoogleが使用しているアイコンが参考になります。 SpellTower SpellTower 色合いが優しくて必要な事だけをちゃんと伝えられています。とても素敵なサイト。 Bärnt & Ärnst Bärnt & Ärnst シンプルなフラット感がスゴい。 LayerVault LayerVault 最新なフラットデザインで、もの凄く勉強になるサイトです。 Flat UI UIデザインキットFlat UIが公開されています。フラットデザインの勉強になると思いますのでダウンロードをお勧めします。 Fl
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Free Web Design Resources - Freebiesbug
