Tag: CSS

タグ CSS がつけられた記事のリストです。

ウェブサイトでシステムフォント

システムフォントをウェブサイトのUIに採用する意義と方法、そしてUIとコンテンツでのフォントの使い分けについて。

CSS カスタム・プロパティへの期待

CSS カスタム・プロパティを紹介する ‘Why I’m Excited About Native CSS Variables’ を日本語に翻訳した。僕もわくわくしてます。

input 要素の line-height

input { line-height: normal !important; } という、長年にわたって製作者を悩ませてきた Firefox の UA スタイルシートが、ついに修正された。

游と Merriweather

このサイトのフォントを游書体と Merriweather の組み合わせに変えました。

#767676

前景色 #767676 は、背景色が #ffffff のとき WCAG 2.0 の達成基準「最低限のコントラスト (レベル AA)」を満たすもっとも明るいグレー。覚えておくと便利。

CSS コンポーネント試案

CSS のコンポーネント設計についての試案。data-component などの属性を利用して名前の衝突を防ぎ、かつマークアップや CSS セレクターをシンプルに保つのが狙い。

擬似要素を利用したベースライン・グリッド

擬似要素を利用してテキストをベースライン・グリッドに揃える方法。

和欧混植の条件分岐

ウェブフォントを利用して、ユーザーのローカル環境にインストールされている和文フォントを検出し、その結果に応じて欧文フォントを組み合わせる手法について。

selector-replace() の利用

Sass の次期リリース、3.4.0 で使えるようになる selector-replace() 関数の利用例を考える。

グラデーションとテキスト・シャドウによるリンクの下線

リンクの下線をグラデーションの背景とテキスト・シャドウで表現する手法について。

Cargo Cult CSS の日本語訳

昨今の CSS フレームワークのあり方をかなり厳しく批判する記事、“Cargo Cult CSS” を日本語に翻訳して公開しました。

横に水平線のあるテキスト

おもに見出しなどで見かける、テキストの左右 (またはそのどちらか) に水平線を配置したスタイル。これを CSS で実現する方法を考えてみました。とくに flexbox を利用したパターンがいかに優れているかについて。

IE8 で擬似要素のスタイルの動的な更新ができない

スクリプトで要素の属性を操作したときに擬似要素のスタイルが更新されない、という IE8 のバグとその回避策。

MathSass

CSS で角度を扱う機会が増えてきたので、三角関数を中心にいくつかの数学関数を Sass 関数として実装してみてる。GitHub に公開したので、math 好きな皆さんのご参加をお待ちしております。

接頭辞つきのクラス名にマッチする CSS セレクター

接頭辞つきのクラス名にマッチするセレクターの書き方。簡単なようで実はちょっと工夫が必要。

NIR for Retina Images

擬似要素と content プロパティを利用した画像置換テクニックの NIR (Nash Image replacement) と、いわゆる Retina ディスプレイ向けの高解像度画像を組み合わせる方法について。CSS Transforms の scale() 関数を使う。

画像の最大幅を calc() で制御する

パディングやボーダーを持つ画像の max-width の値に calc() を利用することで、親要素をはみ出さないようにするというテクニック。

Hybridity

今週の土曜日、友人のレコード店 Rubbergard Record がオーガナイズする Hybridity というパーティがあるんですが、その告知ページを作るという仕事をしました。イヴェントの内容は、僕はこっち方面のシーンには明るくないのであれなんですが、その筋では知る人ぞ知る方々が出演するらしく、とくにブラジル音楽が好きなら楽しめると思います。お暇ならぜひ!

CSS ボタンのグラデーションとボーダーをグレースケールの RGBA で

CSS でボタンを作るとき、背景のグラデーションとボーダーをグレースケールの RGBA にしたデフォルトのスタイルをもとにすると、背景色やフォントを変えるだけでバリエーションが作れるので便利です。

幅の狭い画面向けの等幅フォントに M+ 1m を採用

このサイトでは記事にソースコードを掲載することが多いけど、スマートフォンなど幅の狭い画面では折り返しが増えて読みづらくなってしまう。そこで幅の狭い等幅フォントに変えれば多少は読みやすくなるかと考え、M+ Fonts の M+ 1m をウェブフォントとして利用させていただくことにした。

Normalize.css をそのまま使うことにした

Normalize.css が v2.0 になったのをきっかけに、今まで部分的にしか取り入れていなかったのを全面的に採用していくことにした。

text-rendering: optimizeLegibility

CSS の text-rendering: optimizeLegibility はカーニングと合字 (リガチャ) をうまい具合に調整してくれるもので、けっこう使えそうです。

Google Web Fonts が IE で適切に読み込まれない

Google Web Fonts のウェブフォントが IE 8 以下で適切に読み込まれず「にせのボールドとイタリック」になってしまうバグとその回避策。

リンクのスタイルを変えた

このサイトの本文などのリンクのスタイルを少し変えました。

最近試している Sass の書き方

Sass 3.2 の % セレクタと @extend を使って、スタイルの実装とそれらを利用するためのインターフェイスを分離する、みたいな書き方ができないかという模索。ご意見求む。

スクリプトが無効の場合のスタイル

たとえばホームページのビジュアル要素など、いったん非表示にしておいてスクリプトでふわっとフェードインさせたい、みたいなことはよくある。そのとき非表示にする操作も JavaScript にやらせると一瞬見えてしまうことがあるので CSS で非表示化したいが、それだとスクリプトが無効の場合に何も表示されなくなってしまう… というような、スクリプトによる操作を前提にしたスタイルのフォールバックをどうするかという問題。

CSS ショートハンド・プロパティの問題点

CSS のショートハンド・プロパティは複数のプロパティを一括して宣言できますが、メンテナンスしづらくなったり、思わぬバグの原因になったりすることがあります。そしてその問題が見えにくいことがさらに面倒です。

画像置換のあれへの補足

先月あたり、CSS による画像置換テクニックの話題がにわかに盛り上がりを見せていました。その経緯について まとりさんの記事 で紹介されていますが、僕からも簡単に補足してみます。

テーブルセルの vertical-align: baseline

CSS でテーブルセルに対して vertical-align: baseline を指定したときの挙動はちょっと面白いです。そのセルが属するテーブル行で vertical-align: baseline が指定されたセルのうち、テキストの最初の行のベースラインの位置がもっとも低いセルによってそのテーブル行のベースラインが決まり、セルのテキストの最初の行のベースラインがそこに合わせられます。また、これを応用して、横に並べたフォントサイズの異なる異なるボックスのベースラインを揃えることができます。

for 属性に対する属性セレクタの IE7 での挙動

IE7 には、label 要素の for 属性に対する CSS の属性セレクタが無効になるバグがあります。

キャプションの幅を画像の幅に合わせる

ちょっとわかりにくいタイトルになってしまいましたが、つまり Wikipedia のやつ (Fig 1) みたいに、「画像 (またはビデオなどの埋め込みコンテンツ) の下にキャプションをレイアウトするとき、キャプションが複数行にわたる場合は画像の幅に合わせて折り返したい (ただし画像の幅はバラバラ)」というのをシンプルかつ汎用的なかたちで実現する CSS を考えてみました。というか、このブログのレイアウト用にけっこう長いことあれこれ考えてたもののこれといった手が思いつかなくて放置していたんですが、上手い解決を Stack Overflow でみつけた のでパクった、という話です。

俺の CSS リセット: 2011 冬

年末だからというわけでもないのですが、いつものサイト作りに使う CSS リセットについて見直してみました。今までもちょっとずつ手を入れてはいたのですが、今回はかなり大きく修正しています。というのも、Nicolas GallagherJonathan Neal の両氏による normalize.css を知り、大きく影響を受けたからです。

Sass の @extend はどこがすごいのか

この記事では Less & Sass Advent calendar 2011 の 16 日目として、Sass の @extend 機能について書いてみます。が、諸事情により締め切りを過ぎてからあわてて書いており、かなりとっ散らかったものになるであろうことをあらかじめお断りしておきます。

Open Sans

このサイトのボディの欧文フォントとして Google Web Fonts で提供されている Open Sans を使ってみることにした。Chrome ウェブストア とかで採用されてるので見たことある人も多いんじゃないでしょうか。

CSS ルールセット構造図

ごく基本的なことなんだけど、すぐに忘れてごっちゃになるので図を描いた。せっかくなので上げとく。詳しくは CSS3 module: SyntaxCSS の名前の整理 – IT戦記 などを参照のこと。

フォント変えた

このサイトの基本のフォントファミリーを変えてみた。 /* 変更前 */ body { font-family: “Helvetica Neue”, “Helvetica”, “Arial”, “Hiragino Kaku […]

要素をスクロールに追従させる jQuery プラグイン

Apple Store のサイドバーのように、要素をウィンドウのスクロールに追従させる jQuery プラグイン、jQuery Floating Widget を作りました。説明が難しいので、まずはデモをご覧ください! […]

Firefox 4 のデフォルト CSS

Firefox 4 のデフォルト CSS は、以下のような URL をロケーションバーに入力すればブラウザから確認できる (ちなみに 3.6 とはパスが異なる): resource://gre-resources/htm […]

Sass の @import ルール

Sass の @import ルール は CSS ファイルだけではなく Sass ファイルもインポートできる。この機能は地味に見えるが、実際に使ってみるとものすごく便利。とくに、ミックスインをモジュールとしてファイルに分 […]

OOCSS の Spacing クラスのようなものを Sass で

「OOCSS (Object Oriented CSS) の Spacing クラス のようなもの」というのは、よくあるこういったやつです: /* p,m = padding,margin a,t,r,b,l,h,v = […]

Sass でもう一度 CSS を楽しく!

僕もようやく Sass をはじめました。評判どおり、ヤバいです。CSS を書くすべての人に習得してほしいとすら思います。とくに、最近 CSS を書いていてもつまらなかったり、設計に行き詰まりを感じたりしている人は、迷わず […]

search 型 input 要素のスタイルをリセット

HTML5 では、input 要素の type 属性に search という検索フィールドのための値が使えます。現時点ではこの search タイプをサポートしているのは Safari と Chrome のみなのですが、 […]

シングルライン CSS

最近、CSS を書くときにコードのフォーマットを今までと少し変えてみてます。宣言 (プロパティと値のセット) ごとに改行するのではなく、セレクタごとに改行する、いわゆる シングルライン CSS です。つまり、 table […]

Bulletproof @font-face: Smiley variation

CSS の @font-face ルールの「安全な」書式として Paul Irish 氏の提唱する Bulletproof @font-face syntax (邦訳: hail2u.net – Weblog […]

印刷用の CSS と jQuery プラグイン

URL のリストを出力するスクリプトを一部修正して Gist に置きました。 このサイトの印刷時のスタイルというものをまったく考えていなかったことに気づいたので、あわてて CSS と jQuery プラグインを書いて対応 […]

WordPress で HTML5 を書くための準備

現在、このサイトを HTML5 で再構築しようと画策しています。今日はその「準備編」ということで、WordPress で HTML5 をパブリッシュするために、どのようにテンプレートをいじればよいかを考えてみました。ここ […]

Opera 10.50 の CSS バグ: input 要素に border-radius

Opera 10.50 では border-radius プロパティがサポートされましたが、input 要素に対して指定する場合、ちょっとしたバグがあるので注意が必要です。そのバグとは、ボーダーを消した (border- […]

13 か 15

先日、Twitter で @smashongmag (Smashing Magazine のアカウント) からこんな問いかけがありました: What font-size do you usually use for yo […]

リデザイン!

約 1 年半ぶりにサイトをリデザインした。細かいところはまだいろいろといじると思うけど、とりあえずおもな変更点をまとめておきたい。 Before: Vesion 2.1 After: Version 3.0 レイアウト […]

Happy New Year 2010

Happy New Year 2010

Font Squirrel で始める @font-face

書式が複雑、IE 向けの EOF ファイルを用意するのが面倒、ライセンスが英語でわからん、などの理由から CSS の @font-face にとっつきにくさを感じている人は少なくないと思います。そのあたりのハードルをかな […]

俺の CSS リセット: 2009 冬

各ブラウザが持つデフォルトのスタイルをいったんリセットし、のちのスタイル指定を容易にするための「CSS リセット」。どこまでリセットするかは難しいところで、俺も常に試行錯誤を続けていますが、この頃はだいたいこんなふうにし […]

CSS のみで吹き出し

hail2u.net – Weblog – Pure CSS な吹き出し に触発されて、画像や JavaScript を使わずに CSS だけを使って「吹き出し」を作る方法を僕も考えてみた。 De […]

Courier、Courier New、Consolas

前回の記事 では CSS で Mac 向けに等幅フォントを指定する際の注意点を取り上げ、Menlo と Monaco はあまりおすすめできない、Courier が無難、と結論づけた。しかしそこでは Courier とその […]

Menlo と Mac の等幅フォント

Opera 10.5 ではイタリックとボールドともに有効ですが、ボールドの太り方がやや弱いようです。 Firefox でイタリックまたはボールドを指定すると Menlo でレンダリングされない問題は修正されています。Op […]

Movable Type から WordPress へ

このサイトのパブリッシング・プラットフォームを Movable Type から WordPress へ変更した。以下、いくつか覚え書きを。 パーマリンクの移行 すでにある記事のパーマリンクをそのまま持ってくる方法はいくつ […]

要素を非表示化するスタイル

HTML にはスクリプトが有効である場合は表示されない noscript 要素というのがあるけど、同様に「スタイルシートが有効の場合」や「印刷した場合」など、状況に応じて要素を非表示化するスタイルを書いてモジュール化しておくと便利。 /* スタイルシートが有効の場合は非表示 */ .nostyle { display: none; } /* スクリーンメディアでは非表示 */ @media screen { .noscreen { diaply: none; } } /* 印刷では非表示 */ @media print { .noprint { diaply: none; } } <p class=”nostyle”>こ…

横並びにしたリスト項目の区切り

こんなふうに、横並びにしたリスト項目の間に区切りを表示させたいときにどうするか? すべての項目に区切りを表示させてしまうと区切りがひとつ多くなってしまうので、なんらかの工夫が必要になってくるわけです。 <ul>   <li><a href=”/”>Home</a></li>   <li><a href=”/archives/”>Archives</a></li>   <li><a href=”/portfolio/”>Portfolio&lt…

のっちメソッド 2: なりゆき幅で横並び

以前に書いた のっちメソッド: One pixel notched corners の改良版。まずはスクリーン・ショットを。 Gmail の「ラベル」なんかでも使われている、ボックスの四隅が 1 px 欠けた疑似角丸的な表現。これを CSS のみで実現するテクニックが「のっちメソッド」なわけだが、幅が固定のボックスにしか適用できなかった。そこで上図のように内容に応じて縮む「なりゆき幅」を実現するのが今日のお題。 まずはマークアップ。それぞれのボックスはブロックかインラインかを問わず二重の要素でラップされている必要がある。例えばこんな感じ: <ul>   <li><a href=”#”…

非置換要素の幅を明示せずにフロート

CSS で非置換要素 (img とか objectとかフォームのコントロール系とか以外、ってことね) に float プロパティを指定する場合、同時に幅を具体的な数値で明示しなければならない、とよく言われる。さもなければ幅が 0 として扱われちゃうよと。 でもその仕様は CSS 2 での話で、CSS 2.1 にそのような記述はない。そのかわり、幅を明示せずに非置換要素をフロートした場合、その幅は内容に合わせて縮む (shrink-to-fit) とされている。 If ‘margin-left’, or ‘margin-right’ are computed as ‘auto’, their used value is ‘0’. If…

jQuery Counter Plugin

CSS 2.1 の Counter 構文 や CSS 3 の Lists モジュール のような、任意の要素に色んなタイプの連番を自動的にふる jQuery プラグイン、jQuery Counter Plugin を書いた。ol 要素ほか順列リストのマーカー部分を柔軟にコントロールしたい、というのが主な目的だけど、個人的な裏テーマは JavaScript の配列と正規表現の勉強。 Demo Demo: jQuery Counter Plugin Download jQuery Counter Plugin Usage 例えば以下のようなごく普通の ol 要素に適用する場合。 <ol>   <li&…

小学校 8 年生

僕たちは高校 3 年生と小学校 6 年生を同じ教室に集めて、同じ教科書を使って授業をしている。まずみんなに教科書どおりの説明をするけど、当然ながら小学生の子たちは正しく理解できない。僕たちは彼らの机まで行き、説明してやらなければならない。「あのね、ここはわかりやすく言うとね…」 body { font-size: 10px; } * html body { font-size: 62.5%; } この見慣れた光景に高校生たちは心底うんざりしている。彼らは早く次のページに進み、授業を終わらせたい。その気持ちはふたとおりの教え方をしなきゃいけない僕たちも同じ。でも机の半数以上を占領している小学生を無視するのはなかな…

link か @import か

In Chapter 5 of High Performance Web Sites, I briefly mention that @import has a negative impact on web page performance. I dug into this deeper for my talk at Web 2.0 Expo, creating several test pages and HTTP waterfall charts, all shown below. The bottomline is: use LINK instead of @import if you want stylesheets to…

インライン要素に背景画像を指定する

Fig 1: インライン要素に背景画像を指定 CSS でインライン要素に背景画像を指定する場合、IE6 と IE7 では致命的なバグがあるので注意。たとえば Fig 1 のように、パラグラフ中のハイパーリンクにアイコンを表示させたいとする。となると CSS はこんな感じになるだろう: a.pdf {   padding-left: 20px;   background: url(/img/pdf.png) no-repeat 0 50%; } a.external {   padding-right: 20px;   background: url(/…

チェック/ペケ

HTML/XHTML で チェックマーク (Tick) や ペケ (X mark) を表示させるには以下の文字参照が使える。 数値文字参照名称 ✓&#10003;CHECK MARK (tick) ✔&#10004;HEAVY CHECK MARK (bold tick) ✗&#10007;BALLOT X (cross) ✘&#10008;HEAVY BALLOT X (bold cross) しかし IE6 では文字化けすることが多いようなので、CSS で Unicode フォントを指定するといいみたい。 <!– HTML/XHTML…

jQuery と CSS を使った Apple 風パンくず

パンくず (Breadcrumbs) ってその必要性に疑問を感じることの多い要素の筆頭だと思う。この案件で要るか、これ? みたいな。そんなわけだからあまり力を入れて作ったことがなかったんだけど、Veerle’s blog のパンくず作成チュートリアル Simple scalable CSS based breadcrumbs を読んで、必要かどうかはとりあえず置いといて、どうせ置くならお洒落な方がいい、っていうか俺もクールなパンくず作る! と盛り上がってしまい、作ってみた。 Fig 2: Apple のパンくず。影響力大 Fig 3: Delicious のタグのリスト。妙に好き 目論んだイメージとしては Apple …

スペースの幅

いわゆる「半角スペース」の幅って font-size の値に対してだいたいどのくらいの割合なの? ってのを調べる必要があったので、よく使う代表的な欧文フォントについてまとめてみた。どうやって調べたかというと、 <p><span>&nbsp;</span></p> こんな感じのマークアップに、 p {   font-family: “Arial”;   font-size: 1000px; } p span {   background-color: red; } というスタイルシートを当てる。ブラウザで表示させてみて、…

スクロールで背景画像が変化する (ように見える) トリック

CSS を使ったエフェクトで久々に楽しいのを発見! 説明するのが難しいので、下記ページのサンプルを (IE 6 以外のモダン・ブラウザで) チェックしてみてほしい。 Mike asks the CSS Guy about a scrolling trick with background images (Ask the CSS Guy) これは思いつかなかったなー。垂直方向に並んだ要素にそれぞれ背景画像を用意して、background-attachment プロパティに fixed を指定、同じ位置に重ねるのがミソ。前述のとおり IE 6 には対応していないので、適宜ハックなどで対応を。…

JavaScript と CSS を使った「このページを印刷」リンク

クリックするとブラウザの印刷ダイアログが立ち上がる、いわゆる「このページを印刷」リンク。マークアップはだいたいこんな感じになると思う: <p class=”print”>   <a href=”#” onclick=”window.print(); return false;”>このページを印刷</a> </p> でもこれ、JavaScript が無効の場合はどうなるだろう? そう、何も起こらない無意味なリンクになっちゃうよね。そこで、JavaScript と CSS を使ってひと工夫してみよう。 まずは JavaScript。例によって jQuery を読み込んだ…

CSS ハックをフォーマット

いわゆる「スターハック」に代表されるセレクタレベルの CSS ハックについて、ソースコードの整形を工夫してみる。 body {   font-size: 10px; } * html body {   font-size: 62.5%; } *:first-child+html body {   font-size: 62.5%; } この書き方、ハック部分が目立つのでメンテナンス性に優れてはいるものの、本来は必要ないはずの余分な記述が妙に偉そうにに居座ってる感じが、なんかイヤ。というわけで、こんなのはどうだろう: body {   font-size:…

ときには真珠のように

「Web デザイナーがあらゆる閲覧環境でのタイポグラフィをコントロールしようなんておこがましいとは思わんかね…」…

のっちメソッド: One pixel notched corners

Ask the CSS Guy の記事 One pixel notched corners as used by Google Analytics を試してみた。Google Analytics で使われてるような、四隅が 1px 欠けているボックスの表現を画像を用いず CSS のみでやってみよう、という話。上記記事に対する Simon さんて方のコメント で「もっと簡単にできんじゃね?」という例があるけど、なんだか不思議なマークアップだったので、僕なりに整理してみる。 まず、例としてナビゲーションメニューのようなものを考えてみる。マークアップはこんな感じ: <!– HTML –> <ul>  …

Mac 版 Firefox 3 はデフォルトのフォントサイズが 16px に

4月16日に開催されたセミナー、CSS Nite in Ginza, Vol.24 に参加してきた。リリース間近の Firefox 3 の新機能について Mozilla Japan のスタッフが語る、というのがテーマ。僕はといえば、実はアンケート回答者に配られた Firefox ストラップ が目当てだったりもしたわけだけど、ちょっとうれしい話も聞けた—Mac 版 Firefox のデフォルトのフォントサイズがついに 16px になるという! これはおそらく日本語版のみの話だと思うけど、ほぼすべてのモダン・ブラウザがデフォルトのフォントサイズを 16px に標準化しているのに、Mac 版 Firefox だけが 14px …