web

コンテンツはセンタリングしつつ、ブロック毎の背景をwidth100%で表示させて横縞にする(横スクロール時に背景が切れる問題解決版)。

これは、こないだのフッター / コンテンツの高さが少なくてもブラウザ下部に表示させるでも試していて、安易にdivを入れ子にしてみたら上手くいったようにみえて
ええ!こんなに簡単に実装できちゃっていいのかい?
なんて思ってたんですけど、実際は早とちりで。

ブラウザ幅をコンテンツ分の固定幅より縮めてスクロールバーが表示させ右にスクロールさせると背景が切れるという問題を見つけました。とほほ。

(*ちなみにこんなソース)
[html classname=”html-sh”]
<body>
<div id="content">
<div class="inner">コンテンツ</div>
</div>
</body>
[/html]
[css classname=”css-sh”]
#content{background:#f33;}
.inner{width:780px;margin:0 auto;}
[/css]

先に解決法を書くけど

コンテンツ部分のwidth(固定幅)と同じサイズのmin-widthをbodyに指定すればいいみたい

続きを読む

WordPressのバックアップと復元を練習

乱雑モックアップにはWordPress Database Backup(*1)をインストールしてあって、毎週gmailにデータベースのバックアップが届くようになっているんだけど
それを使って復元した事が一度も無い、というより復元の仕方がよく判らない。

これじゃあ、いざって時に危ないので自分なりに調べて練習してみる事にする。
(*1 WordPress Database Backupは、データベースを定期的に自動バックアップして、そのデータを指定したメールアドレスへ送信出来るプラグイン)

以下、自分なりの解釈なので、表現や手順に間違いがあるかもしれないですけどメモ。

続きを読む

ルートパスとDreamweaverとバーチャルホスト(バーチャルドメイン?)

突然、ルートパス(サイトルート相対パスと呼ぶの?)で書かれたサイトを触る事になって困ったので調べたメモ。

そもそもルートパス(サイトルート相対パス?)ってなんぞ?

ルートパス
サイトルートのルートディレクトリからみた相対パス
/から始まる。
絶対パス
外部サイトへリンク貼るときなんかのパス
httpから始まる
相対パス
ファイルから見た対象ファイルへのパス
よく使う

ルートパスで書かれたサイトをローカルでプレビューするには

Dreamweaverだと

[text gutter=”false”][編集] – [環境設定] – [ブラウザでプレビュー] – [オプション]一時ファイルを使ってプレビューにチェック[/text]
しておけば相対リンクがドキュメントでもプレビュー出来る(プレビューは)。

編集する設定はadobeのサイトAdobe Dreamweaver CS4 * 新規リンクの相対パスの設定
を参照 / ヘルプの引用

[image]一時ファイルを使用してプレビュー

[image]サイト管理のとこ

メリット(だと思うところ)
これだとローカルにサーバーを立てる必要もない。

デメリット(だと思うところ)
IETesterでIE6の表示を確認する時たいへんなのと
編集修正するたびブラウザの更新で確認できない。

XAMPPだと

バーチャルホストを使うのが現実的みたい。

編集するファイルは2つ
1つめ
C:\xampp\apache\conf\extra\httpd-vhosts.conf

(うちのPCでの設定ファイルの場所)

1-1)
[text]NameVirtualHost *:80[text]のコメントアウト(##)を削除して有効化する。

1-2)
例 / dドライブのsiterootフォルダをドキュメントルートにして
http://sitenameでアクセス出来るようにするには。

[text]<VirtualHost *:80>
DocumentRoot "D:/siteroot"
ServerName sitename
<Directory "D:/siteroot">
order deny,allow
allow from all
</Directory>
</VirtualHost>
[/text]
(ちょっと修正した)
Access forbidden!Error 403になっちゃうならDirectoryの指定は必要
<Directory>は<VirtualHost>の中でも外でも問題なにのだろうか?
DocumentRootのパスに2バイト文字が混ざってると上手くいかない感じ。

Directoryの中に記述できるモノもようわからん。
ここらへん?
http://httpd.apache.org/docs/2.2/ja/mod/core.html#directory
http://httpd.apache.org/docs/2.2/ja/mod/core.html#options
http://httpd.apache.org/docs/2.2/ja/mod/core.html#allowoverride

2つめ
C:\WINDOWS\system32\drivers\etc\hosts

例 / さっきのServerNameに記述した名前(sitename)を追加
[text]127.0.0.1 localhost sitename[/text]とか
[text]127.0.0.1 localhost
127.0.0.1 sitename[/text]みたいな感じで

Apacheを再起動してhttp://sitenameにアクセスしてみる。
いままでこれ知らなかったから
phpのテストをしたい場合
xamppのhtdocs以下にフォルダ作ってて
不便だと思ってたけど、他のサイトと同じように管理出来るのかしら。
ん~2バイト文字のフォルダ名が付いてるとエラーがでるのぅ。
もうちょい試してみよう。

参考にしたサイト

続きを読む

コンテンツの高さが少なくてもフッターをブラウザ下部に表示させる

ブラウザの高さに対してコンテンツ量が足りない時、
フッターの下に隙間が空いちゃって、薄っぺらい感じになっちゃうのを回避したい。

[image]理想と現実

つまり、コンテンツの中身が足りない時はフッターをブラウザ(ウィンドウ)下部に固定したい。

DEMO / コンテンツ量が少ないページでも、フッターをブラウザ下部に表示させるテスト。

続きを読む

ある要素内にpaddingが付いてる子要素があったりなかったりする場合に余計なclassを付けないでpaddingを揃える

[下に追記あり / 20100915]
タイトルが意味不明なのはわかってるんだけど、上手くまとめられなかったです。
あと内容はあまり役に立たないと思います。

例えば、aタグをdisplay:block;すると、クリック出来る範囲が広がるのでリンクが押しやすくなってちょっと優しかったり
背景をうまいこと操ってテキストなのにリッチなメニューを作れたりするのでご存知かと思いますが

ある要素内のテキストにaをdisplay:blockしてpaddingで広げる仕様のリンクが入ったり入らなかったりする下のようなhtmlとcssがあった場合,
[html classname=”html-sh”]
<dl>
<dt>dt / リンクなし</dt>
<dd><a href="#">dd / リンクあり</a></dd>
<dt><a href="#">dt / リンクあり</a></dt>
<dd><a href="#">dd / リンクあり</a></dd>
</dl>
[/html]

リンクのないdtにもpaddingをつけてレイアウトを揃えようとして、対策を何もしないと
[css classname=”css-sh”]
dt {
padding:10px;
background:#09c;
}
dt a {
display:block;
padding:10px;
background:#ace;
}
dd a {
display:block;
padding:10px;
background:#f7f7f7;
}
[/css]

dtのpaddingとdt aのpaddingでdt aのレイアウトが揃わない。
[image]現状dtとdt aのpaddingが合計されるので広がる

理想としてはこうしたいのが心情。
[image]dtの中身にリンクがあってもpaddingが変わらないようにしたい

簡単にどうにかする方法がないかなとちょっと考えてみた。

続きを読む