html/css

メモ / ウェブフォントサービス 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

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の対象レイヤー右クリック – [レイヤー効果] – [ドロップシャドウ] (もしくは [レイヤー] – [レイヤースタイル] – [ドロップシャドウ])みたいにオブジェクトの輪郭に沿って影がつくのだろうか?
それとも画像の外側に四角い影がつくのだろうか?

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

続きを読む

htmlタグを網羅したcss検証用のhtmlテンプレート / HTML XHTML for CSS Testing

CSS Basic Elements

The purpose of this HTML is to help determine what default settings are with CSS and to make sure that all possible HTML Elements are included in this HTML so as to not miss any possible Elements when designing a site.


Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

[top]


Paragraph

Japanese plum|http://www.colourlovers.com/pattern/5404/Japanese_plum

Lorem ipsum dolor sit amet, test link adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.

Lorem ipsum dolor sit amet, emphasis consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.

[top]


List Types

Definition List

Definition List Title
This is a definition list division.

Ordered List

  1. List Item 1
  2. List Item 2
  3. List Item 3

Unordered List

  • List Item 1
  • List Item 2
  • List Item 3

[top]


Fieldsets, Legends, and Form Elements

Legend

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus.

Form Element

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui.





Radio 1
Radio 2
Radio 3


Radio 1
Radio 2
Radio 3



[top]


Tables

Table Header 1 Table Header 2 Table Header 3
Division 1 Division 2 Division 3
Division 1 Division 2 Division 3
Division 1 Division 2 Division 3

[top]


Misc Stuff – abbr, acronym, pre, code, sub, sup, etc.

Lorem superscript dolor subscript amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. cite. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. NBA Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus. AVE

“This stylesheet is going to help so freaking much.”
-Blockquote

[top]

続きを読む

linear-gradientでグラデーションと斜めストライプ

自分メモ

これもborder-radiusのようにfirefoxとsafari,chromeで書き方が変わる。
IEはfilterを使う事でグラデーションをかけられる。
mozillaは色の区切りをpxで指定できるけどwebkitは%指定しか出来ない。

続きを読む