グレヌデサ La graine du dessin: Codingアーカイブ

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タグで指定したほうが的確です。面倒ですが。

Coding Tips

IEでGoogle AnalyticsのJSエラー

一部のブラウザでGoogle Analyticsを入れてるページを見ると、
 JavaScriptエラーが出たりするみたいです。
実際ロボラボも出ました。
他にもGoogle Analyticsが正しくログを表示しなくなったりする事も。
そのときは他のスクリプトが影響を与えている可能性があります。


対策として
 1.Google Analyticsのコードを最新のものにしてみる。
 >>参考サイト

2.BODYタグすぐ上ではなく、HEADタグ内に移動してみる。
>>参考サイト

リストを横並びにしたときに、単語ごとに折り返す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が動かないときに試してみてください

続きを読む: JavaScriptのデバッグ方法

Dreamweaver 正規表現で置換

Dreamweaverで検索や置換をするときに、正規表現をつかえば、
非常に柔軟な条件検索ができます。とても便利です。

たとえば、
・imgタグに閉じタグを挿入する
・属性の中の数値だけまとめて変更
・属性に単語を追加            etc...


検索したいとき、オプションだけでは対応できない時などは、
とりあえず正規表現を使った方法を探してみるとだいたい見つかることが多いです。

参考サイト
http://tenderfeel.xsrv.jp/memo/70/

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

Coding

EXCELをHTMLのTABLEに変換するjQueryプラグイン

ci081226182501.jpg
ウェブサイトのテーブルの表をCSVでアップするだけで更新可能なJavascriptです。
企業さんは大抵エクセルで管理されてるので、料金表やスペック表など、更新頻度の高いテーブルにこれを突っ込んどけば、あとあと便利かと思います。
>>ダウンロードはこちら

■使い方
Excelで作成した表をCSV形式で保存する、それをサーバーにアップロードする。HTML側ではjQuery本体とjquery.csv2table.jsを外部読み込みをする。
HTMLのBody内の表示したい部分に以下の空DIVタグとスクリプトを記述する。
ci081226182606.jpg

複数の表を表示させたい場合は、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;
}

New Entries
1  2  3

Webトレンド情報局とは

クリエイティブグループスタッフがお送りする、Webデザイナーのための知識とTIPS。 PhotoShopの便利な豆知識や、CSSのお困り解決、デザイン概論などなど。
【隔週木曜日更新】

運営会社:株式会社ジーピーオンライン

RSSを購読する

Monthly Archive