DTPのスタイル機能と、Web/ePubのCSSの違い（1）｜DTP Transit
同じスタイルシートですが、DTPのスタイル機能とWeb/ePubのCSSは、かなり異なります。Webでは「HTML+CSS（XHTML+CSS）」と記述するように、CSSだけでなく、その前提となるHTML（XHTML）をどう記述するかが肝心です。 見出し、本文、キャプションにかかわらず、すべての段落は、同じ段落です。 これに段落スタイルを作成／適用することで、見かけ上、見出しらしく、本文らしく、キャプションらしく見えます。 それぞれの段落には、段落スタイルを適用する必要があります。 文字レベルで書式を設定するには、文字スタイルを作成／適用します。文字スタイルは、段落スタイルよりも優先されます。 それぞれの段落には、h1（大見出し）、h2（中見出し）、p（単なる段落）のようにタグ付けされています。サイズや金額を示す洋服のタグと同じようなものです。タグが付けられた段落は、h1要素、h2要素、p
CSS3 Text仕様ドラフト公開、CSS3縦書きと論理プロパティ、EPUB国際化の台湾会議 (CSS組版ブログ)
« 「マークアップ言語の活用と、EPUB電子書籍とウェブの日本語組版対応標準化について」 | メイン | W3C TPAC 2010～CSS3 Writing Modes 縦書きと論理方向仕様のゆくえ » CSS3 Text仕様ドラフト公開、CSS3縦書きと論理プロパティ、EPUB国際化の台湾会議 新しいドラフトが公開されました： CSS Text Level 3 W3C Working Draft 5 October 2010 このCSS3 Text仕様は、世界中の言語の文字組版に対応するためのもので、日本語組版に関係するものでは次のような機能があります。 line-break 行分割の禁則処理の設定 text-justify 行調整 punctuation-trim 約物の詰め text-autospace 和欧文間アキ hanging-punctuation 句読点行末ぶらさげ、起こ
CSS3が日本語の禁則処理、傍点、縦書きなど対応へ、ドラフト公開
スタイルシートの新たなWeb標準として現在策定が進められているCSS3に対して、日本語に対応した禁則、傍点（圏点）、縦書き仕様などの機能が追加されたドラフトが公開されました。 9月28日にPublickeyで公開した記事「電子書籍フォーマット「EPUB」で縦書きとルビのサポート、来年5月には仕様完成の見通し」では、EPUBでの縦書きやルビ、傍点などの仕様を策定中であることを紹介しましたが、EPUBはXHTMLやCSSをベースにした仕様であるため、仕様策定の作業はEPUBとCSSのそれぞれのグループが協力してCSS3に対して機能を追加する方法で行われていました。 これが最終的にCSS3の仕様として策定されれば、Webブラウザ上での禁則処理、傍点、縦書きなどの組み版処理が充実することになります（ルビはまだ作業中ですが）。大げさではなく、世界中のWebブラウザに対して日本の日本語文化に対応した表
デザイナは要注目！ 明日から語れるHTML5＆CSS3（1/4）- ＠IT
デザイナは要注目！ 明日から語れるHTML5＆CSS3：一撃デザインの種明かし（13）（1/4 ページ） ※本稿では特に断りがない場合、Firefox、Google Chrome、Opera、Safariは2010年7月時点の最新バージョン、IEはInternet Explorer 6/7/8の総称です。 いま世界で一番熱い「HTML5」「CSS3」とは？ 最近、「HTML5」「CSS3」といった言葉をよく耳にしませんか？ これらはWebの表現をもっと豊かにするために策定中の言語です。いままでのHTML 4.01やXHTMLでは実現できなかったことができるようになったり、CSS3はCSS 2.1よりさらにグラフィカルな部分まで表現できるようになりました。 FirefoxやOpera、Safari、ChromeといったHTML5＋CSS3に対応するWebブラウザが増えてきたことで、HTML5
CSS (Cascading Style Sheet)の使い方
CSS (Cascading Style Sheet)の使い方や書き方を入門者向けに解説しています。 CSSとは プロパティ セレクタ 擬似要素 ルール CSS framework Bootstrap Bulma Materialize Milligram Pure.css Semantic UI Skeleton Tachyons Tailwind CSS UIkit Zurb Foundation Syntax highliter Google code-prettify CSSとは CSS (Cascading Style Sheet)とは、HTMLに代わって文書の視覚的効果を表すもので、HTML と組み合わせて使用します。従来、HTML は文章の構造（タイトルやヘッダーなど）と視覚的効果（フォントや色など）をタグやその属性で表してきました。 しかし、文章の構造とその表現方法は明確に
text-align – インライン要素の揃え方を指定するCSSプロパティ
left text-align プロパティに left を指定すると、テキストが左に寄せられて、行頭が揃えられる。日本語の横書きや英語では、テキストは左寄せにするのが一般的である。一般的な体裁であるため、初期値となっている。 <p style="text-align: left"> In a hole in the ground there lived a hobbit. Not a nasty, dirty, wet hole, filled with the ends of worms and an oozy smell, not yet a dry, bare, sandy hole with nothing in it to site down on or to eat: it was a hobbit-hole, and that means comfort. </p> In a
CSS: current status and future directions for global languages
CSS: current status and future directions for global languages for EPUB EGLS Sapporo F2F 2010-08-03 MURAKAMI Shinyu (Antenna House, W3C CSSWG) General What is CSS2.1 and when will it be completed? What is CSS3 and when will each module is expected to be completed? W3C process (editor's draft, working draft, CRs, Proposed RECs, REC, etc.) Why is CSS development so slow? Overview of CSS3 modules: wh
Web標準仕様 日本語訳一覧
CSS メディアクエリー 画面サイズなど、媒体の持つ特徴を利用し、スタイルシートを適用するための仕組みを提供します。 原文: “Media Queries” (W3C Recommendation 19 June 2012) セレクタ Level 3 :nth-child()や:not()など、新しいセレクタを定義するモジュールです。 原文: “Selectors Level 3” (W3C Recommendation 29 September 2011) CSS 名前空間モジュール CSSで名前空間を扱う@namespace規則を定義しています。 原文: “CSS Namespaces Module” (W3C Recommendation 29 September 2011) CSS カラーモジュール Level 3 opacityやrgba()など、色に関する値やプロパティを定義す
PDF 千夜一夜: 日本語組版はグリッドベースで行うと言って良いのか？(1)
日本語組版はグリッドベースで行うと言って良いのか？(1) この間の多言語組版研究会で、ちょっと気になったことをもう少し突っ込んでみます。 それは、「日本語組版はグリッドベースで行う」と言う表現についてです。 昨年のXSL-FOV2.0のワークショップで、ジャストシステムの大野氏が、日本語組版からXSL-FOへの要求事項ということでプレゼンテーションを行いました。このことは、既にブログでも触れています。 2006年12月12日 XSL-FO 2.0 Workshop続き先日のPage2007でも、2月9日の「D6XMLと高度な日本語組版の実現」というセッションで、報告がありましたので、お聞きになった方も多いと思います。 そのプレゼンテーションのスライドに次の図があります。 この図は、まさしく、日本語組版はグリッドベースで行うということを言っていると思います。XSL-FO 2.0 Worksh
PDF 千夜一夜: 2007年02月27日 アーカイブ
日本語組版はグリッドベースで行うと言って良いのか？(5) CSS3 のText Moduleの10. Document gridの部分、初めて、ざっと見てみましたがどうも大きな問題がありそうです。このまま仕様になったら大変なことです。以下に簡単に抄訳しておきます。 10.1 ドキュメント・グリッドとはなにか？ 中国語や日本語のグリフは、ページの上に1次元または2次元で指定されたグリッドに従って配置するのが一般的である。文字詰め方向のグリッドは、行の中の文字の進行幅を変更することで得られる。 ルーズ・グリッドモード、原稿モード、固定幅モードのようないくつかのモードがあり、line-grid-mode属性でこの進行幅の変更の許可／不許可を切り替え、line-grid-progression属性でその値を設定する。 10.2 line-grid-mode 値：noneまたはideographまた
CSSにおける国際的レイアウト
この文書は、W3Cにより作成されW3Cワーキングドラフトとして公開されている "International Layout in CSS" (http://www.w3.org/TR/1999/WD-i18n-format-19990127/) を、どら猫本舗が翻訳したものです。 この文書の原文はワーキングドラフトです。将来の改訂が予定されていることにご注意ください。最新版の仕様書は http://www.w3.org/TR/WD-i18n-format/ にあります。 正式な仕様書はW3Cサイトにある英語版です。この日本語版は参考にすぎません。 この文書には翻訳上の誤りがあるかもしれません。どら猫本舗は翻訳の正確性を保証しません。あくまでご自身の責任でご利用ください。 お気付きの点がありましたらどら猫本舗までお知らせください。 WD-i18n-format-19990127 CSSにおける
CSS3リファレンス
背景 background-clip …… 背景の適用範囲を指定する background-origin …… 背景の基準位置を指定する background-size …… 背景画像のサイズを指定する 角丸 border-radius …… 角丸をまとめて指定する border-top-left-radius …… 左上の角丸を指定する border-top-right-radius …… 右上の角丸を指定する border-bottom-left-radius …… 左下の角丸を指定する border-bottom-right-radius …… 右下の角丸を指定する 画像ボーダー border-image …… 画像ボーダーを指定する border-image-source …… 画像ボーダーに使用する画像ファイルを指定する border-image-slice …… ボーダー画像の
text-align: justify で日本語テキストも両端揃えにしたい！ (CSS組版ブログ)
日本語組版ではテキストを両端揃えにするのが標準です。CSS での text-align: justify の指定がそれに相当します。 ところが、日本語のウェブサイトでほとんどその指定が使われていなくて、行末が揃わないでがたがたになっています。 text-align: justify を指定しても、ブラウザによっては日本語の文字間は調整されず、欧文スペースだけが広がってしまい、見栄えが悪くなってしまうのがひとつの理由でしょう（あるいは単に組版にこだわらないだけ）。 現在の主要なブラウザでは、Firefox (Mozilla) なら text-align: justify の指定で日本語の両端揃えがされます。Safari と Chrome (どちらもWebKit)、Opera は、欧文スペースだけが広がります。IE は、あまり知られていないのですが、text-justify: inter-id
EPUBやCSSと日本語レイアウト、HTML5と電子書籍
EPUB や CSS と日本語レイアウト HTML5 と電子書籍 アンテナハウス 村上 真雄 @MurakamiShinyu 2010-07-14 「第８回HTML5とか勉強会」での講演資料 [HTML5プレゼンツールNerine版もあります] 村上 真雄 (@MurakamiShinyu) 自己紹介 Twitterで公開しているプロフィール： XML/HTML+XSL/CSS 自動組版ソフト Antenna House Formatter 開発者 アンテナハウス取締役 W3C会員としてXSLとCSS3仕様に関わる HTML5 IG JP共同議長 JEPA EPUB研究会員 世界標準仕様（特にHTML+CSSとその応用のEPUB）で、まともな日本語組版を可能にしたい Antenna House Formatter 1999年、当時W3Cドラフトだった XSL (Extensible Sty
CSS Ruby Annotation Layout Module Level 1
CSS Ruby Annotation Layout Module Level 1 Editor’s Draft, 15 July 2024 More details about this document This version: https://drafts.csswg.org/css-ruby-1/ Latest published version: https://www.w3.org/TR/css-ruby-1/ Previous Versions: https://www.w3.org/TR/2021/WD-css-ruby-1-20211202/ https://www.w3.org/TR/2021/WD-css-ruby-1-20210310/ https://www.w3.org/TR/2020/WD-css-ruby-1-20200429/ https://www.w
ウェブページで縦書きレイアウト - tategaki.info
レスポンシブデザインを採用したページヘの設置を想定した h2vR.js を公開しました。 従来の h2v.js とは設定方法が異なります。 詳細は こちら をご覧ください。 このサイトは、主要なウェブブラウザ上で縦書きレイアウトを実現できるJavaScript・h2vR.js および レガシーバージョン h2v.jsのメインサイトです。 Webページを縦書きに！ 縦書きのホームページを作ってみたい…と思ったことはありませんか。 ウェブページで縦書き表示を実現する JavaScript・h2vR.js および h2v.js が、その思いをサポートします。 h2vR.js 縦書きレイアウト実現のための JavaScript "h2vR.js" は、レスポンシブデザインを採用しているページへの対応を強化したバージョンです。 普通に（横書きで）html コーディングしたページ内の指定したエリアを自
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
)
DTPのスタイル機能と、Web/ePubのCSSの違い（1）｜DTP Transit
サービス終了のお知らせ
『電子書籍のePubで対応しているCSSプロパティ一覧』
[CSS]CSS3で何ができるの？ という時にみておきたいサイト集