TOP  >  コード

Tag : コード

2018年06月30日

WebデザインをオンラインでサポートしてくれるCSS作成オンラインツールまとめ「40 Free Web-Based Tools & Apps for Working With CSS」

Webデザインを構築するのに欠かせないCSS。基礎からアニメーションなどの特殊な効果まで、様々なことが行なえます。今回ご紹介するのは、そんなCSS構築の作業を手助けしてくれる、便利なWebツールまとめ「40 Free Web-Based Tools & Apps for Working With CSS」です。

40-free-web-based-tools
Palettes | Flat UI Colors 280 handpicked colors ready for COPY & PASTE

オンライン上で手軽に様々な効果や設定を試し、導入することができるツールが40種類紹介されています。その中から幾つかおすすめのツールをピックアップしましたのでご覧ください。

詳しくは以下

40-free-web-based-tools3
Clippy — CSS clip-path maker
Clippyは画像を切り抜くフレームの形を自由に調整することができるWebツールです。星や丸などベースとなる図形を27種類の中から選ぶことが出来、自由に編集できます。
 
 
 
40-free-web-based-tools1
CSS Colour Gradients with GradPad, beautiful CSS color gradient generator for your designs
トレンドのグラデーションをCSSで表現できるWebツールです。背景にグラデーションを使いたいときなど、大きい面積でグラデーションを取り入れたいときに。
 
 
 
40-free-web-based-tools2
Trianglify.io · Low Poly Pattern Generator
流行のポリゴングラフィックをCSSで表現するためのツールです。目の細かさや角度、色味などをカスタマイズでき自由度も高いです。
 
 
最適なツールを利用することで、クオリティの高いコーディングを短時間で完結することができます。サイトには他にも活用する機会の多いWebツールが多数紹介されていますので、興味をお持ちになられた方は是非下記リンク先よりご覧になってみてください。

40 Free Web-Based Tools & Apps for Working With CSS

続きを読む
このエントリーをはてなブックマークに追加
2017年08月09日

こんにちは!貴方の名前は?など、チャットのように会話できるUI「BotUI」

LINEなどでお馴染みのチャットのユーザーインターフェイス。メールに代わるコミュニケーションツールとして台頭し、多くのサービスで取り入れられているチャット。今回ご紹介するのは、そんなチャットのユーザーインターフェイスを実現できる「BotUI」です。

botui_1

動作のイメージや動きなどについては、BotUI – A JavaScript framework to build conversational UIs.
からご覧いただくことが可能です。

詳しくは以下
(続きを読む…)

続きを読む
posted 08:30  |  
Category: javascript , WebDesign   
このエントリーをはてなブックマークに追加
2017年08月03日

Webデザインをよりクリエイティブにみせてくれる 複数写真の同時切り替えが可能なグリットスライドショー「CSS Grid Layout Slideshow」

Web上で写真を見せる定番の手法のひとつ、スライドショー。コンテンツを見せるのに利用したり、メインビジュアルに利用したり…とても活用幅が広く便利な存在です。今回ご紹介するのはそんなスライダーを、よりクリエイティブに見せてくれる変則的なスライドショー「CSS Grid Layout Slideshow」です。

gridLayout-slideshow02

グリット上に並べられた複数のイメージを、一気に切り替えることができる美しいスライドショーのフリーCSSソースです。

詳しくは以下

(続きを読む…)

続きを読む
このエントリーをはてなブックマークに追加
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   
このエントリーをはてなブックマークに追加

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

2011年01月30日

HTML5の12の事例「12 Fun & Clever Examples of HTML5」

ロゴも策定されWEB業界では徐々に浸透しつつあるHTML5ですが、今までのHTMLでは表現できない、ものが多々、可能になっていて、クリエイティブの面、機能面でも期待されていますが、今日紹介するのはHTML5の機能を使った事例を集めたエントリー「12 Fun & Clever Examples of HTML5」です。


Darkroom

アニメーションを用いたものから、3D表現、ゲームなどなど、いままでFLASHなどでしか再現できなかったものがHTML5で描かれています。今日は其のナッからいくつか気になったものをピックアップして紹介したいと思います。

詳しくは以下

(続きを読む…)

続きを読む
posted 10:14  |  
Category: WebDesign   
2008年09月11日

ストックフォトサイトを横断画像検索「Cyclo.ps」

世界には様々なストックフォトサイトがありますが、今回紹介するのはそんなストックフォトサイトを横断検索できるWEBサービス「Cyclo.ps」です。検索対象はBigStockPhoto™、Fotolia©
iStockphoto®、Photos.com™、Shutterstock®と格安のストックフォトサービスばかりなので、予算がない時にも安心して使えます。

ストックフォトサイトと一口に言っても公開されている写真は様々なでサイト自身にも個性がありますのでこういった一括して検索できるのは嬉しいところです。

詳しくは以下

(続きを読む…)

続きを読む
posted 11:49  |  
Category: Design   
tag: Design photo
2009年03月19日

布地のテクスチャを集めた「50 Free Fabric Textures」

様々なテクスチャを今までdesigndevelopで紹介してきましたが、今回紹介するのは布地のテクスチャをあつめたエントリー「50 Free Fabric Textures」です。

favrictxture01
sxc.hu

布地と一口に行っても様々な素材が用意されており、様々なバリエーション印象を与える事ができるテクスチャセットだと思います、今日は紹介されているものの中からいくつか気になったものをピックアップして紹介したいと思います。

詳しくは以下

(続きを読む…)

続きを読む
posted 10:54  |  
Category: Design , Photoshop   
tag: 
2014年03月02日

iOS7のデザインに対応 53種のスポーツアイコンセット「53 sports icons for iPS7」

iOS7がリリースされてから、変化したデザインに対応したデザインが続々と登場してきており、それに合わせたフリー素材も多くみかけるようになりました。そんな中今回紹介するのは、iOS7のデザインに対応した53種のスポーツアイコンセット「53 sports icons for iPS7」です。

sportsicon

スポーツをテーマとしたフラットデザインのアイコンがまとめられています。

詳しくは以下

(続きを読む…)

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

デザイナーやコーダーにとって役に立つDreamweaverのテンプレート「25 Free Dreamweaver Templates for Every Website」

Webサイトは1ページで構成されるランディングページ、複数ページでの構成とさまざま。そんな中、デザイナーやコーダーにとって役に立つのがWebサイト用のテンプレートです。そんな中今回はDreamweaverのテンプレート「25 Free Dreamweaver Templates for Every Website」を紹介したいと思います。

dw_template01
Iridium by TEMPLATED

構成やデザインの参考としても使える25種類のテンプレートです。中でも気になったものをピックアップしてみました。

詳しくは以下

(続きを読む…)

続きを読む
2009年04月05日

illustratorで使えるベクターフリーブラシ「A Huge Compilation of 60 Free Illustrator Brushes」

photoshopのブラシもかなり便利なのですが、イラストレーターを主体にデザインしている人にとってはそこまで複雑な表現でなければ、ベクターで済ましてしまいたいと言う事も多いかと思います。そこで今日紹介するのはillustratorで使えるベクターフリーブラシをあつめたエントリー「A Huge Compilation of 60 Free Illustrator Brushes」です。

illburashs01
Certificate Border

植物から花、レースなどなど様々な表現のブラシが全部で60個紹介されています。今日はその中から実用的で、気になったものをいくつか紹介したいと思います。

詳しくは以下

(続きを読む…)

続きを読む
posted 12:28  |  
Category: Design , vector   
tag: Design vector
2009年05月29日

CSSで実現するボタンテクニック集「22 CSS Button Styling Tutorials and Techniques」

Designdevelopでは今まで様々なCSSテクニックをお伝えしてきましたが、今日紹介する「22 CSS Button Styling Tutorials and Techniques」はボタンのデザインに特化したテクニック集です。

cssbutton01
Beautiful CSS buttons with icon set

立体的なボタンから、角丸はもちろん影がついたものなどなどCSSで作る手のこんだボタンのテップスやチュートリアルが収録されています。今日はその中からいくつかピックアップして紹介したいと思います。

詳しくは以下

(続きを読む…)

続きを読む
posted 10:00  |  
Category: WebDesign   
tag: webdesign
2008年01月12日

ドットで描かれたベクターデータの世界地図素材「Dotted world map vector resource」

Adobe Illustrator10でベクターデータで作られたドット絵の世界地図素材が今回紹介する「Dotted world map vector resource」です。白黒のシンプルなドットの世界地図が無料でダウンロードできます。

dotted-worldmap.gif

ベクターデータで配布されていますので一部分を使ったり、色を変えたりと様々な方法で使えそうな素材です。制作期間は数日だそうで、現在v1.1が最新版としてリリースされています。

詳しくは以下

(続きを読む…)

続きを読む
posted 06:52  |  
Category: Design , vector   
2011年02月04日

デザイン制作に欠かせない 実用的なフリーテクスチャまとめ「350+ Free Textures」

webデザインでも紙媒体のデザインでも、背景素材として活用できるテクスチャは活用頻度も実用性も高い、とても便利な存在です。そこで今回紹介するのは、デザイン制作に欠かせないフリーテクスチャまとめ「350+ Free Textures」です。


+ Textures – Wood. by ~YouAreLikeADoll on deviantART

デザインを引き立ててくれる素材感溢れるテクスチャから、ポイント使いとして大いに活躍を果たしてくれそうなタイプまで種類がかなり豊富です。その中から今回いくつが気になったものを選出しましたので、以下よりご覧ください。

詳しくは以下

(続きを読む…)

続きを読む
posted 11:11  |  
Category: Design   
2008年07月18日

商用OKしかもクレジット・リンク不要の無料ストックフォトサービス「写真素材 足成」

今までDesignDevelopでは写真素材サイトをいくつか紹介してきましたが、今回紹介する「写真素材 足成」は日本では珍しく、商用OKしかもクレジット・リンク不要ストックフォトサービスです。

現在5161枚の写真が登録されていて、すべての写真素材が無料で、制限なく自由に使用することができます。

詳しくは以下

(続きを読む…)

続きを読む
posted 05:43  |  
Category: Design   
tag: 

Sponsor

このブログを購読する

facebook
twitter
rss

Designdevelopについて

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

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

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

関連サイト

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