CSSテンプレート 一覧（ボックス表示）

とりあえず、暑いっす。えぇ。 ここ最近の暑さにやられ気味なhirasawaです。そんなやられ気味な状況なので、HappyLifeも夏っぽくしてみました。 あと、弊社のベトナム事業部の女性マネージャーがブログを開始しました。 ベトナムに興味がある方や女性マネージャーに興味がある方、更新率も高いので、ぜひに。 さて、そろそろ本題に。 こんな感じで、アイコンとかサムネイルがあってその横にタイトルと概要文...

デジパのベトナムオフィシャルサイトがオープンしました。 さて、今回はこのデジパベトナムを組むのに辺り、最初は無理（もしくは相当厄介）だと思ってたことが思ったよりカンタンに出来たのでご紹介。...

単語の禁則処理に関しては、結構無頓着であんまりそういう事がなかったのもあり、イマイチ分かってないんですけど、ブラウザによる差異が激しい問題の一つだと思います。たぶん。 Firefox3になってから、URLなどが長い場合折り返されるようになったみたいだけど、単純な半角英数の羅列だとやっぱり折り返してくれないんですね。ちと残念。 で、今回はむしろ折り返さないで欲しいっていう状況の時の処理に悩んだので...

新しいdigiper staff blogが始まりました。 PICTOGRAM CHANNEL - ピクトグラム チャンネル タイトルまんま、ピクトグラムを扱ってるサイト。社員ブログに型は無いので書きたいのを自由に書けるんです。 何気に、同じ職種なので負けないように頑張ります。っていう宣戦布告。 さて、以前公開した新規でサイトを作るのに使えそうなの一式。（あの人のパクりじゃないんだからっ！）を自分...

本題の前に、CSS Sprite をグローバルナビゲーションで使うのは何かが違うと思うのはボクだけかしら？（テキストをtext-indentで飛ばして、ロールオーバーさせるタイプの事を指してます） 昔作ったサンプルでそんなようなのがありました。 横並びメニューのロールオーバーをJavaScriptを使わずCSSで実現 CSS Spriteを有効に活用する場面は、あくまでも背景画像として配置されてい...

GIGAZINEさんで紹介されていた「カムタジア スタジオ」を試してみたくて、ボクが実際に2カラムレイアウトのサンプルを組んでいる画面キャプチャを作ってみました。 これといった編集を行わずにやったのに、とっても素晴らしい出来でびっくりです。...

「SBMに追加」ボタンは、自分の記事ブックマークしてもらえたかなぁ？どんなコメント付いたかなぁ？というチェックをするのに一番手っ取り早く見れる気がするので付けてるかな。後は、SBMの存在をチョットだけ意識してもらうとか？ さて、1ページもののサンプルやらテンプレートはいっぱい有るけど、実際のサイトで1ページしかないサイトはごく一部だと思う。 なので、複数ページが詰まったサンプルを作ってみました。 ...

的確なタイトルが浮かびませんでしたが、右にあるキャプチャみたいにthやtdに指定されている線が開いている場合のサンプルです。 サンプルページ サンプルダウンロード（zip：15kbくらい） 今まで、それなりにはコーディングしてきたつもりではいますが、今回のようなデザインは、はじめてだったので、最初に見た時どうやって組むのか分からなかったってのが、サンプルを作るきっかけになりました。 ぱっと見たと...

←こういう感じで、画像の横にあるテキストを画像に対して上下中央にするってーのは、今まで出来ないと思ってたんす。 だけども、ヨモツネットさんの記事でヨモツネット[日記] ≫ CSS で簡単に上下中央揃えを実現するってが紹介されてたので、試して見ました！ display: table-cell;がポイントになってて、IEはハックで対応みたいな感じです。 ...

タグとかめんどーだから、入れる気無かったんですけど、今更になって悪くないかも？とか思い始めたので、試しにタグクラウド設置してみました。 トップページの下の方におりますが、あんまり古いエントリーとか、タグ付け自体が適当だったりするので、あんまり使い物にならないかもしれません。。。永遠のベータ版です。 で、まぁかっこ良さげなタグクラウドを頑張ってつくろーとkiai出して作ってる途中に、ふと3ping....

17日から下書き状態だったエントリー、、、沢山用意する予定だったけど色んな都合で増えない予感なんで公開。 ずいぶん昔にフッターの区切りっぽいサンプルを作ったけど、ヘッダーは作ってなかったので、ヘッダーのサンプルを作ってみましたよっと。 というか、ヘッダーのサンプルって見かけたことがほっとんど有りません。（必要とされてないから？ ヘッダーって作るの大変というか、厄介だったりしませんかね。 全部画像な...

ハイレベルCSS実践講座 東京2008年1月20日 | サイバーガーデンbizに行ってきました。 どんな感じかはbizを見ていただくとして。 内容としては、いちおう大半が復習で、やっべ全然知らない。。。っていう状況はほとんど無かったんですけど、Operaでinput type="button"のvalue値の消し方が知らなくってやるせない気持ちだったのですが、参加者の方もあんまり知ってる人は居ない...

2007年12月6日追記 IE6で選択中のタブの上が切れていたのを修正しました。 具体的にはcss/style.cssの35行目にfloat: left;を追加しております。 いろんなサイトで見かける「よくある質問」。 一番多いパターンは、リストで質問があって、アンカーで回答に飛ばす方法だと思うです。 特別ソレがいけてないとかは思わないんですが、飛んだ後に「戻るボタン」で戻らない人とかは、毎回ペ...

2カラムなサンプルです。 海外で流行気味？ということで、「クリーンな水平分割」が出来そうなサンプルです。 どんなもんか見たい方・欲しい方は以下よりどうぞ。 サンプル 一式ダウンロード この辺で知りました↓ POLAR BEAR BLOG: 「クリーンな水平分割」がウェブデザインの最新流行？ ...

08年6月4日追記： コレの新しいの作りました。 新規でサイトを作るのに使えそうなの一式。Ver 2 11月7日追記： contens.cssの56行と60行目の#contents部分でスペルミスしておました。 ごめんなさい... 現在は修正版になっております。 修正後のcontents.css --- SO905iがやば過ぎる件。JOGですよ！じょぐ！！！すげー待ってた。アナタを心から待ってい...

下記のような指定でリストをinlineで並べ、li要素毎に改行すると、半角スペース分の余白ができてしまう。 ul { text-align: center; } ul li { display: inline; } <ul> <li><a href="/">トップページ</a></li> <li><...

1日に2エントリーもするなんて、、、 [CSS]高さの異なるカラムを揃えるスタイルシート | コリスを読んでてなんだか気になったので、ちょっと自分でも試してみました。 サンプルページ ダウンロード ...

ここ最近エントリーさぼり過ぎてたんで、ちょいネタでも上げていこうっていうスタンスで。 発生条件がイマイチわかってないんですけど、フラッシュを設置した際に、下にpaddingっぽい余白っていうか隙間っていうかが5px～10pxほど空くことがありませんか。IE以外のブラウザで。 こんな風に↓ 図みたく、分かりやすい枠線が有ると露骨に気づくわけですが。 で、まぁコレは画像でも発生するベースラインのアレと...

どことなく良くありそうなリストのサンプルです。 ちょっと前にこんな感じのデザインのを組んだので、メモがてら色んなバージョンも作ってみました。 sample04辺りが良いかもしれないす。 サンプルページ ダウンロード ...

本題の前にお知らせ。RSSの登録先をこっちにしてくれるとうれしいです。近々ディレクトリ整理したいので。 http://feeds.feedburner.jp/csshappylife では、本題に。 2カラムサンプル13種で宣言しておいて、放置してましたが重い腰を動かしてようやっと作りました。 というか、エントリー自体も時間が空いてしまい、申し訳ない限りでございます。。。 一度気が抜けると、中々書...

タイトルが長い… サイトやブログの価値を調べる10の指標とツール｜前向きストラテジー 10番目のでこのブログを調べると泣きたくなるくらい安いけど、ボクは頑張ろうと思った今日この頃、皆様暑さにバテていないでしょうか？ボクはしっかりバテてダレてます。あんまり仕事してま…（加藤さまに給与減らされるので自重しました） さて、そんな訳で本題ですが、下記みたいなレイアウトの時のお話です。 ...

ウィンドウを小さくした時に左上が見えなくなってしまうことに関する対処を追記しました。 何か、こういう立場のお仕事してる人とか、初心者のススメでFirefoxを使え！とかまずはFirefoxで確認すべしとか聞きますが、ボクはIE派です。 Firefoxに乗り換えようと頑張った時期もあったんすが、どーも合わない感じだったんすよね。 重さとかスクロールの仕方とかが、、、 だから確認もIEが先だったりしま...

何だか間があいてしまいました、、、 ここ以外でのアウトプットが増えてたので、こっちに書くパワーが減っておりました。 さて、言い訳は良いとして、現在も日々コーディングな訳ですが、久々にはまったので同じ状況のを作ってみました。 タイトルだけでは意味がわからないと思ったんですが、どう書いたらよいのかさっぱり… 見た目普通っぽい2カラムがあって、サイドの背景はメインの内容に合わせて繰り返すのは良くあるかと...

2カラムのサンプルを色々作ってみました。 事の発端は、Layout Gala: a collection of 40 CSS layouts based on the same markup and ready for download!を見ててですが、こういうレイアウトサンプルサイトは色々あって、P O P * P O Pさんでも紹介されていますね。 IE7もサポートしているCSSレイアウトがダ...

半年以上も前に、雑記にて書いた、「PhotoBlogを作ってみた」をちゃんと使えるようにしたバージョンを作成したので、取りあえず公開。 雑記っぽい内容がだらだら続くので、テンプレートを使いたい人は追記へどうぞ。 正直ちゃんと作り直す気なんて無かったんだけど、使いたいってメッセージが来てしまったので、何だかテンション上がって作り直しちゃいました。 写真を掲載するだけなら、色んなサービスがごろごろして...

今まで、あんまりcontentプロパティを調べてなかったから、その素晴らしさがイマイチわかってなくて、なんか特定のテキストを挿入したり、パンくずとか作るのに便利だったりclearfixで使ってたり、なんやら程度で、Internet Explorer7で対応しなかったのもそんなに気にしてなかったのが正直なところだった今日この頃、皆様GWはいかがお過ごしでしたか？ ボクは仕事万歳！でした。 そのお陰も...

前々からちょっとカッコイイなーと思ってたステッカーっぽいの。 試しに今回貼ってみました。左上に貼ってあるコーディングコンテストのがソレです。 ちょっとウチのサイトの場合だと横幅があるんできついですが、まぁテストって事で。（外しはしないけど） 知ったのは、ネットのサラダボウルさん。 って事で、詳細をば。...

iddyがバージョンアップし、ブログパーツな感じで貼り付けれるようになりました。 参照：http://iddy.jp/blog/log/2007/03/000025.php このブログだとサイドのカテゴリの下に追加してあるプロフィールがソレです。 iddyは、ボクは開発に直接関わっている訳では無いので、1ユーザーとして使っている訳ですが、今回ブログに貼り付けるに辺り、標準で用意されているデザインで...

" src="http://css-happylife.com/img/entry/cdp-05.gif" />ハートです。ハートいっぱい。 最近、エントリーするのがビクビクだったりするんで、決められたテンプレートのデザイン作成は気が楽だったりします。 しばらくまったりテンプレメインで行こうかな… 使い方等の詳細は、CSS着せ替えテンプレートプロジェクトを見てください。 サンプル：http://c...

久々に定義リストを横並びにしたら、IE7で上手くいかず、ちょっと苦戦したのでメモめもMEMO。 おそらく、ddがテキスト量などで高さがdtより多い場合は問題が無いんだろうけど、dtの方が高さがある場合、IE7だと上手い具合に回り込みが解決されない（っぽい dtの方が高さがある場合。っていうのは今回の場合は画像にdtが来て、ソレを定義付ける説明がちょろっとあるようなイメージ。...

フッター部分のメニューなどを区切る際のサンプルを適当に。 p要素でやるとこんなヤツです。 Home｜アバウト｜イラスト｜BBS サンプルに使うhtmlは、ul要素を使った下記をベースに使用してます。（サンプルに寄ってid名とか変わりますが） <ul id="sampleFooter"> <li><a href="/">Ho...

たぶんこのサイトの何処かを探せば、IE以外で背景が繰り返さないとか、IEだけ文字が消えちゃうとかって類いについて書いてあるはずなんすが、ボク自身も何処に有るのか分からないので、適当に有りがちな部分をまとめてみました。 取りあえず↓こんな状態よくあるかと。 アタイの守護樹なの♥ 上記で指定してるスタイルは下記。 #main .entryBody #sample070219_01 { ...

自分用メモ。 Firefoxなどで見た時に、画像を回り込ませ、border指定をしてpaddingで余白を設けた時に、下部分だけ指定した値と違って、ちょっと大きくなってしまう事があります。 そんな時に役立つのが下記のスタイル。 img { vertical-align:bottom; } コレで指定した通りに表示されます。 今回のエントリーもちゃんとサンプル用意して実際の画面を出そうと思ったのに...

CSS（スタイルシート）でbodyに設定しておくと便利な5つのポイント - デザインウォーカー | DesignWalker - ロサンゼルスで働くウェブデザイナーの日記を読んで、ボクなりな最初に指定して置くと良いポイントを上げたくなったので書いちゃいます。 むしろこのサイトの方向性的に有った方が便利だよなーと。 書くきっかけを頂き、感謝いたします。 ちなみに、最初に指定しておくポイントってそれぞ...

中央配置のデザインで、ページ移動の際にコンテンツの量によってスクロールバーが出たり出なかったりするFirefoxさん。 あのズレ、気になる人っていますよね？ すぐ分かるように簡単なサンプルを用意しました。 http://css-happylife.com/template/11/ あ、当たり前だけど、Firefoxで見て下さいね。 コレを解消する為に以下のスタイルを適用させればズレがなくなります。...

普通のエントリー久々な気がする今日この頃。 今回はトピックパスとかパンくずリストなんて呼ばれてる、ちょっと規模の大きいサイトでは日常茶飯事で見かけるアレのサンプル色々です。 サンプルの前に #main .entryBody #topicPath_01 とかってなってますけど、#main .entryBody はウチのサイトの都合で優先順位上げの為にやってるんで、コピったりする場合はいらない感じで...

のイメージ" />結構見かける、見出しなどの横に配置されているボタン。 ウチのサイトでも、NEW ENTRYの横にRSSボタンをつけてます。 他に、続きを読むやMoreなんかが見出しの横にボタンやテキストとして配置されているケースが多いと思います。 このデザインを実現する際に、floatかpositionのどちらでも可能ですが、この場合はpositionの方が楽な上に柔軟に対応できる（と思う）ので...

" src="http://css-happylife.com/img/entry/cdp-04.gif" />久々のCDPテンプレート追加です。 現行のウチのデザインをベースにCDP用に改造しました。 使い方等の詳細は、CSS着せ替えテンプレートプロジェクトを見てください。 サンプル：http://css-happylife.com/template/cdp-04/ ダウンロード：http://...

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

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

画像の周りなどに1pxの破線を引く場合に、borderを使う事があると思います。 borderで破線を引くと、ブラウザにより表示が異なり何か気分が悪いですよね？ その際、画像を使えばOKなんですが、サイズが固定なら画像でも簡単に枠が作れますが、画像サイズがバラバラで、かつ同じ枠線を引くとなるとちょっと面倒な感じがします。 ソコで、結構簡単な方法で解決できるぷちテクニックのご紹介。...

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

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

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

" src="http://css-happylife.com/img/entry/cdp-03.gif" />CDPテンプレート追加です。 今回は友だちのイラストを許可を得て使わせてもらいましたっ！ イラスト提供：ミ茶いる。（Villa le 茶。） 使い方等の詳細は、CSS着せ替えテンプレートプロジェクトを見てください。 サンプル：http://css-happylife.com/templa...

" src="http://css-happylife.com/img/entry/cdp-02.gif" />思った以上に見て頂いている方が居るようなので、CDPテンプレート追加です。 使い方等の詳細は、CSS着せ替えテンプレートプロジェクトを見てください。 サンプル：http://css-happylife.com/template/cdp-02/ ダウンロード：http://css-happ...

かなり色んなサイトで見かけるようになった、JavaScriptを使わずにロールオーバーをCSSのみで実現するテクニック、そのやり方です。 以前のエントリーで、縦並びのメニューで同様のを紹介しましたが、横並びのメニューは随分勝手が違います。 またメニューをテキストではなく、画像で行っているのでその部分についても説明していきます。 サンプル：http://css-happylife.com/templ...

" src="http://css-happylife.com/img/entry/cdp-01.gif" width="200" height="178" />CDP用のテンプレートを作成してみました。 使い方とうの詳細は、CSS着せ替えテンプレートプロジェクトを見てください。 サンプル：http://css-happylife.com/template/cdp-01/ ダウンロード：http:...

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

CSSによる角丸テクニックはイッパイみかけるけど、ドレも可変なんすよ。 個人的には、可変より固定の方が好きだったり、実業務で可変レイアウトの角丸を作る事ってのは殆ど無かったりします。 ゆえに、実践で必要なのはウィンドウサイズによって可変する角丸より、固定幅で縦だけ伸びれば十分だったりします。 無駄なdivとか減らせますしね。 まぁユーザビリティ関係の本を読んでれば、可変レイアウトの方が良いと書かれ...

" src="http://css-happylife.com/img/website/line_01.gif" />あらかじめ言っておく。 このサイトは、非常に忠実で厳格なhtmlやらに拘ってるわけじゃない。 CSSで、HappyなLifeを送っている内に、CSSっておもしろーい！って人が増えてくれたらいいのです。 前置きはこのくらいで… ってことで！！ 区切り線イッパイ作ってみた！ 区切り線は...

3カラムレイアウトのサンプルです。 デザインはテキトーでいいや。と思って作ってたのに、余計な装飾を始めてしまって中途半端っぷりが出ていたりするのは、見なかったことにして。 えっと、今回のサンプルで行っている事でも。 見た目上は真ん中にあるメインコンテンツを、ソース上ではヘッダーの次に。 左、真ん中、右のドレが長くなっても背景が最後まで表示されるように。 最近の時代にあわせて（？）横幅が多少大きめ。...

たまに、リンクにカーソルを乗せた時、ほんのチョット動くのを見たことがありませんか？ 実はコレって非常に簡単なテクニックで、CSSに下記の様に記述するだけです。 a:hover { position:relative; top:1px; left:1px; } 昔、コレみて感動したのを覚えてます(笑 上記の書き方だと全体に適用されちゃうので、ワンポイントとして使うと良いかも知れません。 チョッ...

基本的な段組みレイアウトが出来るようになった後に、最初にぶち当たる壁だと思われる、サイドバーの繰り返し。 コレって、テーブルレイアウトだと容易に実現出来るのですが、通常CSSで段組みをした場合、サイドバーがメインコンテンツより短いと途中で背景が途切れてしまいます。 ソレだと随分いけてないので、ちゃんとメインコンテンツの内容にあわせて表示するようにして上げます。 まずは、サンプルをご覧下さいませ。 ...

テンプレートと呼ぶほどじゃないですが、CSSで最初にやってみたくなるテクニックの一つである、javascriptを使わずにCSSのみでロールオーバーを実現する方法をサンプルを交えてご紹介です。 簡単に説明すると、CSSでa要素に背景を指定して、a:hoverにロールオーバー用の画像を指定して上げます。 a { background:url(hoge.gif) no-repeat; } a:hov...