ケータイサイト制作前にコーダーが確認しておきたいところ │ これからゆっくり考L +α
モバイルサイトの制作前に、もしくは打ち合わせに行った場合は必ずチェックしておきたいところをまとめてみました。 こちらから積極的に確認しないと、何も詳細が分からないままデザインだけぽーんと渡されてしまうことがあるので、自ら前のめりでチェックしておきたいところです。 個人的に「ここだけは外せない！」という項目は以下の6つ ・xhtml？html？ ・文字コードは？ ・tableは使ってOK？ ・絵文字は？ ・カタカナの扱いは？半角？全角？ ・VGA対応は？ xhtml？html？ 最近は基本xhtmlで作成という流れに（私の場合は）なってますが、それでも念のために一応聞いておきたいところ。 昔、xhtmlで作成してほぼほぼ終わった段階で「アップするサーバーでxhtmlが使えないのでhtmlに変更してください！」と言われてやり直したことがあります...。 文字コードは？ 携帯サイトといったらSh
覚えて良かったCSSテクニック « zaru blog
ここ最近、覚えてよかったなーと思ったCSSテクニックをまとめてみる CSSテクニックは時代とともに変わっていくけれど、ここ1年ほどスタメンレベルで使うCSSテクニックが絞られてきたので、ここらでちょっと個人的にもまとめておこうかと。 liボックス 幅：190px マージン：15px liボックス ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。 liボックス ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。 <li>にはクラスを指定せずに、左右にぴったりくっ付くように配置が可能。 <style type="text/css"> #box1{ width: 600px; } ul{ width: 615px; margin: 0 -15px 0 0; overflow: hidden; _zoom: 1; font-size:7
p15.jp
先日をぞーくんに教えてもらった Zen-Coding、Coda でも使えるとのことで試してみました。 Downloads から Zen Coding for Coda v0.3 (Universal Binary) をダウンロード。 解凍すると ZenCoding.codaplugin というファイルが出てくるので、ダブルクリックで Coda が起動してプラグインがインストールされます。 続きを読む Coda で Zen-Coding を使う
Codaでこーだ！ クリップの使い方 | 東京ホワイトノート
先日紹介したWebオーサリングツール「Coda」ですが（オフィシャルではCODAと紹介されてますが、アプリを立ち上げるとCodaとなっているのでそっちに統一します）、とっても使える機能「クリップ」の使い方を紹介します。 クリップと言うのはDreamweaverで言うところのスニペットですが、このスニペット自体を使っていない、知らない人ってのも案外多いんじゃないかと思います。スニペット（あるいはクリップ）は使用頻度の高いHTMLソースやCSSの記述をあらかじめ登録しておいて好きな時に埋め込むことができる機能です。 CSSでコーディングをしていると background:url(../img/hogehoge.jpg) top left no-repeat; なんて記述を頻繁に使いますが、コード補完機能を使っても入力するのは結構めんどい。そんな記述をスニペットに登録しておけば一発で入力して
簡単な入力するだけでHTMLタグを生成してくれるZenCoding | Happy My Life
EmacsWiki: Zen Codingより。 ZenCoding-modeというHTMLを簡単に入力できるモードがある。 これを活用する事で、Emacs上でタグを簡単な記法で書いた後、C-とする事でHTMLに展開する事が可能になる。 このメリットとして、文字入力が少なくなる上に、タグの閉じ忘れもなくなるので早くて正確にHTMLが生成できる。 このHTML化できるというのが重要。Hamlのような独自記法だと、プログラマーに取っては楽に記述、編集ができるという便利なフォーマットなのだが、デザイナーにとっては、使いなれたデザインソフトが使えないという、非常に不便なフォーマット、という事になる。 しかし、ZenCodingだと最終的にはHTMLに変換されるので、プログラマは簡単に記述できる。デザイナーはあとで楽に編集できるという、何方にもメリットとなる。 サンプル どのような入力で、どのように
PHPの閉じタグは心の臓に悪いから使わないで - Unknown::Programming
閉じタグってのは「?>」のことね。未だに閉じタグ使ってるコードを見ると一瞬ドキッとするんだよね。(自分の昔のコードも含むｗ) いや、ちゃんとわかってて確実に使いこなしてるならいいんだけどたまに -- ここがファイルの先頭 -- <?php class Foo { // いろいろ } ?> -- ここがファイルの後尾 -- みたいな感じで閉じタグの後に改行コードが一つ入ってたりするのを見ると「あわわわ」ってなっちゃう。 実際には改行一つだけなら問題は出ない、PHPは閉じタグの直後の改行を消してくれるからね。 問題は改行が二つ以上あった場合だ。これは悲惨なことになる。PHPは閉じタグ以降のデータ(というか範囲外のデータ)は全部HTMLとして出力される仕様なので、改行コードが表示されちゃう事態に。 表示されちゃうっていうのは語弊があるか、元々PHPはHTMLに埋め込むための言語なのでの範囲外の文
グラフィックソフトのようにHTMLレイアウトが組める「Drawter」
HTMLを直感的に組み上げていけるのが、今回紹介する「Drawter」です。こちらのサービスはグラフィックツールで絵を描いていくような感覚でHTMLをマークアックしていけるというものです。 かなり自由度が高いので、簡単な物から、凝ったレイアウトまで色々と試せそうな感じです。 詳しくは以下 マークアップツリーもグラフィカルに表示され分かりやすく使い勝手が良いです。とにかくあまり考えなくても、「見える化」が徹底されていますので視覚的に理解しながらHTMLを組み上げていけます。 自分お好きなようにレイアウトを組んだら、上部メニューのCode メニューから「Generate Code」を選べば各コードが生成されます。AllsiteはHTML+CSSでのコードで、その下にはHTMLとCSSの欄があり、個別にコードを生成してくれます。 HTMLが苦手なんて人でもなれれば、簡単にページを組み上げることが
ASCII.jp：jQueryによるLightbox風モーダルウィンドウの作り方｜Web制作の現場で使えるjQuery UIデザイン入門
HTMLとCSSによる表現を考える 複数のサムネイル画像を並べておき、画像をクリックするとモーダルウィンドウで拡大画像を表示するWebページを作成します。はじめに、HTML／XHTML（以下、HTML）とCSSでどのようにモーダルウィンドウを表現するか、静的なページを作って考えてみましょう。 HTMLは、ul/li要素で並べたサムネイル画像の後に、「glayLayer」と「overLayer」というid属性をつけたdiv要素を配置します。glayLayerはページ全体に重ねる半透明のレイヤーを表示するための要素で、overLayerは子ウィンドウを表示するための要素です。子ウィンドウに表示したい要素（今回はimg要素）はoverLayer内に配置します。 ▼サンプル01（HTML部分） <h1>jQueryを利用したモーダルウィンドウの作成</h1> <ul> <li><a href="i
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ZenHTMLSelectorsEn - zen-coding - Selectors and aliases for Zen HTML plugins - Project Hosting on Google Code%26utm_content%3DGoogle%2520Reader)
css-lecture.com