描写から構成へ――『Every Layout』とコンポジション指向CSS／terkel.jp

2021/11/28 7 users レビュワー ウェブデザイン 共著 CSS 本書

ヘイドン・ピカリングとアンディ・ベルの共著『Every Layout』が日本語に翻訳された。光栄なことに僕も出版前のレビュワーのひとりとして、微力ながらお手伝いさせていただいている。 タイトルが示すとおり、本書はCSSによるウェブデザインのうち「レイアウト」の問題に焦点を絞ったものだ。レイアウトといってもページ... 続きを読む

ep.79 「フォントのなかの人」と見る Web フォントの未来 | UIT INSIDE - LINE UIT の開発者による「最新のフロントエンド」をキャッチアップできる Podcast

2021/03/05 12 users Podcast コーポレー UIT INSIDE フォント

@spring_rainingが、フォントワークス株式会社の@terkelにフォントメーカーのWebに対する取り組みや日本語Webフォントの未来について聞きました。 Guest 鈴木丈さん @terkel フォントワークス株式会社 Web開発者 https://terkel.jp フォントメーカーにおけるWeb開発者の役割 Webが担う領域は広がり続けている コーポレー... 続きを読む

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

2014/11/07 43 users パディング padding-bottom before 上下

CSS でテキストをベースライン・グリッドに揃えるとなると、ベースラインの高さに応じて上下のパディングやマージンを調整するアプローチがよく見受けられるますが、あまり実用的なものとは言いがたかったと思います。 p { padding-top: 0.30116em; padding-bottom: 0.19884em; /* ... */ } しかし、::before と ::after 擬似要素を利... 続きを読む

和欧混植の条件分岐 · terkel.jp

2014/09/26 24 users Mei font-family カンマ区切り プロパティ 実装

CSS によるフォントの和欧混植は、たいがいの場合、font-family プロパティを使ったシンプルな実装で間に合う。ファミリ名をカンマ区切りのリストとして指定すれば、ユーザーのローカル環境に応じて利用可能なフォントが適切に選択される。 html { font-family: "Helvetica Neue", "Arial", "Hiragino Kaku Gothic ProN", "Mei... 続きを読む

アイコンの実装方法 · terkel.jp

2014/06/24 76 users images ウェブページ CSS img 要素 アイコン

ウェブページにおけるアイコンの実装方法はさまざまです。マークアップに img 要素を配置する方法もあるし、CSS から背景画像やアイコン・フォントを使う方法もあります。そういった中からどの方法を採用すべきかを判断するには、HTML Standard の Requirements for providing text to act as an alternative for images にあるとお... 続きを読む

横に水平線のあるテキスト · terkel.jp

2014/01/08 141 users Demo span CSS 見出し 水平線

おもに見出しなどで見かける、テキストの左右 (またはそのどちらか) に水平線を配置したスタイル。これを CSS で実現する方法について考えてみました。 Demo: 横に水平線のあるテキスト 重ねて隠すパターン まず最初は、1 本の水平線を幅いっぱいに配置した上で、テキストに重なる部分を隠す、という方法です。 <h2><span>Latest Posts</span></h2> マークアップはこのよ... 続きを読む

Ruby で Sass のカスタム関数を書く – terkel.jp

2013/05/25 64 users ディレクティブ Sass function return 関数

Sass で関数を書く方法は 2 つあります。ひとつは Sass の @function ディレクティブ を使って Sass ファイル内に定義する方法。 $grid-width: 40px; $gutter-width: 10px; @function grid-width ($n) { @return $n * $grid-width + ($n - 1) * $gutter-width; } ... 続きを読む

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

2013/03/05 81 users Grid Kraken セレクター 接頭辞つき class

Kraken というフロントエンドのフレームワークのコードを見ていたら、なるほどと感心する CSS セレクターの書き方を見つけた。grid-one、grid-two みたいな接頭辞つきのクラス名にマッチするセレクターで、こんな感じ: [class^="grid-"], [class*=" grid-"] { /* ... */ } 単純に考えると [class*="grid-"] でいけそうな気が... 続きを読む

NIR for Retina Images – terkel.jp

2013/02/18 25 users

擬似要素と content プロパティを利用した画像置換テクニックの NIR (Nash Image replacement) と、いわゆる Retina ディスプレイ向けの高解像度画像 (sprites@2x.png みたいなやつ) を組み合わせる方法について。まずは NIR についておさらい: .nir { overflow: hidden; width: 160px; height: 50p... 続きを読む

Sass のカスタム関数の書き方 – terkel.jp

2013/01/05 57 users Sass Calc ディレクティブ function CSS

Sass は ネイティブ関数 のほかに、@function ディレクティブ を使ってカスタム関数を自由に定義することができます。僕もより共有や再利用のしやすいものを作るべく試行錯誤していますが、ここではそのうち最近試しているいくつかのパターンについて書いてみました。ご意見求む。 接頭辞 attr() や calc() など CSS のネイティブ関数や percentage() や type-of(... 続きを読む

画像の最大幅を calc() で制御する – terkel.jp

2012/12/16 99 users padding パディング Calc border img

画像の幅をコンテンツに合わせてフレキシブルにしたい場合、親要素の幅を超えないようにするには CSS の max-width プロパティに 100% を指定する。 img { max-width: 100%; border: 1px solid silver; padding: 0.25em; } ただ、画像にパディングやボーダーを持たせた場合、その分が親要素の幅より大きくなってしまうことがある (... 続きを読む

最近試している Sass の書き方 – terkel.jp

2012/07/11 69 users Sass 書き方

最近、Sass 3.2 (プレリリース版) を使って新しい書き方を模索しているんですが、その方向性に自信が持てないので、ちょっとさらしてみて反応を見ようという試みです。 まず基本的な方向として、以下のような考え方を参考にしています: なぜ @kotarok さんは mixin より extend を推すのか – mixi Engineers’ Blog Sassの存在意義 – Weblog – h... 続きを読む

スクリプトが無効の場合のスタイル – terkel.jp

2012/07/01 64 users フォールバック スクリプト CSS 前提 ビジュアル要素

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

画像置換のあれへの補足 – terkel.jp

2012/04/17 112 users height width CSS 補足 経緯

先月あたり、CSS による画像置換テクニックの話題がにわかに盛り上がりを見せていました。その経緯について まとりさんの記事 で紹介されていますが、僕からも簡単に補足してみます。 まず、よく知られた画像置換のテクニックとしていわゆるファーク式 (Phark method) がありました: /* Phark method */ .ir { height: 100px; width: 400px; ba... 続きを読む

俺の CSS リセット: 2011 冬 - terkel.jp

2011/12/24 668 users 両氏 Normalize.css CSS リセット 影響

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

CSS のみで吹き出し - terkel.jp

2009/12/06 485 users Demo div Weblog Body hail2u.net

hail2u.net – Weblog – Pure CSS な吹き出し に触発されて、画像や JavaScript を使わずに CSS だけを使って「吹き出し」を作る方法を僕も考えてみた。 Demo: CSS のみで吹き出し マークアップは 2 重の要素があれば OK。ここではそれぞれ bubble と body というクラスを付与した div と p を例に説明する: <div class="... 続きを読む