次世代Zen-coding「Emmet」をSublime Text 2で試してみた

HTML/CSSのコーディングを効率化する「Zen-Coding」が次期バージョンで大幅に仕様を変更し「Emmet」と名称を変更するようなので、現在公開中のベータバージョンを試してみました。 Sublime Text 2にインストール Sublime Text 2(以下ST2)向けのEmmetはGitHunにて公開されていますので、レポジトリを追加してインストールすることが出来ます。 具体的な手順は下記の通り。 コマンドパレット(Win:Ctrl+Shift+p、Mac:Command+Shift+p)...

HTMLメール作成時の注意点ちょっとだけまとめ

HTMLメールを作成する際の注意点を少しだけ集めてまとめてみました。ちょっとだけ内容が古いかもしれないので、現状は違うのかもしれませんが、後方互換はなされていると信じて…。 デザイン上の注意点 デザイン上の注意点は主にサイズ。テーブルレイアウトでも表現できなくは無いので、ファーストビューなどの大きさに気をつけるだけで大丈夫そうです。 横幅550~600px、少なくとも800px、できれば750px以内という説も ファーストビューに入る縦幅は300~500px以内 ただし、殆どのクライアントで初期表示は画像を読み込んでいない状態になるので、画像が読み込まれていないことを考えて作る必要があるみたいです。 コーディングの注意点 懐かしのHTML4+テーブルレイアウトで組む必要があります。今更テーブルレイアウトを組もうと考えると中々大変そう…。昔は良く組めたなぁと思います。 さらに、headタグ内を読み取ってくれないクライアントがあるそうなので、CSSは埋め込む必要があります。これでまたソースコードが大変な状態になりそう…...

HTML5で追加されたフォームの新機能を試してみた

HTML5から実装されるフォームの要素が多数あり、事前調査とスマートフォンサイトにも使えそうなことから、ちょこちょことメモを残しておきます。 input typeの追加属性 inputタグのtype属性に、要素が幾つか追加されました。追加された項目については、この辺りで網羅されているので、そちらを参照ください。 中でも、number・date・tel・email等はお問い合わせフォームにも良くある項目なので、実装された時には活用したいですね。 また、rangeの様に入力形式が大幅に変わったものもあります。 ※対応していないブラウザでは、ただのテキスト入力欄になります。 JavaScriptを利用しないと作れなかったスライドバーでの入力方法は、色々な使い道がありそうです。 placeholder属性 サンプルとして予め表示させておき、フォーカス時に非表示になるテキストを追加できるplaceholder要素が実装されます。 この機能についても、...

iPhone、iPadでのoverflow:scroll/autoの動作について

ある案件で、divタグにoverflow:autoを指定し、スクロールバーを表示される様な指定をしていたのですが、iPadで確認を取った時に、スクロールバーが表示されていない事を教えてもらい、iPhoneでも同様の状態になっている事に気づきました。 また、通常のスクロールのようになぞってもスクロールされず、中のコンテンツを確認することが出来ませんでした。 何か方法でもあるのかと調べてみたところ、「メモ: iPad(iPhone)の困った仕様」で、「二本指」でなぞることでスクロールする事が分かりました。 説明書が無い、また、二本指でのスクロールはあまり使わないことから、中々気づきにくい操作であるような気がするので、iPhone向けのコンテンツなら尚更、ページ内に説明文が必要な感じを受けました。 「直感的」な操作であるタッチパネルであっても、...