そこでご紹介したいのが、こちらのサイトさん

Javascriptを使って、静的HTMLの中でファイルをインクルードするソースを公開されています。

使い方は簡単。上記のサイトにある関数を記述したjsファイルを作成するなりHTML内に書くなりして、あとは必要な部分で関数を呼び出すだけ。

たったこれだけです。ヘッダーとかフッターとか、全ページで共通して表示させるような部分をこれで外部ファイルにしておけば、静的ページの作成も楽になりますね。

今までは、共通部分を一ヶ所直すたびに全ファイルを直すとかいう効率の悪いことをしてたんですけど、今度からはこれで行かせていただこうとを思います。

むしろもっと早くに調べとくんだったよ……バカ。

注：ブラウザによっては動かない場合もあるっぽいです。僕の使ってるOperaでは動かなかった。他にもformが動かないなどの報告もあるみたいなので、運用レベルでの使用ではなく、モックの作成などに活用するのが良いかもしれません。

あるいはこのソースを改良して動くようにするとか、でしょうか。

これをやることによってボタンじゃない文字のところをクリックしてもちゃんと反応します＾＾
本当にこれはよくつけ忘れてしまいます　っ(・ω・｀)

このような１枚の画像があるとして、丸と三角と四角にリンクを設定するとします。





プロパティの左下に選択ツールみたいなものがあるのでこれで囲ってあげます。





選択されたらリンクはもう出来上がりです＾＾
アラ簡単ねぇ(・ω・*)

htmlはこのように自動的に書かれるため楽です＾＾

今までドリームウィーバー使っていてこのことの気づきませでした；；
少しは作業のスピード上がればいいなと思っていますがなかなか難しいです(・ω・｀)

IE6でレイアウトが段落ちした場合

• 全体の幅を変えてみる
• カラムごとに分けたdivの幅を変えてみる
• カラムの中を調整してみる

という順でやればよかったと反省　っ(・ω・｀)
コーディング相変わらず苦手です；；
今回自分でコーディングしたhtmlじゃなかったので苦戦しました；；
ううう勉強不足だ；；がんばる(；ω；｀)

使用したのはこれDD_belatedPNG 0.0.8a releasedを使用しました。
Htmlのhead部分に

を書いて。

DD_belatedPNG.fix(‘img, #content’);
にimgタグや適用させたいclassやidを書きます。

そしたらできあがり＾＾
最近ネタがなくなりつつあります。
どうしましょう(・ω・｀)

ちょっとカッコ悪いのでbodyにフッターの背景色を指定して、wrepperに全体の背景色を指定して、contentでセンタリングすればなんとかなるかなと予想しています。

正直自分コーディング苦手です…　っ(・ω・｀)

できればこの処理が並列で行われると良いのだが、現状はSafariやIE8でしか並列処理は実装されていないらしい。そのうち段々と実装されていくらしいけど。

とりえあず、全体的に実装されるまでは何らかの対策を講じようというわけで、その何らかの対策についてですけれど、javascriptを動的にロードすることで、並列処理を可能にする方法がある。

通常、javascriptファイルを読み込む場合は

headタグの中に↑こんな感じで記述するけれど、これ自体をjavascriptで行うことで、動的な読み込みが可能になる。

同様にcssもこの方法で読み込むことも可能っぽい。

参照サイトはこちら。実際に並列処理している様子が分かるますです。

このボタン、Firefoxだとsubmitが既定値になっているらしいのだけど、IEとかだとsubmitの属性がついていない状態が既定値になっているっぽい。

なので

みたいな感じでボタンを設置しておくと、IEでは何のアクションも起こらない。

こうやってちゃんと属性を自分でセットしてやらないと、何の役目も果たしてくれないボタンがぽつんと配置されるだけになってしまうようです。

つい最近のことですが、このことを知らなくて、普通にFirefoxでテストしたときにメールの送信ができていたから問題ないな～と思っていたらIEで何のアクションも起こらないよ的な指摘を受けまして……調べてみたらこれが原因だったと。

いやはや……。

ちょっと言葉での説明は難しいのですが

• 大元の横幅は可変
• 大元はセンター揃え
• 画像+テキストのセットが横にずらーっと並ぶ
• はじっこまで来たら、折り返す
• テキストは画像の下に表示

こんな感じです。

で、仕様するHTMLはこんな感じにしました。

dlを使ってのマークアップでも出来るかなーって思ったんですが、どうもうまく行かないので、divで囲う事にしました。単純に考えて、このdivをfloatしてあげればいいのかなーって思ったんですが、それだと大元のセンター揃えが外れてしまいました。

あくまでセンターに揃えたまま、画像とテキストのセットを横に並べたい。

どうしたもんかなーと思い、調べた結果見つけたやり方がコチラ。

こんな感じで書いてあげると、センター揃えを維持したまま、画像+テキストのセットが横にずらーっと並びます。

divをdisplay:inline;でインライン要素にして横並びにしてあげて、その中を囲うspanにdisplay:table-cell;とdisplay:inline-block;でインライン要素の中での横幅を指定してあげる事によって、テキストが画像の下に回りこむって訳です。

ギャラリーサイトなんかで使えそうな手法ですね。

大元のセンター揃えと可変っていう条件が無かったら、他にも方法はあるんですけどね。