透明度を表す「opacity」 と 「RGBa」の違いと使い分け｜Webpark
opacityはセレクタ内全体が不透明になるのに対し、RGBaはプロパティのみ不透明になります。
「opacity」と「RGBa」の比較画像
左がopacityで全体を不透明にしたもの、右がRGBaで背景色を指定したものとなります。サンプルコードは後に載せています。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html; charset=utf-8"/><title>Your Message Subject or Title</title><styletype="text/css">/* Client-specific Styles */#outlook a { padding: 0; } /* Force Outlook to provide a "view in browser" button. */body { width: 100% !important; } .ReadMsgBody { width: 100%; } .ExternalClass { width: 100%; } /* Force Hotmail to display emails at full width */body { -webkit-text-size-adjust: none; -ms-text-size-adjust: none; } /* Prevent Webkit and Windows Mobile platforms from changing default font sizes. *//* Reset Styles */body { margin: 0; padding: 0; }img { height: auto; line-height: 100%; outline: none; text-decoration: none; }#backgroundTable { height: 100% !important; margin: 0; padding: 0; width: 100% !important; }p {margin: 1em 0;}h1, h2, h3, h4, h5, h6 {color: black !important;line-height: 100% !important;}h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {color: blue !important;}h1 a:active, h2 a:active, h3 a:active, h4 a:active, h5 a:active, h6 a:active {color: red !important; /* Preferably not the same color as the normal header link color. There is limited support for psuedo classes in email clients, this was added just for good measure. */}h1 a:visited, h2 a:visited, h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited {color: purple !important; /* Preferably not the same color as the normal header link color. There is limited support for psuedo classes in email clients, this was added just for good measure. */}table td {border-collapse: collapse;}.yshortcuts, .yshortcuts a, .yshortcuts a:link,.yshortcuts a:visited, .yshortcuts a:hover, .yshortcuts a span { color: black; text-decoration: none !important; border-bottom: none !important; background: none !important; } /* Body text color for the New Yahoo. This example sets the font of Yahoo's Shortcuts to black. */</style></head><body><tablecellpadding="0"cellspacing="0"border="0"id="backgroundTable"><tr><td><tablecellpadding="0"cellspacing="0"border="0"><tr><tdwidth="200"></td><tdwidth="200"></td><tdwidth="200"></td></tr></table><!-- End example table --><ahref="http://www.responsys.com/blogs/nsm/2010/07/feeling-blue-over-yahoo-email.html"style="color:red; text-decoration: none;"target="_blank"title="Feeling Blue Over Yahoo"><spanstyle="color: red;">Here is the fix for Yahoo from Responsys/Smith Harmon</span></a><imgsrc="full path to image"alt="Your alt text"title="Your title text"width="x"height="x"style="display: block;"/></td></tr></table><!-- End of wrapper table --></body></html>
主要メーラーのバグを回避するHTMLメール用テンプレート -Email-Boilerplate | コリス
Email-Boilerplateとは
Email-BoilerplateはHTMLメールを作成する上で、主要となるスタイルをはじめ、各メールアプリケーションのバグを避けるためのものです。
テンプレートは大きく分けて、head箇所とbody箇所があります。head内にはグローバルなスタイルが定義されており、body内にはHTMLのデザインに必要とさせる要素と特定の修正箇所が含まれています。
これらは、そのまま利用してもよし、あなた自身で必要なものを加えたり、削除して使用してください。そして、HTMLメールを作成したら最後に必ずテストすることを忘れないようにしてください。
Email-Boilerplate Lite版
解説のコメントがない、Lite版（2011年6月7日）です。
サイトではLite版だけでなく、通常版もダウンロードできます。
HTML EMAIL BOILERPLATE v 0.4 updated 5/12
http://htmlemailboilerplate.com/
http:は省略すれば空気読む (via komagata)
例1：foo
例2：
こういう風に書けば、https://だろうがhttp://のページでもエラーが起こることなく読み込める。
RFC 2396にちゃんと書いてあるらしい。
HTMLテンプレート
- HTML5/CSS3でコーディング
- 各種設定はviewport又はjavascriptで行う
- widthを指定しない場合はリキッドレイアウトで行う
<!DOCTYPE HTML> <html lang="ja"> <head> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1"> <title>タイトル</title> <link rel="stylesheet" href="style.css"> </head> <body> <header> <h1></h1> </header> <article> <section> <h2></h2> <p></p> </section> </article> <nav> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul> </nav> <footer> <p></p> </footer> </body> </html>
スマートフォン用の最低限のHTMLテンプレートです。大きな違いとしてはHTML5である事と、viewportというmeta要素がある事ですね。
プログラミング言語(C#，VB，PHP，C/C++，Python，Java，Ruby，JavaScript，Objective-C)やHTMLのコーディングスタンダードを集めたリストを発見しました。日本語訳があるものはできるかぎり探し出して，括弧のなかに併記して補ってあります。微妙に古いのが混じってるかな。Rubyは日本発のコーディング規約がある気がする(まつもとさんの日記を見つけた)。
元記事にPerlのスタイルガイドがなかったんだけど，モダンなPerlスタイルガイドがあったら教えて欲しいです:-)。
PythonにはPEP8というコーディングスタイルガイドがあってよく読まれることは知っていたのですが，他の言語でもけっこうあるんですね〜。 スタイルガイドやコーディング基準のたぐいには，コーディングを効率化するためのエッセンスが詰まっていることが多いので，是非読んでみて下さい:-)。
.NET (C#/VB.NET)
- Design Guidelines for Class Library Developers(クラス ライブラリ開発のデザイン ガイドライン)
- C# Coding Standards and Best Programming Practices
- C# Coding Standards and Best Programming Practices (.doc)
- C# Coding Standards Document
- VB.NET Coding Standards (.doc)
- .NET Naming Conventions and Programming Standards
PHP
- PEAR Coding Standards (PEAR標準コーディング規約)
- PHP Coding Standard
- Zend Framework Coding Standard for PHP (Zend Framework PHP標準コーディング規約)
C/C++
Python
- PEP 8 — Style Guide for Python Code (PEP 8 — Style Guide for Python Code)
- PEP 257 — Docstring Conventions (PEP 257 — Docstring Conventions)
- How Not To Write Python Code
Java
Ruby
HTML/CSS/Javascript
- HTML Coding Guidelines
- CSS Coding Standards (via coffeepowered.co.uk)
- CSS Coding Standards (via drupal.org)
- CSS Coding Conventions (via phpied.com)
- Code Conventions for the JavaScript Programming Language
- JavaScript Coding Standards (via drupal.org)
- JavaScript Coding Standards (via brevardcounty.us)
Objective-C
いろいろな言語のコーディング規約，スタイルガイドのリスト — TRIVIAL TECHNOLOGIES 2.0
CSS HappyLife ZERO
が移転したのでお手数ですが、消えちゃう前にブックマーク等変更してもらえるととても嬉しいです。
制作会社でコーディングする場合、社内のガイドライン的なのが有ったりデザイナーもある程度固定されてると思うので、毎回似たような事を確認したり とか、このデザインはどういう意図なんだろう？ってのも、何度か同じ人とやってれば見えてくる訳ですが、フリーランスの場合だとデザイナーは毎回違ってい たり、当然ディレクションをする人も違うので最初に確認しておきたい事が有ったりします。
って事で、その辺りをまとめてみたり、デザインを渡されたときにこのデザインの意図は？って思う事とかもばーっと書いてみます。はい。
なので、デザイナーさんもコーダーにデザインを渡すときに気をつけて欲しい点とかもわかってしまうすばらしい内容（だと良いな）！
コーディング前に確認しておきたいこと。 - CSS HappyLife
以下、見出しです。
■ 基本的な確認事項
DTDは？
文字コードはutf-8でOK？
keywordsは？
descriptionは？
titleの記載ルールは？
ディレクトリのルールは？
ファイル名は？
対応ブラウザは？
IE6は何処まで厳密に対応すべき？
ヘッダーなどの共通パーツはどのように処理する？
拡張子は、htmlが必須？
システムが入る場合、留意点は？
アクセス解析は何が入る？
javascriptは自由に使える？
その他注意事項等は？
■ デザインに関して確認しておきたいこと
faviconは有りますか？
リンクカラーの指定は？
デバイス？画像テキスト？
複数行になった場合の処理
背景画像の切れた先の処理は？
このリストのマーカーは標準？画像？
微妙にマーカー画像のサイズや色が変わった？
順序リストの数字だけ太字だったり色が違う
逆N型の順番に並んだリスト
同じ（にしか見えない）サイズのボックスが並んでいる場合
行間がページによって変化する
隣のボックスと合わせて上下が中央揃い
確認事項と言うよりお願い的な
少しのコードで実装可能な20のCSS小技集 | Webクリエイターボックス
以下のトピックが紹介されています。
■ まずはCSS基礎編
1. divを中央揃えにする
2. divを横並びに
3. 複数のクラスを指定
4. マージンやパディングのプロパティを短く指定
5. ボーダーの色を短く指定
6. フォントのプロパティを短く指定
7. リンクの点線を消去
8. 画像リンクのラインを消去
9. 透明度を変更
10. ブラウザー毎にCSSを変える
■ いろいろ使える画像編
11. マウスオーバーで画像を変更
12. ファビコン
13. ページサムネイル画像
14. 画像の好きな部分を切り抜く
■ かゆいところに手が届く応用編
15. 長いURLを途中で折返す
16. 逆に途中で折り返さず、次の行に
17. リストの最初の仕切り線を消去
18. ２行目以降にスペースを
19. min-height
20. 横並びブロックのマージンを調節
「CSS Crunch」と呼ばれており、もともとはIE8をターゲットにして開発されたようだ。ただし、機能自体は標準規約として策定が進められているものであるため、Firefox、Chrome、Safari、Operaなどほかの主要ブラウザでも機能する。
使っていないCSSを見つけ出す方法 | エンタープライズ | マイコミジャーナル
ブックマークレットとして使えるチェックツールの紹介です。
一歩上行く！携帯HTML/XHTMLデザイン・コーディング術(第一弾)
※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はここぞという時のみに使った方が良いでしょう。あまり使いすぎると縦に長くなってしまうので。
ケータイフォームでの入力モードの仕様について
http://ke-tai.org/blog/2008/09/19/inputmode/
Auで困ったことになった経験があるので記述しておきます。
たいてい３キャリア共通にするには次のように指定すると書かれております。
数字入力モードの場合
style=”-wap-input-format:"*<ja:n>";-wap-input-format:*N;”
（※istyleも同時に指定）
エルアークでもこの方法をとっていたのですが、W62SHではこの指定では誤動作し、数字入力を指定したはずなのに、半角アルファベットモードになり、しかもユーザーがモードを変えられないというおまけつき。
はまりです。
style=”-wap-input-format:*N;-wap-input-format:"*<ja:n>";”
このようにdocomo用とau用の指定を逆にするとW62SHでは問題は回避できます。
が、この指定にするとモードが変わらない機種が別に発生します。
ということで、全キャリア共通にはできないという結論に達し、inputタグはキャリアごとに出し分けるようにしました。
一部の機種で各キャリア用のモード設定を全て盛り込んだinputだと、こちらの意図と異なる動作となる報告が来たので調べてみると同じトラブルに気づいているか違いました。（SoftBank 934SH
・740SC）
解決方法はやはり、キャリア毎に出し分けするしか無さそうですね。
