全エントリーの一覧

リスト表示に切替(タイトルのみ)

一つの要素で、テーブルレイアウトのように列を揃える

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

横並びメニューのロールオーバーをJavaScriptを使わずCSSで実現

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

文章構造を崩さず出来るだけキレイに角丸をつくってみる。

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

角丸+背景を文字数に関わらず表示させる。

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

固定幅3カラム 真ん中のメインコンテンツをソース上最初に。

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

SQLife

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

IEバグ:peek-a-booバグ

  • バグ

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

CSSの適用方法

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

サイドの背景画像を本文にあわせてページの最後まで表示する(2カラム)

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

メニュー(リスト)の画像をカーソルオン時にロールオーバーする

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

ネットのサラダボウル

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

心機一転。

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

アンダースコアハック

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

結論を出す癖

  • 雑記

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

Hollyハック

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

定義されている16色

  • (X)HTML

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

IEバグ:marginの値が指定値より大きくなる

  • バグ

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

MSN Japan

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

サイト説明

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

↑上に行くよ