logo jQueryに強い、基本料金0円。わかりやすい料金設定でご提供する、
コーディング代行サービス「ココマチ コーディングラボ」
050-3184-0915

MENU

2015 3月

お見積り依頼

モバイルファーストを意識したコーディングについて

モバイル機器の普及

近年スマートフォンやタブレットの普及率が高いことから、モバイルファーストを採用する企業が多くなっています。モバイルファーストとは、スマートフォンなどのモバイル機器向けのものをパソコン向けより先に、もしくは同時に公開することです。また、モバイル機器での使いやすさを優先的に設計することを指す場合もあります。


続きを読む

パララックスのコーディングに便利なjQueryプラグイン

パララックスとその主なコーディング方法
パララックスとはWebサイトのページをスクロールなどで移動させたときに、ページ内の各要素が表示されたり、違うスピードで動いたりすることで立体感や遠近感を生むことができる視差効果です。この効果を実際に導入するにはいろいろな方法がありますが、主にJQueryのプラグインを使うことが多いようです。今回はコーディングに多く使われるJQueryのプラグインについて、シンプルで便利なものとその特徴をご紹介します。
続きを読む

Bootstrapを使ったレスポンシブコーディングについて

Bootstrapとレスポンシブデザイン

Bootstrapではレスポンシブデザインに対応したCSSクラスが用意され、中でもグリッドシステムが注目を浴びています。一般的に必要となる表示のコントロールがHTMLの簡単な記述で出来るようになるので、Web開発の時間短縮に役立っているのです。
グリッドシステムとレスポンシブコーディング グリッドシステムとは、ページを格子状(グリッド)に区切ってレイアウトするデザイン手法です。Bootstrapでは横列を12分割し、それを基準にレイアウトすることが基本となります。1行分を <div class=”row”>要素で括り、 <div class=”col-md-xx”> のxxの部分でそのブロックを何列分で表示するか指定します。例えば、 という記述だと、12列分を4:4:4に分割、即ち1:1:1の割合で表示されることになります。割合の合計が12を超えた場合は、複数行で表示されます。そして、どの割合で設定した場合も、画面幅が一定より狭くなるとグリッドレイアウトが解除され、そのブロックが縦並びに表示されます。
次に、デバイス別の設定方法ですが、
の「md」の部分を変更させることでデバイスごとの割合を設定出来ます。「xs」はスマートフォンで表示幅が768px未満、「sm」はタブレットで表示幅が768px以上、「md」はデスクトップで表示幅が992px以上、「lg」はデスクトップ(大)で表示幅が1200px以上です。例えば、
<div class=”col-md-4 col-sm-6″>
は992px以上の表示幅では4/12、768px以上992px未満では6/12の割合で表示され、768未満であれば全てのブロックが縦並びに表示されるということになります。
続きを読む

Bootstrapについて メリットとデメリット

Bootstrapとは

Bootstrapは、WebサイトやWebアプリケーションを作成する際に活用出来るフレームワークです。よく使うインターフェイスやJavaScript用拡張などが、HTML及びCSSベースのデザインテンプレートとして用意されています。Mark Otto/Jacob Thornton氏らによって開発され、最初の正式版が2011年にリリースされた比較的新しいCSSフレームワークです。オープンソースで開発されているので、誰もが無償で使用することが出来ます。Bootstrapのサイトからダウンロードし、それをHTMLに読み込んで使います。簡単に見栄えの良いデザインに仕上げられることや、レスポンシブコーディングに対応していることなどから開発者に人気があります。


メリット

CSSのテンプレートが入っているので、それを使用するとHTMLコードを記述するだけで分かりやすく見栄えの良いデザインに仕上げることが出来ます。例えば、入力ボックスをフォーカスすると青くハイライトが入るようにしたい場合、自分で調整しなくてもCSSのテンプレートを読み込めば、HTMLで入力ボックスを表示するコードを書くだけで可能となります。
また、レスポンシブデザインに対応したCSSクラスが用意されているので、一般的に必要となる表示のコントロールもHTMLの簡単な記述で出来るようになります。これらの機能は、Web開発の時間短縮につながります。


デメリット

デメリットは、良くも悪くもテンプレートなので、ありきたりのデザインになってしまうことです。カスタマイズする場合、結局CSSの中身を見なければなりません。変更したい箇所を探すことで苦労するなら、最初から自分で作っていった方がやりやすいこともあるでしょう。また、アルファベット言語向けに作られているので、日本語表示すると見にくくなってしまうことがあり、その調整が必要となることもあります。
その他、オープンソースでありがちなことですが、古いバージョンとの互換性のないバージョンアップが行なわれることもあり、常に新しい知識を入手していかなければなりません。

続きを読む