CSSの書き方を共有してみます！
CSS難しいです！
どうもいつもFireFoxで見ていてIEの存在を忘れますが、大体XHTML + CSS を頑張って作ると1か所はIEで崩れています。。。
まだまだ修行が足りませんね＞＜
さてさて、実は現在複数人でページを作成していまして、CSSの書き方も統一しようということで。
で、せっかくなのでこの場でも共有して見ちゃったりなんかして！
というログです。。。
ということでCSSコーディングの際にSelector Setは大体こんな感じで書いてます。
.selector
{
property: value;
property: value;
property: value;
}
ちょとこのままだとわかりにくいので解説っぽいのを。
1.) " { "の前に改行を設ける
2.) 各propertyの前はtabを設ける
3.) 各valueの前は半角スペースを設ける
4.) 各valueのあと、最終行であってもセミコロンを設け必ず終了を示す
5.) " } "はtabを設けない
次にpropertyの順序ですが、結構CSS2 Specificationに沿う流れが、あるようですね。
とはいえ、使いやすさ！が大事なので自分はMozilla.orgにて利用されているプロパティ順序で作業をしています。
で、その順番が以下な感じ。
/* Suggested order:
* display
* list-style
* position
* float
* clear
* width
* height
* margin
* padding
* border
* background
* color
* font
* text-decoration
* text-align
* vertical-align
* white-space
* other text
* content
*/
と、まぁこんな感じでしょうか。
他細かいところもつつきはじめるときりがないんですがほんとに第一歩のベースとしてはこのあたりで。
まず、連携・共有で＞＜
どうもいつもFireFoxで見ていてIEの存在を忘れますが、大体XHTML + CSS を頑張って作ると1か所はIEで崩れています。。。
まだまだ修行が足りませんね＞＜
さてさて、実は現在複数人でページを作成していまして、CSSの書き方も統一しようということで。
で、せっかくなのでこの場でも共有して見ちゃったりなんかして！
というログです。。。
ということでCSSコーディングの際にSelector Setは大体こんな感じで書いてます。
.selector
{
property: value;
property: value;
property: value;
}
ちょとこのままだとわかりにくいので解説っぽいのを。
1.) " { "の前に改行を設ける
2.) 各propertyの前はtabを設ける
3.) 各valueの前は半角スペースを設ける
4.) 各valueのあと、最終行であってもセミコロンを設け必ず終了を示す
5.) " } "はtabを設けない
次にpropertyの順序ですが、結構CSS2 Specificationに沿う流れが、あるようですね。
とはいえ、使いやすさ！が大事なので自分はMozilla.orgにて利用されているプロパティ順序で作業をしています。
で、その順番が以下な感じ。
/* Suggested order:
* display
* list-style
* position
* float
* clear
* width
* height
* margin
* padding
* border
* background
* color
* font
* text-decoration
* text-align
* vertical-align
* white-space
* other text
* content
*/
と、まぁこんな感じでしょうか。
他細かいところもつつきはじめるときりがないんですがほんとに第一歩のベースとしてはこのあたりで。
まず、連携・共有で＞＜
ソースコードの先頭行に空白コードが入ってしまう！！
みなさんはCakeを美味しくたべられているでしょうか？
自分は今回かなり穴に嵌りこんでしまったので残しておきます。
今回の壁は
”ソースコード先頭に不要なスペースが入ってしまい、IEで表示した際レイアウトが崩れる”
でした。
ちなみに結論を先に言うと ” ob_clean(); ”です！
さてさて、この変なスペースちゃん。
実は他にも悪さをしてしまっていてソースコードの1行目にこのスペースが入ってしまうことによりドキュメントタイプの宣言が読み込まれないという。
それはもう。。。
と、いうわけでがんばって cake スペース とかで全力検索をかけたのですがいまいち。
いくつかのサイトでutf-8のBOM(Byte Order Mark)設定がされていないからだよ！！
とのコメントがあり試してみたんですが。
だめでしたTT
（ちなみにその方はViewとControllerとModelのファイル、あとアプリコントローラをBOM付きにした所解決したそうです）
そこで天の声が！
根本解決はちょっとソースを追わないといけないし時間がかかってしまうので、いっそ表示前に一度クリアしてしまおう！
はいもうあれですよ。
全力です。
というわけで
/cake/libs/view/view.php
に存在する
function" renderLayout "(大体408行目あたりです)
に以下1行を追加します。
ob_clean();
たったこれだけという。
あ、ちなみに自分の環境ではBOMが付いていたらやはりおかしくなったので全部BOMなしのutf-8に再変更かけました＞＜
以上です。
自分は今回かなり穴に嵌りこんでしまったので残しておきます。
今回の壁は
”ソースコード先頭に不要なスペースが入ってしまい、IEで表示した際レイアウトが崩れる”
でした。
ちなみに結論を先に言うと ” ob_clean(); ”です！
さてさて、この変なスペースちゃん。
実は他にも悪さをしてしまっていてソースコードの1行目にこのスペースが入ってしまうことによりドキュメントタイプの宣言が読み込まれないという。
それはもう。。。
と、いうわけでがんばって cake スペース とかで全力検索をかけたのですがいまいち。
いくつかのサイトでutf-8のBOM(Byte Order Mark)設定がされていないからだよ！！
とのコメントがあり試してみたんですが。
だめでしたTT
（ちなみにその方はViewとControllerとModelのファイル、あとアプリコントローラをBOM付きにした所解決したそうです）
そこで天の声が！
根本解決はちょっとソースを追わないといけないし時間がかかってしまうので、いっそ表示前に一度クリアしてしまおう！
はいもうあれですよ。
全力です。
というわけで
/cake/libs/view/view.php
に存在する
function" renderLayout "(大体408行目あたりです)
に以下1行を追加します。
ob_clean();
たったこれだけという。
あ、ちなみに自分の環境ではBOMが付いていたらやはりおかしくなったので全部BOMなしのutf-8に再変更かけました＞＜
以上です。
- WebクリエイティブのためのPHPサンプルブック (Web Designing BOOKS)/深谷 源
- ￥2,940
- Amazon.co.jp
さくらレンタルサーバでcakePHPを使いたい！
と、いうわけで思いったったが吉日。
さくらインターネットにサーバスペースを設けCakeを設置することに。
しました。
ひとまず公開フォルダにcake導入用フォルダとして”module”フォルダを追加。
です。
次に全ファイルをアップロード！
ががが、動かないorz
おなじみのあれですよ。
こんにちは Internal Server Error ☆
落ち込んでもいられないので調べてみるとどうも.htaccessを書き換える必要があるみたい。
さしあたりまずは3ファイル存在する”.htaccess”を以下のように変更。
1.) /module/.htaccess
<IfModule mod_rewrite.c>
RewriteEngine on
RewriteBase /module
RewriteRule ^$ app/webroot/ [L]
RewriteRule (.*) app/webroot/$1 [L]
</IfModule>
DirectoryIndex index.shtml index.html index.php
2.) /module/app/.htaccess
<IfModule mod_rewrite.c>
RewriteEngine on
RewriteBase /module/app
RewriteRule ^$ webroot/ [L]
RewriteRule (.*) webroot/$1 [L]
</IfModule>
3.) /module/app/webroot/.htacess
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /module/app/webroot
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^(.*)$ index.php?url=$1 [QSA,L]
</IfModule>
それと念のため”module”直下と”webroot”内のindex.phpに記載されている”CAKE_CORE_INCLUDE_PATH”を以下に修正
define('CAKE_CORE_INCLUDE_PATH', '/home/さくらインターネットユーザ名/www/module/');
以上でとりあえず動作を確認！
いけそうな気がします、だぜ。
今日は疲れた～、さんなので次回に続きます多分。。。
さくらインターネットにサーバスペースを設けCakeを設置することに。
しました。
ひとまず公開フォルダにcake導入用フォルダとして”module”フォルダを追加。
です。
次に全ファイルをアップロード！
ががが、動かないorz
おなじみのあれですよ。
こんにちは Internal Server Error ☆
落ち込んでもいられないので調べてみるとどうも.htaccessを書き換える必要があるみたい。
さしあたりまずは3ファイル存在する”.htaccess”を以下のように変更。
1.) /module/.htaccess
<IfModule mod_rewrite.c>
RewriteEngine on
RewriteBase /module
RewriteRule ^$ app/webroot/ [L]
RewriteRule (.*) app/webroot/$1 [L]
</IfModule>
DirectoryIndex index.shtml index.html index.php
2.) /module/app/.htaccess
<IfModule mod_rewrite.c>
RewriteEngine on
RewriteBase /module/app
RewriteRule ^$ webroot/ [L]
RewriteRule (.*) webroot/$1 [L]
</IfModule>
3.) /module/app/webroot/.htacess
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /module/app/webroot
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^(.*)$ index.php?url=$1 [QSA,L]
</IfModule>
それと念のため”module”直下と”webroot”内のindex.phpに記載されている”CAKE_CORE_INCLUDE_PATH”を以下に修正
define('CAKE_CORE_INCLUDE_PATH', '/home/さくらインターネットユーザ名/www/module/');
以上でとりあえず動作を確認！
いけそうな気がします、だぜ。
今日は疲れた～、さんなので次回に続きます多分。。。