サイトの右上にある■をクリックすると、色合いを変えることが出来るようにしてみた。これはスタイルシートを切り替える機能を利用したもの。導入にあたり参考にしたのは、小粋空間様のエントリー「スタイルシート切り替え」。尚、この技はMovable Typeに限らず、通常サイトでも使用可能。 自分メモ ▼ ファイルを用意 当サイトでは虹のイメージ（？）で、スタイルシートを7種類用意。そして、切り替え用のJava Scriptファイル「styleswitcher.js」をダウンロード。 ▼ テンプレート修正 初期設定分のスタイルシートが <link rel="stylesheet" href="aqua.css" type="text/css" title="aqua" /> 他六つのファイルで、以下を六色分の六行分記述 <link rel="alternate stylesheet"

Web制作において、対応しなくてはいけないブラウザの中には、未だしぶとくIE6が残っています。IE6が2001年に登場したことを考えると、もう8年もその時代の「縛り」を(健気に)守りながら作っていることになるんですね。 いま良く使われているCSSのテクニックも、ほとんどはこの「縛り」の範囲内で有効な手法なわけですから、突然2001年にタイムスリップしてサイトを作る事になったとしても、今も昔も変わらない１つの古文書に従えばいいので、きっと活躍できます。 しかしたまらん、流石に疲れた。 ボックスひとつができること CSSでは、文書を構成する各要素は、ボックスという矩形領域に置きかえられ、それらの持つプロパティを操作して装飾します。つまり、ボックスはページデザインを構成する最小単位と言えるわけですね。 そこで今回は、最小単位となる1つのボックスに対して、どのような装飾手法が有効かという点を、CS

実用的なものからマニアックなものまでリスト要素をスタイルするベストプラクティスをDev Snippetsから紹介します。 Styling your Lists: 20+ Brilliant How to's and Best Practices

無効なURLです。 プログラム設定の反映待ちである可能性があります。 しばらく時間をおいて再度アクセスをお試しください。

Horizontal unordered lists non-floating demo デモでは、水平方向に並べたリスト要素を左・右寄せ、中央に配置しています。 対応ブラウザは、IE6, IE7, IE8, Firefox, Opera, Safari(PC) and Chromeとのことで、IE6/7用には「display:inline-block;」、Fx用には「display:table-row;」を使用しています。

| 　 　 |＼|／　|　　　　　｜ 　　｜ | ∧ ∧  |/⌒ヽ、| ∧＿∧ | ∧∧ | |(,,ﾟДﾟ)||,,ﾟ Θﾟ）|（； ´Д｀）|(=ﾟωﾟ)| ↑左のAAが右の画像と同じように見えていればこのページを見る必要はたぶんありません。 ２ちゃんねるのAAが基準としている環境は、16px（12pt）のＭＳ Ｐゴシック、行間2pxです。 WindowsのIE（5.5より前）の標準環境がちょうどこの設定でした。 最近ではこのIEそのものもフォントが変わってしまい、AAがズレてしまうようになりました。 そこで、ズレない環境にするためにはどうすればいいのか書いておきます。 Windows2004かWindowsXPでInternetExploler5.5以上を使っている場合 9x系（95/98/Me)でInternetExploler5.5以上を使っている場合 FireFoxを使ってい

Konstruktors Notesのエントリー「How to Create Beautiful and Elegant HTML Lists Using CSS」から、CSSを使用して美しくエレガントなリストを制作する方法を紹介します。 How to Create Beautiful and Elegant HTML Lists Using CSS 各ブラウザによるリストのレンダリングの差 リストにmarginやpaddingを指定した場合、「Internet Explorer」と「Gecko, Webkit and Opera」の各ブラウザで、レンダリングが異なります。 <textarea name="code" class="css" cols="60" rows="5"> ul, ol{ margin:auto -3em 1em 0; padding:0; position:rel

カスタマイズ可能なあらゆるブログエンジンで、CSSを使ってカテゴリごとにデザインをカスタマイズする方法です。（カテゴリごとに固有の半角英数文字が出力できることが条件です。） カテゴリごとに記事を変えたい！と常々思っていました。こうしてグローバルメニューを配置して、通常のWEBよりの構成で運営している場合はなおさらです。 いや、実はリニューアル時に、後々カテゴリデザインをカスタマイズできるようにHTMLを組んでいたんですが、画像やデザインを作成するのが面倒なのでそのままになっていました。 Mobableype専用の方法 MovableTypeに限って言うと、例えば次のような方法があります。 <MTIfIsDescendant parent="カテゴリ名１"> カテゴリ名１で表示したい内容 </MTIfIsDescendant> <MTIfIsDescendant parent="カテゴリ名２

追記 2007-11-03 サンプルのDLを追加 ご注意 この記事は、「考え方」を紹介する物です。 「サンプルソースをコピペして使いまわせる！」という類の物ではありませんので、ご注意ください。 魔の角丸 マークアッパーの頭を悩ませるデザインの一つに、角丸があります。 ただの角丸ならまだいいんですが、グラデーションがかかっていて可変幅だったりすると途端に厄介な存在になります。 安直に考えたスライス 厄介さの原因は、画像の枚数の多さです。 グラデ角丸＋可変幅の場合、通常であれば8枚の画像をスライスする事になります。 CSS2.1では1つの要素に指定できる背景画像は1枚だけなので、要素も8つ必要になります。 もちろんdivを8個使ってしまえば実現は容易ですが、その手法は躊躇するべきです。 文書の意味付けにならないdivを増やす事になるので。 考え方とサンプル ではどうするかと言うと、その文書に元

「a href」を使用したリンク箇所のアイコンを、リンク先やmailtoやPDF・画像などそれぞれごとにアイコンを変更するスタイルシートのサンプル紹介です。 外部リンクでアイコンを変更する場合 a[href^="http://"]{ background:transparent url(../images/external.png) center rightright no-repeat; display:inline-block; padding-right:15px; } 判別する箇所のサンプル -mailto a[href^="mailto:"] 判別する箇所のサンプル -PDF a[href$='.pdf'] 判別する箇所のサンプル -圧縮ファイル a[href$='.zip'], a[href$='.rar'], a[href$='.gzip'] 判別する箇所のサンプル -画像

対応ブラウザは Windows：InternetExplorer6，InternetExplorer7，Firefox2，Opera9 Mac：Firefox2，Opera9，Safari2 ですが，ブラウザによって若干表示が異なる部分もあります。 XHTML 1.0 でマークアップしてあります。 DOCTYPEスイッチによる標準モードに対応しています。InternetExplorer6 でXML宣言をし互換モードになった場合にも対応しています。 Netscape7，Mac InternetExplorer5 では期待通りに表示されないものがいくつかあります。 便宜上，分類コード（div011-hp，table010 など）を class名にしてありますが，実際にお使いの際には適切な class名に変更してください。 すでにお使いのCSSファイルに新たにCSSコードを追加した場合，既存

CSS Nite Vol.18の懇親会で行われたiwaimさんのプレゼンで、headerの部分は本当にidでいいの？という問いかけがありました。 多分、多くの人が行っているclassとidの使い分けは、複数回登場するかしないかだと思うんですけど、それはどうやら間違った基準なようです。 仕様書は？ そもそも、仕様書の定義としては、二つの違いはどうなっているのでしょうか。 id = name [CS] この属性は、要素に名前を割り当てる。この名前は文書中で一意でなければならない。 class = cdata-list [CS] この属性は、ある要素に1つのクラス名を割り当てるか、または複数のクラス名を設定する。幾つの要素に対してでも、同じクラス名あるいはクラス名群が割り当てできる。複数のクラス名については、空白文字によって区切らねばならない。 The global structure of a