TOP  >  コード

Tag : コード

2017年03月24日

100種の無料HTML / CSSテーマがまとめられた「Best of 2016: 100 Free HTML/CSS Themes」

プログラムを組むと一言で言っても、内容は幅広く、多くの知識と技術が必要不可欠です。そんな中今回紹介するのは、時間短縮できる無料のツールをまとめた「Best of 2016: 100 Free HTML/CSS Themes」です。

app-landing-page01
GitHub – BlackrockDigital/startbootstrap-new-age: A web app landing page theme created by Start Bootstrap

できるだけ短時間でウェブサイト制作が必要とされる場合や、手順のかかるプログラムを素早くこなしたい時に役立つツールが、数多く紹介されていますのでご覧ください。

詳しくは以下

(続きを読む…)

続きを読む
posted 10:00  |  
Category: Tool   
このエントリーをはてなブックマークに追加
2016年04月17日

各要素ごとのデザインから各コードまで参照できるデザイン集「CodePen Design Patterns」

開発する上で重要なのが各種要素の動きや挙動、見た目だけではなくて、動きもクオリティに大きく関わってきます。今日紹介するのは各要素ごとのデザインサンプル・HTML・CSS・JSのコードまで参照することができるデザイン集「CodePen Design Patterns」です。

codepen

アコーディオン・メニューアイコン、タブ、ドロップメニュー、ローディングといった、WEBサイトのインターフェイスを構成する上で重要な要素ごとにまとめられています。

詳しくは以下

(続きを読む…)

続きを読む
posted 03:55  |  
Category: WebDesign   
このエントリーをはてなブックマークに追加
2016年04月07日

プログラムコードをスライダー形式で見せることができる「SPECTACLE-CODE-SLIDE」

プログラムについてはそれぞれのジャンルごとに様々なサイトやブログでレビューやTIPSが公開されており、ソースコード自体を記載されています。今回紹介するのは、そんなソースコードをステップごとにわかりやすく閲覧させることができる、プログラムコードをスライダー形式で見せることができる「SPECTACLE-CODE-SLIDE」です。

spec1

行数が入り、かつ色分けされたよく見る埋め込まれたコード表示のままで、ステップを追って見せることが可能です。

詳しくは以下

(続きを読む…)

続きを読む
posted 09:53  |  
Category: Tool   
このエントリーをはてなブックマークに追加

過去の記事からランダムで表示

2013年10月14日

画像にズームエフェクトを簡単に実装できるjQueryプラグイン集「55+ Best Free jQuery Image Zoom Effect Plugins」

写真のディティールをより詳しく見せたい時、掲載スペースが限られている時など、写真にズームエフェクトを追加すれば効果的に見せることができます。今回はそんなシーンで是非活用したい、jQueryプラグインのまとめ「55+ Best Free jQuery Image Zoom Effect Plugins」を紹介したいと思います。

55bfjizep_0
jQZoom 2.2 – jQuery Image Zoom Tool | Javascript, jQuery | Gallery, Toolbox

一般的な虫眼鏡タイプのものや、写真自体を拡大するもの、拡大インターフェイスがついたものなど、様々な種類のプラグインが紹介されています。中でも気になったものをピックアップしましたので、下記よりご覧ください。

詳しくは以下

(続きを読む…)

続きを読む
posted 10:00  |  
Category: plugin   
2009年03月07日

個人利用、商用利用問わずクレジット制限も無いフリーアイコンを集めたアイコン配布サイト「iconpot」

今までDesigndevelopでは数々のフリーアイコン集、もしくはフリーアイコンを配布するサイトを紹介してきましたが、今日紹介する「iconPot – totally free icons」はWEBサイト上で利用でき商用利用、個人利用問わず利用でき、なおかつ著者のクレジット、リンクバックが必要ではないiconを集めたアイコンサイトです。

iconpots01
Splashy Icons
web dev icons in PNG format (16×16)

現在いくつかのアイコンセットが公開されていますので、いくつか紹介したいと思います。

詳しくは以下

(続きを読む…)

続きを読む
posted 07:26  |  
Category: WebDesign   
2011年06月04日

フォント・パターン・テクスチャあらゆるグランジ素材を集めた、グランジ素材集の決定版「Ultimate Grunge Toolbox for Web Designers」

アナログ感を与えたり、荒荒しさを表現したり、デザインの定番とも言えるグランジ。それだけに国内外で多くのグランジを取り入れた、または表現するための素材が公開されていますが、今日紹介するのはフォント・パターン・テクスチャあらゆるグランジ素材を集めたエントリー「Ultimate Grunge Toolbox for Web Designers」を紹介したいと思います。


10 Seamless Grunge Patterns .png

非常に多くのグランジ素材が集められていますが、今日はその中から特に気になったソイ剤をいくつか紹介したいと思います。

詳しくは以下

(続きを読む…)

続きを読む
posted 11:27  |  
Category: Design , Font , Photoshop , vector   
2014年01月25日

シンプルテイストなモックアップ用psd「23 Free Flat/Minimal Device Mockups [PSD]」

webサイトやスマートフォンアプリなどのデザインを制作する際、実際の見た目を確認するために実際の機種に当てはめた状態をチェックすることも多いはず。今回はそんなシーンで活用できるモックアップ用psd「23 Free Flat/Minimal Device Mockups [PSD]」を紹介したいと思います。

flatmoc1
Free Responsive Screen Mock Up – iMock Up Free Edtion on Behance

フラットでミニマルなシンプルテイストなので、デザインに影響を与えることなく利用することができます。

詳しくは以下

(続きを読む…)

続きを読む
posted 12:54  |  
Category: WebService   
2012年08月09日

アナログ感を演出できる手書き風フォントまとめ「30 Free Handwriting Fonts Every Designer Should Own」

生活のデジタル化が当たり前のようになっている現代でも、デザインの中にアナログな雰囲気を感じられるとどこか安心感を感じられるのではないでしょうか?そんな中今回紹介するのが、アナログ感を演出できる手書き風フォントをまとめた「30 Free Handwriting Fonts Every Designer Should Own」です。


Free Font GoodDog by Fonthead Design | Font Squirrel

個性豊かな手書き風フォントがたくさん紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。

詳しくは以下

(続きを読む…)

続きを読む
posted 11:42  |  
Category: Design , Font   
2009年11月22日

2009年を代表するフリーフォントを集めた「The Best Free Fonts of 2009」

デザインを行う上で、かなり重要な要素を締めるフォント。様々なフリーフォントが配布され、Designdevelopでも様々なを紹介してきましたが、今回紹介するのは2009年にリリースされたフリーフォントのなかから特にクオリティが高いフォントを集めたエントリー「The Best Free Fonts of 2009」です。

professional_fonts_01
Chunk

海外のサイトなので、欧文書体ばかりですが、The Best Free Fontsと言うだけあってどれも素晴らしいクオリティのフォントが揃っています。今日はその中からさらに気になったものをいくつか紹介したいと思います。

詳しくは以下

(続きを読む…)

続きを読む
posted 06:31  |  
Category: Design , Font   
tag: Design Font
2012年01月19日

ドラゴンのイラストを手軽に描けるブラシコレクション「30 Collection of Dragon Photoshop Brushes」

今年の干支でもある龍(ドラゴン)は、世界中で神秘的な存在として人気があり、さまざまなデザイン制作に利用されています。しかし、躍動感のある動きの表現は難しく、デザイン制作には時間もかかるもの。そこで今回紹介するのが、さまざまなテイストのドラゴンを表現できるPhotoshopブラシをまとめた「30 Collection of Dragon Photoshop Brushes」です。


draco brush by ~hanyasatu on deviantART

手書きタッチの美しいドラゴンから、モチーフとしても使いやすいアイコン的なドラゴンまで、さまざまなドラゴンが表現できるブラシが紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。

詳しくは以下

(続きを読む…)

続きを読む
posted 09:14  |  
Category: Design , Photoshop   
2015年06月02日

13種の最新フリーフォントを集めた「13 New Free Fonts for Designers」

新しい素材が次々と登場する中、フリーフォントもさまざまな種類のものがダウンロードできるように。そんな中今回紹介するのは、13種の最新フリーフォントを集めた「13 New Free Fonts for Designers」です。

font0602_0
RANGER FONT

デザイン性に優れたフリーフォント13種が厳選され紹介されています。気になったものをピックアップしましたので、下記よりご覧ください。

詳しくは以下

(続きを読む…)

続きを読む
posted 10:23  |  
Category: Font   
2015年08月15日

デザイナーがチェックしておきたい 最新フリー素材をあつめた「40 Freebies & Goodies For Web Designers – August 2015」

制作するものによっても変わってきますが、デザイナーにとってフリー素材は非常に重宝する存在。規模が大きくなるほど、トレンドに合わせたいろいろな種類の素材が必要となってくることもあるのではないでしょうか?そんな中今回紹介するのは、デザイナーがチェックしておきたい最新フリー素材をあつめた「40 Freebies & Goodies For Web Designers – August 2015」です。

freebie0815_1
Agenzia Multipurpose Psd Template | Pixel Mustache

UI、アイコン、フォント、モックアップ、テーマなど、種類豊富に、比較的新しい素材がピックアップされています。

詳しくは以下

(続きを読む…)

続きを読む
posted 11:00  |  
Category: Design   
2015年05月10日

カラフルで可愛らしい表情が特徴のアイコンセット「Happycons」

アイコンの中でも、可愛らしいテイストのアイコンは、制作しているデザインを明るく・楽しく演出してくれるツールとして活躍してくれます。今回はそんな時にぴったりなアイコンセット「Happycons」を紹介したいと思います。

happycons0

カラフルな色使いが特徴の、個性的な描写のアイコンがセットでダウンロードできるようになっています。

詳しくは以下

(続きを読む…)

続きを読む
posted 10:00  |  
Category: Design   

Sponsor

このブログを購読する

facebook
twitter
rss

Designdevelopについて

デザインを開発するという視点からデザイン、WEBデザインに役立つ情報をお伝えします。

ご意見、ご感想、連絡事項があればFacebookページよりお願いたします。

※当サイトのに掲載されている一部画像、スクリ-ンショットに文章に置いては第三十二条で定められる引用の範囲で使用していますが、万が一問題があればFacebookページからご連絡ください。即刻削除いたします。
※本ブログの「プライバシーポリシー」です。

関連サイト

Designdevelopの姉妹ブログ、毎日のインスピレーションに!をコンセプトに、グラフィックデザインからプロダクトデザインまでクリエイティブをテーマに取り上げていくブログ「DesignWorks」を運営中。
VR・ウェアラブル・センシングなど様々な技術が一般化され、手に届く範囲で製品化が進んでいます。VR MEDIAは拡張する現実から未来を探るBLOGです。
Template deisgn by iDEACLOUD inc.
トップに戻る