基本の前の基礎知識 - Back to Basics CSS 2015-08-30
注意事項 これは発表資料で、普通のウェブページではありません。 環境によっては正常に表示されないかもしれません。 この資料の内容が正しいとは限りません。 正しく理解するために、ご自身で仕様を読むことをお勧めします。 韓国語版（한국어） Translation by 조은 August 30, 2015 國仲 義則 Yoshinori Kuninaka （a.k.a. Matori / @ub_pnr） 株式会社シフトブレイン 目次 CSSの基本構文 プロパティーの仕様と、その値の構文 型と単位 関数表現 仕様を覗いてみてみよう 仕様はどこにあるの？ CSS current work & how to participate CSS3の日本語訳集 - 血統の森 web実験小屋 日本語訳を見るときには、原文と一緒に見ることをお勧めします。 また、誤訳などを見つけたら翻訳者に連絡を取ってみるとよ
text-spacingが待ち遠しい
日本語文中の英数で日本語の文字との間に半角スペースを入れるか入れないかという話があります。検索すると色々議論されていたりして面白いです。 このブログでは場所によって半角スペースを入れたり入れなかったりしていますが（2020年1月追記：現在は入れていません）、『日本語組版処理の要件』に合わせてユーザーエージェントがいい感じに処理してほしいなーとか思います。 そこで「それCSSでできるよ」と言える（ようになるかもしれない）プロパティを紹介してみます。 これがまさに日英数が混在する文章で、英語や数字と日本語の間に4分の1スペースを自動で追加したり、全角括弧で生じる大きなスペースをトリムしたりできるプロパティです。 text-spacingは元々text-trimとtext-autospaceという別々のプロパティを統合したものです。これは2011年9月1日版のチェンジログに載っています。 統合に
CSS3での背景指定方法のまとめ
CSSであれこれやっていたら、まず間違いなく使うであろう背景関連のプロパティ。 CSS3ではこれまでより多くの指定ができるようになります。 それらの新しいプロパティや値はいったいどういうものなのか、調べてみました。 主に参考にしたのは以下の2つです。 CSS Backgrounds and Borders Module Level 3現在の仕様です。CSS 背景 & ボーダー モジュール Level 32011年2月15日版の仕様の日本語訳です。プロパティと値の説明はこちらを参考にしました。背景のレイヤー背景は複数のレイヤーを持つことができ、レイヤーの数はbackground-imageに指定されたカンマ区切りの値の数によって決められます。noneの指定も一つのレイヤーを生成します。 背景レイヤーの重なり方ですが、初めに指定したものから手前に来ますので、注意してください。 例として、下のr
Firefoxで使われている上下左右中央配置のスタイルシート
Firefoxで画像を開いたら、背景が暗い感じのCSSが使われるようになってました。Firefox 12からですかね？ 11 からでした。そのページでは画像が上下左右中央に配置されています。 ちょっと興味が湧いたので中身を覗いてみたら、上下左右中央配置もCSSで行っていました。 使われているCSSファイルはresource://gre/res/TopLevelImageDocument.cssにあります。 このファイルはMPL 1.1/GPL 2.0/LGPL 2.1のトリプルライセンスです。 @media not print { body { background-color: #222; margin: 0; } img { position: absolute; margin: auto; top: 0; right: 0; bottom: 0; left: 0; } } @medi
テキストをCSS用にエスケープするオンラインツールを作ってみた
テキストをCSS用にエスケープするツールを作ったので、一応紹介しておきます。 CSSのcontentプロパティなどでテキストを書くときなど、そのまま書いてもいいのですが、日本語などの場合は文字コードが面倒くさいのでエスケープした文字列を入れておくと便利だと思っています。 font-familyの指定とかに使うこともあるかもしれません。 この辺の話はWebTecNoteさんの「[css] contentプロパティで挿入できるコンテンツ」という記事が分かりやすいです。 で、上記リンク先にも今回作ったものと似たような変換機があって、以前はよく使わせてもらっていたのですが、何と言うか、練習も兼ねて自分で作ってみたいと思ったわけです。 まあ自分なりに使いやすいものができたかと思います。 Text Escaping for CSS 使い方は上のテキストエリアに好きな文字列を入れるだけです。 あ、改行も
CSS Transformsについてのメモ
既に色々なデモページが作られていたり、実用されていたりするCSS Transformsですが、ちゃんと理解したかったので調べてみました。 まだそんなに自信はありませんが、以前よりは理解できた気がします。 というわけなので、自分が分かる範囲で説明してみたいと思います。 CSS Transformsは2Dと3Dとで別になっていますが、将来的には SVG Transforms と合わせて一つの仕様になるそうです。 今はまだ別々なので、それぞれにリンクをしておきます。括弧内は現時点での最新の日付です。 WD: CSS 2D Transforms（2011/12/15）ED: CSS Transforms（2011/11/28）WD: CSS 3D Transforms Module Level 3（2009/03/20）ED: CSS 3D Transforms（2011/03/21）新しくなった
jQueryでシンプルなループスライダーを作る
JavaScriptというかjQueryのお勉強。 練習がてらコンテンツスライダーを作ってみました。 この手のものはチュートリアルもプラグインも山ほどありますが、必要な機能だけあって好きに使えるものが欲しかったので1から作りました。 プラグインをお求めの方は「jQuery.simpleLoopSlider.js」をどうぞ。 欲しかった機能シンプルに動くコンテンツスライダー。ループ機能。最後の次は最初、最初の前は最後、という感じで動く。進む、戻るナビゲーション。自動でページネーションを設置。これをやります。 デモとダウンロードは以下からどうぞ。 jQuery Simple Loop Slider DEMO デモファイルをダウンロード HTMLとCSS<div id="slider"> <div class="slider-view"> <div class="slider-container
CSSアニメーションの基礎
今さらながらCSS Animationsの使い方が分かってきたので、プロパティなどを簡単にまとめておきたいと思います。 これを書くにあたって、以下の2つを参考にしました。 CSS Animations Editor’s Draft 25 July 2011CSS animations - MDN上のはdev.w3.orgにある、2011年7月25日版のエディターズドラフトです。 ちなみにwww.w3.orgにある仕様は「CSS Animations Module Level 3」です。これを書いている現在、こっちは2009年3月20日版が最新となっています。 基本的に2011年7月25日版のエディターズドラフトをベースに説明したいと思います。なので、現在のブラウザの実装とは異なることもあります。 2つ目のは『Mozilla Developer Network』のドキュメントです。日本語版も
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
