テキストで括弧の横の余分なスペースを軽減するjQueryコード

<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つ

SVGとCSS3でできる筆記体のアニメーションをやってみる

背景画像等をレスポンシブデザインでも縦横比をぴったり固定する方法

CSSのぼかしフィルターを利用した、フォーカスによる遠近表現

<p style="line-height: 14.25pt;"><span style="font-family: Calibri; color: #333333;">I would like to share two useful resources, TheStocks and Mazwai. Both are the very best of free stocks one for images and the other one for videos.</span></p>
<p style="line-height: 14.25pt;">
<h3 style="line-height: 14.25pt;"><strong><span style="font-family: Calibri; color: #ffffff;">The Stocks:</span></strong></h2>
<p style="line-height: 14.25pt;"><span style="font-family: Calibri; color: #333333;"><a href="http://thestocks.im/">TheStocks</a>, which is actually a tumblr,<span class="apple-converted-space"> </span><strong><span style="font-family: Calibri;">collects a total of 14 free stock image websites in one site.</span></strong><span class="apple-converted-space"> </span>This site can safes you a lot of time hunting manually through all those free stocks sites, tumblrs, etc.</span></p>
<p style="line-height: 14.25pt;"><span style="font-family: Calibri; color: #333333;">Although all these stock photo sites are infinite scrollers…which can be a little tiring. I recommend to click in “Archives” to go through the images.</span></p>
<p style="line-height: 14.25pt; orphans: auto; text-align: start; widows: auto; -webkit-text-stroke-width: 0px; word-spacing: 0px;"><span style="font-family: Calibri; color: #333333;">Here are some picture examples:</span></p>
<p><a href="/uploads-archive/2014/12/tumblr_n7qhtcBPvQ1sfie3io1_1280.jpg"><img decoding="async" loading="lazy" class="alignnone wp-image-6503 " src="/uploads-archive/2014/12/tumblr_n7qhtcBPvQ1sfie3io1_1280-1024x539.jpg" alt="Mazwai" width="717" height="330" /></a></p>
<p><em>Picture from New Old Stock</em></p>
<p><a href="/uploads-archive/2014/12/tumblr_ng9v03ynLQ1tomxvuo2_1280.jpg"><img decoding="async" loading="lazy" class="alignnone wp-image-6528 " src="/uploads-archive/2014/12/tumblr_ng9v03ynLQ1tomxvuo2_1280-1024x670.jpg" alt="tumblr_ng9v03ynLQ1tomxvuo2_1280" width="711" height="478" /></a></p>
<p><em>Picture from Movefast</em></p>
<p><a href="/uploads-archive/2014/12/QDSMoAMTYaZoXpcwBjsL__DSC0104-1.jpg"><img decoding="async" loading="lazy" class="alignnone wp-image-6526 " src="/uploads-archive/2014/12/QDSMoAMTYaZoXpcwBjsL__DSC0104-1-1024x706.jpg" alt="QDSMoAMTYaZoXpcwBjsL__DSC0104-1" width="712" height="615" /></a></p>
<p><em>Picture from Unsplash</em></p>
<p style="line-height: 14.25pt;"><span style="font-family: Calibri; color: #333333;"> </span></p>
<h3 style="line-height: 14.25pt;"><strong><span style="font-family: Calibri; color: #ffffff;">Mazwai</span></strong></h2>
<p style="line-height: 14.25pt;"><span style="font-family: Calibri; color: #333333;">One of the elements that can help to power up the Web is the video (or animated) website background. The usage of video could add dynamics and ambience to the site. It is also a good way to draw attention and make people stop and stare, increasing the time they spend on the site and hopefully lead to more interaction with the contents on the site.</span></p>
<p style="line-height: 14.25pt; orphans: auto; text-align: start; widows: auto; -webkit-text-stroke-width: 0px; word-spacing: 0px;"><span style="font-family: Calibri; color: #333333;">Here is a beautiful example of a full-blown video background:</span></p>
<p><a href="http://www.madebyhangar.com/"><img decoding="async" loading="lazy" class="alignnone wp-image-6518 " src="/uploads-archive/2014/12/Screen-Shot-2014-12-16-at-15.43.53-1024x289.png" alt="Screen Shot 2014-12-16 at 15.43.53" width="677" height="191" srcset="/uploads-archive/2014/12/Screen-Shot-2014-12-16-at-15.43.53-1024x289.png 1024w, /uploads-archive/2014/12/Screen-Shot-2014-12-16-at-15.43.53-300x84.png 300w, /uploads-archive/2014/12/Screen-Shot-2014-12-16-at-15.43.53-228x64.png 228w" sizes="(max-width: 677px) 100vw, 677px" /></a></p>
<p style="line-height: 14.25pt;"><span style="font-family: Calibri; color: #333333;">If you want to give it a try and add video background into your designs you should check<span class="apple-converted-space"> </span><a href="http://mazwai.com/">Mazwai</a>.</span></p>
<p style="line-height: 14.25pt;"><strong><span style="font-family: Calibri; color: #333333;">Mazwai is a free stock of high quality videos.</span></strong><span class="apple-converted-space"><span style="font-family: Calibri; color: #333333;"> </span></span><span style="font-family: Calibri; color: #333333;">Its purpose is to help web designers, creative and artist to find great video resources for their projects.</span></p>
<p><a href="http://mazwai.com/"><img decoding="async" loading="lazy" class="alignnone wp-image-6509 " src="/uploads-archive/2014/12/Screen-Shot-2014-12-16-at-15.16.27-1024x500.png" alt="Screen Shot 2014-12-16 at 15.16.27" width="682" height="333" srcset="/uploads-archive/2014/12/Screen-Shot-2014-12-16-at-15.16.27-1024x500.png 1024w, /uploads-archive/2014/12/Screen-Shot-2014-12-16-at-15.16.27-300x146.png 300w, /uploads-archive/2014/12/Screen-Shot-2014-12-16-at-15.16.27-228x111.png 228w" sizes="(max-width: 682px) 100vw, 682px" /></a></p>
<p style="line-height: 14.25pt;"><span style="font-family: Calibri; color: #333333;">The videos are free to use and transform as long as you credit the original author in some way.</span></p>
<p style="line-height: 14.25pt;"><span style="font-family: Calibri; color: #333333;">New videos are added regularly. There is no subscription and no download limitation.</span></p>


TheStocks &#038; Mazwai: Great image/video resources

【WordPress】WordPress Popular Postsでサムネイル画像を指定サイズのものに差し替える方法

<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デザイントレンド

HTML5のCanvasの画像処理に挑戦(透過率の変更)

<p>最近はちょっとした動きはもちろん、今までjavascriptで制御していた動きもcssでできるようになってきました。</p>
<p>css3も含めて、動かすプロパティはいっぱいあるのですが、正直把握しきれていないのと、実際どういう動きをするかわからないのもあります。</p>
<p>自分でいろいろ試すのも面白いのですが、<br />
動きのパターンをたくさん用意してくれているサイト(フレームワークになるのかな)を紹介します。</p>
<p>まずはhoverの動きです。</p>
<h2>Hover.css</h2>
<p>様々なパターンが用意されているので、そのまま使ってみたり、<br />
ここから発想させて自分なりの動きを考えてみたりできるかと思います！</p>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-6457" src="/uploads-archive/2014/12/Hover.css-A-collection-of-CSS3-powered-hover-effects-1024x583.jpg" alt="Hover.css - A collection of CSS3 powered hover effects" width="640" height="365" srcset="/uploads-archive/2014/12/Hover.css-A-collection-of-CSS3-powered-hover-effects-1024x583.jpg 1024w, /uploads-archive/2014/12/Hover.css-A-collection-of-CSS3-powered-hover-effects-300x170.jpg 300w, /uploads-archive/2014/12/Hover.css-A-collection-of-CSS3-powered-hover-effects-228x129.jpg 228w, /uploads-archive/2014/12/Hover.css-A-collection-of-CSS3-powered-hover-effects.jpg 1160w" sizes="(max-width: 640px) 100vw, 640px" /></p>
<p><a href="http://ianlunn.github.io/Hover/" target="_blank">Hover.css &#8211; A collection of CSS3 powered hover effects</a></p>
<p>次はクリックでの動きです。</p>
<h2>magic_animations</h2>
<p>hover.cssと同様、様々なパターンが用意されています。<br />
これを見て、動きを考えるのがいいですね！</p>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-6458" src="/uploads-archive/2014/12/Magic-Animations-CSS3-1024x583.jpg" alt="Magic Animations CSS3" width="640" height="365" srcset="/uploads-archive/2014/12/Magic-Animations-CSS3-1024x583.jpg 1024w, /uploads-archive/2014/12/Magic-Animations-CSS3-300x170.jpg 300w, /uploads-archive/2014/12/Magic-Animations-CSS3-228x129.jpg 228w, /uploads-archive/2014/12/Magic-Animations-CSS3.jpg 1160w" sizes="(max-width: 640px) 100vw, 640px" /></p>
<p><a href="http://www.minimamente.com/example/magic_animations/" target="_blank">Magic Animations CSS3</a></p>
<p>webサイトのアクセントとしてこのような動きがあるだけでも、<br />
だいぶ違って見えるので、サイトのリッチ感がアップして見えますね。</p>
<p>デザインの発想にも使えるので見てるだけでも楽しいです！</p>


css3だけでhoverやclickの動きを豪華にしよう！

cssを使ったちょっとしたテクニック

jQuery-Timepicker-AddonにDatepickerみたいなアイコンボタンを付ける方法

<p>いわゆるFlexibleBoxとかFlexBoxとか呼ばれてるみたいなんですが、こちらまだ実践で使ったことがないので、試しに使ってみました。</p>
<p>こちらはcss3なので最新のブラウザしか対応してなくて、IE９ですら対応してないようなので、実践には向かないかと思います。</p>
<p>こちらはその名の通り、レイアウトをフレキシブルにできるもので、今までカラムをfloatを使っていたものをこちらのプロパティでできるというものです。<br />
考え方としてはtableと似てると思います。</p>
<p><a href="http://www.w3.org/TR/2014/WD-css-flexbox-1-20140325/#propdef-justify-content" target="_blank">CSS Flexible Box Layout Module Level 1</a></p>
<p>とりあえずデモがありますのでそちらをご覧ください。</p>
<p>グロナビと、メインビジュアル下のコンテンツに使用しています。</p>
<p><a href="/demo/abe/50/" class="demo" target="_blank">DEMO</a></p>
<p>htmlは以下のようになります。</p>
<p></p>

		<div id="crayon-64954015800e3321432114" 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;ul class="gnavi"&gt;
            	&lt;li class="navi01"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
                &lt;li class="navi02"&gt;&lt;a href="#"&gt;About us&lt;/a&gt;&lt;/li&gt;
                &lt;li class="navi03"&gt;&lt;a href="#"&gt;Service&lt;/a&gt;&lt;/li&gt;
                &lt;li class="navi04"&gt;&lt;a href="#"&gt;Work&lt;/a&gt;&lt;/li&gt;
                &lt;li class="navi05"&gt;&lt;a href="#"&gt;Recruit&lt;/a&gt;&lt;/li&gt;
                &lt;li class="navi06"&gt;&lt;a href="#"&gt;Blog&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&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-64954015800e3321432114-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954015800e3321432114-2">2</div><div class="crayon-num" data-line="crayon-64954015800e3321432114-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954015800e3321432114-4">4</div><div class="crayon-num" data-line="crayon-64954015800e3321432114-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954015800e3321432114-6">6</div><div class="crayon-num" data-line="crayon-64954015800e3321432114-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954015800e3321432114-8">8</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-64954015800e3321432114-1"><span class="crayon-r ">&lt;ul </span><span class="crayon-e ">class</span>=<span class="crayon-s ">"gnavi"</span><span class="crayon-r ">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64954015800e3321432114-2"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;	</span><span class="crayon-r ">&lt;li </span><span class="crayon-e ">class</span>=<span class="crayon-s ">"navi01"</span><span class="crayon-r ">&gt;</span><span class="crayon-r ">&lt;a </span><span class="crayon-e ">href</span>=<span class="crayon-s ">"#"</span><span class="crayon-r ">&gt;</span><span class="crayon-i ">Home</span><span class="crayon-r ">&lt;/a&gt;</span><span class="crayon-r ">&lt;/li&gt;</span></div><div class="crayon-line" id="crayon-64954015800e3321432114-3"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;li </span><span class="crayon-e ">class</span>=<span class="crayon-s ">"navi02"</span><span class="crayon-r ">&gt;</span><span class="crayon-r ">&lt;a </span><span class="crayon-e ">href</span>=<span class="crayon-s ">"#"</span><span class="crayon-r ">&gt;</span><span class="crayon-i ">About us</span><span class="crayon-r ">&lt;/a&gt;</span><span class="crayon-r ">&lt;/li&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64954015800e3321432114-4"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;li </span><span class="crayon-e ">class</span>=<span class="crayon-s ">"navi03"</span><span class="crayon-r ">&gt;</span><span class="crayon-r ">&lt;a </span><span class="crayon-e ">href</span>=<span class="crayon-s ">"#"</span><span class="crayon-r ">&gt;</span><span class="crayon-i ">Service</span><span class="crayon-r ">&lt;/a&gt;</span><span class="crayon-r ">&lt;/li&gt;</span></div><div class="crayon-line" id="crayon-64954015800e3321432114-5"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;li </span><span class="crayon-e ">class</span>=<span class="crayon-s ">"navi04"</span><span class="crayon-r ">&gt;</span><span class="crayon-r ">&lt;a </span><span class="crayon-e ">href</span>=<span class="crayon-s ">"#"</span><span class="crayon-r ">&gt;</span><span class="crayon-i ">Work</span><span class="crayon-r ">&lt;/a&gt;</span><span class="crayon-r ">&lt;/li&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64954015800e3321432114-6"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;li </span><span class="crayon-e ">class</span>=<span class="crayon-s ">"navi05"</span><span class="crayon-r ">&gt;</span><span class="crayon-r ">&lt;a </span><span class="crayon-e ">href</span>=<span class="crayon-s ">"#"</span><span class="crayon-r ">&gt;</span><span class="crayon-i ">Recruit</span><span class="crayon-r ">&lt;/a&gt;</span><span class="crayon-r ">&lt;/li&gt;</span></div><div class="crayon-line" id="crayon-64954015800e3321432114-7"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;li </span><span class="crayon-e ">class</span>=<span class="crayon-s ">"navi06"</span><span class="crayon-r ">&gt;</span><span class="crayon-r ">&lt;a </span><span class="crayon-e ">href</span>=<span class="crayon-s ">"#"</span><span class="crayon-r ">&gt;</span><span class="crayon-i ">Blog</span><span class="crayon-r ">&lt;/a&gt;</span><span class="crayon-r ">&lt;/li&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64954015800e3321432114-8"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;/ul&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<p>これに対してcssは、</p>
<p></p>

		<div id="crayon-64954015800e8318036862" 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;">
.gnavi
{
	margin-top: -3px;
	display: flex;
	display: -webkit-flex;
	justify-content: space-around;
    -webkit-justify-content: space-around;
}
.gnavi li
{
	flex: auto;
    -webkit-flex: auto;
	border-top: 3px solid #444;
	border-bottom: 3px solid #fff;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	
}</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-64954015800e8318036862-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954015800e8318036862-2">2</div><div class="crayon-num" data-line="crayon-64954015800e8318036862-3">3</div><div class="crayon-num crayon-marked-num crayon-top crayon-striped-num" data-line="crayon-64954015800e8318036862-4">4</div><div class="crayon-num crayon-marked-num" data-line="crayon-64954015800e8318036862-5">5</div><div class="crayon-num crayon-marked-num crayon-striped-num" data-line="crayon-64954015800e8318036862-6">6</div><div class="crayon-num crayon-marked-num crayon-bottom" data-line="crayon-64954015800e8318036862-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954015800e8318036862-8">8</div><div class="crayon-num" data-line="crayon-64954015800e8318036862-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954015800e8318036862-10">10</div><div class="crayon-num crayon-marked-num crayon-top" data-line="crayon-64954015800e8318036862-11">11</div><div class="crayon-num crayon-marked-num crayon-bottom crayon-striped-num" data-line="crayon-64954015800e8318036862-12">12</div><div class="crayon-num" data-line="crayon-64954015800e8318036862-13">13</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954015800e8318036862-14">14</div><div class="crayon-num" data-line="crayon-64954015800e8318036862-15">15</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954015800e8318036862-16">16</div><div class="crayon-num" data-line="crayon-64954015800e8318036862-17">17</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954015800e8318036862-18">18</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-64954015800e8318036862-1"><span class="crayon-k ">.gnavi</span></div><div class="crayon-line crayon-striped-line" id="crayon-64954015800e8318036862-2"><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-64954015800e8318036862-3"><span class="crayon-h">	</span><span class="crayon-e ">margin-top</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">-3px</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-marked-line crayon-top crayon-striped-line" id="crayon-64954015800e8318036862-4"><span class="crayon-h">	</span><span class="crayon-e ">display</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">flex</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-marked-line" id="crayon-64954015800e8318036862-5"><span class="crayon-h">	</span><span class="crayon-e ">display</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">-webkit-flex</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-marked-line crayon-striped-line" id="crayon-64954015800e8318036862-6"><span class="crayon-h">	</span><span class="crayon-e ">justify-content</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">space-around</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-marked-line crayon-bottom" id="crayon-64954015800e8318036862-7"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-e ">-webkit-justify-content</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">space-around</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64954015800e8318036862-8"><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-64954015800e8318036862-9"><span class="crayon-k ">.gnavi li</span></div><div class="crayon-line crayon-striped-line" id="crayon-64954015800e8318036862-10"><span class="crayon-sy">{</span></div><div class="crayon-line crayon-marked-line crayon-top" id="crayon-64954015800e8318036862-11"><span class="crayon-h">	</span><span class="crayon-e ">flex</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">auto</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-marked-line crayon-bottom crayon-striped-line" id="crayon-64954015800e8318036862-12"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-e ">-webkit-flex</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">auto</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64954015800e8318036862-13"><span class="crayon-h">	</span><span class="crayon-e ">border-top</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">3px</span><span class="crayon-h"> </span><span class="crayon-i ">solid</span><span class="crayon-h"> </span><span class="crayon-i ">#444</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64954015800e8318036862-14"><span class="crayon-h">	</span><span class="crayon-e ">border-bottom</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">3px</span><span class="crayon-h"> </span><span class="crayon-i ">solid</span><span class="crayon-h"> </span><span class="crayon-i ">#fff</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64954015800e8318036862-15"><span class="crayon-h">	</span><span class="crayon-e ">-webkit-transition</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">all</span><span class="crayon-h"> </span><span class="crayon-i ">0.3s</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64954015800e8318036862-16"><span class="crayon-h">	</span><span class="crayon-e ">-moz-transition</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">all</span><span class="crayon-h"> </span><span class="crayon-i ">0.3s</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64954015800e8318036862-17"><span class="crayon-h">	</span></div><div class="crayon-line crayon-striped-line" id="crayon-64954015800e8318036862-18"><span class="crayon-sy">}</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<p>親要素に<strong>display: flex;</strong>を設定するだけで横並びレイアウトが簡単にできます！<br />
あとは、<strong>justify-contentやflex</strong>の値を変更すると、幅や余白の調整ができます。</p>
<p>ちなみに、<strong>justify-content</strong>のプロパティとイメージは以下になります。<br />
<img decoding="async" src="http://www.w3.org/TR/2014/WD-css-flexbox-1-20140325/images/flex-pack.svg"><br />
参照：<a href="http://www.w3.org/TR/2014/WD-css-flexbox-1-20140325/#propdef-justify-content" target="_blank">CSS Flexible Box Layout Module Level 1</a></p>
<p>もっと複雑かつ細かく設定できるのですが、本記事ではここまでとさせていただきます。<br />
横並びだけでなく、縦の並びもできるようで、縦中央や縦均等で並べたり、今までなかなかできなかったことが簡単にできるようにもなります。</p>
<p>その辺はまたいずれご説明したいと思います。</p>

css3のFlexible Box Layout Moduleで横並びレイアウトが簡単に！

<p>言わずと知れたWordpressでございますが、こちらみなさんご存知のことと思いますが、どこの会社が運営しているかまでは把握してる人はそう多くはないと思います。</p>
<p>wordpressの生みの親は、<a href="http://automattic.com/" target="_blank">Automattic</a>という会社です。<br />
まぁ知ったところで一体なんなんだという話かもしれませんが、こちらの会社さん、さすがというべきか他にもいろんなサービス運営しておりましたので、そちらを紹介したいと思います。</p>
<h2>Automattic運営しているサービス(抜粋)</h2>
<p>数多くあるのですが(全体の半分くらいはwordpressと関連があるサービスだと思います。)、今回は簡単に5つ程にしたいと思います。</p>
<h3>WordPress.com</h3>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-6338" src="/uploads-archive/2014/11/4c0dedf74cd1c67506273b59bb56bb65.jpg" alt="WordPress.com-無料のサイトやブログを作成" width="630" height="399" srcset="/uploads-archive/2014/11/4c0dedf74cd1c67506273b59bb56bb65.jpg 1065w, /uploads-archive/2014/11/4c0dedf74cd1c67506273b59bb56bb65-300x190.jpg 300w, /uploads-archive/2014/11/4c0dedf74cd1c67506273b59bb56bb65-1024x649.jpg 1024w, /uploads-archive/2014/11/4c0dedf74cd1c67506273b59bb56bb65-228x144.jpg 228w" sizes="(max-width: 630px) 100vw, 630px" /><br />
こちらよく混合される方がいるらしく、<a href="https://ja.wordpress.org/" target="_blank">WordPress.org</a>とは違い、無料でブログを作成できるサービスになります。アメブロみたいな感じでしょうか。<br />
Worpressをサーバーにインストールして、自分でテーマ作成してっていうのができない、やりたくない方向けですね！</p>
<p><a href="https://ja.wordpress.com/" target="_blank">WordPress.com</a></p>
<h3>Simplenote</h3>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-6337" src="/uploads-archive/2014/11/Simplenote-1024x649.jpg" alt="Simplenote" width="630" height="399" srcset="/uploads-archive/2014/11/Simplenote-1024x649.jpg 1024w, /uploads-archive/2014/11/Simplenote-300x190.jpg 300w, /uploads-archive/2014/11/Simplenote-228x144.jpg 228w, /uploads-archive/2014/11/Simplenote.jpg 1065w" sizes="(max-width: 630px) 100vw, 630px" /><br />
こちらはその名の通り、シンプルなノートです。<br />
Evernoteをさらにシンプルにし多様な感じで、ノートのみの機能をもったサービスです。<br />
僕はこのシンプルさが結構好きなので使用しております。<br />
PC、タブレット、スマホで同期でき、さらに起動が早いのでなかなか良い感じです。<br />
基本的には無料で使用できます。</p>
<p><a href="http://simplenote.com/" target="_blank">Simplenote</a></p>
<h3>Cloudup</h3>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-6335" src="/uploads-archive/2014/11/Cloudup.jpg" alt="Cloudup" width="630" height="399" srcset="/uploads-archive/2014/11/Cloudup.jpg 1065w, /uploads-archive/2014/11/Cloudup-300x190.jpg 300w, /uploads-archive/2014/11/Cloudup-1024x649.jpg 1024w, /uploads-archive/2014/11/Cloudup-228x144.jpg 228w" sizes="(max-width: 630px) 100vw, 630px" /><br />
ここからは僕は使用したことないのですが、<br />
ファイル共有サービスのようで、映像、写真、音楽、リンク、ドキュメントを素早く簡単に共有できるようです。<br />
1000アイテム、200GBまでは無料で使えるようです。<br />
ただ、現在(2014年11月18日)は招待制になっています。<br />
公開されたらぜひ使ってみたいサービスです。</p>
<p><a href="https://cloudup.com/" target="_blank">Cloudup</a></p>
<h3>Simperium</h3>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-6336" src="/uploads-archive/2014/11/Simperium-1024x649.jpg" alt="Simperium" width="630" height="399" srcset="/uploads-archive/2014/11/Simperium-1024x649.jpg 1024w, /uploads-archive/2014/11/Simperium-300x190.jpg 300w, /uploads-archive/2014/11/Simperium-228x144.jpg 228w, /uploads-archive/2014/11/Simperium.jpg 1065w" sizes="(max-width: 630px) 100vw, 630px" /><br />
こちらはサービスというかAPIなのでしょうか？<br />
開発者向けのサービスでデータをPC、タブレット、スマホ、のデータを即座に同期させることができるようになるサービスのようです。<br />
上記のサービスで使用しているライブラリの提供といった感じでしょうか。<br />
アクティブユーザーによって月額の費用が変わるようです。</p>
<p><a href="https://simperium.com/" target="_blank">Simperium</a></p>
<h3>BuddyPress</h3>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-6334" src="/uploads-archive/2014/11/BuddyPress.org_-1024x649.jpg" alt="BuddyPress.org" width="630" height="399" srcset="/uploads-archive/2014/11/BuddyPress.org_-1024x649.jpg 1024w, /uploads-archive/2014/11/BuddyPress.org_-300x190.jpg 300w, /uploads-archive/2014/11/BuddyPress.org_-228x144.jpg 228w, /uploads-archive/2014/11/BuddyPress.org_.jpg 1065w" sizes="(max-width: 630px) 100vw, 630px" /><br />
こちらはwordpressのプラグインで、wordpressで作るサイトを<br />
SNSのようなサイトにできるシロモノです。<br />
料金はかかりません！</p>
<p><a href="https://buddypress.org/" target="_blank">BuddyPress.org</a></p>
<p>使い方に関しては以下のリンクを参考にしてください！</p>
<p><a href="http://www.webcreatorbox.com/tech/wordpress-plugin-buddypress/" target="_blank">WordPressプラグイン「BuddyPress」でSNSサイトを作成 | Webクリエイターボックス</a></p>
<p><a href="http://matome.naver.jp/odai/2129933933835561001" target="_blank">WordPressで作るSNS BuddyPressの活用方法 &#8211; NAVER まとめ</a></p>
<p>弊社もLaunchCartというサービス(?)をやっていますが、また新たに違うサービスをやってみたいですね〜</p>


wordpressの生みの親「Automattic」には他にもいいサービスがあった

<p>私がHTMLについて勉強を始めた頃はXHTML1.0が主流として使われており、</p>
<p>XHTMLでは要素（タグ）がインライン要素とブロック要素の2種類だけに分かれていて、</p>
<p>「インライン要素の中にブロック要素を入れてはいけない」「インライン要素は意味を持つブロック要素で囲む必要がある」といったことを念頭に入れていればコーディングで大きな間違いはなかったのですが、</p>
<p>&nbsp;</p>
<p>HTML5でコンテンツモデルという新たな要素の分類基準が設けられてからは、</p>
<p>a要素でブロック要素と呼ばれていたグループの要素を囲むことが可能になったりするなど、</p>
<p>要素の囲み方のルールが複雑になりました。</p>
<p>&nbsp;</p>
<p>tableの直下にはtbody, thead, trのいずれかしか配置してはいけないなど、</p>
<p>基本的な各要素の囲み方のルールはXHTMLと替わらないのですが、</p>
<p>「a要素で囲むことができるのはどこまで？」「spanやstrongのルールは変わったの？」</p>
<p>といった、HTML5からの新たなルールがどのようなものかわからないと、</p>
<p>間違ったコーディングをしてしまうことは避けられないので、</p>
<p>今回具体的に調べてみることにしました。</p>
<p>&nbsp;</p>
<p>参考サイト</p>
<p><a class="link" href="http://ascii.jp/elem/000/000/628/628869/" target="_blank">浜 俊太朗のHTML5マークアップ移行ガイド</a></p>
<p><a class="link" href="http://www.htmq.com/html5/007.shtml" target="_blank">HTML5における要素の分類（コンテンツ・モデル）－HTML5リファレンス</a></p>
<p><a class="link" href="http://www.w3.org/TR/2010/WD-html5-20101019/content-models.html" target="_blank">3.2.5 Content models — HTML5 </a></p>
<p>&nbsp;</p>
<p>参考図書</p>
<p><a class="link" href="http://www.amazon.co.jp/dp/4048660705" target="_blank">『HTML5マークアップ 現場で使える最短攻略ガイド』 浜俊太朗(著) 2013.12</a></p>
<p>&nbsp;</p>
<h2>HTML5のコンテンツモデルとは？</h2>
<p>コンテンツモデルとは、簡単に言うと、</p>
<p>「どの分類の要素が、どの分類の要素を含むことができるのか」というルールのことです。</p>
<p>HTML5では要素が14種類に分類されています。</p>
<p>&nbsp;</p>
<p>とはいえ、それぞれの要素が1つずつ分類を持っているのではなく、複数の分類を持ちます。</p>
<p>たとえば、h1要素は「フレージングコンテンツ」という<strong>コンテンツモデル</strong>に分類されており、</p>
<p>「フローコンテンツ」、「ヘッディングコンテンツ」という<strong>カテゴリー</strong>に属します。</p>
<p>&nbsp;</p>
<p>h1要素の場合、フレージングコンテンツというコンテンツモデルであり、</p>
<p>フレージングコンテンツのカテゴリーに属する要素のみを含むことができます。</p>
<p>&nbsp;</p>
<p>つまり、「どのコンテンツモデルが、どのカテゴリーの要素を含むことができるか」というルールが、</p>
<p>コンテンツモデルの基本になります。</p>
<p>&nbsp;</p>
<p>しかしながら、HTML5のコンテンツモデルはこの限りではなく、全部で次の７つのパターンがあります。</p>
<ol>
<li>カテゴリー単位で定義: h1, span etc.</li>
<li>カテゴリー単位で定義(条件つき): header, button etc.</li>
<li>特定の内容のみ入れられる: table, ul etc.</li>
<li>特定の内容のみ入れられる(条件つき): dl etc.</li>
<li>他の要素を入れられない: img, br etc.</li>
<li>親要素の条件を引き継ぐ: del, ins etc.</li>
<li>親要素の条件を引き継ぐ(条件付き): a, iframe etc.</li>
</ol>
<p>つまり、ある程度の基本的なルールはあるが、</p>
<p>各要素の特性によって含むことができる要素がそれぞれ限られているということのようです。</p>
<p>&nbsp;</p>
<p>とはいっても、この特性は、</p>
<p>「tableの直下にはtrやtbodyのようなテーブル関係の要素しか入れられない」</p>
<p>「dlには最低1つのdtとそれに続く１つ以上のddを入れなければならない」</p>
<p>「フレージングコンテンツのコンテンツモデルであるbuttonのような操作できる要素(インタラクティブコンテンツ)には、</p>
<p>フレージングコンテンツのカテゴリであってもaやiframeのような同じく操作できる要素を含むことはできない」</p>
<p>といった、</p>
<p>それぞれの要素の意味や基本的な使い方が理解できていれば迷うことのないものばかりですので、</p>
<p>そこまで複雑に考える必要はないと言えます。</p>
<p>&nbsp;</p>
<p>それでは、コンテンツモデルの基本になるカテゴリーとコンテンツモデルについて、具体的にご紹介いたします。</p>
<h2>カテゴリーと要素</h2>
<h3>メタデータコンテンツ(Metadata content)</h3>
<p>おもにhead要素に入る、メタデータやスタイル・スクリプトといった、基本的に描画されない要素です。</p>
<p>このカテゴリの要素: base, link, meta, noscript, script, style, title</p>
<p>&nbsp;</p>
<h3>フローコンテンツ(Flow content)</h3>
<p>文書に使われるほとんどの要素です。</p>
<p>このカテゴリーの要素: <em>a, abbr, address, area, article, aside, audio, b, bdo, blockquote, br, button, canvas, cite, code, command, datalist, del, details, dfn, div, dl, em, embed, fieldset, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, i, iframe, img, input, ins, kbd, keygen, label, link, map, mark, math, menu, meta, meter, nav, noscript, object, ol, output, p, pre, progress, q, ruby, s, samp, script, section, select, small, span, strong, style, sub, sup, svg, table, textarea, time, ul, var, video, wbr, テキスト</em></p>
<p>&nbsp;</p>
<h3>セクショニングコンテンツ(Sectioning content)</h3>
<p>セクションの範囲を定義する要素です。</p>
<p>このカテゴリの要素: <em>article, aside, nav, section</em></p>
<p>&nbsp;</p>
<h3>ヘッディングコンテンツ(Heading content)</h3>
<p>セクションのヘッダー(見出し)を表す要素です</p>
<p>このカテゴリの要素:<em> h1, h2, h3, h4, h5, h6 (hgroupは廃止)</em></p>
<p>&nbsp;</p>
<h3>フレージングコンテンツ(Phrasing content)</h3>
<p>文書のテキストを表す要素です。この要素の多くがフレージングコンテンツのコンテンツモデルとなります。</p>
<p>以前インライン要素と呼ばれていた要素の多くがこの要素にあたります。</p>
<p>このカテゴリの要素: <em>a, abbr, area, audio, b, bdo, br, button, canvas, cite, code, command, datalist, del, dfn, em, embed, i, iframe, img, input, ins, kbd, keygen, label, link, map, mark, math, meta, meter, noscript, object, output, progress, q, ruby, s, samp, script, select, small, span, strong, sub, sup, svg, textarea, time, var, video, wbr, テキスト</em></p>
<p>&nbsp;</p>
<h3>エンベッディッドコンテンツ(Embedded content)</h3>
<p>文書に他のリソース(画像や動画)を埋め込んだり、他の語彙(svgなど)を挿入したりする要素です。</p>
<p>このカテゴリの要素: <em>audio, canvas, embed, iframe, img, math, object, svg, video</em></p>
<p>&nbsp;</p>
<h3>インタラクティブコンテンツ(Iteractive content)</h3>
<p>ユーザーが操作できる要素です。</p>
<p>このカテゴリの要素: <em>a, audio, button, details, embed, iframe, img, input, keygen, label, menu, object, select, textarea, video</em></p>
<p>&nbsp;</p>
<h3>パルパブルコンテンツ(Palpable content)</h3>
<p>具体的な意味を持つ要素のことです。</p>
<p>br要素やhr要素のような、具体的な意味を持たない要素はこのコンテンツから省かれます。</p>
<p>フローティングコンテンツやフレージングコンテンツのコンテンツモデルをもつ要素は、</p>
<p>hidden属性の指定されていないパルパブルコンテンツを含まなければならないと定義されています。</p>
<p>このカテゴリの要素: <em>a, abbr, address, article, aside, audio(controls属性を持つ場合), b, bdi, bdo, blockquote, button, canvas, cite, code, data, details, dfn, div, dl(dtとddが一組以上ある場合), em, embed, fieldset, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, i, iframe, img, input(type属性の値がhiddenでない場合), ins, kbd, keygen, label, map, mark, math, menu(type属性の値がtoolbarかlistの場合), meter, nav, object, ol(子要素に一つ以上のli要素を持つ場合), output, p, pre, progress, q, ruby, s, samp, section, select, small, span, strong, sub, sup, svg, table, textarea, time, u, ul(子要素に一つ以上のli要素を持つ場合), var, video, テキスト(半角スペースのみは除く)</em></p>
<p>&nbsp;</p>
<p><a href="http://ascii.jp/elem/000/000/628/628869/" target="_blank">こちら</a>のサイトで、それぞれの要素の具体的なルールが紹介されていますので、</p>
<p>是非、参考になされてください。</p>


インライン要素・ブロック要素に替わるHTML5のコンテンツモデルとは？

クールでカッコイイいろんな機能満載のスライダー「Slider Pro」jqueryプラグイン

<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>私の職場ではラジオをつけっぱなしにしているのですが、最近「石川遼選手も使っている」という例のスピードラーニングのラジオCMがよく流れます。”聞き流すだけで大丈夫”とか、”石川遼も英語ができるようになった”と言われるとちょっと気になるので調べてみました。</p>
<p>気になるのはやはり料金と効果です。</p>
<p>実際いくらくらいするものなのかと、公式ページを開いてみると、初回で例のCD2枚とテキストなどがいくつかついて9400円（税別）、さらに毎月4300円（税別）で新しいCDが届くとの事。</p>
<p>もし一年間続けたら6万円オーバー！ちょっと高いですよね・・・。なんと最終的には50枚ほどあるそうです・・・値段高すぎです。</p>
<p>じゃあ効果についてはどうなんだ？という事で動画でアップしている人がいたので確認してみたところセンテンスや会話の内容が日本語と英語の両方で流れるといった感じです。</p>
<p>実際、聞き流すだけで大丈夫とは思いませんが電車の中など移動しながら聞いたりするのには良さそうです。確かにあまり苦にならない感じがしました。</p>
<p>とは言え高すぎます！もっと安くて同じような英語の教材はないものかとネットで調べたり、書店に行って探したりしたところ、、、何ことはない、安くていいのがありました！</p>
<p>せっかくなので紹介させて頂きます。</p>
<p>&nbsp;</p>
<h6>おそらく値段は10分の１くらい　韓国の英語教材</h6>
<p>私が見つけたのはCD付きの書籍で「英会話リアルパターン５００+」というタイトルです。</p>
<p><iframe loading="lazy" width="300" height="150" style="width: 120px; height: 240px;" src="http://rcm-fe.amazon-adsystem.com/e/cm?t=ebakam-22&amp;o=9&amp;p=8&amp;l=as1&amp;asins=486454039X&amp;ref=qf_sp_asin_til&amp;fc1=000000&amp;IS2=1&amp;lt1=_blank&amp;m=amazon&amp;lc1=0000FF&amp;bc1=000000&amp;bg1=FFFFFF&amp;f=ifr" scrolling="no" marginwidth="0" marginheight="0" frameborder="0"></iframe></p>
<p>著者はイ・ヴアンスという韓国の人です。元々韓国でかなり売れた本らしく、その後日本でも翻訳されたとの事です。</p>
<p>そもそも日本語も韓国語も文法的には英語と逆で同じなのに、韓国の人は英語が結構しゃべれるという印象があります。そんな理由もあって海外ではどう勉強しているのかも気になったので手にとりました。</p>
<p>ついてくるCDは日本語の後に英語が流れます。正直、例の教材より良い気がしました。</p>
<p>内容は、実際に会話の中で良く使う言い回しのパターンを繰り返していくという物です。１つのパターンについて5種類くらいの例文が流れたあとに、少し長めの会話文が流れます。</p>
<p>価格も安いし、文章的ではなく会話表現が集められているので、英語を話す事に重きを置く人や海外ドラマを字幕なしで観たいなんて人に丁度いいと思います。</p>
<p>オススメの勉強法は、例文の日本の後にCDと一緒に話してみるという方法です。</p>
<p>&nbsp;</p>
<p>ビジネス編とドラマ編もあります。私は最近ドラマ編を聞きながら通勤をしています。</p>
<p>一人でブツブツ言いながら歩いていると若干怪しく見えますが、かなりいい勉強になります。</p>
<p><iframe loading="lazy" width="300" height="150" style="width: 120px; height: 240px;" src="http://rcm-fe.amazon-adsystem.com/e/cm?t=ebakam-22&amp;o=9&amp;p=8&amp;l=as1&amp;asins=4864540438&amp;ref=qf_sp_asin_til&amp;fc1=000000&amp;IS2=1&amp;lt1=_blank&amp;m=amazon&amp;lc1=0000FF&amp;bc1=000000&amp;bg1=FFFFFF&amp;f=ifr" scrolling="no" marginwidth="0" marginheight="0" frameborder="0"></iframe></p>
<p><iframe loading="lazy" width="300" height="150" style="width: 120px; height: 240px;" src="http://rcm-fe.amazon-adsystem.com/e/cm?t=ebakam-22&amp;o=9&amp;p=8&amp;l=as1&amp;asins=4864540403&amp;ref=qf_sp_asin_til&amp;fc1=000000&amp;IS2=1&amp;lt1=_blank&amp;m=amazon&amp;lc1=0000FF&amp;bc1=000000&amp;bg1=FFFFFF&amp;f=ifr" scrolling="no" marginwidth="0" marginheight="0" frameborder="0"></iframe></p>


Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

記事一覧 - タグ: #デザイナー

2015/01/21

2015/01/14

2015/01/14

2015/01/08

2015/01/08

2014/12/17

2014/12/17

2014/12/17

2014/12/10

2014/12/09

2014/12/04

2014/11/26

2014/11/26

2014/11/19

2014/11/19

2014/11/12

2014/11/12

2014/11/12