メディア掲載

2011年12月号より、Web業界唯一の専門誌「Web Designing」で
連載を行なっています。

Web Designingの人気コーナー「現場で役立つ技術力養成講座」で、Smartphone Lab.を連載しています。是非、お買い求めいただき、お読みください。

Web Designing http://book.mycom.co.jp/wd/

2013年3月号 Vol.140

Web Designing 2013年3月号

CSSLab.
displayプロパティで表示を自在に操る
ブロック、インライン、インラインブロック・・・・。HTMLでマークアップされるすべての要素は、表示形式(display)が指定されており、この値を変更することによってさまざまな表示/非表示の方法が実現可能となる。今月はdisplayプロパティを使ったテクニックを紹介しよう。

2013年2月号 Vol.139

Web Designing 2013年2月号

CSSLab.
いろいろな場面でoverflow:hidden;を活用
overflow:hidden;は、その名が示す通り、ボックスの範囲に内容が入りきらなかった際に、はみ出した部分を隠す(表示させない)機能としてよく知られている。だが、この使い方以外にも、floatの解除やテキストの回りこみを防ぐなど多用途に使うことができる。今回は、そんなoverflow:hidden;の活用術を紹介しよう。

2013年1月号 Vol.138

Web Designing 2013年1月号

CSSLab.
更新性の高い横並びリストをつくる
Webサイトに頻繁に登場するリストタグ<ul>。とくに横並びのリストは商品リストなどによく使われ、公開後に追加や変更されることも多い。しかし、コーディングによってはカラム落ちしてレイアウトが崩れる場合も少なくない。そこで今回は、更新性を考慮しつつ、レイアウトが崩れない横並びリストの作り方を解説する。

2012年12月号 Vol.137

Web Designing 2012年12月号

CSSLab.
フッタをページ下部に固定する
ヘッダやフッタ、ローカルナビゲーションなど、ほとんどのサイトにあると言っていいこれらの要素には、常時表示を求められるケースが少なくない。そこで今回はこれらの要素を固定する方法を紹介していこう。

2012年11月号 Vol.136

Web Designing 2012年11月号

CSSLab.
CSSでグローバルナビゲーションを作る
グローバルナビゲーションを実現するにはさまざまな方法がある。今回はユーザビリティや更新のしやすさ、印刷表示などを考慮し、CSSで作ることのメリットとデメリットを理解した上で作ってみよう。

2012年10月号 Vol.135

Web Designing 2012年10月号

CSSLab.
IE6対応のための定石CSSハック
さまざまなブラウザがバージョンアップを行っていく中で、いまだにIE6対応についての要望は多い。IE6で注意すべきトラブルは約6パターンほどあるが、今回はその中でも代表的な3種類を覚えるとともに、CSSを使って問題を解決しよう。

2012年9月号 Vol.134

Web Designing 2012年9月号

SmartphoneLab.
スマートフォンに最適化したレスポンシブデザイン
Webサイト閲覧のためのスマートデバイスが増加している昨今、それらの端末ごとに最適化・構築しようとした場合、非常に多くのコストが想定される。今回は、それらを一元化するための一つのアプローチとして、最近のトレンドともなっているレスポンシブデザインによるサイト構築方法をスマートフォン最適化した形で紹介しよう。

2012年8月号 Vol.133

Web Designing 2012年8月号

SmartphoneLab.
jqMobiを実践的に使ってみよう
「jqMobi」は、jQueryとの互換性を持ちながら、モバイルデバイス向けに特化し、ファイルサイズのコンパクト化、スクリプト処理の高速化を実現したライブラリだ。iOSやAndroidといったモバイルデバイス対応のWebサイトの制作時に気にしなければならないのが、ページ表示やスクリプトの処理速度だ。今回は、その解決策の一つとなりうるjqMobiを用いた実践的な制作事例を紹介していこう。

2012年7月号 Vol.132

Web Designing 2012年7月号

SmartphoneLab.
フリックを独自実装してスマホ的な技法を学ぶ
「フリック」は、スマートフォン向けWebページの特徴的なUI操作の一つだ。フリックを実現するライブラリやプラグインなども数多く出回っているが、今回はフリックを独自に実装していく。その際のJavaScriptの仕組みがどのようになっているのかを解説しながらサンプルページを作成していくので、スマートフォンならではのコーディングのコツや技法を学んでほしい。

2012年6月号 Vol.131

Web Designing 2012年6月号

SmartphoneLab.
jQuery Mobileのオリジナルテーマを作成する
jQuery Mobileはスマートフォン向けのサイトを手軽に構築することが可能である反面、デフォルトの状態のデザインは画一的なものになりがちだ。今回は、jQuery Mobileでオリジナルテーマを作成するアプローチの一つとして、HTML/CSSを編集する方法を解説していこう。

2012年5月号 Vol.130

Web Designing 2012年5月号

SmartphoneLab.
jQuery Mobileでフォームを拡張する
スマートフォンは、フィーチャーフォン(一般的な携帯電話)に比べて、画面が大きく、サイトの閲覧がしやすい。しかし、タッチパネルを使っているスマートフォンではフォームへの入力がしにくく、使い勝手は決して良いとは言えない。昨年、正式版が公開されたjQuery Mobileは、このようなスマートフォンの特徴を認めた上で、スマートフォンでも入力がしやすいようにフォームを拡張する機能が搭載されている。

2012年4月号 Vol.129

Web Designing 2012年4月号

SmartphoneLab.
少ないエリアで多くを見せる「隠すレイアウト」
フルブラウザ機能を備えたスマートフォンだが、PCのディスプレイを比べると、その表示領域は圧倒的に狭い。スマートフォンに最適化したサイトでは、重要なコンテンツをなるべく削除しないで閲覧できるようにするかが課題の一つになるだろう。今回は、情報量の多いコンテンツを「わかりやすく隠すレイアウト」を紹介する。

2012年3月号 Vol.128

Web Designing 2012年3月号

SmartphoneLab.
位置情報を取得して案内マップを作ろう
スマートフォンはパーソナルなツールであり、常に携帯しているものである。屋外でも移動中でも気軽に、そしてPC並みのクオリティでWebサイトにアクセスできることは非常に便利で、スマートフォンを使う大きな魅力でもある。そんなスマートフォンならではの機能として、位置情報機能がある。今回は位置情報機能を使って簡単なWebアプリ「案内マップ」を作ってみよう。

2012年2月号 Vol.127

Web Designing

SmartphoneLab.
jQuery Mobile はじめの一歩
先日、「jQuery Mobile」の正式版がリリースされた。
α版、β版の時代が長く続いていたので、手を付けるのをためらっていた人も多いのではないだろうか。
「jQuery」という名がついているが、JavaScriptフレームワークであるjQueryとは内容も使い方も異なる。
そのため、どのようなものなのかイメージがつかずに敬遠していた人もいるかもしれない。
今回は、jQuery Mobileを「まずは使ってみる」ということに焦点を絞って解説していこう。

2012年1月号 Vol.126

Web Designing

SmartphoneLab.
スマートフォン特有の操作「フリック」を導入する
スマートフォンは、さまざまな点でPCとは異なるインターフェイスを備えているが、中でも「フリック」はタッチパネルを利用したスマートフォンならではの操作方法だ。フリックでコンテンツを滑らかにスライドさせていくのは心地よいものだ。今回は、「フリック」を実現する方法を解説しよう。

2011年12月号 Vol.125

Web Designing

SmartphoneLab.
「viewport」の定番設定パターンを習得する
今月から始まった当Labでは、今や必須となりつつあるスマートフォン対応について、様々なノウハウをお届けする。
さて、スマートフォンサイト制作の最初の関門といえるのが「viewport」だ。PCサイトには存在しない「窓」の概念を理解し、もろもろのパラメータを設定していくだけでも一苦労だ。しかし、実は現行のスマートフォンサイトで使われる「viewport」の設定パターンは、とても少ないのだ。今回は、定番とも言える3つのパターンを紹介していこう。

お問い合わせはこちらからどうぞ