ネットショップ開業運営中

どうも。ウェブデザイナーの田ノ植道夫です。（誰?）
いかがお過ごしでしょうか。

その仕事での報酬はゼロであるウェブクリエーターを10年以上やってますが、CSSは未だに苦手です。でも、新しくサイトを作るに際し、「テーブルでレイアウトするのはいかがなものか。」というコダワリから、ついに、TABLEを使わないサイトをひとつ完成させてしまいました。

と言っても、数ページの小さいサイトですけどね。TABLEは使いまいましたが、文字通り「表」のところだけ。レイアウトはDIVです。ぶっちゃけご満悦です。

今回作ったサイトは、お約束のネットショップです。先日解約したイーモバイルの費用が浮くことになったので、ショップサーブ（ライト）を一つ借りて、ショッピングカート的に使うというプランです。

メインサイトは、ムームードメインでドメインを取得して、HETEML様にお収めするという、これまた十八番的手法で開設したわけですが、ふと考えてみると、ショップサーブもオリジナルページができるんですよね。もっと早く気付けよ。

まぁ～、何が言いたいかというと、CSSだけでレイアウト。どや！ということ。ちなみに、2カラムとか3カラムとか言ってるとひじょーに難しくなるので、1カラム（ノーカラム）でバチっとキメました。レイアウトって言えませんけどね（笑）

調べてみるとわかるんもんですね。DIVボックスを横に並べる方法は、非常に難しいと思い込んでましたが、普通に簡単でした。ボックス系を横にレイアウトしたい場合は、どうしてもTABLEを使ってましたが、今後はCSSで行けそうです。

DIVボックスのレイアウト方法ですが、ポイントはHTMLで言うところの「ALIGN」の考え方です。CSSでは、言葉が変わって「FLOAT」になります。よく似た同じ役割です。HTMLより、レイアウト的な融通がききますね。

例えば、よく使うのが、IMGのALIGNです。
こんな感じ↓

このように、「ALIGN=LEFT」にすると、画像を左寄せにして、次の内容（文字等）をその隣から配置することができます。これをクリアーするのは＜BR CLEAR="LEFT"＞でしたね。

この例の場合は、「画像」「テキスト」という配置になりましたが、これをDIVボックスでやる場合は、次のように記述します。

＜DIV STYLE="FLOAT:LEFT"＞ボックスA＜/DIV＞
＜DIV STYLE="FLOAT:LEFT"＞ボックスB＜/DIV＞

ボックスAを左詰め、ボックスBも左詰め。
結果以下のようなレイアウトにできます。

今度は、ボックスBを右寄せにします。
「FLOAT:RIGHT」と変えるだけでOKです。

ちなみに、IMGタグのALIGNと同じように、右詰、左詰めの命令を解除してやらないと、その後のコンテンツはすべて、LEFTやらRIGHTの命令にしたがってしまいますので、＜BR CLEAR=LEFT＞と同じように、以下のコンテンツは「CLEAR：BOTH」と入れて命令を解除します。

＜div style="clear:both;"＞＜/div＞

TABLEの場合、各セル（TD～TD）は同じ形状になりますが、DIVボックスを使った場合は、それぞれのボックスの大きさから、位置、色まで自由に変えられます。

というようなことが、分かりだすと面白いですね。でも、ウェブクリエーターやらウェブ制作者になるつもりは、毛頭ないので、もっと調べたい気持ちは抑えて、任務完了です。

こういうこともできる！
でも、これ以上、首をつっこむのは！

冬の間はお休みのスポーツは、実は、冬の間は隠れてこっそりトレーニングです。試合や大会が開催されないからと言ってトレーニングを怠っていると、いざシーズンに入ったときに結果が出ないのは当然のことですね。

話は変わりますが、ブラジルの景気がいいらしいじゃないですか？

地球の裏側なんで、ほとんど情報が入ってきませんが、不動産や車がバンバン売れまくっているらしいです。いわゆる中流層的な人が1億人にも膨れ上がってるとか！？

そもそも、鉱物資源や農作物など、資源の豊富な国なので、その資源を中国などが大量に買うようになったのが、その好況の理由だとか。（ネタ元：本日の産経新聞）

さぁ、みなさん。

これからはポルトガル語を勉強して、地面に穴掘ってブラジルに商売しにいきましょうか。

ん～ブラジルの人は何を買うんかなぁ～？

輸入ブランド品とか買ってくれるかな？

ちなみに、BRICsとは、『経済発展が著しいブラジル (Brazil)、ロシア (Russia)、インド (India)、中国 (China) の頭文字を合わせた4ヶ国の総称。』（by wikipedia）です。テスト出るよ！

今年に入ってから、ショップサーブをがっつりがっつり使い倒している鈴木で～す。佐藤で～す。田中で～す。どうも。誰！？ｗｗ

冗談はさておき、この画像を見よ。

カート画面のところなんですけどね。

お進みくださ

で改行されてるでしょう。

なんでそこで改行させるの？

厳密には改行ではなく「折り返し」ですかね。

めっさ気になるんですけど？？？？

今日は、寝不足になりそうです。

修正できるものならしたいんですが、ここは編集不可エリアですよね。この、気持ちワル～い折り返しなんとかなりませんか？Eストアーさん。

え？

細かい？

細かい性格で悪うございましたな。

そう。細かいもんで、自作でページを作ってた頃は苦労しましたよ。50ページくらい作成して、サーバにアップしてチェックしてみると、な・ぜ・か・・・、レイアウトが微妙にずれてるページとが出てくるんですよね。コピペで同じように作ってるのに。

でも、ASPの場合はテンプレート式なんで、どのページもひとつのテンプレートが元になってるので、どれかひとつだけレイアウトが崩れる、なんてことは起こりえません。気持ちいいですね。

最近、利用したお店はカラーミーに出店のお店。青森か北海道か？確か北日本のお店さん。購入商品をカートに入れて手続きを進めました。支払い方法はクレジット決済。

実は、カラーミーのクレジット決済というのが、注文をいったん完了させた後、カード決済画面へ飛んで、そこでカード番号等を入力するシステムになっています。ショップメーカーもそうでしたね？

流れはこんな感じ↓

「カート」→「注文完了！」→「カード決済」→「カード完了！」

このようなシステムで注文をすると、図に示したとおり「完了」が2回なので、すべて手続きが終わった後は（１）注文完了メール、（２）クレジット決済完了メール、の2通が届くことになります。

問題は、カード決済を選択して注文完了。そこで手続きをやめて、カード決済画面へ進まないお客さんがいるということです。理由はいろいろありますが、ここではとりあえず省略。

ショップ側で、このことを認識していて、そのようなお客さんが出た場合の対処法を準備しておくと、問題は発生しないのですが、ワタクシはやっちゃいました。1回目の注文完了だけで商品を送っちゃいました。

つまり、そのお客さんはカードでの支払いが終っていないのに、こちらは「支払い済み」扱いで商品を送ってしまったのです。商品価格10500円、送料1000円ほど。

そこで、お客さんに「カード手続きが終わってなかっので、ちゃんと払え。」とお願いました。もちろん、命令口調ではないですよ。「完了してござらぬので、きちんと支払ってなりけり。」

すると・・・

「ちゃんと支払った。」などとぬかすじゃないですか。

「支払いが完了してたらメールが届きます。でも、それが届いてないし、管理画面にも支払った記録が一切残ってないので完了していませんよ。」と言うと。

「意味がわからない。ちゃんと支払ったのに何を言ってるの？」と。

「オマエが意味わからんわ。ちゃんと払えヴォケ。」と内心は思いながらも、懇切丁寧に説明してあげるのですが、「払った」の一点張り。一向に支払いに応じる様子なし。

というわけで、結果的に、こちらのミスとは言え、商品をがっつり騙し取らてしまったとさ。

おもしろいですよねぇ。
たまたま、ミスった時に限って意味不明な客。

さて、ショップサーブのシステムは？というと、カード決済が完了しないと注文が完了できない仕組みになっています。だから、このような運営上の凡ミスは100％起きません。

通販システムを選ぶとき、このへんまで厳しくチェックしている人は、か～なりマニアックですね。拍手です。