to be continued ~とあるプログラマーの実験的開発日誌~ -21ページ目

to be continued ~とあるプログラマーの実験的開発日誌~

WEBデザイナー兼プログラマーである管理人が日々のトラブル解決に向けて奮闘する開発日誌。

前回の続き。



■HTMLのブロック要素(div)などにドロップシャドウ効果をつける


黒くてわかりにくいのだが、


当ブログの記事及び各カテゴリにうっすらと影がついているのに


気付くだろうか。


このドロップシャドウ効果もCSSだけで表示させている。


CSSの記述例は以下の通り。


/*-----------------------------------------------*/


box-shadow: 10px 10px 10px rgba(0,0,0,0.25);
-moz-box-shadow: 10px 10px 10px rgba(0,0,0,0.25);
-webkit-box-shadow: 10px 10px 10px rgba(0,0,0,0.25);


/*-----------------------------------------------*/


当然だが、影の部分にマージンがないと


表示されないので注意して欲しい。







当ブログではトップのヘッダー部分を除いて、

できるだけ画像を使用しないようにしている。



確かに画像を用いたインターフェイスはキレイだし、

いかにも、なデザインに見える。

しかし、新しいカテゴリーを増やすたびに画像アイコンを作成することは

製作者本人ならともかく、クライアントにとっては

自分で改変できない不自由なサイトということになる。

また、HTML本来の意味合いからも外れているように感じる。

とはいえ、デザイン性がまったくないのも考えものなので、

当ブログでも行っているCSSだけでできる簡単な実践テクニックをいくつか紹介する。



■ブロック要素(div)などの角を丸くする

HTMLのブロック要素(div)などを角丸にするにはborder-radiusを使う。

四隅すべてに指定したい場合は以下を記述

/*------------------------------------*/

border-radius: 10px;

-webkit-border-radius: 10px; /* Safari,Google Chrome用 */

-moz-border-radius: 10px; /* Firefox用 */

/*------------------------------------*/



特定の角だけ丸くする場合は以下を記述

/*------------------------------------*/

/*CSS*/

border-top-left-radius: 10px; /* 左上 */

border-top-right-radius: 10px; /* 右上 */

border-bottom-left-radius: 10px; /* 左下 */

border-bottom-right-radius: 10px; /* 右下 */

/*Safari、Google Chrome*/

-webkit-border-top-left-radius: 20px; /* 左上 */

-webkit-border-top-right-radius: 20px; /* 右上 */

-webkit-border-bottom-left-radius: 20px; /* 左下 */

-webkit-border-bottom-right-radius: 20px; /* 右下 */

/*Firefox*/

-moz-border-radius-topleft: 20px; /* 左上 */

-moz-border-radius-topright: 20px; /* 右上 */

-moz-border-radius-bottomleft: 20px; /* 左下 */

-moz-border-radius-bottomright: 20px; /* 右下 */

/*------------------------------------*/


ただし、IEには対応していないようだ。




長くなってきたので続きは次回で。

仕事柄、様々なブログを利用している。


今回は、それらのプログサービスの比較をしてみようと思う。


これからブログを解説しようとしている人の参考になれば幸いである。


ただし、あくまで主観に基づく個人的評価なので、


その点はお間違いなきよう(評価はすべて無料版を対象としている)。



■Amebaブログ


このブログで利用しているサービス。


芸能人のブログを多数抱えることで知名度を高めた。


が、利用しておいてなんだが、評価は微妙。


一番の利点は安定感というか、安心感。


要するにこれだけメジャーになれば滅多なことで潰れないだろうという……。


もちろん、他にもメリットはある。


カスタマイズに関してはHTMLはテンプレートしか選べないが、


CSSは自由にいじれる。


また、フリースペースやフリープラグインなどを使えば当ブログのように


ヘッダーにナビゲーションを設置するなども容易。


CSSしかいじれないといってもかなりのカスタマイズが可能で、


初心者から中級者がレベルアップを図るのには最適。


ただし、レベルアップすれば物足りなくなるのも事実。


また、広告が比較的多めで、


アダルト禁止、アフィリエイトも自由に設置できないなど商用には向かない。



■FC2ブログ


私がメインで利用しているサービス。


CSSはもちろん、HTMLまですべてカスタマイズ可能で、


通常のホームページと同じ間隔で制作できる。


実際、私はDreamweaverで一から制作したものを


テンプレートに上書きすることでアップしている(独自の関数に注意する必要はあるが)。


広告も目立たなくてアダルトサイトも専用のサーバーで可能。


アフィリエイトに関しても特に制限はない。


逆に言えば初心者にとっては宝の持ち腐れになるかも……。


いずれにしろ利用規定が改正されない限り、


今後もメインブログとなり続けるだろう。



■livedoorブログ


感覚としてはFC2ブログに近いように思う。


CSS、HTMLどちらもカスタマイズ可能。


実を言うと一度開設しようとしてページ表示のモッサリ感が気に食わなくて


やめてしまった。


従って一度も使っていない。


アダルト可、商用可ということで、何らかの理由でFC2が使えない場合は、


候補に入れてみるのも良いだろう。


ただし、最近アダルトサイトのアフィリエイトは有料版に限るという


制約が入ったようだ。


多くのアダルトアフィリエイターは移転を余儀なくされるだろう。



■OCNブログ人


プロバイダーがOCNだったことで、


FXトレード結果を公開しようと何も考えずに一番初めに開設したブログ。


実はこれが大失敗だった。


テンプレートを選ぶだけというカスタマイズ性の低さに加え、


インターフェイスの使い難さは最悪


(あと、オプションでフォームメールが用意されているのだが


転送するメールアドレスをタグ内に記述しなければならないというマヌケな仕様)。


時間ができたら引っ越そうかと考えているくらいで、


まったくおすすめできない。



ちなみにFXトレード結果を公開しているブログはこちら。








■プログラミング


もともとはExcelのVBAをきっかけに、プログラミングを始める。


15年ほど前にホームページの制作を始めたのを機にPerlを齧っていたが、


その後しばらくの間、諸事情から中断。


数年前からネットビジネスを再開して


再びプログラマーの道へ。


現在はウインドウズベースでPerlによるCGI制作を中心に、C++やPHPも扱う。


また、FXのシステムトレード開発も手がけており、


トレードツールであるMT(メタトレーダー)4のインジケーター制作も


MQL4というC言語に似たコンピューター言語で行っている。


プログラミングはすべて独学で学んだ自己流で人に教わったことはない。





ちなみにFXのシステムトレード開発を行っているホームページはこちら。





■制作環境(ハードウェア)


現在、主に使用しているPCは3台。


メインは7~8年前(うろ覚え)に自分で組んだPC/AT互換機を


デュアルモニターで使用。


CPU:Intel Pentium4 240GHz


メモリ:2GB


OS:Windows XP


マザーボードはASUSのP4P800DeluxeからASRockのP4i65Gに取り替えている。


さすがに旧式すぎるので、VAIOのPGC-11211を併用しているが、


動画でも扱わない限りは今のところ、旧式でも問題ない。


ただし、やたらとドライブが多いので


(ハードディスクx6台/3.5インチFDDx1台/DVDマルチx2台/カードリーダーx2台、


ドライブ名は仮想ドライブまで含めるとNまで埋まっている)


立ち上げに恐ろしく時間がかかる。


なお、もう1台はさらに旧式でFXトレード監視用に使っているhpのノートPC。





■制作環境(ソフトウェア)


・Adobe Dreamweaver CS5.5


WEB制作に使用。プロデザイナーの中にはエディターでタグ打ちするのが上級らしいという妙なプロ意識があるが、私はそうは思わない。ホームページ制作ソフトを使うとそのソフトの独自のくせで汎用性が失われると考えられているようだが、要は使い方次第だと思う。実際、ソフトを使っていともやっていることはほとんどタグ打ちなので。記述する内容が変わらないのなら単純に便利な方がいい。


・Adobe Photoshop CS4


フォトショは5の頃から愛用。画像の加工より、むしろロゴ制作に使用する機会が多い。本来ロゴ制作ならIllustratorを使用すべきで一応は用意してあるのだが、パスワークが面倒なので、


特に委託製作以外の時は滅多に使わない。まあ、そんなに凝ったロゴを作る機会もそれほどないし。


・Microsoft Visual C++ 2008


C++の開発には他の開発環境を使用したことがないので、特にコメントすることはない。





制作のメインで使っているのはこんなところか。もちろん、他にもいろいろあるのだが、それはおいおい紹介していくことにする。