行間を指定しているにも関わらず、imgなどの置換要素が含まれると、WinIEでline-heightで指定した値より小さくなるというバグ。 line-heightの値があまり大きくなければさして気にはならないのですが、line-height:200%など多少大きめに指定している場... 続きを読む

" src="http://css-happylife.com/img/website/ht.gif" />オンライン上でいとも簡単に.htaccessファイルを作成してくれる、ヒジョーに便利なツール。 ツールだけどサイトなので、Webサイトカテゴリに。（もちろんCSSで組まれて... 続きを読む

的確なタイトルが浮かばなかったんですが、一つの要素、例えばリストなどで常に日付が先頭に表示され、その後タイトルが続く場合や、リストのマークとは意味合いが違う場合などに複数行になった場合、 日付の下にタイトルが来て欲しくない、列を揃えてくれと言ったことが有ると思います。... 続きを読む

かなり色んなサイトで見かけるようになった、JavaScriptを使わずにロールオーバーをCSSのみで実現するテクニック、そのやり方です。 以前のエントリーで、縦並びのメニューで同様のを紹介しましたが、横並びのメニューは随分勝手が違います。 またメニューをテキストではなく、画像で行... 続きを読む

前回のエントリーでご紹介した角丸。 今回は、文章構造を維持出来るデザインが上がってきた場合の角丸の作成をしてみました。 仕様 タイトル：3行～4行くらいまで。 本文：文字数・サイズ制限無し、横幅固定。 投稿日部分：3行～4行くらいまで。 " src="http://css-hap... 続きを読む

CSSによる角丸テクニックはイッパイみかけるけど、ドレも可変なんすよ。 個人的には、可変より固定の方が好きだったり、実業務で可変レイアウトの角丸を作る事ってのは殆ど無かったりします。 ゆえに、実践で必要なのはウィンドウサイズによって可変する角丸より、固定幅で縦だけ伸びれば十分だっ... 続きを読む

" src="http://css-happylife.com/img/website/line_01.gif" />あらかじめ言っておく。 このサイトは、非常に忠実で厳格なhtmlやらに拘ってるわけじゃない。 CSSで、HappyなLifeを送っている内に、CSSっておもしろー... 続きを読む

3カラムレイアウトのサンプルです。 デザインはテキトーでいいや。と思って作ってたのに、余計な装飾を始めてしまって中途半端っぷりが出ていたりするのは、見なかったことにして。 えっと、今回のサンプルで行っている事でも。 見た目上は真ん中にあるメインコンテンツを、ソース上ではヘッダーの... 続きを読む

自社サイトで恐縮ですが、本日オープンした出来立てほやほやのSQLife。 コーディングは恐れ多くも、自分が担当しました。 自分が担当したサイトを紹介ってのも恥ずかしい部分が多々御座いますが、デザインや企画はかなりいい感じになってるんじゃないかと思います！ サイトの内容は、 SQ ... 続きを読む

WinIEの動作確認をしている時に、時々表示が違うってことありませんか？ ボクはソレが結構発生したりして、原因が分からず悩んだりする事が多々有ります。 IEにバグが多すぎるってばそれまでですが、それにしてもIEはよくハメてくれる… 現在仕事で組んでいるサイトがあるんだけど、ソレも... 続きを読む

基本的な部分であるCSSの適用方法について。 適用方法は、以下の3通り＋2通り。 style属性を用いて、各要素に直接指定する （X）htmlのhead要素の範囲内に指定する head要素の範囲内で、link要素によって外部ファイルを読み込む 上記3つだけ覚えておけば特に困らない... 続きを読む

たまに、リンクにカーソルを乗せた時、ほんのチョット動くのを見たことがありませんか？ 実はコレって非常に簡単なテクニックで、CSSに下記の様に記述するだけです。 a:hover { position:relative; top:1px; left:1px; } 昔、コレみて感... 続きを読む

IEが子セレクタに対応していないというのを利用したテクニックです。 一番最初に覚えるべきハックとも言えるほど、便利なハック。 やり方 div#g_navi ul { margin-left:-5px; width:600px; } /*IE以外に...*/ div#g_nav... 続きを読む

基本的な段組みレイアウトが出来るようになった後に、最初にぶち当たる壁だと思われる、サイドバーの繰り返し。 コレって、テーブルレイアウトだと容易に実現出来るのですが、通常CSSで段組みをした場合、サイドバーがメインコンテンツより短いと途中で背景が途切れてしまいます。 ソレだと随分い... 続きを読む

テンプレートと呼ぶほどじゃないですが、CSSで最初にやってみたくなるテクニックの一つである、javascriptを使わずにCSSのみでロールオーバーを実現する方法をサンプルを交えてご紹介です。 簡単に説明すると、CSSでa要素に背景を指定して、a:hoverにロールオーバー用の画... 続きを読む

今回ご紹介するサイトは、ボクの尊敬する人の一人であられるryokenさんが運営なさっているサイト。 今回CSS HappyLifeをリニューアル（09/14）するにあたって一番影響を受けたサイトです。 ですから色々な部分でインスパイアされました。 デザイン部分での影響が一番ですが... 続きを読む

いつも、何処からともなくコピペするもの。（暗記する気全く無し） xml宣言 <?xml version="1.0" encoding="utf-8"?> 文書型宣言DTD（document type declaration） +++ XHTML 1.0 Transit... 続きを読む

かなり内部的な事情ですが、文字コード問題で色々不便を感じていたので、Shift_JISからutf-8に文字コードを変更しました。 元々文字コードに拘っているとかそういった事は無かったのですが、昔からShift_JISでコーディングしていたので、このCSS HappyLifeも組み... 続きを読む

CSS覚え始めの頃、多様していたハックがアンダースコアハックです。 アンダースコアハックとは、Win版IEのみ適用させたい時に使います。 コレは、IEのバグを利用したテクニックで、プロパティの前に特殊記号などが記述されていた場合でも読み飛ばして通常と同じように解釈してくれます。 ... 続きを読む

本日会社で、「結論を出す癖」という事について話をしました。 とても充実した1時間だったので、記して起きます。 話の中で強烈に印象に残ったのが、 「結論を出すリスクを負いたくない」 という一言でした。 結論を出すと、結果が出るからソレを恐れている。 まさにその通りだなぁと思います。... 続きを読む

よく使うハックをメモしようと思ったのですが、MacIE5用のハック以外あまり使う機会がないですね。 現在でも、未対応で作成しているサイトも見かけますが、 完全に対応しなくていいよ。と早く世間的に言われるようになって欲しいものです。 /*--------------------Ma... 続きを読む

スペル覚えるの苦手なので、HTML4で定義されている16色のメモ。 black ■ silver ■ gray ■ white ■ maroon ■ red ■ purple ■ fuchsia ■ green ■ lime ■ olivie ■ yellow ■ navy ■ ... 続きを読む

:hover疑似クラスの記述順序はよく間違えるので、メモ。 a:link { color:red; } a:visited { color:purple; } a:hover { color:green; } a:active { color:blue; } 上記以外の... 続きを読む

大抵のCSSバグは、回避法が有るので何とかなるのですが、回避法が特に存在していないバグの場合非常に困ります。 最近の仕事で、IEバグでは比較的発生しやすいIEバグが起こったのでメモとして記しておきます。 floatで左右どちらかに寄せているボックスに、marginの値を指定すると... 続きを読む

CSSで組まれているサイトの中でもMSNは有名だと思うのですが、ソース覗いて思ったことなどを。 取り合えずざーっと流しでソースを見た感じ、すげー綺麗とは思えなかったです。 DOCTYPEの宣言が無かったり、見出しのh1より前にh2などが入っていたり、h1も width="0" h... 続きを読む

CSS Happylifeの簡単な説明をしたいと思います。 一言で言うと、CSSに少しでも関するあらゆる事を書いていきます。 具体的には、個人的によく利用するCSSテクニックのメモ的な用途、 CSSで組まれているサイトで綺麗だと感じたサイトの紹介。 がメインになり、（X）HTML... 続きを読む