ラテンアルファベットと数字を縦にするか、横にするか？UTR#50とCSSの関係 | 電子書籍、電子出版のCAS-UBブログ
現在、Unicodeに「Unicode Properties for Vertical Text Layout」（UTR#50）という仕様が提案されており、そこでは縦書きのときの方向特性と文字間の調整のための特性を文字特性として与えようとしています。 これについての論点は多いのですが、その中で、あまり取り上げられていない問題として、ラテンアルファベットとアラビア数字に、縦書き時に正立で表示するか横倒しにして表示するか、どちらが良いか、ということについて、このブログで検討しています。 最近、Twitterでも少しこの話が盛り上がっています。 UTR#50は文字のコードポイントに対して特性を規定するものでプレーンテキストに対しても適用となります。そこでUTR#50の文字特性とCSSのWriting Modeとの関係について検討してみます。 UnicodeではラテンアルファベットA～Zは、U+0
10 Beautiful Pricing Tables Designs
Looking for more similar resources? These user interface elements can prove to be very useful! Dropbox Dropbox is a free service that lets you bring your photos, docs, and videos anywhere and share them easily. Their aim is reinventing teamwork as their motto says. They have a unique design for their pricing table page. They use large, custom made icons and simple “Buy Now” type of buttons. They u
BOWER
TWITTER ENGINEERING PRESENTS bower THE BROWSER PACKAGE MANAGER Introduction Bower is a package manager for the web. Bower lets you easily install assets such as images, CSS and JavaScript, and manages dependencies for you. For example, to install a package, run: bower install jquery This will download jQuery to ./components/jquery. That's it. The idea is that Bower does package management and pack
CSSリセットとは異なる、Normalize.cssの特徴や使い方などの解説 -About normalize.css
Normalize.cssって何？ CSSリセットとは違うの？ どうやって使うの？ といった疑問を解決するNormalize.cssの制作者自らの解説を紹介します。 About normalize.css [ad#ad-2] 下記は各ポイントを意訳したものです。 Normalize.cssとは Normalize.cssの特徴 ノーマライズ vs リセット Normalize.cssの使い方 終わりに Normalize.cssとは Normalize.cssとは、クロスブラウザにHTMLのエレメントのデフォルトのスタイルを提供する小さなCSSファイルです。HTML5にも対応しており、従来のCSSリセットに代わるものです。 normalize.cssの関連サイト Normalize.cssの本サイト Normalize.cssのソース Normalize.cssのドキュメント Normal
CSS Style Guides | CSS-Tricks
UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today. As we wrap up our recent poll on ordering CSS properties, it brings up the larger issue of CSS style guides. Ordering properties is just one choice you have to make that makes up a complete styling strategy. Naming is a part of it. Sectioning is a part of it. Commenting, ind
CSSで変数を利用可能に。W3Cが「CSS Variables Module Level 1」ドラフトを公開
CSSで変数を利用可能に。W3Cが「CSS Variables Module Level 1」ドラフトを公開 CSSはこれまで変数が使えなかったため、例えばページ内の複数箇所を同じ色で揃えようとしたときには、同じカラーコードをCSSの複数箇所に書き込む必要があり、色に変更があるたびにすべての箇所を確実に修正しなければなりませんでした。 CSS Variables Module Level 1は、CSSに変数を持ち込むことによって、変数の値を買い換えるだけで複数箇所のカラーコードが自動的に書き換わる、といったことを可能にします。 色のコードを簡単に使いまわせる 変数を記述するときには「data-変数名」と記述します。例えば変数名が「var」のときには、CSSファイル内で「data-var」と記述します。接頭辞が「data-」なのは、HTML5の「Custom Data Attribute」と
Vendor-prefixed CSS Property Overview « Peter Beverloo
Next to having four seperate pages for the major rendering engines, this page shows a clearer overview of the implemented, prefixed properties. Blink (list) Google Chrome, Opera WebKit (list) Apple Safari Gecko (list) Mozilla Firefox Trident (list) Internet Explorer Please note that WebKit supports all these properties using the "-apple-" and "-khtml-" prefixes as well.
[CSS]box-shadowを使って、紙がふわりと浮かんだようなエフェクトをつけるスタイルシートのまとめ
Creating Different CSS3 Box Shadows Effects [ad#ad-2] デモ 実装 デモ デモはbox-shadowに対応した下記のブラウザでご覧ください。 対応ブラウザ Internet Explorer 9.0+ Firefox 3.5+ Chrome 1+ Safari 3+ Opera 10.5+ デモページ [ad#ad-2] 実装 基本となるHTML 8つの各デモのHTMLの基本は同じで、class名が異なるだけです。 <div class="box effect"> <h3>Effect</h3> </div> 基本となるCSS div要素とh3要素の基本となるスタイルです。 .box h3{ text-align:center; position:relative; top:80px; } .box { width:70%; height
CSS reference - CSS: Cascading Style Sheets | MDN
Use this CSS reference to browse an alphabetical index of all of the standard CSS properties, pseudo-classes, pseudo-elements, data types, and at-rules. You can also browse key CSS concepts and a list of selectors organized by type. Also included is a brief DOM-CSS / CSSOM reference. Basic rule syntax Style rule syntax style-rule ::= selectors-list { properties-list } ... where : selectors-list ::
3.2. Determining the Subject of a Selector - Selectors Level 4
Selectors Level 4 Editor’s Draft, 6 March 2024 More details about this document This version: https://drafts.csswg.org/selectors/ Latest published version: https://www.w3.org/TR/selectors-4/ Previous Versions: https://www.w3.org/TR/2022/WD-selectors-4-20220507/ https://www.w3.org/TR/2018/WD-selectors-4-20181121/ https://www.w3.org/TR/2018/WD-selectors-4-20180202/ https://www.w3.org/TR/2018/WD-sele
Unquoted attribute values in HTML and CSS/JS selectors · Mathias Bynens
This is one of those posts I wrote just to be able to link back to it later. I see a lot of questions on the subject, and even though I don’t mind explaining the same thing over and over again, it’s probably easier to just write it down once. Unquoted attribute values in HTML Most people are used to quoting all attribute values in the HTML they write. For example: <a href="foo" class="bar">baz</a>
Foundation for Sites | The most advanced responsive front-end frameworks in the world.
Responsive design gets a whole lot faster A Framework for any device, medium, and accessibility. Foundation is a family of responsive front-end frameworks that make it easy to design beautiful responsive websites, apps and emails that look amazing on any device. Foundation is semantic, readable, flexible, and completely customizable. We’re constantly adding new resources and code snippets, includi
確実に進化している！CSS3アニメーションで実装する10種類のナビゲーション
Example 10 エレメントのサイズとカラーを変更し、重なり順も変更。 実装 HTML HTMLの構造は、アイコン、メインテキスト、サブテキスト、3つをli要素に含めます。 <ul class="ca-menu"> <li> <a href="#"> <span class="ca-icon">A</span> <div class="ca-content"> <h2 class="ca-main">Exceptional Service</h2> <h3 class="ca-sub">Personalized to your needs</h3> </div> </a> </li> ... </ul> [ad#ad-2] CSS アイコンに使用しているのは画像ではなく、シンボルフォントを使用します。 @font-face { font-family: 'WebSymbolsRegul
商用利用可能なCSSテンプレート｜Htmlテンプレート
2007年1月。私がブログを始めた同じ月にミャンマーの青年が個人でも商用でも無料で使えるFreeFlashTemplateというサイトをオープンさせました。Flashのテンプレートを無料で提供というスタイルですね。 とても素晴らしいソースとして、結構使われた人も居るかもしれません。ある程度広告収入と言う方法で軌道に乗せたNetDNAは、その一年後2008年に、FreeCSSTemplateというサイトも同時に発足。 そして現在。総テンプレート数が335個。 改めてこのサイトを見ると、かなり優れたものが多いので、だいぶ前に紹介した気がしないでもないのですが（他のブログでみただけかも）、再度ご紹介したいなと思います。 とりあえず使う前の注意 個人、商用問わず利用可能です。作品を複製、頒布、展示、実演することができます。二次的著作物を作成することができます。本作品を営利目的で利用することができま
[JS]地味なフォームを簡単にかわいらしいデザインにする -Ideal Forms
画像を一切使用せず、既存のフォームをかわいらしいデザインに変更するjQueryのプラグインを紹介します。 チェックボックスのチェックも画像ではないですよ。 Ideal Forms デモ [ad#ad-2] Ideal Formsのデモ フォームの外観は画像は使用せずスタイルシートでデザインされているので、自分用のカラーに変更することも可能です。 デモでは、3つのスタイルが用意されています。 スタイル：Comix Ideal Formsの主な特徴 フォームに美しい外観を与える軽量（14Kb）のスクリプト。 カスタマイズも簡単で、非常に使いやすいです。 画像は必要なく、スタイルシートでデザインを適用しています。 [ad#ad-2] Ideal Formsの実装 ファイルのアップロード 以下の2つをフォルダごとアップロードします。 css/idealForms js/idealForms.js
)
Internet Explorer 10 Guide for Developers
Purpose The Internet Explorer 10 Guide for Developers provides a look at the developer features included in Internet Explorer 10, as well as the latest HTML5, JavaScript, and Cascading Style Sheets, Level 3 (CSS3) features available to developers of Windows apps using JavaScript for Windows 8. By using the documentation and samples in this guide, developers and designers can take full advantage of
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Sass & Compass: The future of stylesheets now.
Red Team Design
CSS4セレクタ (Selectors Level 4) の新機能
CSSMENUMAKER.COM