愚者の経験

「また今度」はほとんどこない

カテゴリーアーカイブ: Web

[CSS]ボックスの高さをページにあわせるには?

よくhtmlとbodyにheight:100%;つけて、中のボックスにmin-height:100%;をつければ~的なのがあるんですが
height:100%;ボックスの上下に別の高さを持つ要素があれば、その分の高さ+ページの高さになってしまいます…(´・ω・`)

height:100%;は親要素の高さをそのまま持つという意味ですから当たり前なのですがどちらかと言うと
「(途中から始まったとしても)画面下まで一杯の高さを持ちたい」という要望が多いと思うのです。

これをする場合はまず親要素(bodyとかのページそのものの高さを持つもの)にposition:absolute;
途中に囲むdivなどにはheight:100%;だけを指定して、下まで伸ばすボックス要素にposition:absolute;を追加、
座標起点がページ左上になるのでボックスの上にある要素の高さXXを合計してborder-top:XX solid #fff;box-sizing:border-box;height:100%;
で、下まで伸ばすためにbottom:0;を利用する

でごり押してるんですがもっといい方法ありませんかね?

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>ハイト100%</title>
        <style type="text/css">
            html{height: 100%;}
            body{height: 100%;margin: 0;position: absolute;}
            #main{height: 100%;width: 800px;position: absolute;}
            #main>#tab {height: 100%;box-sizing: border-box;border-top: 70px #fff solid;}
            
            header{margin: 10px;height: 50px;position: absolute;}
            .tabradio{display: none;}
            #contents{width: 800px;display: table;height:100%;}
                        
            #sono1lbl{background: #ffbf7f;}
            #sono1_cont{border-color: #ffbf7f;}
            #sono2lbl{background: #ffff7f;}
            #sono2_cont{border-color: #ffff7f;}
            #sono3lbl{background: #7fff7f;}
            #sono3_cont{border-color: #7fff7f;}
            #sono4lbl{background: #7fbfff;}
            #sono4_cont{border-color: #7fbfff;}
            #sono5lbl{background: #ff7fff;}
            #sono5_cont{border-color: #ff7fff;}
                        
            .tabpage{display: none;position:absolute;top: 150px;left:0;bottom: 0;right: 0;width: 120%;box-sizing:border-box;border-width: 3px;border-style:solid;font-size: 20px;}
            #sono1:checked+#sono1_cont{display:block;}
            #sono2:checked+#sono2_cont{display:block;}
            #sono3:checked+#sono3_cont{display:block;}
            #sono4:checked+#sono4_cont{display:block;}
            #sono5:checked+#sono5_cont{display:block;}
            
            #tab{width: 100%;font-size:0;height:100%;}
            .tabindex{display:inline-block;font-size:20px; width: 20%;height: 80px;text-align: center;border:#a5a5a5 1px solid;box-sizing:border-box;padding-top:25px;}
        </style>
    </head>
    <body>
        <div id="main">
            <header>
                <h1>ハイト100%テスト</h1>
            </header>
            <div id="tab">
                <label id="sono1lbl" for="sono1" class="tabindex">その1</label>
                <input id="sono1" type="radio" name="nav" class="tabradio" checked>
                <div id="sono1_cont" class="tabpage">その1</div>
                <label id="sono2lbl" for="sono2" class="tabindex">その2</label>
                <input id="sono2" type="radio" name="nav" class="tabradio">
                <div id="sono2_cont" class="tabpage">その2</div>
                <label id="sono3lbl" for="sono3" class="tabindex">その3</label>
                <input id="sono3" type="radio" name="nav" class="tabradio">
                <div id="sono3_cont" class="tabpage">その3</div>
                <label id="sono4lbl" for="sono4" class="tabindex">その4</label>
                <input id="sono4" type="radio" name="nav" class="tabradio">
                <div id="sono4_cont" class="tabpage">その4</div>
                <label id="sono5lbl" for="sono5" class="tabindex">その5</label>
                <input id="sono5" type="radio" name="nav" class="tabradio">
                <div id="sono5_cont" class="tabpage">その5</div>
             </div>
        </div>
    </body>
</html>
広告

半年振り…node.js少し始めました

最近Access関係で書くことなかったので放置気味でしたが、訳あってAndroidタブレットでアプリを作ろうと思いたち自分のネイティブアプリを作る知識は皆無なので比較的知識のあるwebでやってみることになりました。

しばらく自分の備忘録としてこのネタでブログを書いていきますのでよろしくお願いします。

WindowsでPHPの環境構築

参考URL:http://technet.microsoft.com/ja-jp/iis/gg535422

ほとんど全部参考URL内にあるpdf等に書いてありますが。

あとWindowsでPHPをするなら、IISのバージョンが「7」移行(Vista移行に搭載)である方が
「FastCGI」という機構が使えるのでパフォーマンスがいいらしいです。(関連リンク)
追記:XP等のIIS6にもあるみたいですが…http://www.iis.net/download/fastcgi

では順番に…
1.IISのインストールは前回の記事の通りで終わっています。

2.PHPをダウンロードします。http://windows.php.net/download/#php-5.3-nts-VC9-x86
ここで気になったのがPHPの最新版はもう「5.4」まで進んでいることです。
最新版を使いたい気もするのですが、とりあえず「5.3」で行きます。
Windows Cache Extension for PHPという拡張機能もPHPの「5.3」までしか対応していません。
Non Thread SafeThread Safeの2つがありますが、Non Thread Safeのzip版を利用します。

3.zipファイルを解凍して中身をわかりやすいパスにコピーします。(下の画像では「C:\php5」)
そしてそのフォルダにアクセス権限を設定します。必要なのは「IIS_IUSRS」です。

4.PHPの設定ファイルを編集します。
そのファイルのもとは「php.inirecommended」と書いてありますが…解凍したファイルに
2012/05/08時点ではそのようなファイルはありませんorz

とりあえず名前が近い「php.ini-development」をコピーして「php.ini」にリネームします。
それで設定値を変更、コメントを外していきます。
fastcgi.impersonate=1
cgi.fix_pathinfo=1
cgi.force_redirect=0
extension_dir=”./ext”
なおテキストエディタはWindows付属の「メモ帳」では改行されませんので他のもので。
5.IISにPHPランタイムを登録します。
IISマネージャーを起動して、phpファイルを置く場所をクリックして
機能ビューで「ハンドラーマッピング」をダブルクリックします。

右側の「操作」にある「モジュールマップの追加」をクリックします。

ダイアログに対して設定値を入力します。

「実行可能ファイル」には3.でアクセス権を設定したフォルダ内にある「php-cgi.exe」を選択します。

6.テスト実行します。
テキストファイルに以下のように入力します。

拡張子「php」で保存してWebブラウザからアクセスします。

phpの設定情報などが表示されて終了!と思いきや…

参考URL手順通りなはずですが表示されません。
調べてみると「php.ini」ファイルの「」「date.timezone」に値を設定すればいいようです。
[date]
date.timezone=”Asia/Tokyo”

編集後保存したら、IISマネージャーの「アプリケーションプール」の
「DefaultAppPool」を「リサイクル」します。そしてもう一度phpファイルにアクセスします。

ようやく完了です。

Webアプリケーション開発準備(IIS)

忘れないようにメモ。勉強しながらですので最終的に間違っているかもしれません。

IIS(インターネット・インフォメーション・サービス)をインストールします。

何で開発するかわからないので「アプリケーション開発機能」は全部つけます(笑)

これらの機能にチェックをつけて「OK」します。多分これでWebサーバとしての機能はOKです。

Webアプリケーション

Silverlightはしばらく様子見しようと思います。
Webアプリケーションの方に手を伸ばしてみます。

さしあたってPHP、AJAX、ASP.Net、Razorあたりに見当をつけていきます。

ココらへんの技術はたくさんあって基幹業務系のアプリの作成にはどれをやればいいのか
まったくわかりません…とりあえず広範に見ていくことにします。

ブログの内容も雑多になりそうです。