January 18, 2010 12:54 AM

初記事に書きましたが、ブログをプチリニューアルしましたー。変更はCSSとCMSのダイエットだけなのでプチです。

もう少し読みやすく

前のスタイルを踏襲しようかと思いましたが、素っ気ない印象を強く感じていたので思い切って、記事がブロックに囲まれていないスタイルに変更しました。以前使っていた白は膨張色なので大きな画面で見ると多少圧迫感を感じます。さらにそこで記事をブロック化していたので、余計に余白が目立ちました。

最近はWebの閲覧環境が拡大してきているので、ブログのWidthも前より大きくとり、背景色を全て統一。文字サイズも全体的に大きくしました。
背景色がビビッドな水色にしたのはどうかと思われるかもしれませんが、できるだけ開放感のある色を使いたかったので採用しました。（まあ、僕の好きな色っていうのもありますが...）水色と白だけでは、寂しいのでロゴを黒色に、アクセントに黄色を使いました。

記事を背景色でブロック化せず、余白でブロックを意識させれるように取りました。

CMSのタグ生成も余計な余白が多く生まれる状態でしたので、MTタグ周りを出来るだけ削り、以前より軽くしました。前は本当に表示が重たかったですからね.....。

それと今後のHTMLの方向性を考えて・・・

HTML5、CSS3、今後のHTMLは大きくWebの常識を変えていくと思います。それらを勉強していかなければならないのは必須ですが、このブログをいきなりHTML5に変えるのはかなり僕には荷が重いので、CSS3を重点的に実装していこうと思っています。

現在の仕様ではFirefoxとIEでは通常の仕様ですが、SafariとChromeではWebkitエンジンのCSS3が実装されています。背景のグラデーション、リンクのアニメーションはCSS3での仕様です。

まだ微妙に素っ気ない印象が残っていますが（飾りっけが無いんですよねー）、これからまたカスタマイズしていくので、今はこの状態でいいかなーと思っています。

November 28, 2009 6:06 PM

最近案件でバグに躓きまして、多用する箇所でしたのでメモしておきます。

ネガティブマージンのバグ

marginプロパティにマイナスの値を記述ターゲットを動かすネガティブマージンですが、古いブラウザではfloatプロパティと一緒に使用すると表示やリンクにバグが生じます。

さらにはIE6でもfloatプロパティを指定した際、バグが発生します。これらを解決するにはpositionプロパティのrelativeを指定します。

target { margin:-10px 0px 0px 0px; float:left position : relative;}

これでOKです。

swfのz-index

案件をこなしていくと、中にはFlashとHTMLの箇所が重なって表示されなければならない案件があったりすると思います。swfは表示するのも結局ボックス要素内だから、階層構造にするのは簡単だろうー、と高を括っていたら結構困りました。
swfは親のboxにz-indexプロパティを指定しただけでは素直にレイヤー順になってくれないのです。値を0にして他のz-indexを10とかにしても手前に表示されてしまうのです。これは以前からあるバグらしく、表示させる為のjsとかのバグではないみたいですね。swf表示の一種の仕様のものなのかな？？

これを解決するには、swfを表示する為のjsに記述を追加します。表示用jsのパラメータの中にembedタグ属性の"wmode"というswfの背景の指定に関する要素がありますが、これには３つの値があります。

wmode="window" ← デフォルトの状態：z-index無効)
wmode="transparent" ← SWF背景の透過：z-index有効
wmode="opaque" ← SWF背景の非表示：z-index有効

上記が、"wmode"の値です。一般的にはこの中の"transparent"がよく使われている様です。"opaque"でも効いたんですけどね。
これは人が使っている表示用のjsによって若干違いますが、僕はswfobject.js ver2.2を使用しているので今回の例ではこういった記述になります。（今回はスタティックパブリッシングとしての一例です。）

var flashvars = null; var attributes = null; var　params={menu:"false",wmode:"transparent"},
url="common/swf/test.swf",id="flashs",wid="948",hei="377",ver="9",exi="expressInstall.swf"; swfobject.embedSWF(url,id,wid,hei,ver,exi,flashvars, params, attributes);

上記の記述は人によって違うかもしれませんが、paramsという変数で"wmode"のパラメータを指定しています。これによって表示のバグは改善されるので、後はCSSでFlash側とその上のレイヤー側でz-indexのプロパティを調整してあげれば解決です。

ps.普通にパラメータの値を"opaque"にしてみましたが、問題なさそうなので後は好みですね。

October 31, 2009 4:37 AM

最近、小さなバグの話とかHTML関連の事しか書いてないですが、またここで一つ。

HTMLのサイトを制作していると、クラスを二つ以上指定して組む時があると思います。そのサイトをブラウジングチェックした際に、指定の仕方でIEの6と７は崩れてしまう事があります。

原因はこちら

最後に記述したクラスでバグが生まれる！

っというのは、幾つか二つ以上のクラスを指定した際、最後のクラス名が同じ名前になるとバグになってしまうのです。それは下のような状態の事です。

バグ記述例

.main.contents{　プロパティ　};

.sub.contents{　プロパティ　};

上記では二つのクラスを重ねていますが、どちらもcontentsクラスを後ろに記述しています。これによりIEのバグが発生してしまうのです。それを防ぐにはこれを、下のように記述します。

回避例

.contents.main{　プロパティ　};

.contents.sub{　プロパティ　};

これならバグは起こりません。後ろのクラスが別々の名前になっているからです。

CSSのプロパティで引き起こされるバグと違い、このバグは要素同士の衝突ではありません。それ故に、知らないと気づかない。しかも、クラスの二つ以上の指定はサイトによっては必須のテクニックとなるため、原因はわかりにくいけど発生率は高い厄介極まりないバグです。僕もこいつのせいで半日近く無駄にしました（><）。

September 30, 2009 10:46 AM

floatを解除する為に必須になる、clearプロパティですがIE6やIE7のブラウザでは上部に不自然な余白が生まれてしまいます。

これを修正するには、clearを指定した要素のwidthに「auto」以外の値を指定する必要があります。

widthプロパティでの修正

.float{ float:rignt; margin:0 10 0 10px; display:inline;}

.clear{ clear:both; width:800px;}

上記の記述以外にもIE独自拡張のzoomプロパティを使い修正する事が出来ます。zoomプロパティは追加しても表示に影響がないのでこちらでも簡単に解決出来ます。しかし、この方法はCSS文法チェックではエラーになりますので、二つのやり方は使い分けた方が得策でしょうね。

zoomプロパティでの修正

.float{ float:rignt; margin:0 10 0 10px; display:inline;}

.clear{ clear:both; zoom:1;}

September 1, 2009 6:30 PM

Safari4になってから、今までのCSS角丸ボックスを見てみたら、びっくり！

全部普通のボックスに戻っているじゃないですか！今まで一行で済ませていた-webkit-border-radiusの解釈が少し変わってしまったのか、全部解除されていました。

marginのプロパティのように一行にショートハンドで記述していたのですが、どうやら上下左右の角の指定を厳密にした方が良い様です。ってかもしかして最初からSafariはそういう仕様だったのか？？

例：前の記述

-webkit-border-radius: 40px 0px 20px 20px;

例：現在の記述

-webkit-border-top-left-radius:40px;左上

-webkit-border-top-right-radius:0px;右上

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

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

July 7, 2009 1:49 AM

CSS smooth operator

大きく、均等に、無駄が無く、とても見やすい。CSS smooth operatorはそんな印象を受けるブックマークサイトです。最近リニューアルしたみたいですが、以前のサイトもとても綺麗な文字組でそれだけで気に入りました。
今のサイトは解説を省き、大きいサイト画像を均等に配置した大胆な2カラムレイアウトになっています。シンプルで使いやすいランキングとか、画像にドロップシャドウを付け、あたかも壁にかけてあるかのような演出をしていたり、ロード時にjsを使って背景色をランダムに変えたりとさりげない遊び心も感じられます。

ブックマークされているサイトも勿論良いのでしょうが、文字の存在感をぎりぎりに抑え、サイトのファーストビューを大きく載せる事によって、解説無しにも興味を湧かせる。相手が見たい物をただ見せる、それだけじゃなく見やすく見せる。当たり前なのでしょうが、是ぐらいやらないと見やすくとは言えないのかもしれないと思いました。

CSS smooth operator

June 18, 2009 2:11 PM

hCalendarとは

hCalendarはiCalendarのフォーマットを基にしたイベント情報を配信する為のマイクロフォーマットです。前回試してみたhCardのイベント版ですね。扱える情報は、イベント名、イベント詳細、開始日、終了日、開催場所などがあります。

hCalendarの記述例

ちょっと個人的に見に行きたいイベントを元にして例を作ってみたいと思います。

ソースコードはこちらです。

<div class="vevent">
<p class="summary">第17回企画展：「日本のグラフィックデザイン2009　GRAPHIC DESIGN IN JAPAN 2009」</p>
<p class="description">約2,600名のプロフェッショナルからなる、アジア最大のデザイン団体・日本グラフィックデザイナー協会が、1981年より発行している年鑑『GRAPHIC DESIGN IN JAPAN』。毎年、厳正な選考の末、自信を持って推薦する作品群を豊富な図版で紹介しています。</p>
<abbr class="dtstart" title="20090605">2009年6月5日（金）</abbr><br />
<abbr class="dtend" title="20090720">2009年7月20日（月／祝）</abbr>
<p class="location">東京都港区赤坂9-7-1 ミッドタウン・タワー5F</p>
</div>

上記のコードで完了です。これをFirefoxのOperatorで確認しますと

hCardの連絡先と同じくグレーになっていたイベント部分に数字が入り、登録する事が可能になります。そして、それを書き出すと

上のようにiCalendarに書き出したイベント情報が挿入されます。hCardの時もそうでしたが、ほんの少しclassを足すだけで簡単にマイクロフォーマットとして対応させる事が出来ました。

追加した属性のそれぞれの意味は、

div="vevent"：イベント情報を全体を包括
class="summary"：イベント名
class="dtstart" title="西暦月日"：イベントの開始日
class="dtend" title="西暦月日"：イベントの終了日
class="description"：イベントの詳細
class="location"：イベントの開催場所

となっております。コーディング時にわからなかったのが開始日と終了日をp要素で囲んで記述したら両方とも開始日の日付になってしまった。公式wikiを見てabbr要素に変えたのですが、正式な記述と言う事で従っておいた方が良いのかもしれません。

今まで固有名詞は、只の重要な要素という意味でしか解釈が得られなかったですが、イベント、場所という意味をこれからはブラウザでも理解する事が可能になってきます。コーディングはFlashやJavascriptに比べ表現力は劣りますが、サイトを探す時に検索というアクションを必要とする以上、高度なコーディングが必須になってくるのは今後も変わらないだろうなと思いました。

June 16, 2009 12:38 PM

一般的なHTMLでのサイト制作ではコンテンツ内容が少なくても画面全体にボックスを引き延ばさなくてはいけない場合があります。

そういった場合、ただheightを100%にするだけではブラウザ毎で表示のされ方が違ってきます。

下記はwrapperを画面一杯に広げる状態の例です。

XHTML
<body>
　<div id="wrapper">
　</div>
</body>

CSS
html { height:100%;}
body{ height:100%;}
body > #wrapper{ height:auto;}
#wrapper{ min-height:100%; height:100%;}

サンプル