Snippet-Editor.com » CSS

HTMLの骨組みが見える、デバッグ用CSS

tomohiro_kasuga — Tue, 05 Oct 2010 15:37:44 +0000

* { outline: 2px solid rgba(255, 0, 0, 0.1) !important; }

あまり実用的でないかもしれませんが、かっこよかったのでポスト。

RGBAを使って色を指定しているので、重なっているところはより濃く見えます^[1]。

全称セレクタをやめれば、特定の部位にだけ線を引くこともできます。

YOUR-ELEMENT { outline: 2px solid rgba(255, 0, 0, 0.1) !important; }

IE6で見ても何も起こりませんのであしからず…

等幅フォントが小さく表示されるのを防ぐ

tomohiro_kasuga — Wed, 29 Sep 2010 16:15:19 +0000

YOUR-ELEMENT { font-family: "Courier New", Courier, sans-serif; }

CSSで等幅フォントを指定すると一部のブラウザが文字を小さめにレンダリングしてしまうのを防ぐ方法をご紹介します。

通常は下のようにお尻に"monospace"と書きますが、これを"sans-serif"にするだけです^[1]。

YOUR-ELEMENT { font-family: "Courier New", Courier, monospace; }

"Courier New"や"Courier"はかなり昔のコンピュータにもインストールされているので、"sans-serif"の記述に関わらず、実際には等幅フォントが当たり、かつ文字が小さくなる問題も解消することができます。

等幅フォントの追加はお好みで。当サイトでは先頭に"Menlo"を追加しています。

code { font-family: Menlo, "Courier New", Courier, sans-serif; }

原理的には間違った記述ですが、現実的には問題解決していますので、後はご判断ください…。

CSS3で書いて、スクリーンショットを取って、ボタンにする

tomohiro_kasuga — Tue, 28 Sep 2010 13:19:48 +0000





Safari CSS3 Button




    Download
    Download
    Download

上のコードをSafariで実行する^[1]と以下のようなスクリーンショットが撮れます。

これをフォトショップで開いて、「イメージ」メニューから「トリミング…」を実行します。

これでボタン用画像の完成です。

実際にアプライするとこうなります。

Download

基本HTMLなので文字や色なども簡単に変更可能です。

開発メニューから「スニペットエディタ」を開いてコピペするのが簡単です。

CSS3のMedia Queryを使ってFollowバッジが被らないようにする

tomohiro_kasuga — Wed, 22 Sep 2010 09:26:46 +0000

@media only screen and (max-width: 960px) {
div#twitterFollowBadge { display: none; }
}

遅ればせながら「Follow me」バッジを付けてみました。

で、多少気になるのがウィンドウサイズを狭めた際に、バッジがコンテンツにかぶること。

CSS3のMedia Queryを使えば、所定のサイズを下回った際に自動的に非表示にすることができます。

SafariやChromeなど対応ブラウザでご確認ください。

CSS3を待たないでも使える伸び縮みするボタン

tomohiro_kasuga — Mon, 20 Sep 2010 23:31:45 +0000

p.button { clear: both; font-weight: bold; text-align: center; }
p.button a,
p.button span { display: inline-block; line-height: 43px; height: 45px; background: url(../images/button.png) no-repeat; }
p.button a { text-decoration: none; padding-left: 25px; }
p.button span { background-position: right top; padding-right: 45px; }
p.button a:hover { background-position: left bottom; }
p.button a:hover span { background-position: right bottom; }

ひとつ作っておくと何かと便利な大きめのボタンです。CSS2.1だけで実装してあるので、IE6でも問題なく使用できます^[1]。

文字の量に応じて伸び縮み

HTMLのコードはp.button a spanと、比較的平易なコンビネーションにしてあります。

TEXT HERE

使用している画像も一点だけなので、適宜作り直してカスタマイズしてみてください^[2]。

画像を表示　ダウンロード

display: inline-block;を使用している関係上、Firefox 2.xはサポートしていません。
画像を1点で済ませている関係上、透過している画像には変更できません。

プラグインなしでiPhoneとiPadにサイトを最適化する簡単な方法

tomohiro_kasuga — Mon, 20 Sep 2010 01:19:56 +0000

WordPressのプラグインを使わずに、サイトをiPhoneとiPadに最適化する方法をご紹介します。

世間で良く知られている手法とは異なり、ピンチで拡大縮小ができなくなる問題を回避してあります。

Step 1、まずはiPadに最適化

iPadは一昔前のPCと変わらない画面サイズを持っていますので、あなたのサイトの横幅が1024px以下なら、難しい作業をする必要は特にありません。下の1行を追加するだけです。

これでiPadがサイトを正確にレンダリングするようになりました（詳しくはこちら）。

Step 2、iPhoneに最適化

続いてiPhoneでアクセスした時だけ、サイトの横幅が1024pxになるように調節します。

@media only screen and (max-device-width: 480px) {
div.body { width: 1024px; }
}

やや変に聞こえるかもしれませんが、Step 1ではサイトの横幅は特にいじっていません。iPadに正確にレンダリングするよう指示しただけです。Step 2ではじめて、サイトの横幅を調整しています。

もしあなたのサイトが横幅960pxだとしたら、iPhoneで閲覧する時だけ1024pxに拡大することになります。方法はいろいろあると思いますが、ここではdiv.bodyを使って調整しています（div.bodyについてはこちら）。

Step 3、CSSを調整

基本的な準備が整いましたので、あとはiPhone用のスタイルシートを詰めていきます。

@media only screen and (max-device-width: 480px) {
body { font-size: 1.6em; }
div.aside { display: none; }
div.article { float: none; width: auto; }
}

サイドバーを非表示にし、シングルカラムのデザインになるようにします。また、何もしないと文字がとても小さいくて読めませんので、bodyタグのfont-sizeを大きくしておきます。

その他、iPhoneで表示してみて気になる箇所を修正していき、最終的に当サイトではこのようになりました（handheld.cssを表示）^[1]。

当サイトは横幅が768px以下なので、Viewportは"1024"ではなく"768"にして調整してあります。

このスタイルシートがどのように表示されるかは、実際にiPhoneやiPadでアクセスして、確認してみてください。

CSS3のborder-radiusを扱いやすくする

tomohiro_kasuga — Fri, 17 Sep 2010 03:53:47 +0000

.r10 { -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; }
.r20 { -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; }
.r30 { -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; }

CSS3のborder-radiusが普通に使える状況が近づいてきましたが、いかんせんコードが長いのでスタイルシートが汚れがちです。そこで再利用可能なclassにしたいと思いますが、命名はどうしましょう。

むやみやたらにclassを作ると将来のリニューアルで苦労しますが、おそらくこの名前なら.leftや.rightのように末永くお付き合いできそうな気がします。

.r5 { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
.r10 { -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; }
.r15 { -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; }
.r20 { -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; }
.r25 { -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; }
.r30 { -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; }

子要素のaにだけ適応したい場合は、こう。

Safariをお使いの方は、開発メニューのスニペットエディタにコピペしてご確認いただけます。



CSS3 Border Radius




    item 1
    item 2
    item 3
    item 4

ボックスの上だけを角丸にしたい場合（または下だけ）は、こうでどうでしょう。

.r5500 {
	-webkit-border-top-left-radius: 5px;
	-webkit-border-top-right-radius: 5px;
	-moz-border-radius-topleft: 5px;
	-moz-border-radius-topright: 5px;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
}
.r0055 {
	-webkit-border-bottom-right-radius: 5px;
	-webkit-border-bottom-left-radius: 5px;
	-moz-border-radius-bottomright: 5px;
	-moz-border-radius-bottomleft: 5px;
	border-bottom-right-radius: 5px;
	border-bottom-left-radius: 5px;
}

左上を基準にして時計回りに数字を並べています。

最新のbase.cssをサイドバー上で公開中

tomohiro_kasuga — Tue, 14 Sep 2010 01:36:21 +0000

/* RESET */
/* PREFERENCES */
/* REBUILD */
/* CLASSES */

Reset CSSやStyled CSSを含む最新のbase.cssを、サイドバーのShared CSSのところで公開しています。

@charset "utf-8";

/* ----------------------------------------------------------------------------
	RESET
   ---------------------------------------------------------------------------- */
body { color: #000; background: #fff; }

h1, h2, h3, h4, h5, h6, input, select, textarea { font-size: 100%; }
h1, h2, h3, h4, h5, h6, b, em, strong, dt, th, caption { font-weight: normal; }
em, address, optgroup, cite { font-style: normal; }
caption { text-align: left; }

body, div, h1, h2, h3, h4, h5, h6, p, img, ul, ol, li, dl, dt, dd, table, th, td, thead, tbody, tfoot, caption, blockquote, pre, address, form, fieldset, legend, iframe { border: none; outline: none; padding: 0; margin: 0; }

li { list-style-position: outside; }
ul li { list-style-type: none; }

table { width: 100%; border-collapse: collapse; border-spacing: 0; }
th, td { text-align: left; vertical-align: top; border: 1px solid #000; }

pre { overflow-x: auto; }
textarea { width: 99%; overflow: auto; }
iframe { display: block; width: 100%; overflow: hidden; }

a:hover { cursor: pointer; background-color: transparent; }
a:active,
a:focus { outline: none; }

sup { font-size: 71.5%; vertical-align: baseline; position: relative; bottom: 0.7em; }
sub { font-size: 71.5%; vertical-align: baseline; position: relative; top: 0.1em; }

abbr, acronym { border-bottom: 1px dotted; cursor: help; }

hr { display: none; }

@media screen and (max-device-width: 480px) {
body { -webkit-text-size-adjust: none; }
}

/* ----------------------------------------------------------------------------
	PREFERENCES
   ---------------------------------------------------------------------------- */
html { overflow-y: scroll; }
body { font-size: 81.25%; }

body, input, textarea, legend { color: #222; }
del { color: #888; }

body, textarea { font-family: "Lucida Grande", "メイリオ", "ＭＳ Ｐゴシック", sans-serif; }
input, select { font-family: "Lucida Grande", Arial, "ＭＳ Ｐゴシック", sans-serif; }
code { font-family: Menlo, "Courier New", Courier, monospace; }
b, em, strong, dt, th, caption { font-weight: bold; }

a:link { color: #359; text-decoration: none; }
a:visited { color: #649; text-decoration: none; }
a:hover { text-decoration: underline; }
a:hover img { opacity: 0.8; filter: alpha(opacity=80); -ms-filter: "alpha(opacity=80)"; }

label { cursor: pointer; }

/* ----------------------------------------------------------------------------
	REBUILD
   ---------------------------------------------------------------------------- */
@media screen and (max-device-width: 480px) {
body .styled { -webkit-text-size-adjust: 125%; }
}

.styled p { line-height: 1.6em; width: 80%; margin: 0 auto 1em; }

.styled h1,
.styled h2 { font-size: 123.3%; line-height: 1.25; margin-bottom: 0.65em; }
.styled h3 { clear: both; color: #359; font-size: 123.3%; line-height: 1.3; padding: 0.5em 0 0 1em; margin-bottom: 1em; }
.styled h4 { font-size: 1.1em; line-height: 1.4; padding-top: 0.5em; margin-bottom: 0.5em; }
.styled h5,
.styled h6,
.styled dt,
.styled caption { line-height: 1.4; padding-top: 0.25em; padding-bottom: 0.3em; }

.styled table { clear: both; margin: 0 auto 1.4em; }
.styled th,
.styled td { font-size: 92.5%; line-height: 1.5; border-color: #aaa; padding: 0.6em 8px 0.5em; }
.styled th { text-align: center; vertical-align: middle; background: #ececff; }
.styled td { background: #fff; }

.styled ul,
.styled ol,
.styled dl { margin-bottom: 1em; }
.styled ul li,
.styled ol li,
.styled dl dd { line-height: 1.5; width: 80%; margin: 0 auto 0.3em; }
.styled ul li,
.styled dl dd { display: list-item; list-style-type: square; }
.styled dl dt { margin-top: 0.5em; }

.styled blockquote { clear: both; color: #1565bc; line-height: 1.5; width: 80%; border-left: 2px solid #144fae; padding: 0.5em 0 1px; margin: 0 auto 1.3em; }
.styled blockquote p { line-height: inherit; width: auto; padding-left: 15px; margin-bottom: 0.5em; }
.styled blockquote cite { padding-left: 1em; }

.styled div.hr { clear: both; width: 66%; height: 0; line-height: 0; margin: 2.5em auto; border-top: 1px solid #aaa; }

/* ----------------------------------------------------------------------------
	CLASSES
   ---------------------------------------------------------------------------- */
.left { float: left; }
.right { float: right; }
.clear { clear: both; }
.center { text-align: center; margin-left: auto; margin-right: auto; }
.center * { text-align: left; }

div.styled li span.date { color: #888; font-size: 92.5%; }
div.styled ol.note { color: #888; font-size: 85%; border-top: 1px solid #ccc; padding-top: 0.3em; width: 80%; margin-left: auto; margin-right: auto; }
div.styled div.left { padding: 0 1em 0.5em 0; }
div.styled div.right { padding: 0 0 0.5em 1em; }
div.styled div.center { margin-bottom: 1.3em; }

このbase.cssは、

RESET
トラブルになりにくい緩めのリセット
PREFERENCES
bodyタグなど基本的なエレメントの初期設定
REBUILD
の中でだけ機能するpタグなどのスタイル集
CLASSES
投入者用の簡単なクラス集

で構成されています。

商用非商用を問わず、ご自由にご利用ください^[※]。

記事中の内容は2010年9月14日現在のものです
内容はアップデートされるため、直リンクはご遠慮ください

画像が非表示の時は代わりにテキストを表示させる

tomohiro_kasuga — Sun, 29 Aug 2010 03:16:16 +0000

.replace { display: block; width: YOUR-IMAGE-WIDTHpx; height: YOUR-IMAGE-HEIGHTpx; overflow: hidden; position: relative; z-index: 1; }
.replace span.image { display: block; width: 100%; height: 100%; background: url(YOUR-IMAGE) no-repeat; position: absolute; left: 0; top: 0; z-index: 2; }

主にロゴやナビゲーションなど文字情報を画像化して使うようなシーンでは、ユーザーに画像を非表示にされてしまうことが致命的です。

これを解決するのがいわゆる「CSS画像置換」というやつで、様々なバリエーションがありますが、今回ご紹介するのは他のどれよりも汎用性が高いと思われます。

HTMLは以下のように記述します（ロゴの中のaタグに適応した例）。

TEXT HERE

仕組みは単純で、span.imageに設定した背景画像が「TEXT HERE」の上に覆い被さるようになっていますので、ユーザーが画像を非表示にすれば下のテキストが見えるようになっています。

一度クラス化してしまうと、個々の運用はもっと楽に。

/* クラス化 */
.replace { display: block; overflow: hidden; position: relative; z-index: 1; }
.replace span.image { display: block; width: 100%; height: 100%; background-repeat: no-repeat; position: absolute; left: 0; top: 0; z-index: 2; }

/* 個々の記述 */
#logo a.replace { width: YOUR-IMAGE-WIDTHpx; height: YOUR-IMAGE-HEIGHTpx; }
#logo a.replace span.image { background-image: url(YOUR-IMAGE); }

これで、個々の記述は3点（幅・高さ・背景画像）だけと、普段使いがとても良くなりました。

応用編

spanタグを使って画像を指定している点に疑問を感じる方もいるかもしれません。

こうしておくとa:hoverで画像を切り替えることが出来るようになります。こちらもクラス化しておきましょう。

a.replace:hover { cursor: pointer; background-color: transparent; }
a.replace:hover span.hover.image { background-position: left bottom; }

（1行目の記述は、IEが言うこと聞かないので書いてあります）

動作確認はこちら

若干ですが欠点もありますので、説明してお終いにします。

透過している画像は使えません（下に隠したテキストが見えてしまうため）
適応した部分は必ずブロック要素化されますので、インライン要素としては使えません
隠しテキストの多用は、Googleからスパム判定を食らうリスクがあります

もうfont-familyで悩まないための2行

tomohiro_kasuga — Tue, 24 Aug 2010 01:43:06 +0000

body, textarea { font-family: "メイリオ", "ＭＳ Ｐゴシック", sans-serif; }
input, select { font-family: Arial, "ＭＳ Ｐゴシック", sans-serif; }

この2行のスタイルシートで、Windowsではメイリオフォント（なければMS Pゴシック）、Macではヒラギノ角ゴシック（Firefoxのみ補足あり）で表示させることができます。

実際に適応すると、

Windows 7またはWindows Vistaではメイリオで表示され
Windows XPではMS Pゴシックに
Windows XPで、且つメイリオを自分でインストールした人はメイリオに
Mac OS Xではヒラギノ角ゴに（Firefox以外のMac用ブラウザでは日本語で書かれた指定内容を無視するため、標準のゴシックに）

と、なります。

なお例外として、

MacにMS Office 2008がインストールされている状態では、Firefoxだけがメイリオで表示
MacにMS Office 2004がインストールされている状態では、FirefoxだけがMS Pゴシックで表示

となりますが、いずれの場合もFirefoxの環境設定でチェックボックスひとつ変えるだけでヒラギノに戻すことができます。

もちろん、Firefox兼Office兼Macユーザーに負担を強いないために1行目を

body, textarea { font-family: "ヒラギノ角ゴ Pro W3", "メイリオ", "ＭＳ Ｐゴシック", sans-serif; }

のように記述することもできますが、この方法では別の問題を呼び起こしてしまうため、より影響範囲の狭いと思われる方をチョイスしてあります。

2行目については、メイリオがinputタグとselectタグには向いてないという理由で除外。Arialは他のフォントに変更しても大丈夫ですが、何らかの欧文フォントの指定は必要です（ここではMS Pゴシックとの相性を考えてArialにしてあります）。

検証は主要なモダンブラウザ（IE 6以降、Firefox 3以降、Safari 3以降、OperaとChromeは最新版）で行いました。