TOP  >  HTML5

Tag : HTML5

2017年07月22日

HTMLの例をタグ毎に記したクリエイティブなチートシート「Interactive HTML Cheat Sheet」

普段私たちが見ているサイト。それを構成するHTMLはこの数十年のうちに大きく発展をしてきました。開発されたプログラミング言語は膨大であり、追いかけることも一苦労。わからないことを検索するのも非常に手間がかかります。そんなときに活躍してくれる「Interactive HTML Cheat Sheet」を紹介していきたいと思います。

chi-to_sheat_top

目的のHTMLを簡単に検索することができる便利なチートシートになります。

詳しくは以下

(続きを読む…)

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

様々なアニメーションを描画できる軽量なライブラリ「Anime.js」

ブラウザの発展によりjavascriptによるアニメーション表現はより高度なものとなってきていますが、今日紹介するのはCSSやSVGとも連携し、様々なアニメーションを描画できる軽量なライブラリ「Anime.js」です。

animejs

回転や移動といったシンプルなものから、ランダムな動きなどなど、作りこめばかなり高度な動きも可能な用で、CODEPENでは様々なアニメーションサンプルが上がっていました。

詳しくは以下

(続きを読む…)

続きを読む
posted 11:39  |  
Category: javascript , WebDesign   
このエントリーをはてなブックマークに追加
2015年10月13日

UIデザインに使用したい さまざまなツール&リソースまとめ「New Essential UI Design Tools & Resources for Web Designers」

webサイトのUI設計をする際に、さまざまな機能を取り入れることでより魅力的なサイトを作り上げることができます。今回はそんなシーンでチェックしたい、さまざまなツール&リソースまとめ「New Essential UI Design Tools & Resources for Web Designers」を紹介したいと思います。

tool1013_1
bigfoot.js

jQueryやJavaScriptなど、ぜひ利用してみたいツールやリソースがピックアップされ、まとめられています。

詳しくは以下

(続きを読む…)

続きを読む
posted 10:11  |  
Category: Tool   
このエントリーをはてなブックマークに追加
2015年09月12日

11種のHTML5&wordpressフリーテーマ集「11 Free Fresh HTML5 & Responsive WordPress Themes」

フリーのテーマを利用することで、1からの構築作業時間を短縮できるとともに、さまざまな機能などを同時に手に入れることができます。仕事の種類によって使い分けるととても便利です。今回はそんなシーンに利用したい、11種のHTML5&wordpressフリーテーマ集「11 Free Fresh HTML5 & Responsive WordPress Themes」を紹介したいと思います。

temp0912_1
WordPress › Radcliffe « Free WordPress Themes

フリーで利用できる、比較的シンプルな構造のテーマが11種、厳選され紹介されています。気になったものをピックアップしましたので、下記よりご覧ください。

詳しくは以下

(続きを読む…)

続きを読む
posted 10:30  |  
Category: WordPress   
このエントリーをはてなブックマークに追加
2015年06月18日

HTML5のフリーレスポンシブテンプレート「50 Free Responsive HTML5 Web Templates」

webサイトを制作する際には、デザインだけでなく全体の構成などの設計が必要となってきます。しかしコストや時間の関係でなかなか思ったようにデザインできないこともあるのではないでしょうか?そんな時に参考にしたい、HTML5のフリーレスポンシブテンプレート「50 Free Responsive HTML5 Web Templates」を紹介したいと思います。

html5_0618_1
Cafe & Restaurant Free Website Templates

レスポンシブで、スマートフォンやタブレットに自動対応した、ハイクオリティなテンプレートが紹介されています。気になったものをピックアップしましたので、下記よりご覧ください。

詳しくは以下

(続きを読む…)

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

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

2011年03月18日

さまざまな形の煙を表現できるphotoshopブラシまとめ「33 Sets of Free Smoke Photoshop Brushes」

熱いものから立ち上る煙や湯気。デザイン上で表現しようと思うと、質感や柔らかなを演出するのにとても苦労するかと思います。そんなシーンを一気に解消してくれる、さまざまな形の煙を表現できるphotoshopブラシまとめ「33 Sets of Free Smoke Photoshop Brushes」を今回は紹介したいと思います。

煙・湯気の形にもいろいろありますが、欲しい形のものがきっと見つけられるはずです。いくつかピックアップしてみましたので、下記よりご覧ください。

詳しくは以下

(続きを読む…)

続きを読む
posted 11:55  |  
Category: Design , Photoshop   
2011年05月28日

視差効果を有効利用したクリエイティブなwebサイト集「21 Examples of Parallax Scrolling in Web Design」

webデザインにはさまざまなテイストや種類が存在し、中でも視差効果(2点の観測地点の位置の違いにより対象点が見える方向が異なること)を利用することで、より個性的な印象に仕上げることができます。そこで今回は、視差効果を有効利用したクリエイティブなwebサイト集「21 Examples of Parallax Scrolling in Web Design」を紹介したいと思います。


egopop _ Creative Studio

視差効果というカテゴリの中でも、一つの決められたパターンではなく、さまざまなアイデアや工夫によってデザインに動きが生かされたサイトの数々が紹介されています。気になったものをいくつか選定いたしましたので、以下よりご覧ください。

詳しくは以下

(続きを読む…)

続きを読む
posted 04:44  |  
Category: WebService   
tag: 
2008年07月12日

透過PNGをIE6で表示させるjavascript「Unit PNG Fix」

GIF画像に変わるライセンス・フリーの画像形式として登場したPNGフォーマット。最大280兆色までカラーが扱え、圧縮率も優れていて、可逆圧縮形式を採用、W3C推奨となにかとメリットがあるPNG画像ですが、ブラウザへの対応が完璧ではなく、透過PNGにいたってはIE6でも正常に読めない状況です。

そこで今回紹介する「Unit PNG Fix」はそんな透過PNG画像をIE6で正常に表示してくれるjavascriptです。

詳しくは以下

(続きを読む…)

続きを読む
posted 07:41  |  
Category: WebDesign   
2011年02月18日

赤を基調としたwebサイトデザインまとめ「Color Theory for Designers: Beautiful Red Color Website」

webを制作する際にはテーマカラーを決め手デザインされることが多いかと思いますが、今回紹介するのは、赤を基調としたwebサイトデザインまとめ「Color Theory for Designers: Beautiful Red Color Website」です。


Sydney Website Designer & Email Newsletters & Online Marketing Services • Newtown, Inner West Sydney

鮮やかなレッドをキーカラーとした、インパクトのあるデザイン事例が紹介されています。気になったものをピックアップしましたので、下記よりご覧ください。

詳しくは以下

(続きを読む…)

続きを読む
posted 11:26  |  
Category: Design   
2008年09月13日

映画関連ベクターデータセット「Movie Vector Set1」

シーンやカットのナンバーを入れるためのカチンコやフィルムなどのモチーフをベクターデータでまとめて収録しているのが今回紹介する「Movie Vector Set1」です。質感のあるカチンコやシルエット、フィルムのベクターデータなどがいくつかのパターン収録されています。

何時も必要となるデータではないだけに使いどころは難しいですが、いざ探すとなるとなかなか見つからないと思いますので、この機会にダウンロードしておいても良いかもしれません。

詳しくは以下

(続きを読む…)

続きを読む
posted 02:16  |  
Category: Design , vector   
tag: Design vector
2014年05月11日

作業効率をアップさせることができる デザインUIキットまとめ「50 Fantastic And Free Web UI Kits」

webサイトを1からデザインすると時間がかかってしまいますが、フリーのUIを利用することで作業効率を格段にアップさせることができます。そんな時に便利なUIキットまとめ「50 Fantastic And Free Web UI Kits」を今回は紹介したいと思います。

tempui0
Dribbble – Flat UI kit (psd) by Hugo

さまざまなデザインテイスト・種類のUIキットが紹介されています。気になったものをピックアップしましたので下記よりご覧ください。

詳しくは以下

(続きを読む…)

続きを読む
posted 10:35  |  
Category: Design   
2014年10月15日

ヴィンテージテイストの木目テクスチャセット「6 Vintage Wood Texture」

テクスチャの中でも、使用頻度が高いことの多い木目のテクスチャ。さまざまなテイストのデザインに合わせやすく、素材として使いやすいため、非常に重宝します。今回はそんな木目テクスチャの中でも、ヴィンテージ調のものをセットにした「6 Vintage Wood Texture」を紹介したいと思います。

wood1015_1

表情の違う木目テクスチャが6種、セットになってダウンロードできるようになっています。

詳しくは以下

(続きを読む…)

続きを読む
posted 10:00  |  
Category: Design   
2009年09月01日

WEBマガジンのためのデザイン集「25 Magazine-Style Layouts for Your Design Inspiration」

WEBはもはやメディアの一つとして確立されたものを築き上げていて、様々な情報を伝えるメディアやWEBマガジンが個人運営、法人運営に関わらず公開されていますが、今日紹介するのはコンテンツがたっぷり詰まった、WEBマガジンのためのデザイン集「25 Magazine-Style Layouts for Your Design Inspiration」を紹介したいと思います。

webmaga01
bmi Voyager

様々なタイプのWEBマガジンのレイアウトが紹介されていますが、今日はその中からいくつか気になったものを紹介したいと思います。

詳しくは以下

(続きを読む…)

続きを読む
posted 10:25  |  
Category: WebDesign   
tag: webdesign
2011年05月16日

幅広いシーンで活用できる 便利なフリーストックフォトサイトまとめ「30 Best Websites To Download Free Stock Photos」

さまざまなメディアを制作する際に、必要となるイメージ写真。制作の度に撮影できれば最も効果的なイメージ画像を使用することができますが、撮影にまでコストをかける事ができない状況も多々あるかと思います。そこでおおいに活用される、フリーで利用できる写真素材を扱うストックフォトサービスサイトをまとめた「30 Best Websites To Download Free Stock Photos」を今回は紹介したいと思います。


morgueFile free photos for creatives by creatives

風景や人物、さまざまなシチュエーション・シーンなど、多くの写真を扱うサイトが紹介されています。中でも気になったサイトをいくつかピックアップしましたので、下記よりご覧ください。

詳しくは以下

(続きを読む…)

続きを読む
posted 08:16  |  
Category: WebService   
tag: 
2010年09月06日

PSDで学ぶWEBデザイン「Modern UI and Layout Tutorials for Photoshop」

WEBデザインを制作される際に、photoshopを利用してデザインを制作するという方も多いと思いますが、今回紹介するのは成果物のPSDファイルとチュートリアルがセットになったエントリーをまとめた、PSDで学ぶWEBデザイン「Modern UI and Layout Tutorials for Photoshop」です。


Clean Web Layout with the 960 Grid

チュートリアルだけではどうしても分かりにくかった部分が,完成後のPSDも併せてみることで、作り方や構造を直接学ぶことができます。今日は紹介されているものの中からいくつか気になったモノをピックアップして紹介したいと思います。

詳しくは以下

(続きを読む…)

続きを読む

Sponsor

このブログを購読する

facebook
twitter
rss

Designdevelopについて

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

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

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

関連サイト

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