デベロッパーなら知っておきたい30秒でできるCSSスニペット集「30 Seconds of CSS」
毎日コーディングでさまざまなコードを書くデベロッパーにとって非常に便利なスニペット。知っているだけで作業効率が格段にアップするもの。そんな方におすすめできる「30 Seconds of CSS」をご紹介していきたいと思います。 先進的な知識を多く取り込むためにも、基礎的な業務内容をいかに短縮して行っていけるかは非常に重要なポイント。デベロッパーの方はぜひ下記よりチェックしてみてください。 詳しくは以下 レイアウト、アニメーション、インタラクティビティ、その他といったようにカテゴライズされており、それぞれのジャンルに分類されたコードがわかりやすく記載されています。デモもすぐ閲覧できるようになっており、使いたい要素を探しやすいのも魅力。奇抜なものはありませんが、基本として使いたい、ぜひ知っておきたいものが揃っているので、日々のコーディングに非常に役立ってくれそうです。 コードを書く手間を短縮す
制作時に役立つillustratorのチュートリアル「Illustrator Tutorials: 35 Fresh and Useful Adobe Illustrator Tutorials」
制作時に役立つillustratorのチュートリアル「Illustrator Tutorials: 35 Fresh and Useful Adobe Illustrator Tutorials」 デザイナーはイラストレーションやフォントの処理など様々なテクニックが求められます。高度な技術を求められた時、チュートリアルがあるととても便利です。今回紹介するのは、制作時に役立つillustratorのチュートリアル「Illustrator Tutorials: 35 Fresh and Useful Adobe Illustrator Tutorials」です。 Create a Shattered 3D Geometric Text Effect in Adobe Illustrator – Vectips 初心者にも役立つ基本的な操作から、高度な技まで幅広くチュートリアルが紹介されています
CSSで簡単に導入できるカスタマイズも可能なSVGバックグランドセット「SVG Backgrounds」
近年Webデザインに導入する機会が増えてきた「SVG」。拡大や縮小が容易にできる為、レスポンシブ性が求められるWebデザインに適応するフォーマットとして注目を集めています。今回ご紹介するのはそんなSVGを利用した背景を容易に生成できる「SVG Backgrounds」です。 シームレスで拡大と縮小に適応したSVGバックグランドをCSSコードで入手することができます。 詳しくは以下 ベーシックな縞模様から、グラデーションやポリゴングラフィック、3Dチックな立体的な背景まで全部で30種類ものSVGバックグランドが用意されております。すべての背景でパターンのカスタマイズが可能で、指定色を変更したり、模様の濃度やグラデーションの割合を調節したり、テンプレートをそのまま利用するだけでなく、デザインに合わせて調整することができます。これだけ多彩な背景をSVGで利用できるのは嬉しいですね。背景によっては
時短や参考に！Webデザインに役立つフリーのWordPressテーマまとめ「25 Free Responsive WordPress Themes For Every Website」
時短や参考に！Webデザインに役立つフリーのWordPressテーマまとめ「25 Free Responsive WordPress Themes For Every Website」 ブログの更新など、何かと便利なWordPress。Web制作に積極的に取り入れている方も多いのでは？今回ご紹介するのは、そんなWordPressを使ったハイクオリティなテーマをまとめた「25 Free Responsive WordPress Themes For Every Website」です。 Illdy – Free One Page WordPress Business Theme – Colorlib Webデザインに役立つレスポンシブなフリーのWordPressテーマが、25種類もまとめられています。そのなかから更に、おすすめのテーマを選んでご紹介しますので是非ご覧ください。 詳しくは以下 F
書類ひとつにもこだわりたい 見やすく使いやすいフリーの請求書テンプレートまとめ「40 Invoice Templates | Free & Premium | Print & Digital-Friendly」
書類ひとつにもこだわりたい 見やすく使いやすいフリーの請求書テンプレートまとめ「40 Invoice Templates | Free & Premium | Print & Digital-Friendly」 仕事を納めた後、発生するのが請求書送付業務。各クライアントへの請求書発行はなかなか手間のいる作業です。今回ご紹介するのは、そんな請求書発行業務をテンプレートで効率化してくれるフリーの請求書テンプレートをまとめた「40 Invoice Templates | Free & Premium | Print & Digital-Friendly」です。 Invoice by Darkwat on DeviantArt ビジネスシーンで使える、見やすく便利なテンプレートが40種類もまとめられています。今回はその中からおすすめのテンプレートを幾つか選んでご紹介しますので、ぜひご覧ください。
デザイナー必見！業務を効率化してくれるデザイナーの為のフリーツールまとめ「What’s New for Designers, November 2017」
デザイナー必見！業務を効率化してくれるデザイナーの為のフリーツールまとめ「What’s New for Designers, November 2017」 業務の効率化に欠かせないフリーツールは、上手く使いこなせばコストの削減や時短にも繋がります。より良いデザインの為にも作業環境は常に整えておきたいところ。今回ご紹介するのはデザイナーの為の使えるフリーツールをまとめた「What’s New for Designers, November 2017」です。 Creative Veila – Yummy Meals Vector Set 様々な機能をもつ使いやすいフリーツールが25種類以上紹介されています。更にその中から幾つかこれはと思ったフリーツールを集めてみましたので、ぜひご覧ください。 詳しくは以下 Logo Crunch – The multi-resolution logo make
直感的な操作で簡単にアニメーションを作成することができるCSSアニメーションツール「Stylie – A Free CSS Web Animation Builder」
直感的な操作で簡単にアニメーションを作成することができるCSSアニメーションツール「Stylie – A Free CSS Web Animation Builder」 WEBサイトならではのアクション要素の一つ、アニメーション。取り入れることができれば個性的でインパクトのあるサイトを制作できますが、アニメーションの作成はハードルが高いと感じる方も多いのではないでしょうか。そんな方におすすめできるCSSアニメーションツール「Stylie – A Free CSS Web Animation Builder」を今回はご紹介します。 使い方が難しそうと思われる方も多いかもしれませんが、汎用性の高い便利なツールとなっています。使用方法をわかりやすく説明してくれている動画が紹介されていますので、まずは下記よりご覧ください。 詳しくは以下 使い方は直感的で、ドラッグで図形や黄緑色の＋印を動かすことで
Webデザインをよりクリエイティブにみせてくれる 複数写真の同時切り替えが可能なグリットスライドショー「CSS Grid Layout Slideshow」
TOP > WebDesign > Webデザインをよりクリエイティブにみせてくれる 複数写真の同時切り替えが可能なグリットスライドショー「CSS Grid Layout Slideshow」 Web上で写真を見せる定番の手法のひとつ、スライドショー。コンテンツを見せるのに利用したり、メインビジュアルに利用したり…とても活用幅が広く便利な存在です。今回ご紹介するのはそんなスライダーを、よりクリエイティブに見せてくれる変則的なスライドショー「CSS Grid Layout Slideshow」です。 グリット上に並べられた複数のイメージを、一気に切り替えることができる美しいスライドショーのフリーCSSソースです。 詳しくは以下 ランダムで大胆な配置に並べられたスライド画像は矢印を押すことで、次の画像へと切り替えることが出来ます。グリットの並び方はスライドごとに異なり、アニメーションと
HTMLの例をタグ毎に記したクリエイティブなチートシート「Interactive HTML Cheat Sheet」
TOP > Tool > HTMLの例をタグ毎に記したクリエイティブなチートシート「Interactive HTML Cheat Sheet」 普段私たちが見ているサイト。それを構成するHTMLはこの数十年のうちに大きく発展をしてきました。開発されたプログラミング言語は膨大であり、追いかけることも一苦労。わからないことを検索するのも非常に手間がかかります。そんなときに活躍してくれる「Interactive HTML Cheat Sheet」を紹介していきたいと思います。 目的のHTMLを簡単に検索することができる便利なチートシートになります。 詳しくは以下 並びはアルファベット順、カテゴリ順のどちらかで選択することができます。スクロールしていくと表が動き、見方も非常にわかりやすい設計も特徴です。自分に必要なタグをクリックすると、目的のページに飛び、内容・属性・コード例などが表示され
Webデザイナーやデベロッパーの大きな手助けになるCSS3チュートリアル集「10 Pure CSS3 Tutorials And Examples」
TOP > WebDesign > Webデザイナーやデベロッパーの大きな手助けになるCSS3チュートリアル集「10 Pure CSS3 Tutorials And Examples」 CSSはWebサイト構築の上で非常に便利なものですが、今回は様々な機能でデザインを形にしてくれる、CSS3をマスターするために便利なチュートリアル「10 Pure CSS3 Tutorials And Examples」を紹介したいと思います。 How to Code a Homepage Template with HTML5 and CSS3 | Medialoot 最新のCSS3を使ったチュートリアルがまとめられています。気になったものをピックアップしましたので、下記よりご覧ください。 詳しくは以下 CSS3 calc() Function – Hongkiat 新しい関数を使用して長さの計算
プレビューで簡単！CSSアニメーションがブラウザ上で作れる「animista」
Webデザインを彩るCSSアニメーション。実装時にはデザインのイメージに合わせて、細かな調整を加えたり、なかなかに手間がかかる箇所でもあります。そんな手間がかかる調整工程を省ける、ブラウザ上でアニメーションが作れるツール「animista」を今回は紹介したいと思います。 ブラウザ上でプレビューしながら細かな動きを調整して、タグをコピペするだけでCSSアニメーションが実装できる便利なツールです。 詳しくは以下 拡大や縮小、スウィングなどの18種類ものアニメーションの雛形から、オプションで数値を変更してアニメーションを細かにカスタマイズすることができます。オプションではアニメーションのスピードだけでなく、ディレイや回転回数など、細かな場所まで弄ることが可能。面倒だった細かな調整作業を、ブラウザ上でプレビューを見ながらできるので、効率的に仕事をこなすことができます。スムーズなアニメーション実装で
100種の無料HTML / CSSテーマがまとめられた「Best of 2016: 100 Free HTML/CSS Themes」
TOP > Tool > 100種の無料HTML / CSSテーマがまとめられた「Best of 2016: 100 Free HTML/CSS Themes」 プログラムを組むと一言で言っても、内容は幅広く、多くの知識と技術が必要不可欠です。そんな中今回紹介するのは、時間短縮できる無料のツールをまとめた「Best of 2016: 100 Free HTML/CSS Themes」です。 GitHub – BlackrockDigital/startbootstrap-new-age: A web app landing page theme created by Start Bootstrap できるだけ短時間でウェブサイト制作が必要とされる場合や、手順のかかるプログラムを素早くこなしたい時に役立つツールが、数多く紹介されていますのでご覧ください。 詳しくは以下 Creativ
クリエイティブなマウスオーバーアニメーション「Stack Motion Hover Effects」
Webデザインに欠かせない様々なエフェクトやアニメーション。使い方次第でWebサイトを魅力的なものに仕上げてくれますが、今回紹介するのは、クリエイティブなマウスオーバーアニメーション「Stack Motion Hover Effects」です。 全部で30種類の立体的なマウスオーバーアニメーションがサンプルとして上がっており、サイトの雰囲気や印象に併せて選択することが可能です。 詳しくは以下 定番のマウスに対して吸い付くように動く派手過ぎず比較的取り入れやすいアニメーションから、アイコンが回転したり跳ねたりするような立体的なアニメーションまで様々な種類のエフェクトが実現可能です。マウスオーバーアニメーションは、分かりやすく影響度合いも大きいため、Webデザインにアクセントを与えたいという方にはおすすめの表現だと思います。 アニメーションの反映は比較的シンプルでClassを利用して簡単に実装
Photoshopで使える映画のような写真を創るためのアクションセット「12 Free Cinematic Photo Effect Actions」
TOP > Design , Photoshop > Photoshopで使える映画のような写真を創るためのアクションセット「12 Free Cinematic Photo Effect Actions」 多くのクリエイターに利用されているフォトレタッチソフトPhotoshop。非常に高機能なソフトウェアで写真にまつわることであれば習熟すれば何でもできるといっても過言では無いほどのものですが、今回紹介するのはそんなPhotoshopのテクニックを簡単に利用できるアクションを利用した、Photoshopで使える映画のような写真を創るためのアクションセット「12 Free Cinematic Photo Effect Actions 」です。 通常の生っぽいスナップのような写真から映画で見るようなワンシーンに加工してくれるアクションがまとめられています。 詳しくは以下 上記のように全部
クリエイティブな管理画面のためのインスピレーション集「20 Inspirational Dashboard Designs」
TOP > WebDesign > クリエイティブな管理画面のためのインスピレーション集「20 Inspirational Dashboard Designs」 CMSなどのシステムの管理やユーザーが自らの情報を操作・管理を行う、管理画面/ダッシュボード。基本的にフロントでは表示されないため、デザインに拘らない場合も多いのですが、今日紹介するのクリエイティブな管理画面のためのインスピレーション集「20 Inspirational Dashboard Designs」です。 iPad Dashboard 管理画面/ダッシュボードのデザイン事例が全部で20集められています。今日はその中からいくつか気になったものをピックアップして紹介したいと思います。 詳しくは以下 Story Book シンプルでクリアなダッシュボード Dashboard Web App UI: Job Summary
サイトの印象をぐっと引き上げてくれるクリエイティブな効果エフェクト「Block Reveal Effects」
TOP > WebService > サイトの印象をぐっと引き上げてくれるクリエイティブな効果エフェクト「Block Reveal Effects」 WEBサイトのクリエイティブのクオリティはデザインは然ることながら、どんな動きをさせるかというところでも、大きく影響がありますが、今日紹介するのはサイトの印象をぐっと引き上げてくれるクリエイティブな効果エフェクト「Block Reveal Effects」です。 「Block Reveal Effects」ではまず、はテキストや写真の出現エリアに色ベタのエリアが出現し、それがズレながら、本来描画されるオブジェクトに変わっていくというものです。 詳しくは以下 大きな動きと、何かが出てくる期待感は通常のlazyloadとはまた違ったクリエイティブ感を与えてくれます。様々なサンプルが公式サイトには準備されており、メニュー・モーダル・フォーム
HTMLテーブルが直感的に簡単に生成できる「DIV TABLE」
tableタグやDIVタグを利用して制作するテーブル組、それほど難しい仕組みでは無いのですが、いざ手書きをすると時間を取られたりします。今日紹介するのはHTMLテーブルが直感的に簡単に生成できるWEBジェネレーター「DIV TABLE」です。 利用方法は非常に簡単で、tableタグで生成するかDIVタグで生成するかを選んで、あとはBorder、width、Cell Paddignを設定して、あとは欲しいテーブルサイズを選択すればタグが生成されます。 詳しくは以下 生成するとサイト下部にプレビューとコードプレビューが表示され、どちらを触っても双方に反映するようになっています。またプレビューの方にはテーブルの列や行を足したり様々な処理がアイコンでできるようになっています。 テーブルだけに特化したサービスなので派手さはありませんが、非常にシンプルで強力にテーブル組を補助してくれます。簡単にテーブ
CSSのみで実現する1KB未満の超軽量ツールチップ「Wenk」
WEBサイトなどの補足事項などを表示するのに便利なツールチップ。一般的にはアニメーション表現が伴うため多くはjavascriptを利用して制作されていますが、今回紹介するのはCSSのみで実現する1KB未満の超軽量ツールチップ「Wenk」です。 非常にシンプルなツールチップで、上下左右位置を表示したり、幅の調整したり細かな調整がデキるようになっています。 詳しくは以下 利用方法は非常に単純で、上記の様に要素にdata-xxxxといった形式で内容と位置を指定することで実装可能になっています。CSSだけなので、特にjsなどを読み込む必要なくシンプルに実装できるため、幅広いユーザーが利用しやすいライブラリになっていると思います。 ソースコードはGitHubに公開されておりサンプルと共にダウンロード可能です。ライセンスはMIT License (MIT)となっており、ライセンスに従って、自由に利用す
WEBの表現をもっと豊かにしてくれるアニメーションまとめ「36 Brilliant User Interface Animations」
TOP > WebDesign > WEBの表現をもっと豊かにしてくれるアニメーションまとめ「36 Brilliant User Interface Animations」 WEB上のユーザーインターフェイスの中で行われるちょっとしたアニメーションに驚きと感動をするということがたまにありますが、インターフェイスに即したアニメーションはWEBをより良いものにしてくれます。今日紹介するのはWEBの表現をもっと豊かにしてくれるアニメーションまとめ「36 Brilliant User Interface Animations」です。 Menu open / tick / close 全部で36ものアニメーションが原文ではまとめられていましたが、今日はその中からいくつか気になったものをピックアップして紹介したいと思います。 詳しくは以下 Sendingmail メールのアイコンが変形して紙飛
グラフィック・映像・音楽まで。商用利用可のフリー素材集約サイト「Stocky」
世界には多くのフリー素材を配布するサイトや紹介するサイトがございますが、その中でも珍しい、映像や音楽素材までをカバーした、商用利用可のフリー素材集約サイト「Stocky」です。 一般的なモックアップ素材から、ニットを編む、スマートフォンを触る男性といった映像素材まで様々な素材が配布されています。 詳しくは以下 配布されている動画素材の一つ「Hand knitting」 サイトにアクセスすると「Download absolutely free photo, video, graphics and music for commercial and personal use!」と明記されており、全ての素材が、個人・商用かかわらず利用することができるようです。カテゴリーはグラフィック、ミュージック、フォト、ビデオ、ブログとなっており、それぞれ絞り込んで素材探す事が可能です。 まだまだ数は多いとは言
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
