今回は見出し（h1〜h6タグ）のオシャレなデザインサンプルを68つ紹介します。CSSコードをコピペすればそのまま使うことができます。もちろん自分好みにカスタマイズして使って頂いても構いません。
CSSのコピペだけ！おしゃれな見出しのデザイン例まとめ68選
今回は見出し（h1〜h6タグ）のオシャレなデザインサンプルを68つ紹介します。CSSコードをコピペすればそのまま使うことができます。もちろん自分好みにカスタマイズして使って頂いても構いません。
リストマークの画像のずれを修正する
サイドバーメニュー等の先頭のマーク（マーカー）表示に画像を使われている方は少なくないと思いますが、img タグをテンプレートに直接記述するのは、ウェブスタンダードでいうところの「構造とデザインの分離」という面よりあまりお勧めできません。またリストの量が増えると img タグの指定も増えることになり（テンプレートでは数ヶ所の指定で済みますが）、ページサイズにも影響します。 ということで、マーク表示にはCSS・リスト形式（li）の画像指定で表示すること好ましいですし、リスト先頭のマークに画像を使われている方も大勢いらっしゃると思いますが、list-style-image プロパティで li { list-style-image: url(hogehoge.gif); } と画像を指定した場合、下のようにマークが微妙にずれて表示されてしまうのが悩ましいところです（サンプル１）。 サンプル１ これ
IEで絶対配置（position:absolute）のボックスが消えるバグの検証
先日、友達の依頼で XHTML+CSS のコーディングをしていたところ、position:absolute を指定したボックスが Win版IE6 でのみ表示されないという現象に出くわしました。あちこち調べてみたところ、かなり厄介な IE のバグのようで、消えるときの条件がいろいろあることがわかったので、整理してみたいと思います。 まず最初に見つけたのが、以下のサイト。 » IEで position:absolute した要素が消えるバグ こちらで紹介されているのは、float と clear にはさまれた position:absolute が消えてしまう現象とその対策。でも、私がはまったケースでは、position:abloslute の前には float がありません。紹介されているように clear を追加してみても当然ダメ。う～ん、なぜだ・・・ 日本語のリソースを調べてみても解決策
ウェブリブログ：サービスは終了しました。
「ウェブリブログ」は 2023年1月31日 をもちましてサービス提供を終了いたしました。 2004年3月のサービス開始より19年近くもの間、沢山の皆さまにご愛用いただきましたことを心よりお礼申し上げます。今後とも、BIGLOBEをご愛顧賜りますよう、よろしくお願い申し上げます。 ※引っ越し先ブログへのリダイレクトサービスは2024年1月31日で終了いたしました。 BIGLOBEのサービス一覧
Best Practices for Speeding Up Your Web Site - Yahoo Developer Network
Best Practices for Speeding Up Your Web Site The Exceptional Performance team has identified a number of best practices for making web pages fast. The list includes 35 best practices divided into 7 categories. Minimize HTTP Requests tag: content 80% of the end-user response time is spent on the front-end. Most of this time is tied up in downloading all the components in the page: images, styleshee
outsider reflex - Firefox 3のロケーションバーにフォーカスを移したときに必ず日本語入力を無効にする方法
Latest topics > Firefox 3のロケーションバーにフォーカスを移したときに必ず日本語入力を無効にする方法 宣伝。日経LinuxにてLinuxの基礎？を紹介する漫画「シス管系女子」を連載させていただいています。 以下の特設サイトにて、単行本まんがでわかるLinux シス管系女子の試し読みが可能！ « Firefox 3 Download Day Main 拡張機能で独自プロトコルを実装しようとしてFirefox 2とFirefox 3での動作の違いに躓いた » Firefox 3のロケーションバーにフォーカスを移したときに必ず日本語入力を無効にする方法 - Jun 18, 2008 既出だと思うけど。userChrome.cssに以下の内容を書けば、ロケーションバーにフォーカスしてURIを入力しようとして日本語入力になっててムキー！！！となる事態を防げる。 #urlbar
[使える CSS テクニック] CSSを使った見栄えの良いサイトマップ | バシャログ。
第 7 回目は「CSSを使った見栄えの良いサイトマップ」です。 今回は、Web サイト構成をすばやく確認できるように見栄えのいいサイトマップを紹介したいと思います。 以下のようなツリー構造のサイトマップを作成してみます。 sample 1.画像を用意 以下のような画像を使用します。 アイコンから伸びる点線はなるべく長くします。 2. XHTML はリストの入れ子で XHTML <ul> <li><a href="#">ホーム</a> <ul class="category"> <li><a href="#">会社案内</a> <ul class="page"> <li><a href="#">会社概要</a></li> <li><a href="#">コンセプト</a></li> <li><a href="#">沿革</a></li> <li><a href="#">社長挨拶</a></l
![[使える CSS テクニック] CSSを使った見栄えの良いサイトマップ | バシャログ。](https://cdn-ak-scissors.b.st-hatena.com/image/square/1f4390ea5b2b558adfd9c349b9a080aae407daff/height=288;version=1;width=512/https%3A%2F%2Fbashalog.c-brains.jp%2Fshared%2Fpublic%2Fimg%2Fcommon%2Ficon_ogp02.png)
ウノウラボ Unoh Labs: hasLayoutとは何か
yamaokaです。 CSSに携わっている方なら、Holly hackを使ったことがあるかもしれません。 /* Hides from IE5-Mac \*/ * html .foo { height: 1%; } /* */ Internet Explorer（以下IE）で、レイアウトに問題のある要素に 上記のようなスタイルを指定をすると、 あら不思議、まともな表示がなされるというものです （上記のままではIE7に対応していませんが…）。 さて、どうしてレイアウトが意図したとおりに行われるようになるのでしょうか。 IEのhasLayoutプロパティ IEでは、全ての要素が 「hasLayout」という読み取り専用のプロパティを持っています。 これはそれぞれの要素がレイアウト情報（＝要素の幅・高さなどに関する属性情報）を 保持しているかどうかを示す値で、 デフォルトの状態では「hasLayo
CSSでロールオーバーもどき
CSSでロールオーバーもどき ロールオーバーの際に画像の輝度を上げるやり方がありますけど、CSSで簡単にできます。 XHTMLソース <a href="http://blog.webcreativepark.net"><img src="./tor.gif" alt="to-R"/></a> CSSソース a:hover img{ opacity:0.8; filter: alpha(opacity=80); } サンプル ロールオーバー時にimg要素のopacityプロパティを使い不透明度を下げます。 IEはopacityプロパティに対応していない為、filterを使い不透明度を下げます。 簡単なんで、忙しいときに重宝します。 関連エントリー CSSで実現するスマートなロールオーバー 画像置換 cssで画像をプリロードする方法（改 一番簡単な画像置換の方法 画像置換でメニューを作る 画像
テキストサイズ変更に応じて画像のサイズを変えるCSSテクニック:phpspot開発日誌
Create Resizable Images With CSS | Smiley Cat Web Design I'm a big fan of layouts that still work if a user increases their browser's text size. テキストサイズ変更に応じて画像のサイズを変えるCSSテクニック 方法１ 次のDIVがあったとして、 <div class="resize"></div> 次のＣＳＳを適用します。 .resize { background: url(image.jpg) -130px -140px no-repeat; border: 3px double #fff; float: left; height: 12em; margin: .2em 1em 1em 0; width: 12em; } すると、文字サイズを変更
2xupで実装されているエラスティックレイアウトを調べてみた。 - Trans
2xupさんのところで実装されているエラステックレイアウト（Elastic Layout）、もしくはエラステックデザイン、はたまたエラスティックレイアウトというのが気になってしょうがない。今年、アックゼロヨンでグランプリを受賞したみずほ証券でも、似たようなレイアウトが施されている。というわけで、またもや調べてみた。 と、調べてみたはいいものの、うまい具合に実装方法について解説されているサイトが見つからなかった。要は、widthやpadding、marginなどにem指定をして、フォントサイズを変更しても、それに応じてレイアウト幅が変更されるレイアウトのことを言うらしい。A List Apart: Articles: Elastic Designで発表されたのがどうも初めてのようだ。ちなみに、作者が作ったサンプルサイトもある。 でも、456 Berea Streetでよい感じに、自分のサイト
optgroup 要素を CSS でひと工夫してみる | WWW WATCH
フォームの入力コントロールの中で、select 要素によるセレクトメニューは、選択肢の数が一定以上増えると選択したい項目を探し出すのがちと面倒になります。そんな... フォームの入力コントロールの中で、select 要素によるセレクトメニューは、選択肢の数が一定以上増えると選択したい項目を探し出すのがちと面倒になります。そんな時のために optgroup 要素が存在するわけですが、こいつを使用した上で、CSS をあてて見た目を装飾する方法と、一部ブラウザでの注意点などを簡単にまとめてみました。 基本的なことのみで、すごいかっこいい見た目を実現とかそういうのではありませんので、期待せずにどうぞ。 例えば都道府県などの選択をさせる際を想定すると、マークアップ自体はこんな感じになりますよね。面倒なので全部は書きませんが。 <select name="location"> <optgroup la
印刷用CSSをもっとよくするための4つのTips。 - TRANS [hatena]
約2ヶ月くらい前に、Printing the Web: Solutions and Techniques | Smashing Magazineというエントリーを読みました。10個以上の海外のサイトのいろんな印刷向けCSSやJavaScriptのTipsが紹介されていて、「印刷用CSSをまとめてみた。」を書いた自分としては何とか分解してやりたいなと思っていました。で、本日ようやく分解が一通り終わりましたので、その中で得たTipsを紹介します。 印刷用デザインも1つのWebデザインプロセスとして考えておく。 今回、このエントリーが最も自分にとっては衝撃的でした。印刷用CSSの機能面だけを追い求めて、「まあ、印刷されるときに、最低限読めればいいんでしょ？」くらいにしか思っていなかった自分が、ちょいと情けない。元ネタは、Five Simple Steps to Typesetting on th
![印刷用CSSをもっとよくするための4つのTips。 - TRANS [hatena]](https://cdn-ak-scissors.b.st-hatena.com/image/square/006177c1ae7d95a2c7c0336994db88ed59a41525/height=288;version=1;width=512/https%3A%2F%2Fogimage.blog.st-hatena.com%2F6435988827676522384%2F6435988827676523317%2F1448268251)
[CSS]スタイルの初期化(前編) -全称セレクタとhtml, body編 | コリス
2007年春現在よく使用している、ブラウザがもつスタイルを初期化するスタイルシート「全称セレクタとhtml, body編」です。 CSSのスタイルの初期化が必要な理由 スタイルの初期化 -全称セレクタ（*） スタイルの初期化 -html, body スタイルの初期化 -全称セレクタとhtml, body のメモ スタイルの初期化(後編) -body内の個別タグ編 CSSのスタイルの初期化が必要な理由 HTMLの各タグは、ブラウザごとに初期スタイルが異なり、スタイルシートでレイアウトを行う際、ブラウザごとに異なる指定を行わないと期待通りのレイアウトを再現しない場合があります。 そのため、同一のスタイル指定で意図したレイアウトが再現できるように、このブラウザごとのスタイルの差異を無くすスタイルシートの設定を行います。 対象としているブラウザは、最近の僕の受注案件の多くは下記のブラウザが対象にな
![[CSS]スタイルの初期化(前編) -全称セレクタとhtml, body編 | コリス](https://cdn-ak-scissors.b.st-hatena.com/image/square/bc54860ba06deaa45382cf2bddc929515def0354/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fshared%2Flogo-2014050501-en.png)
TRANS - * { magin: 0;}だけでは物足りない！zoom: 1;を使おうよ！
IE6からIE7が今後本格的にマーケットシェアを取って行くことを考えると、IE7の仕様やバグを考えた上でのマークアップが欠かせないとは思います。でも、僕らはまだIE7がどんなものかが分からない。そのため、とりあえず* { zoom: 1;}を指定しておくことが安全策なのかもしれません。 IE7のZoom機能で、見事にこける。 先日、うちの本体のサイトを更新し終わった際に、スタッフから「あれ、しゃらくのサイトずれてるよ」と指摘されました。更新箇所が多く、CSSも多少いじくったので、どこか消してしまったのかもしれません。そこで、自分のブラウザで確認するも、どうも問題が再現できない。そのスタッフのブラウザを見ると、こんな感じになっていました。 僕のFirefoxで見てみても問題ないし、そのスタッフが使っているIE7でも問題なし。「うーん」と悩んでみるものの、意外と答えは簡単なところにありました。
小粋なインターフェースを実現する25のコード （パート3） - SIMPLE*SIMPLE ～ ウェブ職人のための小粋なネタ帳 ～
シリーズもの第三弾が発表されていました。ウェブ製作に使えるちょっとした小技集です。パート1と2もあわせてどうぞ。 小粋なインターフェースを実現する25のコード 小粋なインターフェースを実現する25のコード （パート2） 今回も全部で25個ありますが、気になったものをいくつかピックアップ。 ↑ Flickrのようにクリックするとその場で編集できるようにする方法。 ↑ テキストがフェードイン、フェードアウトしていくような効果を作る方法。 ↑ CSSだけで上のようなボタンを作る方法。 ↑ CSSだけでリストをこのようなツリーのようにする方法。 全部見たい方は以下からどうぞ。一度試しておくと技の幅が広がりそうですね。 » 25 Code Snippets for Web Designers (Part3)
CSSを使ってカッコいい円形メニューを作る:phpspot開発日誌
metal.ize - tutoriales Este es un peque・ experimento con CSS que muestra un men・circular con los elementos a su alrededor.CSSを使ってカッコいい円形メニューを作るサンプル。 次のような円形でアイコンにカーソルを合わせるとツールチップが表示されるような円形メニューのサンプルが紹介されています。 尚、紹介したページの言語は英語ではないのですが、解説ページのサンプルコードを読みつつ原理を理解するとよいでしょう。 HTMLがリスト要素になっていて綺麗なHTMLになっているのが特徴。ＣＳＳをオフにすると次のようなリスト要素の見栄えになります。 Flashや画像のクリッカブルマップでこういったナビゲーションを作るのは簡単そうですが、リスト形式のものはなかなか無かった気がします。
もう、そんなミスに陥らないんだからっ！！
どーも。最近密かに主婦に人気が有るんじゃないか？と思い始めているhirasawaです。 遊び心がある方、コレから「主婦CSS」とかって付けて下さい。えぇ。 主婦に優しいブログ運営を頑張りたいと思っておりますので。 【超CSS】STOPN' LISTENですに対抗したいとか、そんな大人気ない事思ってないデスヨ？ で、本題ですがCSSレイアウトが崩れている時に試す10の処方箋::::::STOPN' LISTEN::::::to the silence:::::::の影響もあるんですが、会社関係の人に同様の事を言われた事が有り、いつか書こう書こうと思ってました。 でも、同じじゃアレなんで、ボクが良くやる（やった）初歩的なミス絡みで書いてみようと思います。 1.何か、コレだけスタイルが適用されないんすが… ボクの場合、取りあえず !importantでそもそも効いているのかチェック。 もしくは、
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
lllcolor.com
ブラウザごとに違う色に見せるＪａｖａＳｃｒｉｐｔ＆ＣＳＳテクニック:phpspot開発日誌