次世代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向けのコンテンツなら尚更、ページ内に説明文が必要な感じを受けました。 「直感的」な操作であるタッチパネルであっても、 »

HTMLのアンカーポイントの位置を上にずらしてみた

ページ内リンクなどで使われるアンカーポイントですが、特に指定をしないとウィンドウの上端に移動します。 ただ、ウィンドウの上端だと少し読みづらかったり、見つけづらかったりするので、少し余白を空けたいことがあります。 アンカーポイントの下に余白を空ける方法もあると思いますが、コーディングを済ませた後にアンカーポイントだけ挿入したい時に少し手間になってしまいます。 そこで、以下のようなCSSを適用させてみました。 .hideAnchor { display:block; height:0px; /height:1px; overflow:hidden; text-indent:-9999px; margin-top:-10px; padding-bottom:10px; } 上の記述でデザインはそのままに、 »

CSSネガティブマージンのすすめ

コーディングを進めていくにあたって、コンテンツ領域からはみ出ているデザインや、一部分だけ余白を取らないようなレイアウトの時に、ネガティブマージンを利用しています。 IE6での崩れも少なく(多少解釈が違う箇所もあります)、色々なところで使えるので、備忘録のためにもどのような場面で利用したのか控えておこうと思います。 見出し部分だけ左右の余白がないレイアウト 見出し部分だけ左右の余白がなく背景が敷いてあるようなレイアウトの際に、いちいち見出しの時だけ余白のスタイルのdivから外す方法もあると思いますが、ネガティブマージンを用いればその必要も無くなります。 見出しの時だけdivから外す方法 <h2>見出し2</h2> <div class="inner"> < »

オブジェクト指向CSS : OOCSSについて

英語の記事なので、具体的にどんな内容が書かれているか理解できていませんが、オブジェクト指向CSS(Object Oriented CSS: OOCSS)について書かれた記事を読んで、CSSの記述方法について、もしかしたらOOCSSとは違う考えなのかもしれませんが、少し考えてみました。 これまで、スタイルを付与したい箇所にid/classを指定し、それぞれに固有のスタイルを当てはめていましたが、 Web上の表現として良く利用するスタイル そのサイト内でよく利用するスタイル そのページ内でよく利用するスタイル 指定の箇所でしか利用しないスタイル に分けられるのでは無いかと考え、それらについて定義したスタイルを「使い回す」だけでコーディングを行って、効率が良いのか試しています。 具体的にどのような記述を行っているかは以下の通り。 Web上の表現として良く利用するスタイル »