<p>コンビニやスーパーマーケットでの商品配置はお客さんの行動心理を読み取った配置になっているとよく聞きます。繁盛している雰囲気を出すために、コンビニの雑誌売り場を外から見える場所に配置して立ち読み客を賑やかしになってもらうというのは有名です。</p>
<p>小売店において行動心理を応用した配置はとても一般的になっているので、リアル店舗同様、ＥＣサイトのデザインにも行動心理を考慮するのは必須だと思います。運営サイトの売上を伸ばすためにせっかくなので利用しようと思ったものをまとめてみます。</p>
<h2>画像の配置</h2>
<p><a href="/uploads-archive/2015/01/center_effect.jpg"><img decoding="async" loading="lazy" class="alignnone  wp-image-6632" src="/uploads-archive/2015/01/center_effect.jpg" alt="center_effect" width="703" height="133" /></a></p>
<p>上に並んでいるのは「おせち」の写真ですが、あなたはどのおせちを選びますか？</p>
<p>&nbsp;</p>
<p>このように水平に画像を並べた場合、中央に配置された画像を選ぶ傾向が強くなるそうです、これは「センターステージエフェクト」と呼ばれます。</p>
<p>上の画像は横並びですが、これを縦に配置した場合でも同様に中央が選ばれる傾向が強くなるとの事です。</p>
<p>売りたい商品の画像は中央に置く方が良さそうです。</p>
<p>&nbsp;</p>
<h2>価格差がある場合</h2>
<p>通常のＥＣサイトではそれぞれ商品ごとに価格が異なるので、まずは価格がどの商品を選ぶかの主な理由になります。</p>
<p>&nbsp;</p>
<p>例えば、WEB上で画像素材を提供するサービスがあったとします。</p>
<p>下の二つのプランがあった場合、ユーザーは基本的に無料のプランを選ぶ傾向にあります。</p>
<p>ユーザーの内、有料プランを選ぶユーザーはひとにぎりなので、収益を上げにくく、価格を上げざるを得ない状態になり悪循環に陥る可能性もあります。</p>
<p><a href="/uploads-archive/2015/01/center_effect4.gif"><img decoding="async" loading="lazy" class="alignnone  wp-image-6658" src="/uploads-archive/2015/01/center_effect4.gif" alt="center_effect4" width="630" height="231" /></a></p>
<p>しかし 下のようにさらに高額なプランを作った場合はどうでしょうか。</p>
<p>２つしかプランがなかった時に比べて格段に有料プランを選ぶユーザーの数が増える傾向にあると言われています。</p>
<p><img decoding="async" loading="lazy" class="alignnone  wp-image-6644" src="/uploads-archive/2015/01/center_effect2.gif" alt="center_effect2" width="621" height="233" /></p>
<p>昔から日本人は松竹梅の竹を選ぶと言われますが、日本人に限らず海外でも同じ傾向があるようです。</p>


ECサイトのデザインに役立つ行動心理

<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

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

PDOでMysqlのトランザクション処理

<h2>Bootstrap用の星型レーティング実装</h2>
<p>商品のレビューに使えそうです。<br />
<a href="http://plugins.krajee.com/star-rating/demo" target="_blank">Demo</a> <a href="https://github.com/kartik-v/bootstrap-star-rating" target="_blank">Download</a></p>
<h2>好きなサイズの画像サムネイルが生成できる「jQThumb」</h2>
<p>画像の切り出しができそうです。<br />
<a href="http://pakcheong.github.io/jqthumb/" target="_blank">Demo &#038; Download</a></p>
<h2>カスタマイズ性の高いタグ入力用フィールド実装用軽量JS「tagEditor」</h2>
<p>何となくカッコいい！と思いました。ただし、サーバー側の連携を工夫しなかれば実用するのが難しいです。<br />
<a href="http://goodies.pixabay.com/jquery/tag-editor/demo.html" target="_blank">Demo &#038; Download</a></p>
<h2>フルスクリーンで縦横無尽に広がるページを構築できる「fullContent.js」</h2>
<p>これだけでまともなサイトが作れそうです。<br />
<a href="http://www.zehfernandes.com/jquery.fullContent/#home" target="_blank">Demo &#038; Download</a></p>


最近見つかった便利なjQueryプラグイン

<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

<p>今年の「Linux Journal Awards」が発表されたので、興味のあるものだけを転載されていただきます。<br />
英語は、わかりやすいものをそのまま、難しいのものを注釈されていただきます。<br />
知らないものがいっぱい出てきて刺激です。<br />
元リンクは<a href="http://www.linuxjournal.com/rc2014" target="_blank">ここ</a>です。</p>
<h2>Best Linux Distribution</h2>
<ol>
<li>Ubuntu 16.5%</li>
<li>Debian 16.4%</li>
<li>Linux Mint 11%</li>
<li>Arch Linux 8.5%</li>
<li>Fedora 8.3%</li>
<li>CentOS 6%</li>
<li>openSUSE 5.3%</li>
<li>Kubuntu 4.1%</li>
<li>Gentoo 2.9%</li>
<li>Slackware 2.7%</li>
<li>Xubuntu 2.5%</li>
<li>Other 2.3%</li>
<li>Red Hat Enterprise Linux 1.6%</li>
<li>NixOS 1.4%</li>
<li>elementary OS 1.3%</li>
<li>Lubuntu 1.2%</li>
<li>CrunchBang 1%</li>
<li>Mageia .7%</li>
<li>LXLE .4%</li>
<li>Tails .4%</li>
<li>Android-x86 .3%</li>
<li>Bodhi Linux .3%</li>
<li>Chakra .3%</li>
<li>Kali Linux .3%</li>
<li>PCLinuxOS .3%</li>
<li>SolydK .3%</li>
<li>Mandriva .1%</li>
<li>Oracle Linux .1%</li>
</ol>
<h2>Best Mobile Linux OS</h2>
<ol>
<li>Stock Android 37.1%</li>
<li>Sailfish OS 27.6%</li>
<li>CyanogenMod 20.2%</li>
<li>Other 3%</li>
<li>Ubuntu Phone 3%</li>
<li>Amazon Fire OS 1.5%</li>
<li>Ubuntu for Android 1.4%</li>
<li>Replicant .8%</li>
<li>Tizen .8%</li>
</ol>
<h2>Best Linux Tablet</h2>
<ol>
<li>Google Nexus 7 35.3%</li>
<li>Google Nexus 10 14.8%</li>
<li>Samsung Galaxy Tab 14%</li>
<li>Samsung Galaxy Note 9.8%</li>
<li>ASUS Transformer Pad 8.4%</li>
<li>Other 6.4%</li>
<li>Kindle Fire HD 4.7%</li>
<li>ASUS MeMO Pad 2%</li>
<li>Dell Venue 1.6%</li>
<li>Acer Iconia One 1.4%</li>
<li>Samsung Galaxy Note Edge .9%</li>
<li>Ekoore Python S3 .7%</li>
</ol>
<h2>Best Other Linux-Based Gadget (スマホとタブレット以外の装置)</h2>
<ol>
<li>Raspberry Pi 71.4%</li>
<li>BeagleBone Black 8.1%</li>
<li>Other 4.3%</li>
<li>Lego Mindstorms Ev3 3.7%</li>
<li>Moto 360 3.4%</li>
<li>Cubieboard 1.7%</li>
<li>Parrot A.R Drone 1.7%</li>
<li>Samsung Gear S 1.4%</li>
<li>Yamaha Motif XF8 1.1%</li>
<li>Nvidia Jetson-K1 Development System .8%</li>
<li>Cloudsto EVO Ubuntu Linux Mini PC .5%</li>
<li>VoCore Open Hardware Computer .5%</li>
<li>LG G Watch .4%</li>
<li>RaZberry .4%</li>
<li>VolksPC .4%</li>
<li>IFC6410 Pico-ITX Board .2%</li>
<li>JetBox 5300 .1%</li>
</ol>
<h2>Best Content Management System</h2>
<ol>
<li>WordPress 34.7%</li>
<li>Drupal 25.3%</li>
<li>Joomla! 11.1%</li>
<li>MediaWiki 10.5%</li>
<li>Other 10%</li>
<li>Alfresco 4.3%</li>
<li>WebGUI 1.3%</li>
<li>ikiwiki 1.1%</li>
<li>eZ publish .7%</li>
<li>Wolf CMS .4%</li>
<li>Elgg .3%</li>
<li>Blosxom .2%</li>
</ol>
<h2>Best Web Browser</h2>
<ol>
<li>Firefox 53.8%</li>
<li>Chrome 26.9%</li>
<li>Chromium 8.1%</li>
<li>Iceweasel 4%</li>
<li>Opera 3%</li>
<li>Other 2%</li>
<li>SeaMonkey .8%</li>
<li>rekonq .5%</li>
<li>dwb .4%</li>
<li>QupZill .4%</li>
<li>Dillo .2%</li>
</ol>
<h2>Best Cloud-Based File Storage</h2>
<ol>
<li>Dropbox 30.5%</li>
<li>ownCloud 23.6%</li>
<li>Google Drive 16%</li>
<li>rsync 8.3%</li>
<li>Other 7.5%</li>
<li>Amazon S3 6.6%</li>
<li>SpiderOak 4.4%</li>
<li>Box 1.8%</li>
<li>Copy 1%</li>
<li>AjaXplorer .3%</li>
</ol>
<h2>Best Virtualization Solution</h2>
<ol>
<li>Oracle VM VirtualBox 33.4%</li>
<li>VMware 22.3%</li>
<li>KVM 21.1%</li>
<li>XEN 5.7%</li>
<li>QEMU 5.3%</li>
<li>OpenStack 4.9%</li>
<li>Other 4.2%</li>
<li>OpenVZ 1.7%</li>
<li>Linux-VServer 1.3%</li>
<li>Symantec Workspace Virtualization .1%</li>
</ol>
<h2>Best Monitoring Application（システム監視）</h2>
<ol>
<li>Nagios 27.1%</li>
<li>Wireshark 20.7%</li>
<li>htop 12.3%</li>
<li>Zabbix 10.5%</li>
<li>Other 8.6%</li>
<li>Zenoss 6.2%</li>
<li>Munin 3.4%</li>
<li>PC Monitor 2.8%</li>
<li>New Relic 1.9%</li>
<li>Opsview 1.2%</li>
<li>SaltStack 1%</li>
<li>NTM (Network Traffic Monitor) .7%</li>
<li>xosview .7%</li>
<li>Manage Engine .5%</li>
<li>FlowViewer .3%</li>
<li>Circonus .2%</li>
<li>SysPeek .2%</li>
</ol>
<h2>Best DevOps Configuration Management Tool※</h2>
<ol>
<li> Git 39.4%</li>
<li>Puppet 17.2%</li>
<li>Ansible 8.9%</li>
<li>cron jobs 8.8%</li>
<li>Subversion 7.6%</li>
<li>Chef 5%</li>
<li>SaltStack 5.4%</li>
<li>Other 4.6%</li>
<li>CFEngine 3%</li>
</ol>
<h2>Best Programming Language</h2>
<ol>
<li>Python 30.2%</li>
<li>C++ 17.8%</li>
<li>C 16.7%</li>
<li>Perl 7.1%</li>
<li>Java 6.9%</li>
<li>Other 4.6%</li>
<li>Ruby 4.3%</li>
<li>Go 2.4%</li>
<li>JavaScript 2.4%</li>
<li>QML 2.2%</li>
<li>Fortran 1.4%</li>
<li>Haskell 1.4%</li>
<li>Lisp 1.2%</li>
<li>Erlang .6%</li>
<li>Rust .6%</li>
<li>D .4%</li>
<li>Hack .1%</li>
</ol>
<h2>Best Scripting Language</h2>
<ol>
<li>Python 37.1%</li>
<li>Bash/Shell scripts 27%</li>
<li>Perl 11.8%</li>
<li>PHP 8.4%</li>
<li>JavaScript 6.7%</li>
<li>Ruby 4.9%</li>
<li>Other 2.1%</li>
<li>Lua 2%</li>
</ol>
<h2>Best New Linux/Open-Source Product/Project</h2>
<ol>
<li>Docker 28%</li>
<li>Jolla and Sailfish OS 19%</li>
<li>LibreOffice 7%</li>
<li>ownCloud 5%</li>
<li>Steam 5%</li>
<li>Zenoss Control Center 5%</li>
<li>Raspberry Pi 4%</li>
<li>Git 4%</li>
<li>Apache Cordova/OpenOffice/Spark/Tika 3%</li>
<li>Ansible 2%</li>
<li>Elementary OS 2%</li>
<li>OpenStack 2%</li>
<li>Zabbix 2%</li>
<li>CoreOS 2%</li>
<li>Firefox OS 2%</li>
<li>KDE Connect 1%</li>
<li>NixOS and NixOps 1%</li>
<li>Open Media Vault 1%</li>
</ol>
<p>※開発と操作合わせてDevOpsといいます。</p>


2014 Linux Journal Awards

<p>ネットショップの運営をしていると、セミナーやツールの営業が電話やメールで数多くきます。</p>
<p>耳にしたことがある企業や団体が開催しているものは有料で、結構いい値段だったりすることが多いです。</p>
<p>無料で参加できるような物に限って運営している企業や団体がマイナーなためにどうしても如何わしい印象がしてしまいます。</p>
<p>そこで信用がもてそうな無料のオンライン講座を見つけたのでご紹介します。</p>
<p>&nbsp;</p>
<p><a href="/uploads-archive/2014/12/img_logo.gif"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-6527" src="/uploads-archive/2014/12/img_logo.gif" alt="img_logo" width="364" height="36" /></a></p>
<p>独法の<a href="http://www.smrj.go.jp/">中小企業基盤整備機構</a>が提供している「ネットショップ開店Ch」というオンライン講座です。</p>
<p>&nbsp;</p>
<p><a href="/uploads-archive/2014/12/header_img.jpg"><img decoding="async" loading="lazy" class="alignnone  wp-image-6530" src="/uploads-archive/2014/12/header_img.jpg" alt="header_img" width="622" height="260" srcset="/uploads-archive/2014/12/header_img.jpg 682w, /uploads-archive/2014/12/header_img-300x125.jpg 300w, /uploads-archive/2014/12/header_img-228x95.jpg 228w" sizes="(max-width: 622px) 100vw, 622px" /></a></p>
<p><a href="http://ec.smrj.go.jp/online/">中小機構「ネットショップ開店Ch」</a></p>
<p>&nbsp;</p>
<p>ターゲットは”これからネットショップを開店したい方々、また既存のネットショップの運営力をアップしたい方々”としています。</p>
<p>内容はかなり基本的な「ネットショップとは何か？」というところからスタートするので、既に運営を担当している方は途中からで良さそうですが、かなり丁寧な印象です。</p>
<p>３つのシリーズに分かれていて、１回１時間程度の動画を全２０回に渡って配信しています。</p>
<p><strong>■シリーズ1：ネットショップを開店するための基礎知識</strong></p>
<p><strong>■シリーズ2：ネットショップで売上を作るための基礎知識</strong></p>
<p><strong>■シリーズ３：ネットショップの運営テクニック</strong></p>
<p>第６回まで既に配信されていて、アーカイブで観る事ができます。次回は１２月１７日（水）に配信予定で、３月７日まで週に１回のペースで配信されます。</p>
<p>&nbsp;</p>
<p>ネットショップ初心者の女性出演者と一緒に学んでいくスタイルでメインの講師は「ネットショップのてらこや」代表の方です。他に47CLUB、ネットショップ総研、エンパワーショップが監修しています。</p>
<p>&nbsp;</p>
<p><iframe loading="lazy" width="560" height="315" src="//www.youtube.com/embed/EwLpl7QhMvg" frameborder="0" allowfullscreen="allowfullscreen"></iframe></p>
<p>webのリテラシーが高くない場合も想定して制作されているので、ECに関するツールやサービスを開発している企業が、顧客向けに教えてあげても良いかもしれません。</p>
<p>&nbsp;</p>
<p>youtubeのチャンネル</p>
<p><a href="https://www.youtube.com/user/smrjec">https://www.youtube.com/user/smrjec</a></p>
<p>&nbsp;</p>


（独）中小機構がネットショップのオンライン講座を無料でやっている

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

Twigの基本

<p>株式会社ジャストシステムがネット調査のサービスを利用して「ネット通販に関するアンケート」を実施しました。</p>
<p>アンケートの対象は「直近半年以内にネットショッピングを利用した」と回答した20代～50代の男女1,000名で,</p>
<p>2014年の11月17日に行われました。</p>
<p>調査結果の全体は有料？で閲覧できるようですが</p>
<p>下は調査結果の一部ですがこれだけでもなかなか興味深いです。</p>
<p><a href="https://www.fast-ask.com/report/report-netshopping-20141205.html#reportform"><img decoding="async" loading="lazy" class="alignnone  wp-image-6470" src="/uploads-archive/2014/12/report-netshopping-20141205.gif" alt="report-netshopping-20141205" width="522" height="397" /></a></p>
<p>「普段使いの商品」を購入する際に購入を後押しする要素は何かという問いについての結果です。</p>
<p>&nbsp;</p>
<h2>送料無料の効果はやはり大きい！</h2>
<p>この問に関して、最も影響が大きいのは「送料の有無」で５６．６％が非常に影響を与える、３３．８％が影響を与えると答えています。</p>
<p>つまり9割近くのお客さんは送料が無料なら買う可能性が上がるという事です。</p>
<p>&nbsp;</p>
<p>それに対してレビューなどの評価については２４．５％が非常に影響を与える、４５，７％が影響を与えると答えていて、合わせて約７５％です。</p>
<p>数字からすると無視できるものでは当然ありませんが、ショップとして優先すべきは送料を無料にする事の様です。</p>
<p>&nbsp;</p>
<h2> お得感が大切、定期的なセールは必須</h2>
<p>送料の有無、レビューなどの評価に続いて影響が大きいのは商品を購入した際に「付与されるポイントの有無」と「期間限定の割引の有無」です。どちらも７０%弱が影響があると答えています。</p>
<p>「ポイントの有無」にしても「期間限定の割引」にしても販売価格が一緒ならば、得した感を与えられる商品を選ぶという事だと思います。いわずもがなですね。</p>
<p>「セール中で今だけ安い」という感覚を与える事はかなり効果があるという事です。７０％弱が影響があると答えているわかですから、定期的にセールは行うべきです。</p>
<p>&nbsp;</p>
<h2>オマケの効果は？</h2>
<p>私が運営を担当するショップでも商品にオマケをつけるという事は行っていますが、実際のところ効果はどうなんでしょうか。</p>
<p>アンケートの結果では約３５％が影響すると答えています。もし、オマケを無くすと送料が無料にできるのであればすぐにでも実践したほうがいいですね。</p>
<p>&nbsp;</p>
<h2>ネットショップが優先すべき要素</h2>
<p>ショップとして売上を伸ばすために何を優先すべきかという問題に戻ると、価格が最も左右する要素なのはもちろんなので、優先順位はおそらくこんな感じです。</p>
<p>&nbsp;</p>
<p>商品価格 ＞ 送料 ＞ 評価（レビュー） ＞ セールの開催 ＞ ポイント ＞ オマケ</p>
<p>&nbsp;</p>
<p>もちろんモール内でショップを展開する場合には表示順位などが大きな要素となってきますが、この優先順位はどんなネットショップでも共通だと思われます。</p>
<p>この優先順位は運営の際にどの要素にどれだけ時間をかけるかという目安にもなると思います。</p>


レビュー？送料？売上向上のためにネットショップが優先するべきなのは何か

【PHP】可変長引数リスト

<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を使ったちょっとしたテクニック

centosメールサーバー構築（postfix + dovecot + Cyrus SASL）

<p>ここはオンラインリソースだけ紹介します。</p>
<h2>Computer Science入門</h2>
<p><a href="https://www.google.com/url?q=https%3A%2F%2Fwww.udacity.com%2Fcourse%2Fcs101&amp;sa=D&amp;sntz=1&amp;usg=AFQjCNGdmrWTUY5b_qe3xle9-ddkB1YXqA" target="_blank">Udacity &#8211; intro to CS course</a><br />
<a href="https://www.google.com/url?q=https%3A%2F%2Fwww.coursera.org%2Fcourse%2Fcs101&amp;sa=D&amp;sntz=1&amp;usg=AFQjCNE-mScGCD0MJRKuWuFyLJbIr4XdbA" target="_blank">Coursera &#8211; Computer Science 101</a></p>
<h2>少なくとも１個のオブジェクト指向言語を使ってコーディングする &#8211; C++、JavaもしくはPython</h2>
<h3>初心者コース</h3>
<p><a href="https://www.google.com/url?q=https%3A%2F%2Fwww.coursera.org%2Fcourse%2Fprogramming1&amp;sa=D&amp;sntz=1&amp;usg=AFQjCNERrKn8RoMF2C-tzZ_51XpGA2QzUQ" target="_blank">Coursera &#8211; Learn to Program: The Fundamentals</a><br />
<a href="http://www.google.com/url?q=http%3A%2F%2Focw.mit.edu%2Fcourses%2Felectrical-engineering-and-computer-science%2F6-092-introduction-to-programming-in-java-january-iap-2010%2Findex.htm&amp;sa=D&amp;sntz=1&amp;usg=AFQjCNHfuFmBicr4_Zh4dtfmk_mYq0BtNQ" target="_blank">MIT Intro to Programming in Java</a><br />
<a href="https://developers.google.com/edu/python/" target="_blank">Google&#8217;s Python Class</a><br />
<a href="https://www.coursera.org/course/interactivepython" target="_blank">Coursera &#8211; Introduction to Python</a><br />
<a href="http://www.openbookproject.net/thinkcs/python/english2e/" target="_blank">Python Open Source E-Book</a></p>
<h3>中級者コース</h3>
<p><a href="https://www.udacity.com/course/cs212" target="_blank">Udacity&#8217;s Design of Computer Programs</a><br />
<a href="https://www.coursera.org/course/programming2" target="_blank">Coursera &#8211; Learn to Program: Crafting Quality Code</a><br />
<a href="https://www.coursera.org/course/proglang" target="_blank">Coursera &#8211; Programming Languages</a><br />
<a href="http://cs.brown.edu/courses/cs173/2012/OnLine/" target="_blank">Brown University &#8211; Introduction to Programming Languages</a></p>
<h2>他のプログラミング言語を勉強する</h2>
<p>例えば、Java Script、CSS、HTML、Ruby、PHP、C、Perl、Shell、Lisp、Scheme。<br />
<a href="http://www.w3schools.com/" target="_blank">w3school.com &#8211; HTML Tutorial</a><br />
<a href="http://www.codecademy.com/learn" target="_blank">CodeAcademy.com</a></p>
<h2>コードをテストする</h2>
<p><a href="https://www.udacity.com/course/cs258" target="_blank">Udacity &#8211; Software Testing Methods</a><br />
<a href="https://www.udacity.com/course/cs259" target="_blank">Udacity &#8211; Software Debugging</a></p>
<h2>ロジック推理と離散数学を勉強する</h2>
<p><a href="http://www.google.com/url?q=http%3A%2F%2Focw.mit.edu%2Fcourses%2Felectrical-engineering-and-computer-science%2F6-042j-mathematics-for-computer-science-fall-2010%2Findex.htm&amp;sa=D&amp;sntz=1&amp;usg=AFQjCNEXtF_m9Lj7XMQZFy8Y92633L2EcQ" target="_blank"> MIT Mathematics for Computer Science</a></p>
<h2>データ構造とアルゴリズムを勉強する</h2>
<p><a href="http://www.google.com/url?q=http%3A%2F%2Focw.mit.edu%2Fcourses%2Felectrical-engineering-and-computer-science%2F6-006-introduction-to-algorithms-spring-2008%2Findex.htm&amp;sa=D&amp;sntz=1&amp;usg=AFQjCNEIwTJvLQcPGJL2hPxLibPRvjhbbg" target="_blank">MIT Introduction to Algorithms</a></p>
<h2>オペレーティングシステムについて勉強する</h2>
<p><a href="http://www.youtube.com/watch?v=XgQo4JkN4Bw&amp;list=PL3289DD0D0F0CD4A3" target="_blank">UC Berkeley Computer Science 162</a></p>
<h2>人工知能</h2>
<p><a href="http://see.stanford.edu/see/courseinfo.aspx?coll=86cc8662-f6e4-43c3-a1be-b30d1d179743" target="_blank">Introduction to Robotics</a><br />
<a href="http://see.stanford.edu/see/courseinfo.aspx?coll=63480b48-8819-4efd-8412-263f1a472f5a" target="_blank">Natural Language Processing</a><br />
<a href="http://see.stanford.edu/see/courseinfo.aspx?coll=348ca38a-3a6d-4052-937d-cb017338d7b1" target="_blank">Machine Learning</a></p>
<h2>コンパイラ構築</h2>
<p><a href="https://www.coursera.org/course/compilers" target="_blank">Coursera &#8211; Compilers</a></p>
<h2>暗号化</h2>
<p><a href="https://www.coursera.org/course/crypto" target="_blank">Coursera &#8211; Cryptography</a><br />
<a href="https://www.udacity.com/course/cs387" target="_blank">Udacity &#8211; Applied Cryptography</a></p>
<h2>Parallel Programming</h2>
<p><a href="https://www.coursera.org/course/hetero" target="_blank">Coursera &#8211; Heterogeneous Parallel Programming</a></p>
<h2>元リンク</h2>
<p><a href="http://www.google.com/edu/tools-and-solutions/guide-for-technical-development/index.html" target="_blank">元リンク</a></p>


googleが技術開発のガイドを出しました

<p>先月Twitterで新しいサービスが試験的に開始されました、その名も「<a href="https://blog.twitter.com/2014/introducing-twitter-offers">Twitter offer</a>」。</p>
<p>どんなサービスか簡単に説明します。購入者はあらかじめtwitterにクレジットカード、またはデビットカードの情報を登録します。そして、お店からのoffer（クーポン）を入手します。</p>
<p>クーポンを入手する際には「get offer」というボタンを押します。例えば5000円以上購入したら500円引きというクーポンを入手したりします。</p>
<p>クーポンを発行した実店舗やネットショップで、twitterに登録したカードを使って5000円の買い物をすると自動で割引がされて4500円になります。</p>
<p><a href="/uploads-archive/2014/12/Screen_Shot_2014-11-18_at_4.10.58_PM.png"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-6417" src="/uploads-archive/2014/12/Screen_Shot_2014-11-18_at_4.10.58_PM.png" alt="Screen_Shot_2014-11-18_at_4.10.58_PM" width="700" height="230" srcset="/uploads-archive/2014/12/Screen_Shot_2014-11-18_at_4.10.58_PM.png 700w, /uploads-archive/2014/12/Screen_Shot_2014-11-18_at_4.10.58_PM-300x98.png 300w, /uploads-archive/2014/12/Screen_Shot_2014-11-18_at_4.10.58_PM-228x74.png 228w" sizes="(max-width: 700px) 100vw, 700px" /></a></p>
<p>購入者側からすると、いちいちクーポンを見せたりする手間がかかりません。</p>
<p>お店側はクーポンを発行するために必要なのはTwitterだけなので、もちろんクーポンを印刷するコストもかかりませんしクーポンを発行するためのプログラムを構築する必要もなくかなり低コストに抑えられます。</p>
<p>さらにクーポンによる効果を測ることも容易になります。</p>
<p><a href="/uploads-archive/2014/12/Offers_Screenshot.jpg"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-6418" src="/uploads-archive/2014/12/Offers_Screenshot.jpg" alt="Offers_Screenshot" width="621" height="575" srcset="/uploads-archive/2014/12/Offers_Screenshot.jpg 621w, /uploads-archive/2014/12/Offers_Screenshot-300x277.jpg 300w, /uploads-archive/2014/12/Offers_Screenshot-228x211.jpg 228w" sizes="(max-width: 621px) 100vw, 621px" /></a></p>
<p>左はお店から発行されたクーポンを獲得する画面です。</p>
<p>&nbsp;</p>
<p>プロもツイートでクーポンを発行する地域を絞ることもできるので、小規模な店舗にも有効なツールになりますです。</p>
<p>&nbsp;</p>


小規模ショップでもクーポンが簡単に作れる「Twitter Offer」

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

Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

記事一覧 - Author: スターフィールド編集部

2015/01/14

2015/01/14

2015/01/08

2015/01/08

2015/01/07

2014/12/17

2014/12/17

2014/12/17

2014/12/17

2014/12/10

2014/12/10

2014/12/09

2014/12/09

2014/12/04

2014/12/04

2014/12/03

2014/12/03

2014/11/26