実際の作業に入る前に、基本的なことをやっておきます。 作業ミスや混乱などを避けるためにもまずは基本です。しっかりと見に付けておきましょう。 以下の事について触れるので、理解している方は次のエントリーにお進み下さい。 CSSの記述の仕方 セミコロンについて 大文字と小文字の区別につ... 続きを読む

このカテゴリではCSSビギナーの方向けに、ボクなりな説明でCSSで組むサイトを分かりやすいように書いていきたいと思ってます。 結構実践型でやろーと思ってますんで、ちゃんと覚えようって方のみお願いします。 対象者 htmlをある程度理解していて、チョットだけでもいいのでタグ打ちが出... 続きを読む

IEには様々なバグが報告されていますよね。 もうコーダーからしたら勘弁して下さいって泣きが入りそうになるくらいに... 背景色が指定された要素内でfloatがある時、要素内の文字が消えるとか、floatに後続するmarginの値が無視されるとか、widthを指定しているとボックス... 続きを読む

DWで作成したポップアップメニューをIE7で見ると表示が崩れているという問題を簡単に解決する方法がネットのサラダボウルさんの下記エントリーで紹介されていました。 ネットのサラダボウル: DW8で生成するポップアップメニューがIE7で崩れる件を解消してみた 解決方法は簡単で、自動で... 続きを読む

CSSを覚えていく上でXML宣言と文書型宣言に関しての理解がないと、組んでいくうちにブラウザによって表示の違いが生じ、後から色々とスタイルを調整しても何が原因で表示が違うのか分からなくなってしまうといった事があると思います。 という事で、文書型宣言について自分なりのアレコレを書い... 続きを読む

CSSを覚えていく上でXML宣言と文書型宣言に関しての理解がないと、組んでいくうちにブラウザによって表示の違いが生じ、後から色々とスタイルを調整しても何が原因で表示が違うのか分からなくなってしまうといった事があると思います。 という事で、XML宣言について自分なりのアレコレを書い... 続きを読む

たまに必要になると、良くわからなくなるCSS2.1で定義されているメディアの種類メモ。 all すべての環境 screen パソコン画面 tty 文字幅が固定の機器 tv テレビベースのウェブブラウザ projection プロジェクタ print プリンタ handheld 携... 続きを読む

STOPN' LISTENさんの記事を読んでて思ったんですが、結構自分に取っては当たり前だと思ってた事や誰でも知っているだろうって事が多かったりします。 これ↓ こないだ知人に「ある部分にボタンを後からいれようと思ったけど方法が思いつかない」と相談され、 よしきた、下記のような方... 続きを読む

のイメージ" />結構見かける、見出しなどの横に配置されているボタン。 ウチのサイトでも、NEW ENTRYの横にRSSボタンをつけてます。 他に、続きを読むやMoreなんかが見出しの横にボタンやテキストとして配置されているケースが多いと思います。 このデザインを実現する際に、f... 続きを読む

モバイルも検索エンジンの登場で一気に市場が拡大してるので、今後モバイルもCSSである程度見た目を制御する時代も近い内に来るのかなーと思う昨今。 現状で少なくともSofｔBankのケータイ（911SH）はCSSをかなり読み込むようです。 全て検証していないので定かではありませんが、... 続きを読む

CSS Nite Vol.15+忘年会に参加してきました。 CSS Niteの参加は今回で3回目。 何気に3ヶ月連続でいってきました。 月に一度のチョットしたイベントって感じで中々毎回楽しみです。 そして今回は、毎回おこなっている打ち上げに初めて参加しました。 場所のプリントアウ... 続きを読む

CSSに移行したばかりだったり、先行して覚えちゃうとHTML4.0/4.01でdeprecated（推奨しない）とされた要素や属性に気付かずに使っているという最悪のケースに陥ってしまう事も無きにしも有らずです。 せっかくCSSにしたのに、font とか align なんかを使って... 続きを読む

チョットしたアイコンを様々なカラーで作る場合、都度画像を用意するのが面倒なときや、仮で色をおいてある場合など、後々変更するのが面倒って事が有るかと思います。 ソコで活躍するのがカメレオンアイコンっていうテクニック？です。... 続きを読む

ね、ネタが無い… 取り合えず、自分がサイトを作る時に最初に指定するCSSとXTHMLでも上げます。 http://css-happylife.com/template/default/style.css... 続きを読む

コーディングをする上で、いまや必須なのがMT。 クライアントからの要望に答える為だったり、より便利にしてくれる為に、MTプラグインも必要とする時が多々あります。 ソレなのにいつも、「何処だっけ。。。あのプラグインは・・・」と無駄に探してしまうので、私的メモとして個人的によく使うプ... 続きを読む

会社で秀丸Loveな人が居て、その影響かわからないけれどいつの間にかメインエディタが秀丸になっていたのですが、特に機能を使いこなすでもなく、ナニをする訳でもなく使っていたんですが、土日の暇な時間に何となく自分用の強調表示定義ファイルを作ってみました。... 続きを読む

年の最後って事で（？）、サイトリニューアルいたしましたっ！ 前のサイトのデザインも自分の中では頑張ったなーと思ってたのですが、ココ最近いけてないと思うようになっており、リニューアルしたい衝動にかられて居たので、思い切って全面リニューアル決行しましたよっ。 絵とかコーディング、デザ... 続きを読む

通常、floatさせている画像やボックスなどがある場合何らかの形でclearするか、その親要素にfloatを指定しないと、親要素からはみ出してしまいます。 コレはCSS2.0の仕様なんで正しい表示なんですが、どうしても親要素にfloatなどが使えず、やむなくclear:bothを... 続きを読む

画像の周りなどに1pxの破線を引く場合に、borderを使う事があると思います。 borderで破線を引くと、ブラウザにより表示が異なり何か気分が悪いですよね？ その際、画像を使えばOKなんですが、サイズが固定なら画像でも簡単に枠が作れますが、画像サイズがバラバラで、かつ同じ枠線... 続きを読む

指定した数値内でランダムに数値を出すプラグインです。 ダウンロード ZIP テキスト 使い方 ランダムに数字を吐き出したいテンプレートに下記のように記述。 <$MTRandom from="0" to="10" digit="2"$> from ランダムで出力する数値... 続きを読む

通常外部リンクなどを別窓で開く際に、target="_blank"を使うと思うのですが、コレは非推奨となっているので、もうちょっと美しく別窓で開くにはどうしたらいいか？ と何度か考えた事がありますが、適当にぐぐると、JavaScriptを使うものが何点かあるけど、ソレもイマイチス... 続きを読む

" src="http://css-happylife.com/img/website/digiper.jpg" />ふと、入社前の自分に振り返ったので、書かせていただきます。 結構思い出日記的内容になりそうなんですが…まぁ社員の本音（？）ってことで。 ... 続きを読む

beta2くらいから出てたIE7用のハックですが、正式版でも修正が入っていなかったようです。 あまり頼りたくはありませんが、IE7のバグはこれからどんどん出てきそうなんで覚えておいた方が良さそうですね。 *:first-child+html... 続きを読む

WinIE7の環境下においてある特定の条件を満たしてしまうと、横幅が指定した値より大幅に大きくなり、横スクロールバーが出てしまうというバグが見つかりました。 サンプル：http://css-happylife.com/template/09/ 原因は、ある条件下でfloat:ri... 続きを読む

以前のエントリーで紹介した、SQ Lifeですが、11月から新規コンテンツとして、木精占いが開始しました。... 続きを読む

2006年11月2日に、IE7日本語版が正式にリリースされましたね。 そこで早速ボクも入れてみました。 Web好きっ子の一人として、ちょとワクワクしながらIE7のインストールを見守り、いざブラウジングスタート！ ベータの頃にちょっとだけ使ったことがあるのでインターフェースやらタブ... 続きを読む

↓こんな画像があったとして。 コノ中にテキストを入れる場合、真ん中に合わせるのがビミョーに面倒だったりします、、、よね？ そんな時にチョットだけ便利なテクニック。 何かのタイトル こんな感じで真ん中に来ます。 上のサンプルで指定しているスタイルはこちら↓ margin:0; ... 続きを読む

何を思ったか、写真なんて撮らないのにフォトブログっぽいモノが作りたくなり、作ってみました。 このフォトブログをテンプレートとして配布しようと思っているのですが、準備に想像以上に手間取り、中々公開出来ないので、こんなん作りましたよって事で雑記カテゴリでご紹介です。 写真やイラストな... 続きを読む

何かと便利な定義リスト。 用語集や、Q&Aなど使いどころは沢山あるけれど、同じ行にしたいと思うことがしばしば有るかと思います。 しかし、中々思うように横並びが出来ないのが定義リスト。 今回はそんな厄介な定義リストのサンプルを作ってみました。... 続きを読む

2006年10月19日に行われた、CSSNiteに参加してきました。... 続きを読む