WebシステムのHTMLはできるだけ簡単に

Webシステムは通常ブラウザ上で動作させるのでHTMLを書きます。
HTML、CSSの知識が乏しい為とんでもないマークアップを書いてしまう人がいます。

よくある項目のタイトルと入力エリアがあるパターンでdivタグを５重くらい重ねて表現する人がいます。

こんな感じの入力欄を作るだけで下の「深いタグ」のようなＨＴＭＬを書く人がいます。
詳しくは覚えていませんが、各タグは、枠線の為のタグ、幅を決めるタグなどそれぞれ役割があるようです。
しかし、CSSを適切に使うことで「浅いタグ」くらいで済みます。修正も見た目もよくよくなります。

名前:

深いタグ
<div>
  <div>
    <div>
      <div>
        <div>
          <span>名前:</span>

          <input>

        </div>

      </div>

    </div>

  </div>

</div>

浅いタグ

<div>
  <label>名前:</label>

  <input>

</div>

具体的な正解は書きませんが(笑)

Bloggerのブログの説明のフォントサイズを変えたい

　Bloggerのブログの説明のフォントサイズって大きすぎると思いませんか？
それを変更する方法です。
実はとっても簡単です。他のところもこの手法で対応できます（ふつーのやり方のようですが…）


手順

1. テンプレートのデザイナーを起動します。
2. 左上あたりにあるメニュー（？）から「上級者向け」を選択します。
3. 2.の右にあるサブメニュー（？）から「CSSを追加」を選択します。
4. 右側に入力欄が表示されるので以下を入力します。
   .Header .description {
     font-size: 100%;
   }
   CSSの意味の説明はしませんが、「ブログの説明」は、このスタイルでフォントの大きさを決めています。

　なぜ、「.Header .description」というのがわかるかというと、(Google Chromeの場合)F12を押すと、ブラウザーの下にデベロッパーツールが表示されます。
　これで、「ブログの説明」のスタイルを調べます。

下の「.Header .description」がデフォルトのCSSです。「font-size: 140%」が取り消し線で消されているのがわかると思います。
上の「.Header .description」が、「CSSの追加」で追加した内容でこれが有効になっています。

レンタルサーバーのファイルがダウンロードできないという話

　あるクライアントがレンタルサーバーを変更するということで、ホームページのデータを送ってもらったのですが、運用されているデータと管理されているデータの内容が違うという話を以前しました。
　結局、最終手段のレンタルサーバー内のファイルをダウンロードして、それを新しいサーバーに持っていくことにしました。

　で、移行元のレンタルサーバーからダウンロードした時に、エラーになってダウンロードできないファイルがあったそうです（担当の人がサポポートの人に聞きながら頑張ってFTPのツールを使っていたようです）。
　こんな作業をしたことがある人は大体あのあたりだと察しがつくと思います。

　サポートの人も結局わからず、「一つずつファイルをダンロードしてください。多分ダウンロードできないファイルは、使っていないと思います（うーん、勝手な解釈だ…）ので削除しても大丈夫だと思いますが…。」という答えを出したようです（サポートの人に全てを解かれっていうのは酷な話ですが）。

「結局は、レンタルサーバーにマルチバイト(全角)文字があったため、FTPのツール側で文字化けしてファイルをダウンロードできなかったのが原因でした。」

　まぁ、このおかげで、チャリンといったのでよかったんです。


　「実は、こんな仕事はあっちこっちにたくさん転がってるんじゃないかと思いました」


ワープロ感覚でホームページを作りたい人へ。

いろいろなブラウザでのテスト面倒

　今作ってるWEBのシステムをいろんなブラウザでテストした。
イントラネットのシステムだったら、これでやってねで終わるんだけど、外への公開用なのでそうも行かず。

こんなに沢山。ホントは分担作業にしたいんだけど、分担する人いないし。

• Internet Explorer 8, 9, 10
• Firefox
• Safari
• Google Chrome

　ほとんどの機能を動かしたので朝からすごく疲れた。

なんとなく、Chrome→ Safari→IE10→Firefox→IE9→IE8の順番でやってみたんだけど、IE9とIE8でJavaScriptが動かないのが判明。
原因は、IE8がIE7互換になって動作してて、連想配列の最後の項目の後ろにカンマが付いてるのが問題だったらしい。

　metaタグでIEは、IE8とIE9をエミューレートしなさいという設定を入れることで動くようになったけど、今度は、IE10で動かなくなってしまうという・・・。

　なぜ？余計なmetaタグなんてあるからというのがわかったので、結局、IE10か、IE以外のブラウザだったらそのタグを付けないということでことで解決。

HTMLにつけたmetaタグがこれ。IE10の時につけると事件が起こるから気をつけてね。

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8;EmulateIE9" />