この連休中はなぜだかフレッツ光のセールスがうちの近所に来まくっている。



きっと私のところの情報がスパイ側に割れて集中砲火を浴びているに違いない!
あぶない! 逃げろ!!
などと妄想を膨らませてみるも、これ以上は膨らむことはない。



私のところには5回ほど来たんですが、いちいち断りの説明するのが面倒くさい。



私もフレッツに入ってる。ただし、ADSLなんですこれが。。。


だったら光に変えるようにとセールスは言う。


売り文句は当然、回線料金が安くなる&回線速度が速くなる。



私も一応それは知ってると言った上で、どうしてADSLのままでいいかを説明する。



まず工事しなければいけない。


するとすかさずセールスは言う。工事はすぐに終わります。今はキャンペーン中で工事費も無料になっています。



「それも知ってるよ」私は心の中で叫ぶ。



それで私はなぜADSLのままでいいかの説明をつづける。


まず現在使用しているADSL回線がもう何年も安定して使えているので、回線変えたりして不安定になったりするのがイヤということと、工事のあいだ使えないこと、通信速度は今のままで満足なこと、料金が光より割高でも気にしないことを説明する。



これでセールス側からしたら売り文句が全部塞がれたことになる。
でもこんなことでセールスが引き下がらないのは百も承知。



セールスは言う。工事はすぐに済むと



私は少しでも使えない時間があるのがイヤだとダメを押そうとするも方針を変えて、みんなが光になって回線不通に陥った場合にADSLの人がいなくてどうする



などとわけのわからない論戦に持っていくとセールスも大人ですよ、、、引き際を悟ったのかパンフレットを置いて回線乗り換えの際にはお願いしますと言って次の行き先へ・・



悪気はないんだけどホントに今の回線で満足してるんだ。ゴメンよセールス



ヤマザキ秋のHTML祭りということで、みなさんもさぞHTMLと戯れていらっしゃることと思います。


秋と言っても晩秋も晩秋なわけですが、ウェブページのカラム分けにからむことを書いておこうと思います。


カラム分け、カラム分割? 別の言い方をすると「段組み」とでも言いますかね。
つまりは縦方向にページを仕切るやつですね。


たまにネットで見掛ける「ページの端が見れない」とか、「カラムがあさっての位置にある」とかいうページに出くわすことがあります。そういう現象のページの場合はこういったカラム分けがうまいことされてない場合があるとかないとか



ではいざ、祭りでゅあ~



※ここに記述してる内容は正しくありません。正しい仕様はすべて他の解説サイトにお任せします。



[コンセプト]
HTMLは適度にゆるく書く(きっちり書かない)
HTMLはシンプルに書く
HTMLは見通しがよくなるように書く(SEOの観点からも有利?)



■HTML(固定)
<html><head>
    <meta http-equiv="Content-type" content="text/html; charset=Shift_JIS">
    <title>title</title>
    <link rel="stylesheet" type="text/css" href="column.css">
</head><body>
<div align="center"><div id="container">

    <div id="header">header</div>
    <div id="left">left</div>
    <div id="main"><div class="pad">
        main
    </div></div>
    <div id="right">right</div>
    <br class="clr">
    <div id="footer">footer</div>


</div></div>
</body></html>



上記HTMLを一切改変せずに後述のCSSだけを書き換えて、いろんなカラムパターンを表示させまくりまクリスティー。


少し上記HTMLを説明しておきます。
まず<DOCTYPE>は書きません。なぜならコンセプトに合わないからです。
<meta>でシフトJIS固定にしています。なぜなら私はシフトJIS表示派だからです。
<meta>によって、記述されている文字コードをブラウザに教えた後に日本語を含むかもしれない<title>~</title>がくる順番になります。当たり前か
スタイルシートを外部ファイルにするとコンセプトにも書いたように、見通しがよくなります。
表示部分全体を<div align="center">~</div>で囲っていますが、ホントならこれもCSSに記述したいんですが、ブラウザ依存だったり見栄えがよくなかったりする記述になってしまうのでHTMLに固定で書くことにします。


因みに表示テストは「IE8」と「Firefox3.5.5」で行いました。



■2カラム‐右(column.css)

*{margin:0;padding:0;}
body{background-color:MistyRose;color:black;}
#container{text-align:left;width:650px;}
#header{background-color:lightskyblue;}
#left{background-color:salmon;width:150px;float:left;}
#main{background-color:beige;width:500px;float:left;}
#right{background-color:yellowgreen;width:150px;float:left;display:none;}
#footer{background-color:lightskyblue;}
.clr{clear:both;}
.pad{margin:10px 10px 60px 10px;line-height:160%;}



[表示結果]
そろそろホンキ出す-2カラム右


「containerの幅650px = leftの幅150px + mainの幅500px」という足し算が成り立ちます。
「display:none」で使わないカラム消すわけやね



■2カラム‐左(column.css)

*{margin:0;padding:0;}
body{background-color:MistyRose;color:black;}
#container{text-align:left;width:650px;}
#header{background-color:lightskyblue;}
#left{background-color:salmon;width:150px;float:left;display:none}
#main{background-color:beige;width:500px;float:left;}
#right{background-color:yellowgreen;width:150px;float:left;}
#footer{background-color:lightskyblue;}
.clr{clear:both;}
.pad{margin:10px 10px 60px 10px;line-height:160%;}



[表示結果]
そろそろホンキ出す-2カラム左


「containerの幅650px = mainの幅500px + rightの幅150px」という足し算が成り立ちます。
これもカラム消し



■3カラム‐中央(column.css)

*{margin:0;padding:0;}
body{background-color:MistyRose;color:black;}
#container{text-align:left;width:650px;}
#header{background-color:lightskyblue;}
#left{background-color:salmon;width:150px;float:left;}
#main{background-color:beige;width:350px;float:left;}
#right{background-color:yellowgreen;width:150px;float:left;}
#footer{background-color:lightskyblue;}
.clr{clear:both;}
.pad{margin:10px 10px 60px 10px;line-height:160%;}



[表示結果]
そろそろホンキ出す-3カラム中央


「containerの幅650px = leftの幅150px + mainの幅350px + rightの幅150px」という足し算が成り立ちます。
このブログ自身がまさにこんな感じでしょうかね。面倒だからソース見てないけど



■3カラム‐右(column.css)

*{margin:0;padding:0;}
body{background-color:MistyRose;color:black;}
#container{text-align:left;width:650px;}
#header{background-color:lightskyblue;}
#left{background-color:salmon;width:150px;float:left;}
#main{background-color:beige;width:350px;float:right;}
#right{background-color:yellowgreen;width:150px;float:left;}
#footer{background-color:lightskyblue;}
.clr{clear:both;}
.pad{margin:10px 10px 60px 10px;line-height:160%;}



[表示結果]
そろそろホンキ出す-3カラム右


「containerの幅650px = leftの幅150px + rightの幅150px + mainの幅350px」という足し算が成り立ちます。



■3カラム‐左(column.css)

*{margin:0;padding:0;}
body{background-color:MistyRose;color:black;}
#container{text-align:left;width:650px;}
#header{background-color:lightskyblue;}
#left{background-color:salmon;width:150px;float:right;}
#main{background-color:beige;width:350px;float:left;}
#right{background-color:yellowgreen;width:150px;float:right;}
#footer{background-color:lightskyblue;}
.clr{clear:both;}
.pad{margin:10px 10px 60px 10px;line-height:160%;}



[表示結果]
そろそろホンキ出す-3カラム左


うわぁああ、想定では「main」「left」「right」の順になって欲しかったけどこりゃあお手上げですなぁ
確か「position:absolute」とか使えばできたような気がするけど複雑化より少々ダメなシンプルを選ぶ宗教上の理由でこのへんでお開きとさせていただきます。



文字の描画では角度も指定できるので、文字を回転させてみます。



■ソースコード
<?php
error_reporting(E_ALL);
ini_set("display_errors", 1);


// 400x400キャンバスを作成して内部イメージ取得
$img= imagecreatetruecolor(400, 400);



// 色を作成
$black= imagecolorallocate($img, 0, 0, 0); // 影、枠
$white= imagecolorallocate($img, 255, 255, 255); // 背景
// 文字用のランダムな色を80種類生成
foreach (range(1, 80) as $i){
    $color[]= imagecolorallocate($img,
    rand(0, 255), rand(0, 255), rand(0, 255));
}



// 背景色を白に
imagefill($img, 0, 0, $white);



// 文字入れ準備(文字コードUTF-8)
$text= 'あ';
$text= mb_convert_encoding($text, "UTF-8", "SJIS-win");



// 先に影になる文字入れ
$size= 3; $angle= 0; $x= 100; $y= 395;
foreach (range(1, 80) as $i){
    $angle-= 6; $angle < 0 and $angle= 360;
    $x= 150* cos(deg2rad($angle));
    $y= 150* sin(deg2rad($angle));
    colortext($img, $size+$i*0.6, $angle, $x+190+4, $y+200+4, array($black), 'C:\mo.ttf', $text);
}


// ぼかす
imagefilter($img, IMG_FILTER_GAUSSIAN_BLUR);
imagefilter($img, IMG_FILTER_GAUSSIAN_BLUR);


// 文字入れ
$size= 3; $angle= 0; $x= 100; $y= 395;
foreach (range(1, 80) as $i){
    $angle-= 6; $angle < 0 and $angle= 360;
    $x= 150* cos(deg2rad($angle));
    $y= 150* sin(deg2rad($angle));
    colortext($img, $size+$i*0.6, $angle, $x+190, $y+200, array($color[$i-1]), 'C:\mo.ttf', $text);
}



// 黒枠で囲む
imagerectangle($img, 0, 0, 399, 399, $black);



// 画像をブラウザに出力
header("Content-type: image/png");
imagepng($img);



// メモリを解放
imagedestroy($img);



function colortext($img, $size, $angle, $x, $y, $color, $ttf, $text)
{
    mb_internal_encoding("UTF-8");
    $text= mb_convert_encoding($text, "UTF-8", "UTF-8,SJIS-win,CP51932,JIS");


    $w= '';
    for ($xx=$x,$yy=$y,$i=$j=0,$c=$color[0];
    ($t=mb_substr($text, $i++, 1)) != "";
    $c=(isset($color[++$j]) ? $color[$j] : $color[$j=0])){


        if (preg_match('/^[\x0d\x0a]+$/', $t)){


            // 改行補正
            if ($t === "\x0d" && mb_substr($text, $i, 1) === "\x0a"){
                $i++; $t= "\x0d\x0a";
            }


            $q= imagettfbbox($size, $angle, $ttf, $t . "A");
            $yy+= $q[1]+1; $xx= $x;
            $w= '';
            continue;
        } else {
            $w.= $t;
            if ($w !== $t){
                $q= imagettfbbox($size, $angle, $ttf, $w);
                $xx= $q[2]+$x- intval($size/2);
            }
        }


        imagettftext($img, $size, $angle, $xx, $yy, $c, $ttf, $t);
    }
}


?>



[表示結果]
そろそろホンキ出す-PHP GD


学校で習うサインコサイン。。。こういうときしか使う機会ないなー。
実生活では使うことないなー。