html/css

YUI 3: CSS Resetを使うと、bodyの背景が画面全体に広がらない現象にいまさら気づいた。

CSSリセットをYUI2の古いVerからYUI 3: CSS Resetに変えてしばらくたって、いままで気付かなかったけどbodyの背景関係が困った事になるのね。

[html]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>乱雑モックアップ|bodyの背景が途切れるよ(;´Д`)ウウッ…</title>
<meta http-equiv="Content-Style-Type" content="text/css" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.1.1/build/cssreset/reset-min.css">

<style type="text/css">
body{
background:tomato;
}</style>
</head>

<body>
<p>The quick brown fox jumps over the lazy dog.</p>
</body>
</html>
[/html]

最初何が原因かわからなくてブラウザが壊れたかと思った。
色々削っていったら最後にYUI 3: CSS Resetが残って判った。

解決法と原因が以下に書かれてますた

hail2u.net – Weblog – YUI 3: CSS Resetの問題

YUI 3: CSS Resetがhtmlに指定した値を下で上書きでとりあえず解決みたい。

[html]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>乱雑モックアップ|bodyの背景が途切れないよヾ(゚ω゚)ノ゛</title>
<meta http-equiv="Content-Style-Type" content="text/css" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.1.1/build/cssreset/reset-min.css">

<style type="text/css">
html {
background-color: transparent;
background-image: none;
}
body{
background:tomato;
}</style>
</head>

<body>
<p>The quick brown fox jumps over the lazy dog.</p>
</body>
</html>
[/html]
[css]
html {
background-color: transparent;
background-image: none;
}
[/css]

htmlにcolorとbackgroundの指定って必要なのかな?

メモ / ウェブフォントサービス Fonts.com Web Fonts に登録してみた。

ついにウェブでも有名書体が使える!ウェブフォントサービス Fonts.com Web Fonts β版が運用開始 – フォントブログこちらで知って登録してみました(登録方法もスクリーンショット付きで詳しく書いてありました)。

どんなサービスで、何が凄いかっていうとこんな感じらしい。

  • クラウド型フォント埋め込みサービス
  • Linotype、Monotype、ITCの3社のフォントを使うことができる
  • 現在は2,000書体以上が使える
  • 日本語にも対応していてβ版では平成明朝、平成角ゴシック、平成丸ゴシックの3書体
  • 今は無料。

使ってみるとこんな感じ。

続きを読む

ddよりdtの方が高い定義リスト(dl,dt,dd)を横並びさせる。

[追記 / 20100519 / まとめのcssを書いてなかったので追加した。
ddのfloatをleftからrightに変更したサンプルを追加してアップした。

dl,dt,ddは普段からよく使うタグで、横並びの表示もとくに構えることなく使ってきました。
しかし今まで使っていたcssではdtの高さがddを越える場合にちょっと都合が悪くなります。

なります、と書いたら知っていたかのようだけど、前々回の(画像のシャープ処理 / ハイパスとアンシャープマスクを比較)を書いてる時に思い出したというか気づいたわけです。

という事で、2010年のいまさらですがddよりdtが高くなっても崩れないように定義リストを横並びさせる方法を考えてみました。

確認用に作成したページ|ddよりdtの方が高い定義リスト(dl,dt,dd)を横並びさせる。 / (画面内で開く)

続きを読む

css3の:nth-last-child(n)や:nth-last-of-type(n)で均等配置

ひとつ前の記事中に使った画像のサイズを勘違いして作成してしまい、テーマによっては段落ちが発生してた。

並んでたり並んでなかったり。
それがどんな勘違いだったかというとそりゃもう酷い話で、
まず、本文のwidthが480pxの所へ画像を2枚横並びで入れようとした。
その時画像のmarginを10pxとして考えて、横幅235pxでサムネイルを作った(235px*2(画像2枚)+10px(margin)=480px)。

けれども実際は両方の画像に右marginがつく為、本当のところmarginは2倍。
さらに画像には1pxのborderがついてたので1画像につき+2px、合わせて4px。
もう全然無理。

そこでサムネイルを小さく作り直せばいいのに、先日のie-css3.jsを思い出してE:nth-last-child(n)を使って2個目(最後)の画像のmarginを消してしまおう!となんか良い事を閃いた気になる。

そしてE:nth-last-child(n)とE:nth-last-of-type(n)の練習をしてから、いざ乱雑モックアップのcssをよく見てみると画像周りのmarginは10pxじゃなくて1emだった。

6pxしか余裕がないところに1emもmarginがあったら右側のmarginを削除しても段落ちするし、marginを5pxくらいにすると狭すぎるしで、結局今回はサムネイルのサイズを変更するのが一番簡単な修正方法でした。

前置きが長くなったけど、:nth-last-child(n)や:nth-last-of-type(n)の均等配置

乱雑モックアップ|nth-last-childなどで均等配置テスト
html
[html]<h1>E:nth-last-child(n)</h1>
<div id="content" class="lastchild">
<div class="main">メイン画像</div>
<div class="sub">
<p>サブコンテンツ<br />
サブコンテンツ<br />
サブコンテンツ</p>
</div>
<div class="sub">
<p>サブコンテンツ<br />
サブコンテンツ<br />
サブコンテンツ</p>
</div>
<div class="sub">
<p>サブコンテンツ<br />
サブコンテンツ<br />
サブコンテンツ</p>
</div>
</div>[/html]
css
[css]body {
font-size:80%;
}

p {
padding:10px;
margin:0;
}

#content {
width:380px;
padding:10px 10px 0 10px;
border:1px solid SteelBlue;
}

.main {
width:380px;
text-align:center;
line-height:234px;
color:black;
background:LightSkyBlue;
margin-bottom:10px;
height:234px;
}

.sub {
width:120px;
margin:0 10px 10px 0;
background:aliceBlue;
float:left;
}

#content:after{
content:"";
display:block;
clear:both;
}

/* ここでmargin0 */
.lastchild .sub:nth-last-child(1){
margin-right:0;
}
[/css]

以前書いたこれ -> 横並びにしたリストを(手動だけど)簡単に均等配置ぽく見せるは、marginを左にとる必要があって今回はダメで。
marginを右にとる方法を使うにしても今回は親要素が一個たりないからダメなはず(たぶん)。

こちらもあーだこーだやってます-> E:nth-last-child(n)とE:nth-last-of-type(n)で均等配置

それにしてもこんな使い方よりもっと別な何かで協力に威力を発揮するんじゃないだろうかって思うんだけどその何かが思いつかない。勿体無い。

続きを読む

透過pngにbox-shadowを指定したらドロップシャドウみたいな効果を得られるか?

[追記]
filter: drop-shadowを使った方法が紹介されてました
透過pngにもそのままシャドウをかける事ができる filter: drop-shadow | memocarilog
2012年の記事だから今は他のブラウザにも実装されたのかしら?
[追記ここまで]

ドロップシャドウのイメージcss3のbox-shadowを使うと(ベンダープレフィックスが必要だけど)簡単に影をつけられる。

でもってこれを、透過png(アルファチャンネル付きpng)に指定した場合、photoshopの対象レイヤー右クリック – [レイヤー効果] – [ドロップシャドウ] (もしくは [レイヤー] – [レイヤースタイル] – [ドロップシャドウ])みたいにオブジェクトの輪郭に沿って影がつくのだろうか?
それとも画像の外側に四角い影がつくのだろうか?

ドロップシャドウのようになったら素敵だなぁと思って試してみました。

続きを読む