2010年 8月 14日

CSS HappyLife ZERO が移転したのでお手数ですが、消えちゃう前にブックマーク等変更してもらえるととても嬉しいです。

制作会社でコーディングする場合、社内のガイドライン的なのが有ったりデザイナーもある程度固定されてると思うので、毎回似たような事を確認したり とか、このデザインはどういう意図なんだろう？ってのも、何度か同じ人とやってれば見えてくる訳ですが、フリーランスの場合だとデザイナーは毎回違ってい たり、当然ディレクションをする人も違うので最初に確認しておきたい事が有ったりします。

って事で、その辺りをまとめてみたり、デザインを渡されたときにこのデザインの意図は？って思う事とかもばーっと書いてみます。はい。
なので、デザイナーさんもコーダーにデザインを渡すときに気をつけて欲しい点とかもわかってしまうすばらしい内容（だと良いな）！

コーディング前に確認しておきたいこと。 - CSS HappyLife

以下、見出しです。

■ 基本的な確認事項
DTDは？
文字コードはutf-8でOK？
keywordsは？
descriptionは？
titleの記載ルールは？
ディレクトリのルールは？
ファイル名は？
対応ブラウザは？
IE6は何処まで厳密に対応すべき？
ヘッダーなどの共通パーツはどのように処理する？
拡張子は、htmlが必須？
システムが入る場合、留意点は？
アクセス解析は何が入る？
javascriptは自由に使える？
その他注意事項等は？

■ デザインに関して確認しておきたいこと
faviconは有りますか？
リンクカラーの指定は？
デバイス？画像テキスト？
複数行になった場合の処理
背景画像の切れた先の処理は？
このリストのマーカーは標準？画像？
微妙にマーカー画像のサイズや色が変わった？
順序リストの数字だけ太字だったり色が違う
逆N型の順番に並んだリスト
同じ（にしか見えない）サイズのボックスが並んでいる場合
行間がページによって変化する
隣のボックスと合わせて上下が中央揃い
確認事項と言うよりお願い的な

1年前 | 固定リンク | 2010年 8月 14日 |

2010年 3月 18日

「CSS Crunch」と呼ばれており、もともとはIE8をターゲットにして開発されたようだ。ただし、機能自体は標準規約として策定が進められているものであるため、Firefox、Chrome、Safari、Operaなどほかの主要ブラウザでも機能する。

使っていないCSSを見つけ出す方法 | エンタープライズ | マイコミジャーナル

ブックマークレットとして使えるチェックツールの紹介です。

2年前 | 固定リンク | 2010年 3月 18日 |

2010年 2月 15日

一歩上行く！携帯HTML/XHTMLデザイン・コーディング術(第一弾)

XHTML/HTML TIPS |

※2010年2月現在の情報です。

—-

FlashLiteのことばかり書いているので、今日はHTML/XHTMLのことを書きます。
HTML/XHTMLをでサイトを作る際、デザイナーさんやコーダーさんがちょっと気をつけておけば見栄えはグンッと良くなります。
ぜひ、取り入れてみてください！

---

■画像のコツ

• 横幅240pxの画像を作るときは良く考えて！

携帯の画面横幅は240px(VGAだと480px)だから、どんな画像でも横幅240pxで作ったりしていませんか？
それはちょっと待った！です。実は、ブラウジング時画面の横幅は240px無い機種が多いです。(au/SBは240pxある端末はほぼ無い)なぜならば、ブラウジング時に右横にスクロールバーが表示されるから。
そのため、横幅は機種によってまちまちです。（228pxとか232pxとか）

横幅240px未満のブラウザで、横幅240pxで配置された画像を見たとき、横にのみ縮小がかかります。
写真とかの画像の場合、この縮小は目立たないのですが、ドットで書かれた画像なんかの場合は、縮小が目立ち、視認性が悪くなってしまいます。(下記図)

横幅一杯に作った画像を配置することがだめな事だとは思っていません。横幅一杯の画像を配置して、コンテンツとコンテンツの区切りとして使ったりとか、デザインする上でよく使うと思います。ただ、横幅一杯の画像を作るときは、その要素の中に潰れては困るもの（商品ロゴ等や、ドットでかかれたもの）が含まれていないか注意してみてください。

＊オプトピクチャーやPicutureFitter、KeitaiPictureなんかの携帯電話向けの画像変換ASPを使えば端末ごとに最適なサイズにリサイズしてくれるようです。

• リンク用画像を作るときはマージンも画像内に含めて！

画像をリンクとして使っているケースはよく見られますが、画像のリンクにフォーカスがあっているのが分かりづらい時はありませんか？
リンク用の画像をピッタリ切り出してしまうと、フォーカスしたときに表示される囲い線が画像となじんでしまいます。なので、リンク用の画像を切り出す際は、少しマージンを含めて切り出しましょう。

＊ちなみに、フォーカス時のリンク枠の色の設定ですが、できる機種と出来ない機種があります。（出来ないもののほうが多いかも？）

---

■レイアウトのコツ

• 左右にマージンを取ってテキストを読みやすく！

携帯サイトは左端から右端までびっちりテキストが書かれているものが多いです。が、左右にマージンを取ってテキストを配置したほうが読みやすく、洗練された印象を与えることが出来ます。

やりかたは簡単です。下記のような＜table＞タグの中にテキストを書くようにします。

<table width="95%" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td align="left">
    ここにテキスト
    </td>
  </tr>
</table>
//width="95%"のパーセンテージを変えることで余白を調整できます。ピクセル指定にしていないのはVGA端末のことを考慮しているためです。

*一部の古い端末はtableタグ非対応ですが、非対応の機種の場合、tableタグ部分を無視するだけなので大きな影響はありません。

• XHTMLで背景を切り替える時は＜div＞に要注意！

こういう背景色を多用したサイト(図左)、最近増えてきましたよね。ただドコモではきれいに見えてもauではこんなカンジ(図右)に見えているサイトがあります。

背景色の切り替えポイントで画像を配置した時に、本来なら出て欲しくない背景線(つまりスキマです。)が格好悪い。うーん、とっても残念。
どうしようもない現象と諦めている方もいらっしゃるのではないでしょうか?
が、これは＜div＞タグの配置の修正で回避できます。ワンソースで3キャリアいけます。

<div style="background-color:#ff0033">
	テキスト
	<div style="background-color:#000000">
		<img src="●●.gif" /><br />
        	<span style="color:#FFFFFF">テキスト2</span>
	</div>
</div>　←一番最初のdivを最後に閉じる

といった感じになります。
わかりますでしょうか？一番最初の＜div＞(上記図で言うと赤い背景部分)の中に次にくる＜div＞(上記図で言うと黒い背景部分)を内包します。そして、切り替え画像は2番目の＜div＞の先頭に配置します。こうすることによって、画像を区切りとした背景色の切り替えがキレイに表現できます。

＊説明、はしょってる部分もあるので、分かり辛ければコメントください。

---

続きは第二弾で〜。

一歩上行く！携帯HTML/XHTMLデザイン・コーディング術(第一弾) - case:MobileDesign! モバイルサイトのデザイン紹介ブログ

早速、新人教育用に見せたいサイトにブックマークしました。
とても分かりやすく画像付きで紹介されています。
ただ、tableを左右paddingはここぞという時のみに使った方が良いでしょう。あまり使いすぎると縦に長くなってしまうので。

2年前 | 固定リンク | 2010年 2月 15日 |

2010年 2月 10日

« WordPressのブログ以外の使い方10 | メイン | DaisyDiskのフリーライセンスを3名様にプレゼント »

フッタをブラウザ下部に固定配置するCSSテクニック

CSS | 10.02.07 12:32

フッタをブラウザ下部に固定配置したい。

そんなときにおすすめなのが、『cleanstickyfooter』。フッタをブラウザ下部に固定配置するCSSテクニックです。

IE6とそれ以前のブラウザ用に、ハックは1つしか使っていないとのこと。min-heightの部分のハックのようですね。

ほかには同様のテクニックに以下のものがありますが、前者はwidth:100%のフッタには対応していないようです。

CSS Sticky Footer
ブラウザの下部にフッターを固定表示する『CSS Sticky Footer』

対応ブラウザは以下の通り。

・Firefox (2, 3, 3.5)
・Internet Explorer (6, 7, 8)
・Safari
・Opera
・Google Crome

ぜひ使ってみてはいかがでしょうか？

cleanstickyfooter

フッタをブラウザ下部に固定配置するCSSテクニック | CREAMU

position:fixedが使えずに悩んだときがあったので参考にしてみたいと思います。

2年前 | 固定リンク | 2010年 2月 10日 |