はてなブックマーク

以前にも少し書いたのですが、ウェブブラウザーで使えるページ内検索による体験が阻害されるのが本当にストレスで、その例を残しておこうと思います。 採用側の気持ちも分かりますので、どうなると皆が幸せになるのか分からないという種類のものなので困ったところです。 省略されたテキストoverflow: hiddenとtext-overflow: ellipsisまたは-webkit-line-clampによってテキストが省略された場合、その省略部分がページ内検索にヒットすると非常に探しづらいです。 特に、グリッドで区切られたアイテムが複数列・複数行で並んでいる際に顕著です。 以前の記事のとおり、わたしはYouTubeでよく遭遇します。 下記のデモは、1000個のアイテムを並べたものです。 このうち、「Red Rose」というワードは12個のアイテムに含まれています。 デモを開いて「Red Rose」で

img要素で読み込む画像は、CSSでdisplay: noneが指定されていたとしてもダウンロードされることはご存知かと思います。 それをどうにかしたいという話です。 前提として、画面サイズに応じたデザインの変更による画像表示の切り替えを想定しているわけではありません。 それにも対応できますが、使いにくいと思います。 結論から言うと「url()関数を指定したcontentプロパティをインラインスタイルで指定する」、これだけです。 なんでこんなことをしたかったのか大量の小さな画像が配置されたウェブページを作っていましたが、それらの大半はユーザーが操作しない限り表示されないUIでした。 表示されるかどうか分からない画像をダウンロードさせるのもイマイチな気がして、ダウンロードを遅らせたかったというのが理由です。 通常のimg指定デモを作ってありますので、確認してみましょう。 display: n

これを読むあなたはCSSを書く方だと思いますので、お尋ねします。 あなたは普段、幅と高さを持つ、クラシカルなスクロールバーを表示していますか？ していないのだとしら、それはどうしてなのでしょう。 OSの初期設定から変えていないだけかもしれません。スクロールバーを醜いものだと考えていて、スクロールするときだけに出現する控えめなスクロールバーを好んでいるからかもしれません。 あなたがどう考えていようと、現実にはそのような、ユーザーの操作に応じてオーバーレイで表示されるスクロールバーが選択できない環境も存在します。 そういった環境では、スクロールバーはウェブページ上で幅と高さを持ち、レイアウトに影響を与えます。 それを忘れて書かれたCSSは、オーバーレイ・スクロールバー前提のレイアウトであったり、不必要なスクロールバーの存在を生み出してしまうことがあります。 スクロールバーを表示、つまり、ウェブ

注意事項 これは発表資料で、普通のウェブページではありません。 環境によっては正常に表示されないかもしれません。 この資料の内容が正しいとは限りません。 正しく理解するために、ご自身で仕様を読むことをお勧めします。 韓国語版（한국어） Translation by 조은 August 30, 2015 國仲 義則 Yoshinori Kuninaka （a.k.a. Matori / @ub_pnr） 株式会社シフトブレイン 目次 CSSの基本構文 プロパティーの仕様と、その値の構文 型と単位 関数表現 仕様を覗いてみてみよう 仕様はどこにあるの？ CSS current work & how to participate CSS3の日本語訳集 - 血統の森 web実験小屋 日本語訳を見るときには、原文と一緒に見ることをお勧めします。 また、誤訳などを見つけたら翻訳者に連絡を取ってみるとよ

これは「BEM Advent Calendar 2013」19日目の記事です。 タイトルに書いてある通り、Robert HaritonovによるMCSSのドキュメントを日本語訳しました。 ほぼ同内容のものをプルリクエストしてあるので、そのうち本家でも公開されると思います。 公式ページでも公開されました。 英語版があったので基本的には英語版から日本語訳したのですが、英語版で意味がよく分からない部分があって、そういうのはオリジナルのロシア語版を機械翻訳で英語にして、それを元にしたりしました。ので、英語版からの完全翻訳ではありません。 本当はロシア語できる人がオリジナルのドキュメント群を翻訳したほうがよいと思います。 MCSSは主にCSSの管理方法についての考え方で、読んでいて自分のやり方に一番向いているのではないかと思いました。 そこで、ちゃんと理解しておきたいということもあって翻訳してみまし

毎回設定方法を忘れて検索するのがつらいのでメモしておきます。 C:\Develop以下で構成。XAMPPのドキュメントルートはそのまま、実際に使うのはC:\Develop\www以下にディレクトリ作る。WordPressのルートはC:\Develop\www\wpにする。MySQLのdataもXAMPPとは別ディレクトリのC:\Develop\mysqlに。WordPressのURLはwp.localhostにする。バーチャルホストの設定とか今回はC:\Develop\xamppにインストールする。 インストールが終わったらphp.iniの設定。 mbstring.language = Japanese date.timezone=Asia/Tokyoとりあえずこれだけやって、他は本番用サーバーにあわせる。 参考リンク： php.iniファイルの確認と修正 - XAMPPの使い方 Apac

日本語文中の英数で日本語の文字との間に半角スペースを入れるか入れないかという話があります。検索すると色々議論されていたりして面白いです。 このブログでは場所によって半角スペースを入れたり入れなかったりしていますが（2020年1月追記：現在は入れていません）、『日本語組版処理の要件』に合わせてユーザーエージェントがいい感じに処理してほしいなーとか思います。 そこで「それCSSでできるよ」と言える（ようになるかもしれない）プロパティを紹介してみます。 これがまさに日英数が混在する文章で、英語や数字と日本語の間に4分の1スペースを自動で追加したり、全角括弧で生じる大きなスペースをトリムしたりできるプロパティです。 text-spacingは元々text-trimとtext-autospaceという別々のプロパティを統合したものです。これは2011年9月1日版のチェンジログに載っています。 統合に

表が2つ以上だったら表のキャプションとフィギュアのキャプションがあってもいいんですが、表が1つの場合はどうするべきなんだろうと考えてみたけど分からなかったので、検索したらすぐ見つかりました。 When a table element is the only content in a figure element other than the figcaption, the caption element should be omitted in favor of the figcaption. HTML Standard - 4.9.2 The caption elementつまり「table要素がfigcaption要素以外のfigure要素の唯一の要素内容の場合は、figcaption要素を優先してcaption要素は省略されるべきである」と。 ごちゃごちゃ考えるのは仕様を見てからでい

次のdiv要素のうち、:empty擬似クラスが適用されるのはどれでしょう。 1. テキストあり <div>(Text)</div> 2. 空 <div></div> 3. 半角スペース1つ <div> </div> 4. 半角スペース2つ <div> </div> 5. 改行 <div> </div> 6. コメント <div><!-- comment --></div> 7. テキストなしで空の子要素を持つ <div><span></span></div>正解は2と6です。 実際の動作はサンプルをどうぞ。 :empty? :empty擬似クラスは「Selectors Level 3」を見ると、次のように書かれています。 The:emptypseudo-class represents an element that has no children at all. In terms of

とりあえず仕様を見てみます。 This property describes the foreground color of an element’s text content. Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification - 14.1 Foreground color: the 'color' propertyThis property describes the foreground color of an element's text content. In addition it is used to provide a potential indirect value (currentColor) for any other properties that accept color value

:nth-*擬似クラスの引数の理解がいまいちだったのでおさらい。 構文について。 ここでのINTEGERは[0-9]+である。 nth : S* [ ['-'|'+']? INTEGER? {N} [ S* ['-'|'+'] S* INTEGER ]? | ['-'|'+']? INTEGER | {O}{D}{D} | {E}{V}{E}{N} ] S* ;nは0もしくは正の整数であるので、それを元に考えると分かりやすい。 たとえば:nth-child(n+1)の場合…… 0 + 1 = 1 1 + 1 = 2 2 + 1 = 3 ...となる。 偶数番目の子を指定する場合には:nth-child(even)または:nth-child(2n)となるが、これも同様に 2 * 0 = 0 2 * 1 = 2 2 * 2 = 4 ...となる。 奇数番目:nth-child(odd), :n

「円や多角形をランダムに配置する背景をSVGで作る」の続きです。 もうちょっと使いやすくなるように練習を兼ねてやってみました。 GPBG.js サンプル 1 GPBG.js サンプル 2 GPBG.js サンプル 3 GPBG.jsのJavaScriptファイル 前のはインラインSVGを作ってbodyの最後に入れていましたが、今回はstyle要素を作り、指定したセレクタの背景画像としてData URIにしたSVGを指定するようにしました。 一番簡単に使うと、こんな感じになります。 <script type="text/javascript" src="gpbg.js"></script> <script type="text/javascript" src="script.js"></script> </body>// script.js の中身 (function () { if (wi

要素内容に依存する幅の指定についてのメモです。 これらは「CSS basic box model（草案）」に記載されており、MDNのページに分かりやすく説明されています。 本来、これらは幅だけでなく高さの指定にも使えるようなのですが、まだ実装されていませんので確認できません。 2013年4月現在、幅の指定として使えるブラウザはFirefoxとGoogle Chromeです。Safariでは動くんですかね。最新版ないから分かりません。 available or fill-available包含ブロックから該当要素のマージン、ボーダー、パディングのサイズを引いた幅。 現在、Firefoxは-moz-available、Chromeは-webkit-fill-availableで動作します。max-contentややこしい計算式があるんですが、とりあえずは該当要素が取りうる最大の幅として覚えてお

ボーダーのスタイルをリセットする場合などに使われる指定について。 border: 0とborder: noneどちらを使いますか？ ということではなく、この2つはどう違うのか、という話です。 borderプロパティについてですが、これは4つのボーダーの指定をまとめて行うショートハンドプロパティです。 構文としては次のようになります。 （参考：CSS 2.1 Box model, CSS Backgrounds and Borders Module Level 3） // CSS 2.1 [ <border-width> || <border-style> || <'border-top-color'> ] | inherit // CSS Backgrounds and Borders Module Level 3 <border-width> || <border-style> || <

よくあるドロップダウンメニューのアイディアです。 CSS 3D Transformsに対応しているブラウザにはそれを使ったUIを、そうでないブラウザにはシンプルな切り替えを提供します。 ドロップダウンメニューのアイディア CSSのみ補足コメントつきで載せておきます。 .nav a { display: block; padding: 0 0.5em; color: #f6f6f6; line-height: 2; text-decoration: none; } /* ulのスタイルリセット */ .nav ul { margin: 0; padding: 0; list-style: none; } /* clearfix */ .nav > ul:after { display: block; clear: both; content: ""; } /* メニューを横並びに */ .n

2011年の9月に「CSSとSVG filterでガラスっぽい効果をつける」というのを書きましたが、これはFirefoxのみを対象としたものでした。 そこで今回はできるだけ多くのブラウザに対応したものを作ってみます。 完成品Frosted glass effect with CSS & SVG 背景画像にはWetFoto.comによる#246 Wetlook with Beautiful Brunette in Leggings and Jacket. Girl in black jacket, white wetlook leggings and skirt in boots, get wet fully clothed in the sea.を使用しています（リンク先はFlickrです）。 この画像はCC BY-NC-SA 2.0でライセンスされています。 背景画像にはBeryl Ch

最近は配色を決めるときに、ColorHexaを参考によく使っているのですが、CSS書く時にいちいちコピペするのが面倒なのでSassの変数にまとめています。 必要なものだけここからコピペして、分かりやすい名前の変数に入れたりして使っています。 被ってる部分は実際にはいちいち指定してません。こういう配色だと分かりやすくするために念のため書いています。 // 基本とする色 $color-base: #0088cc; // 色相回転の基準角度 $hue-step: 30deg; // 補色 $color-complementary: adjust-hue($color-base, 180deg); // Analogous $color-analogous-primary: $color-base; $color-analogous-secondary-A: adjust-hue($color-b

背景として使われるCSSグラデーションが描画される範囲はどのように決定されるのか、仕様を読みながら考えてみたいと思います。 参考にしたのは2012年4月17日版の「CSS Image Values and Replaced Content Module Level 3」です。非公式の日本語訳もあります。 この記事に書いている範囲は自分で訳したので、上記の翻訳とは用語の表記などが異なっています。ご了承ください。 （調べ終わり頃に日本語訳があるのに気づいたので……） なお、ここ以降で単に「グラデーション」と書いている場合は「CSSグラデーション」のことを指します。 グラデーションが描画される範囲についてまずはグラデーションが描画される範囲はどのように決定されるのかを調べてみます。 仕様を見ると次のように書かれています。 グラデーションはグラデーションボックス（gradient box）と呼ばれ

CSS Programming Advent Calendar 2012の2日目です。 まだ2日目ですし、あんまりややこしくないものをやろうと思ってストップウォッチを作ってみました。 CSS Stopwatch ダウンロード 右上のボタンでスタート、ストップ、リセットです。 上部中央のランプは色なしがリセット状態、青がスタート（カウント中）、赤が停止中を表します。 左のスイッチでは数字部分のカウントスタイルの変更ができます。これはリセット状態でないと変更できません。 :checked擬似クラス間接兄弟セレクタCSS CountersCSS 3D TransformsCSS AnimationsCSS GradientsRoot emViewport percentage lengthpointer-eventscalc()などを使っています。 IE 10, Firefox（17で確認）,

値の部分のキーワードは文字通りに記述しなければなりません。また、スラッシュ（/）やコンマ（,）も同様に文字通りに記述しなければなりません。 "<"と">"で囲まれているものはデータ型を表します。基本的にリンクがあるので、その型がどういうものはリンク先の説明を参照すること。 いくつか単語が並置されている場合、その順序通りに全て記述しなければなりません。バー（|）は2つ以上の選択肢の区切りで、それらの中の1つを記述しなければなりません。ダブルバー（||）は2つ以上の選択肢の区切りで、それらの中の1つ以上を記述しなればなりません。これは順不同です。ダブルアンパサンド（&&）は2つ以上の構成要素の区切りで、それらの全てを記述しなければなりません。これは順不同です。ブラケット（[ ]）はグルーピングのために使用されます。優先順は左から順に並置 - ダブルアンパサンド - ダブルバー - バーです。

とうとうWindows 7向けのIE 10が公開されましたね！（これを書いている時点ではRelease Previewですが） IE 10ではCSS 3D Transforms, Animations, Transitionsなどが-ms-なしで使えるようになりました。素晴らしい！ というわけでさっそく試してみたわけですが、どうもおかしい。表示はできるんですが、アニメーションやトランジションしたときに立体的に見えない。 調べてみるとMSDNに次のような記述が。 Note  The W3C specification defines a keyword value of preserve-3d for this property, which indicates that flattening is not performed. At this time, Internet Explorer

CSSで小数点以下を指定できる単位で、小数点以下の数値の扱いがブラウザごとに異なっているようなので、単位別にまとめてみました。 調査時の各ブラウザのバージョンですが、Internet Explorer 9 & 10 (Windows 7), Firefox 17, Chrome 25 dev-m, Opera 12.10となっています。調査にはブラウザ付属の調査ツールを使いました。 表が見づらいかもしれませんが、我慢してください。 なお、これはどうレンダリングされるかなどは考慮していません。 その指定がどう解釈されるかだけを調べたものです。 指定した値についてですが、但し書きがない場合は1.5555555555です。 Percentageフォントサイズをパーセンテージ指定。

WordPressの「Wiki Page Links」というプラグインを改造していたのですが、そのときのメモです。 このプラグインは[[キーワード]]という書式で固定ページのタイトルに同じものがあれば自動でリンクしてくれるのですが、これの検索範囲を任意の投稿タイプにしたかったのです。 それと、違う書式で（たとえば{{キーワード}}みたいな感じ）で任意のタクソノミーからタームを検索してリンクする、というのもやりたかった。 文中からの検索や置換は元のプラグインのものを流用するとして、問題はキーワードから投稿のURLとタームのURLを探し出すところでした。 // キーワード $link_target_title = html_entity_decode('探したいキーワード', ENT_QUOTES); // リンク先URL $url = null;投稿の場合 // 公開されている投稿タイプ $

Firefox 16、Opera 12.10、そしてInternet Explorer 10がリリースされました（Windows 7のIE 10はまだですが）。 その中で、CSSのベンダー接頭辞が外れたものをまとめてみます。 CSS Gradientsliner-gradient(), repeating-linear-gradient(), radial-gradient(), repeating-radial-gradient()の4つ。 IE 10から。標準構文。IE 9以下はCSSグラデーションに対応していない。Firefox 16から。標準構文。-moz-付きのは古い構文扱い。Opera 12.10から。標準構文。-o-付きのは古い構文扱い。Chrome、Safari は-webkit-が必要。古い構文。CSS Transformstransform, transform-sty

2011年1月27日に「meter要素のスタイリングについてのメモ for Webkit & Opera」という記事を書きましたが、先日リリースされたFirefox 16もmeter要素に対応し、またWebkitの指定方法も変更されていましたので改めてメモしておきます。 なお、前回同様にOperaについてはスタイリングの方法が分かりませんので（まだないっぽい）、WebkitとFirefox向けの指定方法となります。 時間のある方は前の記事も読んでおくと理解しやすいかと思います。 Webkit向け::-webkit-meter-inner-elementこれはユーザーエージェントスタイルシートに書かれているものですが、気にしなくていいと思います。 meter要素の中の部分を指定します。::-webkit-meter-barメーター自体を指す擬似要素です。バーの背景などはここで指定します。 以