Codingの最近のブログ記事
Codingドコモのi-modeでxhtmlを対応させる
ドコモだけxhtmlがうまく表示されず、奮闘するはめになりましたので、
忘れないうちにメモとして注意点をいくつか・・・。
■メタのContent-Typeを
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=Shift_JIS" />
と記述。
■ファイル名を「?.html」ではなく「?.xhtml」に変更する。
↑はちょっと・・・という方は
■xhtmlファイルがあるディレクトリに下記のコードが入った「.htaccess」ファイルを置く。
AddType application/xhtml+xml html■cssを外部リンクにせず、style属性を用いる。
・・・これでもcssが効くものと効かないものが存在します。
i-modeで指定可能なプロパティは以下のとおりです。
'background-color' 'background-image' 'border' 'clear' 'color' 'display'
'float' 'font-size' 'height' 'list-style-type' 'margin' 'text-align'
'text-decoration' 'veatical-align' 'width'pタグより、1つずつspanタグで指定したほうが的確です。面倒ですが。
リストを横並びにしたときに、単語ごとに折り返すCSSプロパティ（IE用）
フッターリンクなどで、リストを横並びにした際
丁度折り返す所でくずれているか、「display:inline」を使用して単語の途中でも折り返すか・・・。
「display:table」を使用しても、safariで崩れたり、対応していないブラウザが存在するので、使えません。
IEさえちゃんと表示されれば「float」だけで済むのに・・・＞＜
と思っていましたが、ちゃんと単語ごとで折り返してくれるCSSプロパティがありました。
このプロパティはIEのみ対応しています。
word-break: nomal;
英語などの半角英数文字列は単語の切れ目で折り返され
日本語などの全角文字列は、単語の途中でも表示範囲にて折り返す。
word-break: break-all;
文字列や言語に関係なく、設定された表示範囲で折り返す。(単語の途中でも)
word-break: keep-all;
文字列や言語に関係なく、単語の切れ目で折り返す。
----------------------------------------------------------------------------------------------------------
結局は単語ごとに折り返すword-break: keep-all;しか使わないとは思いますが・・・。
半角スペース、全角スペースを単語の間に入れると折り返してしまうので注意です。
JavaScriptのデバッグ方法
プログラムの誤りを修正する作業を「デバッグ」といいますが、JavaScriptのデバッグの「始め部分」を紹介します
なんか上手くJavaScriptが動かないときに試してみてください
Dreamweaver 正規表現で置換
Dreamweaverで検索や置換をするときに、正規表現をつかえば、
非常に柔軟な条件検索ができます。とても便利です。
たとえば、
・imgタグに閉じタグを挿入する
・属性の中の数値だけまとめて変更
・属性に単語を追加 etc...
検索したいとき、オプションだけでは対応できない時などは、
とりあえず正規表現を使った方法を探してみるとだいたい見つかることが多いです。
ctrl+Dで偶然発見したショートカット
Dreamweaverでコーディングしてるときに偶然発見しました。
コードビューでリンクタグ（href="●●●.html"）にカーソルがいるときに、
「ctrl+D」を押すとそのページを開いてくれます。
ケータイ コーディング関連（i-mode限定）
i-mode端末の対応HTML・容量・画像形式・絵文字などの一覧
http://www.ezinfo.jp/tips/itag
対応タグ一覧
http://34567.jpn.org/study1/html/html60_imode.html
ドコモ絵文字一覧
http://www.nttdocomo.co.jp/service/imode/make/content/pictograph/basic/
i-mode専用HTMLリファレンス
かなり古い機種でやっているので、このサイトで扱っているタグはほぼ使えます。サンプルコードもあるのでわかりやすいです。
http://www.hajimeteno.ne.jp/i-mode/index.html
EXCELをHTMLのTABLEに変換するjQueryプラグイン
ウェブサイトのテーブルの表をCSVでアップするだけで更新可能なJavascriptです。
企業さんは大抵エクセルで管理されてるので、料金表やスペック表など、更新頻度の高いテーブルにこれを突っ込んどけば、あとあと便利かと思います。
>>ダウンロードはこちら
■使い方
Excelで作成した表をCSV形式で保存する、それをサーバーにアップロードする。HTML側ではjQuery本体とjquery.csv2table.jsを外部読み込みをする。
HTMLのBody内の表示したい部分に以下の空DIVタグとスクリプトを記述する。
複数の表を表示させたい場合は、ID名が重ならないように書き換えて上記のコードをコピー＆ペーストするだけです。
昇順降順ソートなんかもできるので便利ですね。
via:U-ziq
エクセルーデータから表のTableタグ生成してくれるサイト
TABLEIZER! -- Spreadsheets to HTML Tables Tool
http://tableizer.journalistopia.com/
せっかくエクセルでデータが存在するのに打ち直すのは面倒で非効率です。
こちらのサイトを使用すれば、コピペで表の作成が可能です。
実際に生成されるタグ等を見たい方はこちらを参照ください。
FireFox3で背景がずれる
FireFox3でbodyタグに背景を入れた時、
以前のIEと同様に1px背景がずれるバグがあるようです。
以下のCSSを挿入するだけでずれが直ります。
body,x:-moz-broken {
margin-left:-1px;
}
