初級者は意外と理解してない(?)CSSの優先順位について

<p class="single-first-p">I would like to feature and summarise an article I read in the <a href="http://www.webdesignerdepot.com/2015/01/4-essential-layout-trends-for-2015/" target="_blank">Web designer depot</a> about this year layout trends.</p>
<p class="single-first-p">If we looked back 10 years we will find that the web had the same go-to pattern consisted of a header, footer, sidebar and content area. It was the expected layout for the web. Current web design you will no doubt notice that the fundamental structure for web pages is anything but fixed. The new norm as it were, is that there appears to be no fixed formula at all.</p>
<p>Although we can observe several trends in layout design representing unusual layouts, unusual as they don’t follow a strict formula. But they are trends because there&#8217;s hundreds of examples for each category.</p>
<p>This blend of trends will hopefully be an inspiration for your  future projects.</p>
<h2></h2>
<p>&nbsp;</p>
<h2>SPLIT SCREENS</h2>
<p>The sites that split the screen using a vertical divide.</p>
<p><a href="http://eightandfour.com/"><img decoding="async" loading="lazy" class="alignundefined wp-image-6843 " src="/uploads-archive/2015/02/161.jpg" alt="161" width="717" height="453" /></a></p>
<p>You can use it when you either want to promote two things, two elements of equal importance. Or to remark trough two elements what defines the company, which is the duality that gives the core strengths.</p>
<p>This approach allows the user to rapidly select between the two elements and easily explain the corporate identity of the company and give a lasting impression.</p>
<h2></h2>
<h2></h2>
<p>&nbsp;</p>
<h2>NO DECORATIONS!</h2>
<p>A common trend now, which I specially like, is to remove all of this extra containing elements (boxes, borders, shapes, etc,) that we usually use to separate the content of a page (header, footer,&#8230;). Check these sites.</p>
<p><a href="http://www.br-time.jp/"><img decoding="async" loading="lazy" class="alignundefined wp-image-6844 " src="/uploads-archive/2015/02/02.jpg" alt="02" width="669" height="380" /></a></p>
<p>In this example, you can appreciate no limitation between header and footer. It feels more like an interactive kiosk instead. The hierarchy of content is done through a left to right division. As a consequence the beautiful products shine through.</p>
<p><a href="http://foreword.io/"><img decoding="async" loading="lazy" class="aligncenter wp-image-6850 " src="/uploads-archive/2015/02/131.jpg" alt="131" width="658" height="425" srcset="/uploads-archive/2015/02/131.jpg 928w, /uploads-archive/2015/02/131-300x194.jpg 300w, /uploads-archive/2015/02/131-228x147.jpg 228w" sizes="(max-width: 658px) 100vw, 658px" /></a></p>
<p>&nbsp;</p>
<p>Here, the content is greatly emphasized. Instead of reading a header first, you read the name of the company and the statement about what they do (and where they do it). Followed by the global navigation.</p>
<p>It is a good way to emphasise the brand, and make a good first impact,  before getting people to navigate. Very neat.</p>
<h2></h2>
<p>&nbsp;</p>
<h2>MODULAR OR GRID BASED</h2>
<p>This trend is not exactly new, we have used it in the past too indeed. Little by little it&#8217;s gaining notoriety thanks to the introduction of responsive web design. The layout built on modular or grid-like structures can flex based on the screen size.</p>
<p><a href="http://www.teambadcompanyrowing.com/"><img decoding="async" loading="lazy" class="alignnone  wp-image-6853" src="/uploads-archive/2015/02/04.jpg" alt="04" width="692" height="422" /></a></p>
<p>This example perfectly demonstrates the idea. The design is completely responsive. As the screen size changes each module adapts and sizes to fit the space.</p>
<p><a href="http://madagascar.dreamworks.com/"><img decoding="async" loading="lazy" class="alignnone  wp-image-6854" src="/uploads-archive/2015/02/19.jpg" alt="19" width="732" height="537" /></a></p>
<p>&nbsp;</p>
<p>In this example there is an important design element at work here, which the previous example lacked. The size of the modules vary to reflect the order of importance and its place in the hierarchy.</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<h2>SINGLE SCREEN</h2>
<p>When the design adapts to completely fill the screen, without scrolling, which means that the content has to be extremely focused, and the hierarchy of content clearly established.</p>
<p><a href="http://hatchcollective.co.uk/"><img decoding="async" loading="lazy" class="alignnone  wp-image-6855" src="/uploads-archive/2015/02/09.jpg" alt="09" width="725" height="518" /></a></p>
<p>&nbsp;</p>
<p>&nbsp;</p>


LAYOUT TRENDS FOR 2015

<p>レスポンシブのコーディングは通常のサイトコーディングと違った書き方をした方がいい時があります。</p>
<p>たまにレスポンシブ化されているサイトのソースを見て、「こんな風にやってるんだ〜」と思いながら、<br />
実際に似たようなレイアウトがある場合、参考にさせていただいたりしていますが、そのレスポンシブのパターン集なるサイトがありました。</p>
<h2>Responsive Web Design Patterns</h2>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-6790" src="/uploads-archive/2015/02/Responsive-Web-Design-Patterns-This-Is-Responsive-1024x684.jpg" alt="Responsive Web Design Patterns  This Is Responsive" width="640" height="428" srcset="/uploads-archive/2015/02/Responsive-Web-Design-Patterns-This-Is-Responsive-1024x684.jpg 1024w, /uploads-archive/2015/02/Responsive-Web-Design-Patterns-This-Is-Responsive-300x200.jpg 300w, /uploads-archive/2015/02/Responsive-Web-Design-Patterns-This-Is-Responsive-228x152.jpg 228w, /uploads-archive/2015/02/Responsive-Web-Design-Patterns-This-Is-Responsive.jpg 1235w" sizes="(max-width: 640px) 100vw, 640px" /></p>
<p>こちらのサイトは、</p>
<ul>
<li>レイアウト</li>
<li>ナビゲーション</li>
<li>イメージ(画像)</li>
<li>メディア/データ</li>
<li>フォーム</li>
<li>テキスト</li>
<li>モジュール(カルーセルやタブ等)</li>
</ul>
<p>といったレイアウトのパターンがあり、<br />
DEMOを見ることができます。</p>
<p>あとはDEMOのページをFirebugかなにかでソースを見ればその手法がわかります。</p>
<p>初心者はもちろん、経験者にもなにかしら得れるものがあるかと思います。</p>
<p><a href="http://bradfrost.github.io/this-is-responsive/patterns.html" class="link" target="_blank">Responsive Web Design Patterns | This Is Responsive</a></p>


レスポンシブのコーディング時に参考にしたいレイアウトサンプル集

<p>今回は動画でweb系のスキルを学べるサービスをご紹介します。</p>
<p>以前、web上で学べるサイトを紹介した時にあった、ドットインストールやschooも動画で学べるサイトですね！<br />
その二つはかなり普及されているように感じます。</p>
<p>今回ご紹介するのは3つのサイトになります。</p>
<h2>Progate</h2>
<p><a href="http://prog-8.com/" target="_blank"><img decoding="async" loading="lazy" class="alignnone size-large wp-image-6683" src="/uploads-archive/2015/01/Progate-Learn-to-Code-Learn-to-be-Creative.-1024x571.jpg" alt="Progate  Learn to Code, Learn to be Creative." width="620" height="346" srcset="/uploads-archive/2015/01/Progate-Learn-to-Code-Learn-to-be-Creative.-1024x571.jpg 1024w, /uploads-archive/2015/01/Progate-Learn-to-Code-Learn-to-be-Creative.-300x167.jpg 300w, /uploads-archive/2015/01/Progate-Learn-to-Code-Learn-to-be-Creative.-228x127.jpg 228w, /uploads-archive/2015/01/Progate-Learn-to-Code-Learn-to-be-Creative..jpg 1183w" sizes="(max-width: 620px) 100vw, 620px" /></a></p>
<p><a href="http://prog-8.com/" target="_blank" class="link">Progate | Learn to Code, Learn to be Creative.</a></p>
<h2>Udemy</h2>
<p><a href="https://www.udemy.com/courses/" target="_blank"><img decoding="async" loading="lazy" class="alignnone wp-image-6681" src="/uploads-archive/2015/01/Best-Online-Courses-Udemy-1024x571.jpg" alt="Best Online Courses  Udemy" width="620" height="346" srcset="/uploads-archive/2015/01/Best-Online-Courses-Udemy-1024x571.jpg 1024w, /uploads-archive/2015/01/Best-Online-Courses-Udemy-300x167.jpg 300w, /uploads-archive/2015/01/Best-Online-Courses-Udemy-228x127.jpg 228w, /uploads-archive/2015/01/Best-Online-Courses-Udemy.jpg 1183w" sizes="(max-width: 620px) 100vw, 620px" /></a></p>
<p><a href="https://www.udemy.com/courses/" target="_blank" class="link">Best Online Courses | Udemy</a></p>
<h2>Learn Git</h2>
<p><a href="http://www.git-tower.com/learn/videos" target="_blank"><img decoding="async" loading="lazy" class="alignnone size-large wp-image-6682" src="/uploads-archive/2015/01/Learn-Git-Learn-Version-Control-with-Git-1024x571.jpg" alt="Learn Git - Learn Version Control with Git" width="620" height="346" srcset="/uploads-archive/2015/01/Learn-Git-Learn-Version-Control-with-Git-1024x571.jpg 1024w, /uploads-archive/2015/01/Learn-Git-Learn-Version-Control-with-Git-300x167.jpg 300w, /uploads-archive/2015/01/Learn-Git-Learn-Version-Control-with-Git-228x127.jpg 228w, /uploads-archive/2015/01/Learn-Git-Learn-Version-Control-with-Git.jpg 1183w" sizes="(max-width: 620px) 100vw, 620px" /></a></p>
<p><a href="http://www.git-tower.com/learn/videos" target="_blank" class="link">Learn Git &#8211; Learn Version Control with Git</a></p>


動画で学べるwebサービス3つのご紹介

<p>なんてタイトルですが、<br />
設定していないわけではないんですよね。</p>
<p>基本的には大抵横幅960pxと設定してサイトのデザインをするのですが、<br />
そうではなく、ウィンドウ幅に合わせてサイトをデザインしているサイトのご紹介になります。</p>
<p>ちなみに、すべてレスポンシブです。(このデザインでは当たり前ですね・・・)</p>
<h2>CKD 空気圧機器 制御機器 自動機械装置 総合メーカー</h2>
<p><a href="http://www.ckd.co.jp/" target="_blank"><img decoding="async" loading="lazy" class="alignnone wp-image-6651" src="/uploads-archive/2015/01/adc21716ea7107c1e81ce6f6606b5748-1024x704.jpg" alt="CKD 空気圧機器 制御機器 自動機械装置 総合メーカー" width="600" height="413" srcset="/uploads-archive/2015/01/adc21716ea7107c1e81ce6f6606b5748-1024x704.jpg 1024w, /uploads-archive/2015/01/adc21716ea7107c1e81ce6f6606b5748-300x206.jpg 300w, /uploads-archive/2015/01/adc21716ea7107c1e81ce6f6606b5748-228x156.jpg 228w, /uploads-archive/2015/01/adc21716ea7107c1e81ce6f6606b5748.jpg 1101w" sizes="(max-width: 600px) 100vw, 600px" /></a></p>
<p><a class="link" href="http://www.ckd.co.jp/" target="_blank">CKD 空気圧機器 制御機器 自動機械装置 総合メーカー</a></p>
<h2>二本松物流株式会社</h2>
<p><a href="http://www.nihonmatsu.co.jp/" target="_blank"><img decoding="async" loading="lazy" class="alignnone size-large wp-image-6653" src="/uploads-archive/2015/01/df99cf4351e17c302856aa4718f41d2b-1024x704.jpg" alt="チルド配送 小口配送 食品流通｜二本松物流株式会社" width="600" height="413" srcset="/uploads-archive/2015/01/df99cf4351e17c302856aa4718f41d2b-1024x704.jpg 1024w, /uploads-archive/2015/01/df99cf4351e17c302856aa4718f41d2b-300x206.jpg 300w, /uploads-archive/2015/01/df99cf4351e17c302856aa4718f41d2b-228x156.jpg 228w, /uploads-archive/2015/01/df99cf4351e17c302856aa4718f41d2b.jpg 1101w" sizes="(max-width: 600px) 100vw, 600px" /></a></p>
<p><a href="http://www.nihonmatsu.co.jp/" target="_blank" class="link">チルド配送 小口配送 食品流通｜二本松物流株式会社</a></p>
<h2>WENT Coffee Co.</h2>
<p><a href="http://went.tokyo/" target="_blank"><img decoding="async" loading="lazy" class="alignnone size-large wp-image-6652" src="/uploads-archive/2015/01/WENT-Coffee-Co.-1024x704.jpg" alt="WENT Coffee Co." width="600" height="413" srcset="/uploads-archive/2015/01/WENT-Coffee-Co.-1024x704.jpg 1024w, /uploads-archive/2015/01/WENT-Coffee-Co.-300x206.jpg 300w, /uploads-archive/2015/01/WENT-Coffee-Co.-228x156.jpg 228w, /uploads-archive/2015/01/WENT-Coffee-Co..jpg 1101w" sizes="(max-width: 600px) 100vw, 600px" /></a></p>
<p><a href="http://went.tokyo/" target="_blank" class="link">WENT Coffee Co.</a></p>
<h2>産科婦人科 佐川クリニック</h2>
<p><a href="http://www.sagawa-clinic.com/" target="_blank"><img decoding="async" loading="lazy" class="alignnone size-large wp-image-6655" src="/uploads-archive/2015/01/11ae9f919045eb3d93e0c6235608142f-1024x704.jpg" alt="産科婦人科 佐川クリニック" width="600" height="413" srcset="/uploads-archive/2015/01/11ae9f919045eb3d93e0c6235608142f-1024x704.jpg 1024w, /uploads-archive/2015/01/11ae9f919045eb3d93e0c6235608142f-300x206.jpg 300w, /uploads-archive/2015/01/11ae9f919045eb3d93e0c6235608142f-228x156.jpg 228w, /uploads-archive/2015/01/11ae9f919045eb3d93e0c6235608142f.jpg 1101w" sizes="(max-width: 600px) 100vw, 600px" /></a></p>
<p><a href="http://www.sagawa-clinic.com/" target="_blank" class="link">産科婦人科 佐川クリニック</a></p>
<h2>47株式会社</h2>
<p><a href="http://47co.jp/" target="_blank"><img decoding="async" loading="lazy" class="alignnone size-large wp-image-6650" src="/uploads-archive/2015/01/bbf335ff0c9ee09eb10cce23d1e0291a-1024x704.jpg" alt="47株式会社  もっと暮らしやすくなるための日本づくり" width="600" height="413" srcset="/uploads-archive/2015/01/bbf335ff0c9ee09eb10cce23d1e0291a-1024x704.jpg 1024w, /uploads-archive/2015/01/bbf335ff0c9ee09eb10cce23d1e0291a-300x206.jpg 300w, /uploads-archive/2015/01/bbf335ff0c9ee09eb10cce23d1e0291a-228x156.jpg 228w, /uploads-archive/2015/01/bbf335ff0c9ee09eb10cce23d1e0291a.jpg 1101w" sizes="(max-width: 600px) 100vw, 600px" /></a></p>
<p><a href="http://47co.jp/" target="_blank" class="link">47株式会社 | もっと暮らしやすくなるための日本づくり</a></p>
<h2>KITOTE</h2>
<p><a href="http://kitote.jp/" target="_blank"><img decoding="async" loading="lazy" class="alignnone size-large wp-image-6656" src="/uploads-archive/2015/01/836e34f27a4ed5e6b0a8edab4b6b3cca-1024x704.jpg" alt="天然木と手仕事の建具『KITOTE』" width="600" height="413" srcset="/uploads-archive/2015/01/836e34f27a4ed5e6b0a8edab4b6b3cca-1024x704.jpg 1024w, /uploads-archive/2015/01/836e34f27a4ed5e6b0a8edab4b6b3cca-300x206.jpg 300w, /uploads-archive/2015/01/836e34f27a4ed5e6b0a8edab4b6b3cca-228x156.jpg 228w, /uploads-archive/2015/01/836e34f27a4ed5e6b0a8edab4b6b3cca.jpg 1101w" sizes="(max-width: 600px) 100vw, 600px" /></a></p>
<p><a href="http://kitote.jp/" target="_blank" class="link">天然木と手仕事の建具『KITOTE』</a></p>
<h2>株式会社アトラエ</h2>
<p><a href="http://atrae.co.jp/" target="_blank"><img decoding="async" loading="lazy" class="alignnone size-large wp-image-6654" src="/uploads-archive/2015/01/dd73a0b7be8e988f2053dfff0048e2aa-1024x695.jpg" alt="株式会社アトラエ  Atrae, Inc." width="600" height="413" /></a></p>
<p><a href="http://atrae.co.jp/" target="_blank" class="link">株式会社アトラエ | Atrae, Inc.</a></p>


横幅なんて設定しない！ウィンドウ幅ピッタリのサイト7つ

<p>In terms of creating a website (corporate or personal) it do not have to be coded from scratch anymore. Thanks to many kind and generous designers / developers, high quality web templates are distributed freely over the Internet.</p>
<p>There are tonnes of templates sites out there, that makes searching for a free yet high quality templates hard and tedious, so I attempted to collect and showcase you some of really good ones. Here, I present 8 High Quality Free Web Templates and Layouts.</p>
<p>I&#8217;m sure you&#8217;ll a find a gem or two that will absolutely ease your workflow!</p>
<p>&nbsp;</p>
<p><a href="https://dribbble.com/shots/1819180-Free-Dashboard-Ecommerce-Admin"><strong>ECommerce Dashboard Template</strong></a>  (PSD).</p>
<p><a href="/uploads-archive/2015/01/monthly_freebie_dc_23.jpg"><img decoding="async" loading="lazy" class="alignnone wp-image-6614 " src="/uploads-archive/2015/01/monthly_freebie_dc_23.jpg" alt="monthly_freebie_dc_23" width="660" height="260" /></a></p>
<p>&nbsp;</p>
<p><a href="https://www.behance.net/gallery/21521941/Creative-Agency-Web-Template"><strong>Creative Agency Web Template</strong></a>  (PSD).</p>
<p><a href="/uploads-archive/2015/01/Screen-Shot-2015-01-13-at-16.00.36.png"><img decoding="async" loading="lazy" class="alignnone wp-image-6626 " src="/uploads-archive/2015/01/Screen-Shot-2015-01-13-at-16.00.36-1024x582.png" alt="Screen Shot 2015-01-13 at 16.00.36" width="663" height="372" /></a></p>
<p><a href="http://graphicsbay.com/item/bj-rn-multipurpose-landingpage/380"><strong>BJÖRN Multipurpose Landing Page</strong></a>  (PSD).</p>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-6613 " src="/uploads-archive/2015/01/monthly_freebie_dc_20.jpg" alt="monthly_freebie_dc_20" width="660" height="266" srcset="/uploads-archive/2015/01/monthly_freebie_dc_20-300x120.jpg 300w, /uploads-archive/2015/01/monthly_freebie_dc_20-228x91.jpg 228w" sizes="(max-width: 660px) 100vw, 660px" /></p>
<p><a href="https://dribbble.com/shots/1802406-Freebie-Moderno-Creative-Simple-Portfolio-Page"><strong>Moderno Creative Simple Portfolio Page</strong></a>  (PSD).</p>
<p><a href="/uploads-archive/2015/01/monthly_freebie_dc_24.jpg"><img decoding="async" loading="lazy" class="alignnone wp-image-6615 " src="/uploads-archive/2015/01/monthly_freebie_dc_24.jpg" alt="monthly_freebie_dc_24" width="658" height="278" /></a></p>
<p><a href="http://www.mightydeals.com/deal/free-resume-template-by-fernando-bez.html"><strong>Resume Template</strong></a>  (PSD).</p>
<p><a href="/uploads-archive/2015/01/monthly_freebie_dc_21.jpg"><img decoding="async" loading="lazy" class="alignnone wp-image-6616 " src="/uploads-archive/2015/01/monthly_freebie_dc_21.jpg" alt="monthly_freebie_dc_21" width="655" height="340" /></a></p>
<p><a href="http://www.robertbrodziak.com/en/free-wordpress-themes/daily-theme/"><strong>Daily</strong></a>  (WordPress Theme).</p>
<p><a href="/uploads-archive/2015/01/monthly_freebie_dc_25.jpg"><img decoding="async" loading="lazy" class="alignnone wp-image-6617 " src="/uploads-archive/2015/01/monthly_freebie_dc_25.jpg" alt="monthly_freebie_dc_25" width="655" height="263" srcset="/uploads-archive/2015/01/monthly_freebie_dc_25.jpg 750w, /uploads-archive/2015/01/monthly_freebie_dc_25-300x120.jpg 300w, /uploads-archive/2015/01/monthly_freebie_dc_25-228x91.jpg 228w" sizes="(max-width: 655px) 100vw, 655px" /></a></p>
<p><a href="http://www.daniel-klose.com/online-services/life-is-good-wordpress-theme/"><strong>Life Is Good</strong></a>  (WordPress Theme).</p>
<p><a href="/uploads-archive/2015/01/monthly_freebie_dc_26.jpg"><img decoding="async" loading="lazy" class="alignnone wp-image-6618 " src="/uploads-archive/2015/01/monthly_freebie_dc_26.jpg" alt="monthly_freebie_dc_26" width="655" height="242" /></a></p>
<p><a href="http://themehybrid.com/themes/yarn"><strong>Yarn</strong></a>  (WordPress Theme).</p>
<p><a href="/uploads-archive/2015/01/monthly_freebie_dc_27.jpg"><img decoding="async" loading="lazy" class="alignnone wp-image-6619 " src="/uploads-archive/2015/01/monthly_freebie_dc_27.jpg" alt="monthly_freebie_dc_27" width="653" height="279" /></a></p>
<p><a href="https://themeisle.com/themes/zerif-lite/"><strong>Zerif Lite</strong></a>  (WordPress Theme).</p>
<p><a href="/uploads-archive/2015/01/monthly_freebie_dc_28.jpg"><img decoding="async" loading="lazy" class="alignnone wp-image-6620 " src="/uploads-archive/2015/01/monthly_freebie_dc_28.jpg" alt="monthly_freebie_dc_28" width="649" height="273" /></a></p>
<p>&nbsp;</p>


Free Web Templates &#038; Themes

<p>海外のブログ、<a href="http://marketblog.envato.com/trends/best-worst-web-design-trends-2014/">The Best &amp; Worst Web Design Trends of 2014 &#8211; Market Blog</a><br />
こちらで2014年に流行ったwebデザイントレンドを紹介しています。</p>
<p>簡単に見出しだけ抽出しますと、<br />
以下のことを説明しています。</p>
<p>ベストトレンドとしては、<br />
・ミニマルなフラットデザイン<br />
・改善されたwebフォント<br />
・フルスクリーンの背景<br />
・レスポンシブデザインの改善</p>
<p>ワーストトレンドとしては、<br />
・モーダルウィンドウプロモーション<br />
・多すぎるソーシャルメディア<br />
・永遠につづくローディング画面<br />
・カスタマイズされたスクロールバー</p>
<p>もし、気になるものがあればブログを見てみてください<br />
（説明少なすぎてすみません・・・）</p>
<p>今年はなんといっても、<br />
フラットデザイン、ミニマルなデザインが流行りましたね。<br />
フラットデザイン自体はもう少し前ぐらいから出現してましたが、<br />
日本のwebサイトでグッと増えたのは、今年からだと思います。<br />
一年前と比べると、フラットでミニマルなサイトがかなり増えました！</p>
<p>今はフラットデザインをやるのに適した環境ですね！<br />
この流れがいつまで続くのかが気になるところです。</p>
<p>あと、上記にはなかったのですが、<br />
フラットデザインが流行したついでに、相性のよいシングルページ(縦長ページ)も多く見かけました。<br />
パララックス程のアニメーションはしていないのですが、多少スクロールと連動したアニメーションを取り入れたサイトが多かったように感じます。</p>
<h2>おまけ</h2>
<p>最近見かけた便利そうなサービスを紹介します。</p>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-6507" src="/uploads-archive/2014/12/Tridiv-CSS-3D-Editor-1024x563.jpg" alt="Tridiv  CSS 3D Editor" width="640" height="352" srcset="/uploads-archive/2014/12/Tridiv-CSS-3D-Editor-1024x563.jpg 1024w, /uploads-archive/2014/12/Tridiv-CSS-3D-Editor-300x164.jpg 300w, /uploads-archive/2014/12/Tridiv-CSS-3D-Editor-228x125.jpg 228w, /uploads-archive/2014/12/Tridiv-CSS-3D-Editor.jpg 1184w" sizes="(max-width: 640px) 100vw, 640px" /></p>
<p><a href="http://tridiv.com/">Tridiv | CSS 3D Editor</a><br />
CSSを使った3Dポリゴンを作成することができるwebサービスです。</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-6508" src="/uploads-archive/2014/12/TypeWonder-Beta-1024x563.jpg" alt="TypeWonder - Beta" width="640" height="352" srcset="/uploads-archive/2014/12/TypeWonder-Beta-1024x563.jpg 1024w, /uploads-archive/2014/12/TypeWonder-Beta-300x164.jpg 300w, /uploads-archive/2014/12/TypeWonder-Beta-228x125.jpg 228w, /uploads-archive/2014/12/TypeWonder-Beta.jpg 1184w" sizes="(max-width: 640px) 100vw, 640px" /><br />
<a href="http://typewonder.com/">TypeWonder &#8211; Beta</a><br />
好きなサイトのフォントを、選んだフォントに変更できてしまうサービスです。<br />
いつか使う場面が来るかもしれません。</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-6506" src="/uploads-archive/2014/12/Coolors-The-super-fast-color-palettes-generator-1024x555.jpg" alt="Coolors - The super fast color palettes generator!" width="640" height="347" srcset="/uploads-archive/2014/12/Coolors-The-super-fast-color-palettes-generator-1024x555.jpg 1024w, /uploads-archive/2014/12/Coolors-The-super-fast-color-palettes-generator-300x162.jpg 300w, /uploads-archive/2014/12/Coolors-The-super-fast-color-palettes-generator-228x123.jpg 228w, /uploads-archive/2014/12/Coolors-The-super-fast-color-palettes-generator.jpg 1199w" sizes="(max-width: 640px) 100vw, 640px" /><br />
<a href="http://coolors.co/ad7a99-b2cede-8cdfd6-6dc0d5-5a716a">Coolors &#8211; The super fast color palettes generator!</a><br />
5つの色を自動生成してくれ、スペースを押すとまた新たに5つの色を生成してくれます。</p>


2014年のベスト＆ワーストのwebデザイントレンド

<p><a class="link" href="http://briangonzalez.github.io/jquery.adaptive-backgrounds.js/" target="_blank">jquery.adaptive-backgrounds.js</a></p>
<p><a href="http://briangonzalez.github.io/jquery.adaptive-backgrounds.js/" target="_blank">jquery.adaptive-backgrounds.js</a>はimgの画像のドミナントカラーを調べて、</p>
<p>背景色にしてくれるjQueryのプラグインです。</p>
<p>写真に合わせて背景色を変えるデザインなどで使えそうです。</p>
<p>&nbsp;</p>
<p>ちなみにこちらのjQueryプラグインでは、色の取得にHTML5のCanvasを使っているため、</p>
<p>HTML5に対応したブラウザで動作します。</p>
<p>&nbsp;</p>
<p><a class="demo" href="/demo/ninomiya/57/" target="_blank">DEMO</a></p>
<p>&nbsp;</p>
<h2>使い方</h2>
<p><a href="https://github.com/briangonzalez/jquery.adaptive-backgrounds.js" target="_blank">こちら</a>からファイルをダウンロードし、htmlのheadでjqueryと一緒にJSファイルを読み込みます。</p>

		<div id="crayon-649540157eea3068449914" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title">HTML</span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div><span class="crayon-language">XHTML</span></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
&lt;head&gt;
・・・
&lt;script type="text/javascript" src="js/jquery-1.11.1.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="js/jquery.adaptive-backgrounds.js"&gt;&lt;/script&gt;
・・・
&lt;/head&gt;</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-649540157eea3068449914-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157eea3068449914-2">2</div><div class="crayon-num" data-line="crayon-649540157eea3068449914-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157eea3068449914-4">4</div><div class="crayon-num" data-line="crayon-649540157eea3068449914-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157eea3068449914-6">6</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-649540157eea3068449914-1"><span class="crayon-r ">&lt;head&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540157eea3068449914-2"><span class="crayon-i ">・・・</span></div><div class="crayon-line" id="crayon-649540157eea3068449914-3"><span class="crayon-i "><span class="crayon-ta">&lt;script </span><span class="crayon-e ">type</span>=<span class="crayon-s">"text/javascript"</span><span class="crayon-h"> </span><span class="crayon-e ">src</span>=<span class="crayon-s">"js/jquery-1.11.1.min.js"</span><span class="crayon-h">&gt;</span><span class="crayon-ta">&lt;/script&gt;</span></span></div><div class="crayon-line crayon-striped-line" id="crayon-649540157eea3068449914-4"><span class="crayon-i "><span class="crayon-ta">&lt;script </span><span class="crayon-e ">type</span>=<span class="crayon-s">"text/javascript"</span><span class="crayon-h"> </span><span class="crayon-e ">src</span>=<span class="crayon-s">"js/jquery.adaptive-backgrounds.js"</span><span class="crayon-h">&gt;</span><span class="crayon-ta">&lt;/script&gt;</span></span></div><div class="crayon-line" id="crayon-649540157eea3068449914-5"><span class="crayon-i ">・・・</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540157eea3068449914-6"><span class="crayon-r ">&lt;/head&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>&nbsp;</p>
<p>色を取得するターゲットとなるimg要素に「data-adaptive-background=&#8217;1&#8217;」を、</p>
<p>背景色を設定する親要素に「data-ab-css-background=&#8217;1&#8217;」を設定します。</p>

		<div id="crayon-649540157eea7595854631" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title">HTML</span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div><span class="crayon-language">XHTML</span></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
&lt;li class="image" data-ab-css-background='1'&gt;&lt;img src="images/spring1.jpg" alt="image" data-adaptive-background='1'&gt;&lt;/li&gt;</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-649540157eea7595854631-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-649540157eea7595854631-1"><span class="crayon-r ">&lt;li </span><span class="crayon-e ">class</span>=<span class="crayon-s ">"image"</span><span class="crayon-h"> </span><span class="crayon-e ">data-ab-css-background</span>=<span class="crayon-s ">'1'</span><span class="crayon-r ">&gt;</span><span class="crayon-r ">&lt;img </span><span class="crayon-e ">src</span>=<span class="crayon-s ">"images/spring1.jpg"</span><span class="crayon-h"> </span><span class="crayon-e ">alt</span>=<span class="crayon-s ">"image"</span><span class="crayon-h"> </span><span class="crayon-e ">data-adaptive-background</span>=<span class="crayon-s ">'1'</span><span class="crayon-r ">&gt;</span><span class="crayon-r ">&lt;/li&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>&nbsp;</p>
<p>以下のコードでプラグインを実行します。</p>

		<div id="crayon-649540157eea9978137669" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title">JavaScript</span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div><span class="crayon-language">JavaScript</span></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
$(function(){
	$.adaptiveBackground.run();
});</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-649540157eea9978137669-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157eea9978137669-2">2</div><div class="crayon-num" data-line="crayon-649540157eea9978137669-3">3</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-649540157eea9978137669-1"><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540157eea9978137669-2"><span class="crayon-h">	</span><span class="crayon-sy">$</span><span class="crayon-sy">.</span><span class="crayon-i">adaptiveBackground</span><span class="crayon-sy">.</span><span class="crayon-e">run</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-649540157eea9978137669-3"><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>&nbsp;</p>
<p>取得した色の情報などは、以下のように記述することで取得が可能です。</p>

		<div id="crayon-649540157eeaa951081602" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div><span class="crayon-language">JavaScript</span></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
$(function(){
	$.adaptiveBackground.run({
		success: function($img, data) {
			console.log("color-code: " + data.color);
		}
	});
});</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-649540157eeaa951081602-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157eeaa951081602-2">2</div><div class="crayon-num" data-line="crayon-649540157eeaa951081602-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157eeaa951081602-4">4</div><div class="crayon-num" data-line="crayon-649540157eeaa951081602-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157eeaa951081602-6">6</div><div class="crayon-num" data-line="crayon-649540157eeaa951081602-7">7</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-649540157eeaa951081602-1"><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540157eeaa951081602-2"><span class="crayon-h">	</span><span class="crayon-sy">$</span><span class="crayon-sy">.</span><span class="crayon-i">adaptiveBackground</span><span class="crayon-sy">.</span><span class="crayon-e">run</span><span class="crayon-sy">(</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-649540157eeaa951081602-3"><span class="crayon-h">		</span><span class="crayon-i">success</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-sy">$</span><span class="crayon-i">img</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-i">data</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540157eeaa951081602-4"><span class="crayon-h">			</span><span class="crayon-i">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-s">"color-code: "</span><span class="crayon-h"> </span>+<span class="crayon-h"> </span><span class="crayon-i">data</span><span class="crayon-sy">.</span><span class="crayon-i">color</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-649540157eeaa951081602-5"><span class="crayon-h">		</span><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540157eeaa951081602-6"><span class="crayon-h">	</span><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-649540157eeaa951081602-7"><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>背景色に反映される色の data.color以外に、data.palette[0]〜data.palette[19]に画像からサンプリングした色が入っていますので、</p>
<p>こちらも合わせて使うと、もっとデザインの幅が広がるかもしれません。</p>
<p>&nbsp;</p>

写真のドミナントカラーを親要素の背景色にするjQueryプラグイン「jquery.adaptive-backgrounds.js」

<p>I would like to make a special mention about<a href="http://www.awwwards.com/44-useful-infographics-for-web-designers.html"> Awwards’ Infographics post for Web designers</a>. The post collects a total of 44 Infographics complete with a vast quantity of information that I am sure both newbie and experienced designers are going to find out something new to learn.</p>
<p>The topics go from Web Design history, anatomy of effective Web Design, SEO, Colour Theory and Psychology, Typography, UE, Design trends, RWD, etc.</p>
<p>One of the Infographics I found more interesting and not as usually commented as others, like Color theory or RWD, is the Infographic about <a href="http://trends.e-strategyblog.com/2014/08/09/eye-tracking-technology-web-design-infographic/20668">eye tracking technology in Web Design</a>, in other words, about how your eyes move on a website.</p>
<p>&nbsp;</p>
<p><a href="/uploads-archive/2014/11/Screen-Shot-2014-11-04-at-17.41.48.png"><img decoding="async" loading="lazy" class="alignnone wp-image-6184 " src="/uploads-archive/2014/11/Screen-Shot-2014-11-04-at-17.41.48-1024x400.png" alt="Screen Shot 2014-11-04 at 17.41.48" width="651" height="225" /></a></p>
<p>Some interesting tips As it shows the Infographic:</p>
<ul>
<li>Users maintain and “F/E” shaped viewing pattern</li>
</ul>
<p><a href="/uploads-archive/2014/11/Screen-Shot-2014-11-04-at-17.42.06.png"><img decoding="async" loading="lazy" class="alignnone  wp-image-6185" src="/uploads-archive/2014/11/Screen-Shot-2014-11-04-at-17.42.06-253x300.png" alt="Screen Shot 2014-11-04 at 17.42.06" width="299" height="366" /></a></p>
<ul>
<li>69% of the users’ time is spent looking at the left half of a Webpage.</li>
<li>Logos and brands on top left side are remembered 58,4% more than other placement areas.</li>
<li>Users spend 80% of their time looking at information above the “fold” or the portion of the web page that doesn’t require any scrolling.</li>
</ul>
<p>&nbsp;</p>


Infographics for Web designers

<p>After approximately a year in public beta version, <a href="http://froont.com/">FROONT</a> version one came live this October 13<sup>th</sup>.</p>
<p><a href="http://froont.com/">FROONT</a>  is a tool for designers to <strong>speed up the process of protytype and design responsive web sites</strong>.</p>
<p>Take elements from other pages to build your own. Work in the environment you&#8217;re designing for – the browser. You have full control over desktop and mobile layouts, which are responsive from the start. Deliver fully working code without writing it. Connect it to the web, or simply zip the code and send to your client or developer.</p>
<p>&nbsp;</p>
<p><iframe loading="lazy" width="500" height="281" src="//player.vimeo.com/video/95264559" frameborder="0" webkitallowfullscreen="webkitallowfullscreen" mozallowfullscreen="mozallowfullscreen" allowfullscreen="allowfullscreen"></iframe></p>
<p><a href="http://vimeo.com/95264559">Intro to FROONT</a> from <a href="http://vimeo.com/froont">Froont</a> on <a href="https://vimeo.com">Vimeo</a>.</p>
<p>In other words, rather than designing in a page layout program or designing in Photoshop, designers can actually work right in the browser thanks to Froont’s pre-existing <a href="http://techcrunch.com/2013/05/06/froont/">browser-based visual editor</a>. You can explore FROONT web designs library and get inspired or literally take elements from pages you like to build your own.</p>
<p>This tools allows designers to actually build for various layouts at the same time. So any time of your design process you can check how your design looks in various devices: PC, tablet screen, phone screen&#8230;making much faster the process to build for different environments.</p>
<p><a href="/uploads-archive/2014/10/froont-editor-595x329.jpg"><img decoding="async" loading="lazy" class="wp-image-6082 size-full aligncenter" src="/uploads-archive/2014/10/froont-editor-595x329.jpg" alt="froont-editor-595x329" width="595" height="329" srcset="/uploads-archive/2014/10/froont-editor-595x329.jpg 595w, /uploads-archive/2014/10/froont-editor-595x329-300x165.jpg 300w, /uploads-archive/2014/10/froont-editor-595x329-228x126.jpg 228w" sizes="(max-width: 595px) 100vw, 595px" /></a></p>
<p>&nbsp;</p>
<p>The usual way of designing websites is that the design of the website is given to the developer, this approach however, can involve a lot of unnecessary back and forth as the design gets lost in translation. The responsive designs of FROONT, built using HTML/CSS and hosted in the cloud, can be viewed and shared instantly in a web browser, on any device being targeted. And when it’s time to hand off the design to a developer, instead of a static PNG file or something similar, in theory they’re given “nice, clean HTML/CSS or the ‘face’ of the website already made,” says the company.</p>
<p>Froont isn’t so much aiming at simplifying coding but providing better tools for design. It can be used for production, however, designs usually need to be customised in several ways upon client requests, but it is definitely a good starting point.</p>
<p>&nbsp;</p>
<p>In some ways it’s similar to how something like Github works for raw code, and the wider open source movement as a whole, but for visual web designers. As Froont co-founder and CEO Sandijs Ruluks says “The same applies for Github, where people are embracing the community and reuse code made by others. The interesting part is that open-sourced coding is now perceived as something totally normal and its benefits can’t be denied. Open-sourced design on the other hand, isn’t there yet, although we see the excitement around it”.</p>
<p>&nbsp;</p>
<p>Pages created by non-paying users are always public and can be cloned, edited and reused by others. If you want to keep your work private you pay a subscription. Or, as Ruluks puts it, “for free you pay with sharing, for privacy you pay with money”. Here you have the pricing list.</p>
<p><a href="/uploads-archive/2014/10/Screen-Shot-2014-10-21-at-17.28.38.png"><img decoding="async" loading="lazy" class="wp-image-6085 aligncenter" src="/uploads-archive/2014/10/Screen-Shot-2014-10-21-at-17.28.38-1024x412.png" alt="Screen Shot 2014-10-21 at 17.28.38" width="619" height="249" srcset="/uploads-archive/2014/10/Screen-Shot-2014-10-21-at-17.28.38-1024x412.png 1024w, /uploads-archive/2014/10/Screen-Shot-2014-10-21-at-17.28.38-300x120.png 300w, /uploads-archive/2014/10/Screen-Shot-2014-10-21-at-17.28.38-228x91.png 228w" sizes="(max-width: 619px) 100vw, 619px" /></a></p>
<p>&nbsp;</p>
<p>Actually FROONT is not the only tool to create professional Responsive Website without code, but it is the only &#8220;free&#8221; version.</p>
<p>There&#8217;s also <a href="https://webflow.com/">Webflow</a>, <a href="https://creative.adobe.com/products/reflow">Adobe Edge Reflow</a> and <a href="http://macaw.co/">Macaw </a>. If you want to read more about the topic you might like to <a href="http://www.awwwards.com/4-tools-that-enable-small-town-designers-to-sell-an-idea-to-companies-like-coca-cola.html">read this post of Awwwards.</a></p>


FROONT:  Sharing Responsive Web Design As Easy As Sharing Code

<p>I was talking last week about <a href="http://www.awwwards.com/">AWWWARDS</a>, one of the most popular online awards that recognise the talent and effort of the best web designers, developers and agencies in the world.</p>
<p>Awwwards promise to be the meeting point where web professionals from across the world can come to find inspiration, to debate and share knowledge and experience.</p>
<p>Indeed they can proclaimed themselves as the <a href="http://www.awwwards.com/awwwards-the-most-visited-online-awards-platform-in-the-world.html">“The most visited online awards platform in the world”</a>. Awwwards recently broke the 2,000 barrier on <strong>Alexa</strong> and it is currently ranked at 1,919.</p>
<p>Worth a check, their most prestigious peers and competitors ranking is respectively: The <a href="http://www.webbyawards.com/">Webby Awards </a>(21,128), The <a href="http://www.thefwa.com/">FWA </a>(25, 943) and other important awards sites such as <a href="http://www.dandad.org/">D&amp;AD Awards</a>, <a href="http://fitc.ca/awards/">Fitc</a> and <a href="https://thenetawards.com/">The Net Awards.</a> <em>(Source: Alexa 2014).<a style="font-style: normal;" href="/uploads-archive/2014/10/awwwards-statistics-2015.png"><br />
</a></em></p>
<p><a href="/uploads-archive/2014/10/awwwards-statistics-2015.png"><img decoding="async" loading="lazy" class="alignnone wp-image-5956 " src="/uploads-archive/2014/10/awwwards-statistics-2015.png" alt="awwwards-statistics-2015" width="649" height="482" srcset="/uploads-archive/2014/10/awwwards-statistics-2015.png 938w, /uploads-archive/2014/10/awwwards-statistics-2015-300x222.png 300w, /uploads-archive/2014/10/awwwards-statistics-2015-228x169.png 228w" sizes="(max-width: 649px) 100vw, 649px" /></a></p>
<p><a href="http://www.awwwards.com/blog/"><strong>BLOG </strong></a></p>
<p>One of the things I like the most in Awwwards it&#8217;s the blog, as I think is a good resource to keep up with the web/UI/UX  trends, top web design topics, tutorials, events and specially the latest tools for web-designers.</p>
<p><a href="/uploads-archive/2014/10/Screen-Shot-2014-10-07-at-16.15.22.png"><img decoding="async" loading="lazy" class="alignnone wp-image-5955 " src="/uploads-archive/2014/10/Screen-Shot-2014-10-07-at-16.15.22-1024x491.png" alt="Screen Shot 2014-10-07 at 16.15.22" width="644" height="309" srcset="/uploads-archive/2014/10/Screen-Shot-2014-10-07-at-16.15.22-1024x491.png 1024w, /uploads-archive/2014/10/Screen-Shot-2014-10-07-at-16.15.22-300x144.png 300w, /uploads-archive/2014/10/Screen-Shot-2014-10-07-at-16.15.22-228x109.png 228w" sizes="(max-width: 644px) 100vw, 644px" /></a></p>
<p><strong><a href="http://www.awwwards.com/awwwards-interviews-simon-collison.html">INTERVIEWS</a></strong></p>
<p>In the blog you&#8217;ll find a couple of interviews as well. This one I picked features Keitaro Suzuki,<span style="color: #313131;"> Art Director and Head of Web Design, UI, UX at </span><a style="color: #3c948b;" href="http://www.shiftbrain.co.jp/">ShiftBrain</a><span style="color: #313131;">, Japan, who explains about the design scene in Japan, and where he thinks the web will take us in a few years&#8217; time.</span></p>
<p><iframe loading="lazy" width="500" height="281" src="//player.vimeo.com/video/99006791" frameborder="0" webkitallowfullscreen="webkitallowfullscreen" mozallowfullscreen="mozallowfullscreen" allowfullscreen="allowfullscreen"></iframe></p>
<p><strong><a href="http://www.awwwards.com/events/">EVENTS</a></strong></p>
<p>You can also keep updated with the latest events of the industry happening worldwide. Currently there is none happening soon in Japan, but on November 5th there&#8217;s an event about User Experience:<a href="http://www.awwwards.com/events/ux-futures-summit-2014.html"> UX Futures Summit 2014</a> which is online, no travel hassle!.</p>
<p><a href="/uploads-archive/2014/10/Screen-Shot-2014-10-07-at-16.51.59.png"><img decoding="async" loading="lazy" class="wp-image-5957 alignleft" src="/uploads-archive/2014/10/Screen-Shot-2014-10-07-at-16.51.59.png" alt="Screen Shot 2014-10-07 at 16.51.59" width="637" height="218" srcset="/uploads-archive/2014/10/Screen-Shot-2014-10-07-at-16.51.59.png 2382w, /uploads-archive/2014/10/Screen-Shot-2014-10-07-at-16.51.59-300x102.png 300w, /uploads-archive/2014/10/Screen-Shot-2014-10-07-at-16.51.59-1024x350.png 1024w, /uploads-archive/2014/10/Screen-Shot-2014-10-07-at-16.51.59-228x78.png 228w" sizes="(max-width: 637px) 100vw, 637px" /></a></p>
<p>&nbsp;</p>


AWWWARDS : The web awards for design, creativity and innovation

<p>この存在は前から知っていたものの使用する事は今までなかった「FontAwesome」。</p>
<p>アイコンフォントをcssで簡単に設置できるというものですが、<br />
ちょっと試してみようということでデモ作ってみたんですが、いいですね！</p>
<p>こんなに簡単に設置でき、アイコンの種類も豊富で、ライセンスもGPL。<br />
なぜもっと早く使用しなかったんだと思ってます。</p>
<p><a href="http://fortawesome.github.io/Font-Awesome/" target="_blank">Font Awesome, the iconic font and CSS toolkit</a></p>
<p><a class="demo" href="/demo/abe/47/" target="_blank">DEMO</a></p>
<p>僕がいいと思った点は以下になります。</p>
<p>・アイコンの種類が豊富<br />
・サイズも自由に変更(大きくしてもキレイ)<br />
・回転させたり、色変更もできる<br />
・独自の方法で設定もできる</p>
<h2>FontAwesomeの使い方</h2>
<p>まず上記にあるサイトからダウンロードしてきます。<br />
ダウンロードしたファイルの中に、font-awesome.min.cssがありますのでそれを読み込みます。</p>
<p></p>

		<div id="crayon-649540157cba1179194096" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div><span class="crayon-language">XHTML</span></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
&lt;link type="text/css" href="css/font-awesome.min.css" rel="stylesheet" /&gt;</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-649540157cba1179194096-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-649540157cba1179194096-1"><span class="crayon-r ">&lt;link </span><span class="crayon-e ">type</span>=<span class="crayon-s ">"text/css"</span><span class="crayon-h"> </span><span class="crayon-e ">href</span>=<span class="crayon-s ">"css/font-awesome.min.css"</span><span class="crayon-h"> </span><span class="crayon-e ">rel</span>=<span class="crayon-s ">"stylesheet"</span><span class="crayon-r "> /&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<p>このcssからフォントのファイルを読み込んでいるので,「fonts」フォルダを適切なディレクトリに設置してください。</p>
<p>普通のcssで設定する場合はもうこれでOKです！<br />
あとはsassとかlessでも設定ができるそうです。</p>
<p>あとは下記のようにアイコンを付けたいタグに、<br />
class名「fa」と、あとはアイコンの種類のclassを設定すれば大丈夫です。</p>
<p></p>

		<div id="crayon-649540157cba5433351069" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div><span class="crayon-language">XHTML</span></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
&lt;p&gt;&lt;i class="fa fa-shopping-cart"&gt;&lt;/i&gt;株式会社スターフィールドです。&lt;/p&gt;</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-649540157cba5433351069-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-649540157cba5433351069-1"><span class="crayon-r ">&lt;p&gt;</span><span class="crayon-r ">&lt;i </span><span class="crayon-e ">class</span>=<span class="crayon-s ">"fa fa-shopping-cart"</span><span class="crayon-r ">&gt;</span><span class="crayon-r ">&lt;/i&gt;</span><span class="crayon-i ">株式会社スターフィールドです。</span><span class="crayon-r ">&lt;/p&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<p>サイトでは、iタグで説明がなされていますが、spanタグでも(の方が?)よいようです。</p>
<h2>FontAwesomeを独自のルールで設定する方法</h2>
<p>classを指定すれば簡単にできるのですが、中には空のタグを作りたくないという方もいらっしゃると思います。</p>
<p>その場合、独自にフォント指定するためのclassを設定し、cssの疑似要素(before)でアイコンを指定するという方法があります。<br />
例えば下記のようになります。</p>
<p></p>

		<div id="crayon-649540157cba6135572285" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div><span class="crayon-language">CSS</span></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
.icon:before {
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
    color: #000;
    font-size: 18px;
    margin-right: 0.5em;
}
.iconCart:before {
  content: "\f07a";
}</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-649540157cba6135572285-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157cba6135572285-2">2</div><div class="crayon-num" data-line="crayon-649540157cba6135572285-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157cba6135572285-4">4</div><div class="crayon-num" data-line="crayon-649540157cba6135572285-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157cba6135572285-6">6</div><div class="crayon-num" data-line="crayon-649540157cba6135572285-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157cba6135572285-8">8</div><div class="crayon-num" data-line="crayon-649540157cba6135572285-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157cba6135572285-10">10</div><div class="crayon-num" data-line="crayon-649540157cba6135572285-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157cba6135572285-12">12</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-649540157cba6135572285-1"><span class="crayon-k ">.icon:before </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540157cba6135572285-2"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-e ">font-family</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">FontAwesome</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-649540157cba6135572285-3"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-e ">font-style</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">normal</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540157cba6135572285-4"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-e ">font-weight</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">normal</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-649540157cba6135572285-5"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-e ">text-decoration</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">inherit</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540157cba6135572285-6"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-e ">color</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">#000</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-649540157cba6135572285-7"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-e ">font-size</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">18px</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540157cba6135572285-8"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-e ">margin-right</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">0.5em</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-649540157cba6135572285-9"><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540157cba6135572285-10"><span class="crayon-k ">.iconCart:before </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-649540157cba6135572285-11"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-e ">content</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-s">"\f07a"</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540157cba6135572285-12"><span class="crayon-sy">}</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<p>icon:beforeの設定は例なので、各々の好きなようにしてもらうのですが、<br />
contentの中身を自分自身で使うアイコン分設定する必要があります。</p>
<p>このcontentの書き方が特殊なので、下記URLを見ると簡単に設置できます。</p>
<p><a href="http://astronautweb.co/snippet/font-awesome/" target="_blank">Complete list of Font Awesome icons with their CSS content values</a></p>
<p>これで自分の好きな案配でアイコンの設定が出来るようになります。</p>
<p>アイコンはwebサイトの中で重要な要素なので、これは便利ですね！！</p>

ちょっとしたアイコンにいい「FontAwesome」

<p><a href="http://usepanda.com/">Panda</a>  is the fastest way to get your daily design inspiration and news. This website (or Chrome extension, as you prefer) helps you keep up with industry news and inspiration from a variety of sources in one interface. From the moment you installed it, Panda is going to appear every time you open a new tab.</p>
<p>It can likely fit well with Web Workers of all stripes, but it is probably more oriented to front-end designers.</p>
<p>&nbsp;</p>
<p><a href="/uploads-archive/2014/09/Screen-Shot-2014-09-30-at-17.10.28.png"><img decoding="async" loading="lazy" class="alignnone wp-image-5899 " src="/uploads-archive/2014/09/Screen-Shot-2014-09-30-at-17.10.28-1024x549.png" alt="Panda" width="621" height="333" srcset="/uploads-archive/2014/09/Screen-Shot-2014-09-30-at-17.10.28-1024x549.png 1024w, /uploads-archive/2014/09/Screen-Shot-2014-09-30-at-17.10.28-300x160.png 300w, /uploads-archive/2014/09/Screen-Shot-2014-09-30-at-17.10.28-228x122.png 228w" sizes="(max-width: 621px) 100vw, 621px" /></a></p>
<p>On the left hand side of the interface we have Panda’s news feeds playing the latest and most popular info from Hacker News, Designers News, Growth Hackers among others (classified by popular or latest).</p>
<p>On the right you can get some visual inspiration, featuring acclaimed sites like : <a href="http://www.awwwards.com/">Awwwards</a> , <a href="https://dribbble.com/">Dribbble</a> and <a href="https://www.behance.net/">Behance</a> .</p>
<p><a href="/uploads-archive/2014/09/Screen-Shot-2014-09-30-at-17.54.43.png"><img decoding="async" loading="lazy" class="alignnone wp-image-5903 " src="/uploads-archive/2014/09/Screen-Shot-2014-09-30-at-17.54.43-1024x546.png" alt="Panda" width="619" height="330" srcset="/uploads-archive/2014/09/Screen-Shot-2014-09-30-at-17.54.43-1024x546.png 1024w, /uploads-archive/2014/09/Screen-Shot-2014-09-30-at-17.54.43-300x160.png 300w, /uploads-archive/2014/09/Screen-Shot-2014-09-30-at-17.54.43-228x121.png 228w" sizes="(max-width: 619px) 100vw, 619px" /></a></p>
<p>&nbsp;</p>
<p>The overall goal is to filter the content from around the web and present it nicely, without having to click around to countless websites. Never miss anything, again.</p>
<p>&nbsp;</p>
<p>Panda doesn’t allow users to submit their own sources. Instead, co-founder William Channer, explains that the focus is on quality not customization. By sourcing sites where the community has already voted on what’s on trend.</p>
<p>&nbsp;</p>
<p>Panda is nicely done and is probably worth a bookmark.</p>
<p>&nbsp;</p>


PANDA: Relaxed Buzzfeed for Web Design

<p>僕自身はあまりペンツールを使用することが少ないため、あんまり得意ではないです。<br />
台形を作る時ぐらいしか使わないかもしれません笑</p>
<p>サイトをちょっと利用してみましたが、ペンツールを使用する感覚がほぼ本物に近い感じで、最初にチュートリアルステージがあり、方法を説明してくれるのでいい練習になると思います。</p>
<p>僕もまだまだなので、もっと突っ込んで練習してみたいと思います。</p>
<p><a href="http://bezier.method.ac/#">The Bézier Game</a></p>


ベジェ曲線の練習が出来るwebサービス「The Bézier Game」」

<p>現在２つ程気になっているweb制作をサポートしてくれるようなwebサービスがあります。</p>
<p>まだ試せてないのですが、いずれ試してみたいと思うものなのでとりあえず忘れないように書いておきます。</p>
<p>&nbsp;</p>
<h2><a href="https://c9.io/" target="_blank">Cloud9 &#8211; Your development environment, in the cloud</a></h2>
<p>ひとつはCloud9というサービス(ツール)です。</p>
<p><a href="https://c9.io/" target="_blank"><img decoding="async" loading="lazy" class="alignnone wp-image-5805" src="/uploads-archive/2014/09/Cloud9-Your-development-environment-in-the-cloud-1024x609.jpg" alt="Cloud9 - Your development environment, in the cloud" width="640" height="381" srcset="/uploads-archive/2014/09/Cloud9-Your-development-environment-in-the-cloud-1024x609.jpg 1024w, /uploads-archive/2014/09/Cloud9-Your-development-environment-in-the-cloud-300x178.jpg 300w, /uploads-archive/2014/09/Cloud9-Your-development-environment-in-the-cloud-228x135.jpg 228w, /uploads-archive/2014/09/Cloud9-Your-development-environment-in-the-cloud.jpg 1192w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>
<p>これはブラウザ上で使用できるツールで以下のような特徴があります。</p>
<p>&nbsp;</p>
<ul>
<li>そもそも高機能テキストエディタである</li>
<li>ブラウザチェックができる（IEにも対応！）</li>
<li>リアルタイムエラーチェック機能(HTMLやjavascript等)</li>
<li>バージョン管理</li>
<li>画像加工(リサイズ、トリミング、回転)</li>
</ul>
<p>&nbsp;</p>
<p>いろんな機能が混ざっていてすごいです。。。</p>
<p>&nbsp;</p>
<p>詳しく知りたい方は以下もご覧下さい！</p>
<p><a href="http://plus.appgiga.jp/masatolan/2014/08/19/53354/" target="_blank">無料で300以上のクロスブラウザチェックを搭載した「Cloud9」エディタの神進化が話題に！ | APPGIGA!!（アプギガ）</a><br />
&nbsp;</p>
<h2><a href="http://universions.com/" target="_blank">Webクリエイターのためのファイル管理コラボレーションツール｜universions</a></h2>
<p>そして2つめは、いわゆるgitのようなツールの「universions」です。</p>
<p>&nbsp;</p>
<p><a href="http://universions.com/" target="_blank"><img decoding="async" loading="lazy" class="alignnone wp-image-5806" src="/uploads-archive/2014/09/6a7e5161f99e6818e443589452ce5160-1024x609.jpg" alt="Webクリエイターのためのファイル管理コラボレーションツール｜universions" width="640" height="381" srcset="/uploads-archive/2014/09/6a7e5161f99e6818e443589452ce5160-1024x609.jpg 1024w, /uploads-archive/2014/09/6a7e5161f99e6818e443589452ce5160-300x178.jpg 300w, /uploads-archive/2014/09/6a7e5161f99e6818e443589452ce5160-228x135.jpg 228w, /uploads-archive/2014/09/6a7e5161f99e6818e443589452ce5160.jpg 1192w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>
<p>こちらの特徴は、</p>
<p>&nbsp;</p>
<ul>
<li>ファイル管理(バージョン管理)</li>
<li>チャット</li>
<li>タスク管理</li>
<li>プレビュー機能(AIやPSDも見れる！)</li>
<li>Wiki</li>
</ul>
<p>&nbsp;</p>
<p>バージョン管理とプレビューでAIとPSDが見れるのはいいですね！</p>
<p>&nbsp;</p>
<p>以上、今後試してみたいサービスでした。</p>


気になるweb制作サポートサービス

OpenStreetMapを使ってみた

<p>webフォントを使用するケースが増えております。</p>
<p>webフォントを使用する場合、googleフォントを使うか、<br />
webフォントを提供しているサービスを利用するかですが、サービスを利用するとお値段がかかってしまいます。</p>
<p>そしてもうひとつ、自分でフォントファイルをUPして使用する方法があるかと思います。<br />
ただ、普通のフォントファイルだと、容量が重くサイトの表示スピードに影響がでてしまうこともあると思います。</p>
<p>そこで、商用利用可能なフリーフォント(Webフォントとして利用可能なフォント)を、必要な文字だけを抜粋して、woffというフォントファイルに変換し、サイトで使用する方法をご説明します。</p>
<p>流れとしては以下になります。</p>
<ol>
<li><a href="#link1">フリーフォントを用意する</a></li>
<li><a href="#link2">フリーフォントをサブセットフォントメーカーで必要な文字だけ抜粋する</a></li>
<li><a href="#link3">2で作成されたフォントファイルをwoffに変換する</a></li>
<li><a href="#link4">cssで指定し、フォントを適用させる</a></li>
</ol>
<p>その前にまず、「woff」とはなにかを説明します。<br />
<strong>「woff」 (Web Open Font Format)</strong>とはWebページ埋め込み用フォーマットで、Webフォントとして使われるために作られたフォントファイル形式でほとんどのブラウザで使用できるようです。<br />
古いブラウザに対応しなくてはいけないという場合をのぞき、woff一本で大丈夫そうです。<br />
<a href="http://opentype.jp/woffbrowser.htm" target="_blank">対応Webブラウザ</a></p>
<h3 id="link1">フリーフォントを用意する</h2>
<p>今回は<strong>ロゴたいぷゴシック</strong>というフォントを使用させて頂きました。</p>
<p><a href="http://www.fontna.com/blog/1226/" target="_blank">フリーフォント　ロゴたいぷゴシックのダウンロード</a></p>
<p>いい感じのフォントです。<br />
ちなみに、ttfファイルで4MB程あります。</p>
<h3 id="link2">フリーフォントをサブセットフォントメーカーで必要な文字だけ抜粋する</h2>
<p>以下のサイトでソフトをダウンロードし、変換します。</p>
<p><a href="http://opentype.jp/subsetfontmk.htm" target="_blank">サブセットフォントメーカー</a></p>
<p><img decoding="async" loading="lazy" width="268" height="331" src="/uploads-archive/2014/08/freefont1.gif" alt="freefont1" class="alignnone size-full wp-image-5622" /></p>
<h3 id="link3">2で作成されたフォントファイルをwoffに変換する</h2>
<p>以下のサイトでソフトをダウンロードし、変換します。<br />
2と元の会社さんは同じで、両方ダウンロードしておけば、2から自動的に3へ移行してくれます。</p>
<p><a href="http://opentype.jp/woffconv.htm" target="_blank">WOFFコンバータ</a></p>
<p><img decoding="async" loading="lazy" width="335" height="260" src="/uploads-archive/2014/08/freefont2.gif" alt="freefont2" class="alignnone size-full wp-image-5623" /></p>
<p>今回は文字を「株式会社スターフィールドです。」だけにしましたので、<br />
woffファイルは、<strong>3KB</strong>になりました！軽いですね！</p>
<h3 id="link4">cssで指定し、フォントを適用させる</h2>
<p>3で出力されたファイルを使い、webフォントの設定をします。</p>
<p></p>

		<div id="crayon-649540157b30e915489319" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div><span class="crayon-language">CSS</span></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
@font-face{
  font-family: 'myFont';
  src: url('../myfont.woff') format('woff');
}
.font{
  font-family: 'myFont';
}</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-649540157b30e915489319-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157b30e915489319-2">2</div><div class="crayon-num" data-line="crayon-649540157b30e915489319-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157b30e915489319-4">4</div><div class="crayon-num" data-line="crayon-649540157b30e915489319-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157b30e915489319-6">6</div><div class="crayon-num" data-line="crayon-649540157b30e915489319-7">7</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-649540157b30e915489319-1"><span class="crayon-n">@font-face</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540157b30e915489319-2"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-e ">font-family</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-s">'myFont'</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-649540157b30e915489319-3"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-e ">src</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">url</span><span class="crayon-sy">(</span><span class="crayon-s">'../myfont.woff'</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-i ">format</span><span class="crayon-sy">(</span><span class="crayon-s">'woff'</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540157b30e915489319-4"><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-649540157b30e915489319-5"><span class="crayon-k ">.font</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540157b30e915489319-6"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-e ">font-family</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-s">'myFont'</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-649540157b30e915489319-7"><span class="crayon-sy">}</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<p>@font-faceで読み込むフォントを指定します。<br />
@font-face内でfont-familyで好きな命名をしますと、<br />
あとは通常のfont-familyで指定すれば好きな箇所にフォントを適用出来ます！</p>
<p>実際に試してみましたので、デモ画面をご覧下さい。</p>
<p><a href="/demo/abe/45/" class="demo" target="_blank">DEMO</a></p>
<p>必要な文字数だけ設定すればファイルがだいぶ軽くなると思いますので、<br />
決まっている場合はいいですね！</p>

フリーフォントをwebフォントとしてサイトで使用してみる

<p>There are a ton of free Chrome extensions to help make your life easier.</p>
<p>In my eagerness to find good resources and tools for web design I have collected some of them. I hope you find these tools useful and help you get better results on your designs.</p>
<p>&nbsp;</p>
<p><a title="What a font" href="https://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm" target="_blank"><strong>What a font</strong></a></p>
<p>Users: 259.649 ; Rate: 4.4</p>
<p><a href="https://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm"><img decoding="async" loading="lazy" class="alignnone  wp-image-5561" src="/uploads-archive/2014/08/images.jpeg" alt="images" width="398" height="248" srcset="/uploads-archive/2014/08/images.jpeg 284w, /uploads-archive/2014/08/images-228x142.jpeg 228w" sizes="(max-width: 398px) 100vw, 398px" /></a></p>
<p>It is an easy way to identify fonts on websites.</p>
<p>With this extension, you could inspect web fonts by just hovering on them. This tool identifies the font faster than “Stylifyme”, which I previously posted. “What a font” is that simple and elegant.</p>
<p>&nbsp;</p>
<p><a title="Page Ruler" href="https://chrome.google.com/webstore/detail/page-ruler/jlpkojjdgbllmedoapgfodplfhcbnbpn" target="_blank"><strong>Page Ruler</strong></a></p>
<p>Users: 149.326 ; Rate: 4.02</p>
<p><a href="https://chrome.google.com/webstore/detail/page-ruler/jlpkojjdgbllmedoapgfodplfhcbnbpn"><img decoding="async" loading="lazy" class="alignnone  wp-image-5562" src="/uploads-archive/2014/08/Screen-Shot-2014-08-19-at-14.05.39-300x155.png" alt="Screen Shot 2014-08-19 at 14.05.39" width="404" height="209" srcset="/uploads-archive/2014/08/Screen-Shot-2014-08-19-at-14.05.39-300x155.png 300w, /uploads-archive/2014/08/Screen-Shot-2014-08-19-at-14.05.39-1024x532.png 1024w, /uploads-archive/2014/08/Screen-Shot-2014-08-19-at-14.05.39-228x118.png 228w" sizes="(max-width: 404px) 100vw, 404px" /></a></p>
<p>This tool allows you to draw a ruler to get pixel dimensions and positioning, and measure elements on any web page. It quickly displays the width, height and position.</p>
<p>The Keyboard shortcut is: Alt + P (For enable/disable page ruler).</p>
<p>&nbsp;</p>
<p><a title="Awesome Screenshot" href="https://chrome.google.com/webstore/detail/awesome-screenshot-captur/alelhddbbhepgpmgidjdcjakblofbmce" target="_blank">Awesome Screenshot</a></p>
<p>Users: 1.280.032 ; Rate: 4.73</p>
<p><iframe loading="lazy" width="500" height="375" src="http://www.youtube.com/embed/MUVfhSg7-yE?feature=oembed" frameborder="0" allowfullscreen></iframe></p>
<p>Not only allows you to capture the whole page or any portion of it, it also lets you annotate screenshot, blur sensitive info and upload and share content with just one-click.</p>
<p>I would advice to wait until the whole page is uploaded, otherwise is not going to capture properly the site.</p>
<p>* I mentioned in previous post “Screen Capture (by Google)” but it seems it is not working anymore with the latest versions of Chrome.</p>
<p>&nbsp;</p>
<p><a title="Image Downloader" href="https://chrome.google.com/webstore/detail/image-downloader/cnpniohnfphhjihaiiggeabnkjhpaldj" target="_blank"><strong>Image Downloader</strong></a></p>
<p>Users: 168.690 ; Rate: 3.98</p>
<p><a href="https://chrome.google.com/webstore/detail/image-downloader/cnpniohnfphhjihaiiggeabnkjhpaldj"><img decoding="async" loading="lazy" class="alignnone  wp-image-5571" src="/uploads-archive/2014/08/Screen-Shot-2014-08-19-at-17.06.16-300x151.png" alt="Screen Shot 2014-08-19 at 17.06.16" width="414" height="208" srcset="/uploads-archive/2014/08/Screen-Shot-2014-08-19-at-17.06.16-300x151.png 300w, /uploads-archive/2014/08/Screen-Shot-2014-08-19-at-17.06.16-1024x517.png 1024w, /uploads-archive/2014/08/Screen-Shot-2014-08-19-at-17.06.16-228x115.png 228w" sizes="(max-width: 414px) 100vw, 414px" /></a></p>
<p>Browse and download images on a web page.</p>
<p>If you need to bulk download images from a web page, with this extension you can see all the images that the page contains. When you press the “Download” button, all selected images are saved to the default download directory of Chrome. If you don’t have one, you will have to manually choose the save location for each image.</p>
<p>&nbsp;</p>
<p><a title="Pin Search" href="https://chrome.google.com/webstore/detail/pin-it-button/gpdjojdkbbmdfjfahjcgigfpmkopogic" target="_blank"><strong>Pin Search</strong></a></p>
<p>Users: 2.371.113 ; Rate: 3.66</p>
<p><a href="https://chrome.google.com/webstore/detail/pin-it-button/gpdjojdkbbmdfjfahjcgigfpmkopogic"><img decoding="async" loading="lazy" class="alignnone  wp-image-5572" src="/uploads-archive/2014/08/Screen-Shot-2014-08-19-at-17.10.09-300x150.png" alt="Screen Shot 2014-08-19 at 17.10.09" width="406" height="203" srcset="/uploads-archive/2014/08/Screen-Shot-2014-08-19-at-17.10.09-300x150.png 300w, /uploads-archive/2014/08/Screen-Shot-2014-08-19-at-17.10.09-1024x512.png 1024w, /uploads-archive/2014/08/Screen-Shot-2014-08-19-at-17.10.09-228x114.png 228w" sizes="(max-width: 406px) 100vw, 406px" /></a></p>
<p>This extension helps you harness the power of Google Search simply using any old image you find on Pinterest. You can use this to track down all sites showing that image, to find more info about the person behind the image, to search for similar images… A surprisingly priceless tool.</p>
<p>&nbsp;</p>
<p><a title="Evernote web clipper" href="https://chrome.google.com/webstore/detail/evernote-web-clipper/pioclpoplcdbaefihamjohnefbikjilc" target="_blank"><strong>Evernote web clipper</strong></a></p>
<p>Users: 3.324.994 ; Rate: 4.68</p>
<p><iframe loading="lazy" width="500" height="281" src="http://www.youtube.com/embed/QyuAn1Z_7uM?feature=oembed" frameborder="0" allowfullscreen></iframe></p>
<p>Use the Evernote extension to save things you see on the web into your Evernote account.</p>
<p>Evernote Web Clipper is the easiest way to save, mark up and share anything you see online. From clipping pages to taking and annotating screenshots, it lets you capture everything, then access it from anywhere.</p>
<p>Although we might not use it within Sterfield, I think it can be very helpful when it comes to take note of the changes required by the client.</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>If you want to keep updated with extensions, here is a website that review chrome extensions and filter the most popular ones:</p>
<p><a href="http://www.extensionaires.com/">http://www.extensionaires.com/</a></p>


Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

記事一覧 - タグ: #Web

2015/02/11

2015/02/11

2015/02/05

2015/01/22

2015/01/14

2015/01/14

2014/12/17

2014/11/12

2014/11/05

2014/10/22

2014/10/08

2014/10/07

2014/10/01

2014/09/17

2014/09/10

2014/09/03

2014/08/26

2014/08/20