グレヌデサ La graine du dessin: Codingアーカイブ

Codingの最近のブログ記事

2012年2月 2日 Coding Tips

スマートフォンのコーディングで気を付けたい4つのポイント

はじめに

現在、スマートフォンは大きく分けて2つのOS（iOS、Android）があります。
OSごとの仕様の違いも重要ですが、 特に問題になる端末の違いは画面の解像度で、
iOSは960×640px(iPhone4とiPhone3Gは同じサイズで表示できる)
Androidは800×480px?(端末によってサイズがバラバラだが、横幅は480pxが基本)
と、表示サイズが大きく異なります。
さらにスマートフォンは画面を横に回転させることもできるので、
解像度が縦横反対になることも想定しておかなければいけません。

iPhone4を基準としたデザインからコーディングをした場合の注意点とその参考サイトをまとめました。

iOSのSafariは様々な制限やバグがある

・画像のサイズ制限がある（GIF、PNG、TIFF画像のデコードサイズ制限は2メガピクセル）
・Web Fonts は使えない。
・zoomプロパティを使用した場合、特定の条件で文字が拡大するバグ

[参考サイト]
PhoneのSafariブラウザにおける、色んな制限｜FINE lab.
http://lab.fine-net.com/modules/wordpress2/index.php?p=15
iPhoneで特定のzoomとfont-sizeの際に文字サイズが拡大するバグ｜to-R
http://blog.webcreativepark.net/2011/04/07-063417.html

Android2.1以前はselect要素に対して、スタイルの高さに関連する指定が効かない

Androidでスタイル属性に高さを指定した場合、ボックスサイズが拡大されず、中のテキストのみ大きく表示されます。 対処方法として、背景画像を指定することでブラウザ標準の枠線を取り去ることができます。 また、CSS3である程度の装飾は可能にです。

[参考サイト]
Android・iPhone向けwebサイト開発で知っておくと良いこと｜村式流 イッパシエンジニアへの道
http://blog.ville.jp/2011/04/25/619

横に回転させた時に画面のサイズに合わせて拡大させたい場合

ワンソースで全てのスマートフォンに横幅をフィットさせる方法です。 この方法を使えば一回のコーディングですべての端末に反映することが可能ですが、 端末ごとに拡大縮小をすることになるので、文字サイズが読みづらくなったり、 逆に大きくなりすぎたりする場合があり、けして万能な方法ではありません。 また、Android2.1以降でselectボックスのサイズを大きくするときの懸念点として、 zoomプロパティを使用した場合に発生するiPhoneの文字の表示バグ等があります。 使用する場合は表示チェックを入念にしなければいけません。

[参考サイト]
スマートフォンのサイトを横に回転させた時に画面のサイズに合わせて拡大させるには｜これからゆっくり考L +α http://sakaki0214.com/2011/06/05223738.html

スマートフォンサイトで文字サイズが違う場合

iOSのsafariではフォントサイズが自動アジャストされ、PCで見ていたサイズとかなり差異がある場合があります。 それを解消するためにcssに-webkit-text-size-adjust というプロパティを使用することで、フォントサイズの変更が可能になります。 このプロパティはwebkit特有の特有のプロパティで、基本はautoになっています。 必要があれば変更するぐらいで、基本的にはあまり使用しません。

[参考サイト]
項目：文字サイズの自動アジャスト｜＠IT
 http://www.atmarkit.co.jp/fsmart/articles/iphone/04.html
iPhone/Androidサイトで文字サイズを固定する方法｜Web Designing satoimo18+
http://www.satoimo18.com/archives/136



スマートフォンはPCと比べて比較的コーディングはしやすいですが、 実機チェックと対応バージョンの考慮など、様々な制限があるので、 要件をしっかり決めてから、デザイン、コーディングを進めるのが重要です。

(kazuki)

タグ: , , ,

2011年10月27日 Coding

初めてHTML5でコーディングにする際に気をつけるべき事

近頃HTML5が本格的に導入される傾向が高まりつつあります。
HTML5対応が促進される理由は、XHTMLの時よりもセマンティクス*な文章構造を意識してコーディングをすることで、
データ自身に的確な意味をもたせる事が可能になりました。
それにより、サイト自身の情報の精度が高まり、検索結果等に正しい情報が反映されていくことになります。

*セマンティクス についてはこちらをご参照ください
エンタープライズ：Gartner Column：第11回 そもそも「セマンティクス」とは何だろう？
http://www.itmedia.co.jp/enterprise/0108/20/01082088.html

HTML5で新たなに追加されたよく使用する要素の注意点をご紹介していきます。
続きを読む: 初めてHTML5でコーディングにする際に気をつけるべき事

タグ:

2011年9月 1日 Coding Design Web service

クロスブラウザチェックに欠かせない便利ツール

クロスブラウザとは: 「複数のブラウザ上で，正常に動作すること」を意味します。
企業様のサイトでは、まだまだIE6が閲覧対象であったり、
最新の環境でも閲覧できることが必須であったりと、
Web制作においてクロスブラウザのチェックは欠かすことの出来ない重要ポイントです。
 
最終的には実機での確認となりますが、制作段階でチェックに気を配ることが出来れば、
"チェックバックで大幅な修正をしなければいけない "
という最悪のシナリオも回避できるかもしれません！
 
そんなわけで、今回はクロスブラウザチェックに心強い、便利なツールを紹介します。
 

Adobe BrowserLab

adobe社が無償で公開しているサービス。　（利用にはadobe IDでのログインが必要）

現時点で確認できるブラウザ環境は、
adobe01.jpg

■windows: IE(6 ? 9), Firefox(3.0, 3.6, 4.0), Chorome(9, 10)
■OS X : Firefox(3.0, 3.6), Safari(4.0, 5.0)
(2011/5/30 現在)
となっておりメジャーなブラウザはほぼ網羅されています。

インターフェイスもわかりやすくていいです。

プレビュー機能では2画面並べて表示したり、
adobe02.jpg

「オニオンスキン」で重ねて表示させたりすることが可能です。
adobe03.jpg

環境によるズレが比較しながら一目で確認できるので、
表示についてシビアな調整が必要なサイトでは特に重宝します。
レスポンスもよく、何より、Mac OS環境の表示状態が確認できるのがありがたい限り。

現在、私がよく活用するツールです。

※ベーシック認証が必要なサイトはプレビューが出来ませんので、ご注意ください。


Browsershots

bs1.jpg
非常に多くの環境での表示チェックが出来ます。

スクリーンショットを生成するタイプで、あまり多くの環境をリクエストすると、
bs2.jpg
結果が出るまでに時間がかかりますのでご注意ください。


IE Tester

ietester.jpg
IE環境での表示チェックでは有名なソフトですね。

プレビュー機能はもちろん、リンクチェック・JavaSciptも動作するので、
jsで動く部分のチェックもあわせて行うことが出来ます。

今でもIE6対策には欠かせないツールです。


Microsoft Expression Web SuperPreview

こちらはMicrosoftから提供されている、チェックツール。

私は旧バージョンを使用したことがありますが、
開発元が提供している分、動作に安定感を感じました。

今年3月にリリースされた最新版では、オンラインサービス（ベータ）の「リモート ブラウザー」を利用することにより、
Mac OS 上の Safari 、「Google Chrome」、「Firefox」でのプレビューも可能とのこと。

試用期限があるものの、機会があれば使ってみたいツールです。

※このソフトは「Microsoft Expression Web 4」に含まれるツールの単体試用版として無償提供されており、
60日間すべての機能を試用できるそうです。
※「リモート ブラウザー」は60日間の試用期間のみ利用可能。
※試用期間が過ぎたあともローカルで動作するIE6/7/8を利用したプレビューは可能です。

(Masanori)

タグ:

2011年8月18日 Coding

MTカスタマイズ　カスタムフィールドの検索

MT4から追加された機能に、カスタムフィールドという独自の入力項目を追加できる便利な機能があります。
ですが検索フォームを使ってカスタムフィールドの値を検索できませんでした。
今回はそれに加えて、カテゴリ検索のAnd検索をする方法を紹介します。
※下記はMT５での解説となります。


11604_01.jpg
こんな感じのAnd検索が可能です


1.プラグインを追加する

まずTechnology on Informationさんのプラグインを利用します。
それぞれダウンロードしてインストールしてください。
■カスタムフィールドの内容を対象にして検索：CustomFieldsSearch
■カテゴリー情報による検索：CategorySearch

どちらも修正BSDライセンスですが、これはかなり緩いライセンス形態で、商用利用も改変もしてよいですが、かわりに無保証で著作権の表示が必要というライセンスです。
ソースの上部に著作権表示しておけばOKじゃないでしょうか。

2.ソースを作成する



○カスタムフィールドサーチを有効にするかどうか。
value="1" これでカスタムフィールド検索が有効になります。
<input type="hidden" name="CustomFieldsSearch" value="1" />

○検索対象を指定します。
value="entry"でブログ記事が検索対象になります。 
value="page"でウェブページが検索対象になります。 
<input type="hidden" name="CustomFieldsSearchClassType" value="entry" />

○カスタムフィールドでないカラムを無視する場合に指定します。
これにより余計な検索をせずに若干結果表示が速くなります。
<input type="hidden" name="CustomFieldsSearchIgnore" value="EntryTitle" />
<input type="hidden" name="CustomFieldsSearchIgnore" value="EntryBody" />
<input type="hidden" name="CustomFieldsSearchIgnore" value="EntryMore" />
<input type="hidden" name="CustomFieldsSearchIgnore" value="EntryKeywords" />

○カテゴリサーチを有効にするかどうか。
value="1" でカテゴリ検索が有効になります。
<input type="hidden" name="CategorySearch" value="1" />
<input type="hidden" name="CategorySearchSets" value="1" /> 

○カスタムフィールド検索
指定したキーと値で絞込みを行います(value="カスタムフィールドタグ:○○○")
<select name="CustomFieldsSearchFieldLike">
<option selected="selected">▼エリアを選んでください</option>
<option value="area:北海道">北海道</option>
<option value="area:青森県">青森県</option>
<option value="area:岩手県">岩手県</option>

○カテゴリ検索
カテゴリ選択用がプルダウンの場合は
「select name="1"」に設定すれば有効になるみたいです。
<select name="1" id="select_category">
(takanosuke)

タグ: , , ,

2011年7月28日 Coding Web service

実務で使える便利なCSS3ジェネレーター5種

スマートフォンの利用者が増加するにつれ、HTML5とCSS3のコーディングもより身近になってきましたが
CSS3のプロパティは指定する箇所やコードが非常に多く視覚的にも判断しにくいのが難点。
そんな時に便利な、見て、いじって、実務に導入できるCSS3ジェネレーター5種類を紹介します。


Layer Styles


Layer Styles
http://www.layerstyles.org/

Layer StylesはPhotoshopライクなCSS3ジェネレーターです。
使い方はまさにPhotoshopのレイヤー効果と同じで、
スタイルの数値を変更するだけでボックスに指定した効果が適用されます。
最後に左下にある『CSS Code』のボタンをクリックすると、
現在表示されているボックスに適用されているコードが生成されます。

生成可能CSS3：
border-radius, background-image, box-shadow


CSS3プロパティジェネレーター


CSS3プロパティジェネレーター
http://css-eblog.com/eblog_sample/0912/css3-generator/

CSS3プロパティジェネレーターは全て日本語表記なので、英語が苦手な方にも扱いやすくなっています。
こちらも使い方はPhotoshop等のグラフィックソフトと操作方法が同じなので、感覚的に操作できます。
また、このジェネレーターはIE6向けのfilterも出力できるのでIE6も指定ブラウザであるときは便利です。

生成可能CSS3：
border-radius, background-image, box-shadow, text-shadow


CSS3 Playground by Mike Plate


CSS3 Playground by Mike Plate
http://css3.mikeplate.com/

CSS3 Playgroundはボックスをレイヤー化でき、複数枚重ねてグラフィックを作れる様になっています。
ボックスを追加する場合は、右上の緑の＋ボタン、削除する場合は赤のXボタンをクリックするだけです。
惜しいのは、複数ボックスを生成した場合、選択しているボックスしかコードがコピー出来ないところです。

生成可能CSS3：
border-radius, background-image, box-shadow, text-shadow, transform, column-count


CSS3.0 Maker


CSS3.0 Maker
http://www.css3maker.com/

CSS3.0 Makerはアニメーションの指定まででき、Transitionの中にあるTransition Timingで動きの速度が変更できます。
また、通常状態かホバー状態か設定できるセレクトボックスが用意されているので、
アニメーションつきの少し凝ったナビゲーションを作りたい時に最適です。

生成可能CSS3：
background-image, background-image, box-shadow, text-shadow, transform, outline-style


Ultimate CSS Gradient Generator


Ultimate CSS Gradient Generator
http://www.colorzilla.com/gradient-editor/

Ultimate CSS Gradient Generatorはグラデーション作成に特化したできるジェネレーターです。
自分が作ったグラデーションを保存することができるので、頻繁に使うものやストックしておきたい時に便利です。

生成可能CSS3：
background-image


使用頻度が高くなりそうなCSS3のジェネレーターは色々あるので、
上手く使えば効率よく一歩進んだコーディングが出来るのではないでしょうか。


(kazuki)

タグ: ,

2011年7月 7日 Coding Web service

初心者さんにおすすめ！HTML、CSS、Dreamweaver参考サイト＆書籍

HTML、コーディングの学習に実際に役立った、おすすめのサイトと書籍をご紹介。
これからwebを学びたい方、現在学習中の初心者さん必見！のおすすめ情報です。
よろしければ参考にお役立てください。

TAG index


HTML、CSS、JavaScript、をまとめて掲載してているチュートリアルサイトです。
カラーチャートのページも参考になりました。


oimg_02.jpg


HTMLクイックリファレンス


早見表や辞書変わりに検索できるサイトです。
HTML5、CSS3についての記述もあります。


oimg_01.jpg


初心者でも大丈夫スタイルシートを使ってみよう


○○しようという目的別にCSSの学習ができるサイトです。
サンプルがたくさん記載されているので画面を見ながら学べます。


oimg_04.jpg


効率的なサイト制作のためのDreamweaverの教科書

書籍にそってサンプルサイトを制作することで、Dreamweaverを使用したサイト制作の一連の操作が学べます。
機能だけを網羅した書籍に比べ、実践的な使い方が学べる点がとても役立ちました。


519nQgLGKFL._SS400_.jpg


HTML、CSSを一通り理解した後は、Dreamweaverを使ってサイトを一通り作って見ること。
入門者さんにおすすめの学習方法です。

(yukari)

タグ: ,

2011年6月16日 Coding Tips

GoogleMapのパラメータ一覧

よくつかうGoogleMapのパラメータ一覧です。

■簡易コントロールボタンを表示する
map.addControl(new GSmallMapControl());

matsukura20101206_01.jpg

■立体地図表示にする
map.setMapType(G_PHYSICAL_MAP);

matsukura20101206_02.jpg

■コントロールボタンを表示する
map.addControl(new GLargeMapControl());

matsukura20101206_03.jpg

■地図/衛星写真 切り替えボタンを表示する
map.addControl(new GMapTypeControl());

matsukura20101206_04.jpg

■ふきだし内のメッセージに画像を入れる
map.openInfoWindowHtml(map.getCenter(), "<img src=\"画像のパス\">");

matsukura20101206_05.jpg

■GOverviewMapControlを追加する
map.addControl(new GOverviewMapControl());

matsukura20101206_06.jpg

タグ: ,

2011年4月21日 Coding

よく使われるID名&クラス名

いまさら感がありますが、コーディングの際によく使われるID名&クラス名を列挙してみました。
この部分にはどんなクラス名をふった方がいいのかな？と迷うことも多い(?)ので、
自分用にまとめておくと、便利ですよ。
　
【ページのレイアウトに関わる名称】

　
　
【パーツの類】

などなど。


調べてみるとさまざまなblog記事でも紹介されていますので興味があったら是非調べてみてください。

なお、※印の名称はHTML5で内で使えるタグ名です。
今後、HTML5でのコーディングのケースを考えると、
新しく使えるタグ名をID/Class名にしてコーディングをするようにしておけば、
移行もしやすいかもしれません。


また、併せてセレクタ指定を工夫すれば、
ID/Class名の使用を抑えて、すっきりした構造にできるかも?!
使用ルールがまとまれば、コーディングの時間もきっと短縮出来ると思います。


(masanori)

タグ: , , ,

2009年12月25日 Coding

IE6で透過PNGを表示させる方法いろいろ

ある案件でコーディングする際に色々調べたものです。
ややこしいポジション指定などをした際、背景は透過されますが、そのブロックの中身がくずれるという問題に悩まされました。
結局解決できませんでしたが、透過という点で、様々な方法を知ったので参考にしてください。

続きを読む: IE6で透過PNGを表示させる方法いろいろ

タグ: , , ,

2009年12月24日 Coding

ドコモのi-modeでxhtmlを対応させる

ドコモだけxhtmlがうまく表示されず、奮闘するはめになりましたので、
忘れないうちにメモとして注意点をいくつか・・・。

■メタのContent-Typeを

<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=Shift_JIS" />

と記述。

■ファイル名を「?.html」ではなく「?.xhtml」に変更する。
　↑はちょっと・・・という方は
■xhtmlファイルがあるディレクトリに下記のコードが入った「.htaccess」ファイルを置く。

AddType application/xhtml+xml html

■cssを外部リンクにせず、style属性を用いる。

・・・これでもcssが効くものと効かないものが存在します。

i-modeで指定可能なプロパティは以下のとおりです。

'background-color' 'background-image' 'border' 'clear' 'color' 'display'
'float' 'font-size' 'height' 'list-style-type' 'margin' 'text-align'
'text-decoration' 'veatical-align' 'width'

pタグより、1つずつspanタグで指定したほうが的確です。面倒ですが。

1  2  3

Webトレンド情報局とは

クリエイティブグループスタッフがお送りする、Webデザイナーのための知識とTIPS。 PhotoShopの便利な豆知識や、CSSのお困り解決、デザイン概論などなど。
【隔週木曜日更新】

運営会社：株式会社ジーピーオンライン

RSSを購読する

Categpry

Monthly Archive

Link