HOMEUP

WEB関係

WEB関連の事に関していろいろ。HTML、CSS、JavaScriptやPHP、関連する事を気の赴くままに羅列。

基本形(このサイトに関して)

(X)HTML、CSS、JavaScriptは独立させる。つまり文書の構造、見場、動き(機能)は独立させるのが望ましい。との偉い人の言葉。実際にそうだと思うけどこういう解説もあるサイトではhtml1ファイルにいろいろと詰め込んだほうが便利なので1ファイルにだらだらと書いていることが多いです。

一人で仕事することが多いのですがクライアントに納品する場合はちゃんと独立させています。グループやチームで作業する時は特に気をつけてコードを書かないといけないですね。

このページの拡張子を見れば解ると思いますがphpは普通に使っています。例えば各ページの上と下にあるGoogleAdsenseのコードはhtmlのコードで<?php> inclued(xxxx); ?>とかして楽をしています^^。

どんどん楽をしていくと最終的にはCMSやWIKIツールみたいになると思うのですがその分触りにくくなるのかなぁ?

phpからeruby(erb.rb)へ移行 2008/08/11

phpからerubyに移行しました。

xxxxx.phpをすべてxxxxx.htmlに変更。

前述のAdsenseのコードも<%=MyLib::GOOGLE_HEADER%>とかやってます。

.htaccessでhtmlをrubyのスクリプトに食べさせています。'/'でこれを設定すると/以下のhtmlが全部erubyとして実行されちゃうのですが、全部スクリプト入れちゃうので構わないかな…

共有サーバーだとhttpd.confを触れないので結構面倒ですネ。

とりあえず自宅のローカルサーバーで表示できるかどうかとかテストしてから「さくらのレンタルサーバー」へアップロードしています。

TIPS & TRICKS

さくらインターネット共有サーバーの設定
借りているさくらインターネットの共有サーバーの設定に関して記述しています。
CGI環境変数チェッカー
サーバーサイドでいろいろやると思うので定番を作成。erbで書いています。(まあ、これはソースなんていらんやろ)
Boxモデルのスタイルシート取得
CSSのスタイルシートをJavaScriptで動的に変化させてスタイルシートをコピペできるようにするプログラム。まだ設定項目が少ないです。
CSSと画像で角丸四角形
角丸四角形で検索してくれる方が多いので私がよくやる手抜き(^^;)CSSと画像で角丸四角形を描く方法を晒しています。

CSS

現在主流(? 一部の怪しげなブラウザを除いて)のCSS2.1についてまとめてみます。

以降のコンテンツは別ページへ移動しないといけないなぁ。

Length 長さ

em
要素に適用される長さを1としたときの倍率。
ex
英小文字「x」に適用される長さを1としたときの倍率。
px
実際には相対単位です。96dpiの画面で96pxを指定したときに1inchとなります。
in
インチ。2.54cmです。
cm
センチメートル。
mm
ミリメートル。
pt
ポイント。1/72in。
pica
パイカ。12pt。

0以外の長さには当たり前ですが必ず単位をつけないといけません。

Box Model

CSS2.1 Box Model

とりあえずよく使うboxのborderをアップしました。

border
HOMEUP