コンピュータ情報: #doc css

ラベル #doc css の投稿を表示しています。すべての投稿を表示

2017年7月19日水曜日

[code] css,styleタグ記述

＜style type="text/css"＞
#databear2278 {
background-color: #ffffff;
font-size: 8pt;
color: #222222;
border: solid 2px #888888;
width: 170px;
margin-left: 5px;
text-align: left; vertical-align: top;
border-radius: 8px;
}
#databear2278 img {
width: 80px;
height: 80px;
}
＜/style＞
＜div id="databear2278"＞
..............................
＜/div＞

2017年7月6日木曜日

css,rgba表記

背景色は半透明にするものの、文字色は不透明にしたいなら、rgba表記
冒頭の例のように、背景色には透明度を指定して背後を透かせつつ、文字色には透明度を指定せずに不透明な色を指定したい場合には、opacityプロパティではなく、色の指定にRGBAカラーモデルを使うと良いでしょう。
例えば以下のようにCSSソースを記述します。
CSSソース
span {
background-color: rgba( 204, 255, 204, 0.55 );
color: blue;
}

にししふぁくとりー
http://www.nishishi.com/css/text-opacity-rgba.html

《2017年6月25日 13:00 公開/更新》
テキストの背景色を半透明にしつつ、文字色は不透明にするCSS [CSS3,テキスト,色]
スタイルシートを使って対象の要素を半透明にしたい場合(透明度を指定したい場合)はopacityプロパティを使えば良いだけです。
テキストでも画像でも半透明になります。
しかし「対象の要素の全体」が半透明になってしまいます。
そうではなく、「背景色は半透明にして背後を少しだけ透過させたいが、文字色は不透明にしてハッキリ見えるようにしたい」という場合もあるでしょう。
その場合はRGBAカラーモデルでの色指定を使うと望みの配色が作れます。
テキストの背景色を半透明にしつつ、文字色は不透明にしたい場合もある
▼背景色は半透明だが、文字色は不透明にした例
▼背景色も文字色も合わせて半透明にした例
背景色も文字色も合わせて半透明にしたければ、opacityプロパティ
背景色は半透明にするものの、文字色は不透明にしたいなら、rgba表記
テキストの背景色を半透明にしつつ、文字色は不透明にしたい場合もある
スタイルシートを使って対象の要素を半透明にしたい場合(透明度を指定したい場合)は、opacityプロパティを使えば良いだけです。
テキストでも画像でも半透明になります。簡単です。
しかし、その場合は対象の要素の全体が半透明になってしまいます。
テキストを掲載する場合の色指定には主に「背景色」と「文字色」の2つがあります。(他に、枠線色などもありますが。)
このうち、
背景色は半透明にして、背後を少しだけ透過させたいが、
文字色は不透明にして、背後は透過しないようにしたい
という場合もあるでしょう。
文字の読みやすさを重視する場合には、文字そのものは透過しない方が良いかも知れませんから。
例えば、以下のサンプルでは、背景色の緑色は40％ほど透明になっていますが、
文字色の青色は不透明(＝まったく透過しない青色)になっています。

にししふぁくとりー
http://www.nishishi.com/css/text-opacity-rgba.html

16進数カラーコード・RGB・RGBA変換ツール
16進数形式のカラーコードを入力すると
RGB・RGBA形式に変換します。　

16進数カラーコード・RGB・RGBA変換ツール
http://j-press.info/16torgba/

css,transform:rotate()

CSS：CSSで要素を回転させる方法「transform:rotate()」
Posted on 2014年8月17日
CSSの「transform:rotate()」を使用するとテキストや画像、指定した要素を
回転させて表示することができます。
transform: rotate(10deg);
rotate()には回転する角度を指定します。
下記のように「-」マイナスで指定することも可能です。
その場合は逆方向に回転して表示されます。
transform: rotate(-10deg);
要素を回転させて文字や画像を傾けて表示させたい場合などに利用できそうです。

raining
http://raining.bear-life.com/css/css%E3%81%A7%E8%A6%81%E7%B4%A0%E3%82%92%E5%9B%9E%E8%BB%A2%E3%81%95%E3%81%9B%E3%82%8B%E6%96%B9%E6%B3%95%E3%80%8Ctransformrotate%E3%80%8D

下記にCSSの「transform:rotate()」を使用して、要素を回転させて表示した時の方法を記載します。
■ 「transform:rotate()」の使用方法
【CSS】

【HTML】

test

raining
http://raining.bear-life.com/css/css%E3%81%A7%E8%A6%81%E7%B4%A0%E3%82%92%E5%9B%9E%E8%BB%A2%E3%81%95%E3%81%9B%E3%82%8B%E6%96%B9%E6%B3%95%E3%80%8Ctransformrotate%E3%80%8D

css_transform_rotate_1
「transition」プロパティを使用すれば、hoverした時にアニメーションで回転させることも可能です。
■ hover時にアニメーションで回転させる場合
【CSS】

【HTML】

test

他にも「rotateX()」「rotateY()」「rotateZ()」「rotate3d()」で
指定することもできます。
要素を傾けて表示させたり、hoverした時に要素を回転させたりなど、
サイトに動きが出せて面白いかもしれないです。

raining
http://raining.bear-life.com/css/css%E3%81%A7%E8%A6%81%E7%B4%A0%E3%82%92%E5%9B%9E%E8%BB%A2%E3%81%95%E3%81%9B%E3%82%8B%E6%96%B9%E6%B3%95%E3%80%8Ctransformrotate%E3%80%8D

2017年6月8日木曜日

css,table,,

[HTML-CSS] コピペですぐに使える「table」のコードサンプル - Webworker's Clip

Webworker's Clip
http://webworkersclip.com/2875/

html
項目名
内容がはいります。
項目名
内容がはいります。
項目名
内容がはいります。

Webworker's Clip
http://webworkersclip.com/2875/

css
table.type02 {
border-collapse: separate;
border-spacing: 0;
text-align: left;
line-height: 1.5;
border-top: 1px solid #ccc;
border-left: 1px solid #ccc;
}
table.type02 th {
width: 150px;
padding: 10px;
font-weight: bold;
vertical-align: top;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
border-top: 1px solid #fff;
border-left: 1px solid #fff;
background: #eee;
}
table.type02 td {
width: 350px;
padding: 10px;
vertical-align: top;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}

Webworker's Clip
http://webworkersclip.com/2875/

2017年5月4日木曜日

フォント表示

Revised 2003/12/10
CSS ではフォントの種類を指定できます。
フォントとは、描画される文字のことで、
文字の種類には、ゴシック体、明朝体などがあります。
各々のフォントの種類には、太字や斜体などのバリエーションがあります。
CSS では、次の 5 つの総称名で分類されています。これらを、 generic family と呼びます。
sans-serif
ゴシック体風。ひげ無し。
serif
明朝体風。ひげ付き。
monospace
等巾フォント。大文字、小文字、英数文字の巾が等しい。
fantasy
装飾体。花文字、ポップ文字など。読めないフォント（絵文字、シンボル・フォント）は除く。
cursive
手書き体風。

フォント表示サンプル
http://msugai.fc2web.com/web/app/font.html

2017年4月21日金曜日

インラインフレーム内の背景を透過する(CSS)

インラインフレーム内の背景を透過する(CSS)
background-color: transparent;
background-color は、全てのタグ（要素）に適用できます。
background-color は、背景色を指定するプロパティです。
このプロパティを「インラインフレームに読み込むページ」のタグ（要素）に設定（値：transparent）し、
インラインフレーム内の背景を透過（透明化）させます。

北大農学部
http://www.agr.hokudai.ac.jp/useful/CSS/h3_iframBackground.htm

css,段落ち防止

floatで崩れた？コレでなおせ！| m-School
段落ちするときはちゃんと計算して対処
divのブロックを左右に並べた2段組を作っていて、右のブロックが崩れて下に落ちた！なんてことがあります。所謂段落ちです。
この原因は単純です。親のブロックの幅に、左右にわけたブロックの合計幅が収まらないと、段落ちします。

幅が足りずに段落ちする
きちんと合計幅を計算して、左＋右の合計が、親ブロックを超えないようにします。
このとき、padding,border,marginなどの値もしっかり計算に含めましょう。
このとき、IE6のダブルマージンバグなどにハマらないように気をつけましょう。

m-School
http://m-school.biz/dev/css-coding/047-float-repair.htm

******************************************************************************

#parentBox {
 width: 600px;
 overflow: hidden; /* heightを戻す */
}
#childBox1 {
 width: 200px;
 float: left;
}
#childBox2 {
 width: 400px;
 float: right;
}

******************************************************************************

2017年4月4日火曜日

css,inline-block

簡単な方法(inline-blockを使用)
同様の事を、displayプロパティの値をinline-blockにすることで実現できる。
.box2 {
display: inline-block;
width: 200px;
height: 100px;
margin: 1em;
}

CSSレイアウトを学ぶ
http://ja.learnlayout.com/inline-block.html

CSSのみで横並びの要素の高さを揃える | HTML・CSS・JavaScriptのテクニック集 | Webサイト制作支援 | ShanaBrian Website
JavaScriptを使わずCSSのみで横並びの要素の高さを揃えるには、以下の方法で可能です。
フレキシブル・レイアウトを使用する
最大の行数を固定とする
table-cellを使用する
inline-blockを使用する
ネガティブmarginを使用する
フレキシブル・レイアウトを使用する
フレキシブル・レイアウトを使用します。
この指定が一番楽で柔軟な実装方法ですが、古いバージョンのブラウザの一部が対応していませんので注意が必要です。
※ 対応ブラウザは以下を参照
フレキシブル・レイアウトの基本
【HTML】

テスト

テストテストテストテストテストテストテストテスト

テストテストテストテスト

テストテスト

テスト

テストテストテストテストテストテストテスト

テストテストテストテスト

テストテスト

【CSS】
ul.sample {
margin:0 0 10px;
display:-webkit-box;
display:-moz-box;
display:-ms-box;
display:-webkit-flexbox;
display:-moz-flexbox;
display:-ms-flexbox;
display:-webkit-flex;
display:-moz-flex;
display:-ms-flex;
display:flex;
-webkit-box-lines:multiple;
-moz-box-lines:multiple;
-webkit-flex-wrap:wrap;
-moz-flex-wrap:wrap;
-ms-flex-wrap:wrap;
flex-wrap:wrap;
width:396px;
}

ul.sample li {
margin:0 10px 10px 0;
padding:10px;
border:1px solid #aaa;
width:100px;
background-color:#ddd;
list-style:none;
}

ShanaBrian Website
http://shanabrian.com/web/html-css-js-technics/css-equal-height.php

2014年7月21日月曜日

css,カラム落ち防止

1<style>

2.contBlock {

3  width:500px;

4  margin:0 auto;

5  background:#fff;

6  border:2px solid #ccc;

7}

8.contBlock .dreamBox01 {

9  width:300px;

10  height:80px;

11  padding:10px;

12  margin:20px auto;

13  background:#8EF9FF;

14  border:4px solid #ccc;

15}

16.contBlock .dreamBox02 {

17  box-sizing:border-box;

18  -webkit-box-sizing:border-box;

19  -moz-box-sizing:border-box;

20  -ms-box-sizing:border-box;

21  -o-box-sizing:border-box;

22  width:300px;

23  height:80px;

24  padding:10px;

25  margin:20px auto;

26  background:#A4FFA6;

27  border:4px solid #ccc;

28}

29</style>

30<div class="contBlock">

31    <div class="dreamBox01"></div>

32    <div class="dreamBox02"></div>

33</div>

******************************************************************************

2014年3月9日日曜日

[Code] epubとcss

本好きに送る「電子書籍のつくり方」講座

誰でも簡単手作り電子書籍

2014-03-02

電子書籍づくり実践（EPUBの構造　xhtmlとcss）

このブログでは、前々回のエントリまで数回に渡り

文章にタグ付けをし

用意したEPUBテンプレートにコピペし

その内容をブラウザで表示確認をする

という作業をして来ました。今回はそこで使った「テンプレート」を通して、EPUBの構造を学んでおきましょう。「構造」などというと難しく聞こえますが、押さえておくのは下記の点だけです。

■.epubとは

必要なファイル類を定められたフォルダ構成に従って配置し、圧縮したもの。

以上です。

テンプレートとして、既にこの構造になっているデータ*1があるわけですから、特にこの構造を覚えるたりとか、イチから自分で作ったりする必要もありません。現時点で押さえておきたいのは

☆テンプレートのどこに手を入れる必要があるか？

☆その部分はどんな働きをしているのか？

という点だけです。それではEPUBを構成する「中身」を見ていきましょう。ここからは書かれる文字を追うだけでなく、前々回使ったテンプレートを開いて、内容を対比させながら読み進めると理解しやすいと思います。

■xhtmlファイルは「本の中身」（xhtmlフォルダ）

電子書籍づくりで一番たくさんの手を入れるのが、xhtmlフォルダの「ページファイル（拡張子.xhtml）」です。このファイルに、電子書籍で表示させたい内容を書き込みます。書き込むルールはhtmlが進化したxhtmlという記述言語です。*2

■cssで「見た目」をコントロールする（styleフォルダ）

xhtmlフォルダと同じ階層に「style」という名前のフォルダあります。このフォルダには、拡張子が「.css」となっているファイルが複数入っています。「css」とは、フォルダ名の通り、「スタイル」をコントロールするためのファイルです。といっても「？」だと思うので、それでは実際に「コントロール」してみましょう。

スタイルをコントロール「する側」の記述

前々回に使用した「book-template - コピー」フォルダを用意してください。その中にある「styleフォルダ」を開き、その中の「book-style.css」をエディタで開きます。開いたら「tobira-midashi」で検索を掛けます。そうすると該当箇所として下記が表示されます。

ここに下記の内容を追記します。

.vrtl .tobira-midashi {

と

}

の間に

font-size:3em;

.vrtl .oo-midashi {

と

}

の間に

font-size:2em;

このようになります。

問題なければ上書き保存してください。それでは、いま記述した内容が何なのか説明します。

font-size

とは読んで字の通り「文字（フォント）のサイズ」を指定しています。

とは文字サイズの単位で、基本サイズを「1em」とし、数値が大きくなるほど文字サイズも大きくなります。上のように記述することによりスタイル名*3tobira-midashi指示内容文字サイズを3emにスタイル名oo-midashi指示内容文字サイズを2emにというスタイルが、CSSのファイルに登録されたことになります。次にこのスタイルの指示を「受ける側」の設定をします。今回は「tobira-midashi」のスタイルを反映させるのはh1の文章「oo-midashi」のスタイルを反映させるのはh2の文章とします。

スタイルをコントロール「される側」の記述

xhtmlフォルダ内の「p-002.xhtml」をエディタで開き、下記の検索置換を2回に分けて掛けます。

検索<h1>置換<h1 class="tobira-midashi">

検索<h2>置換<h2 class="oo-midashi">

下のようになればOKです。問題なければ上書き保存してください。

cssに記述したスタイルを反映させるには、上のように反映したい箇所の開始タグに「class="スタイル名"」と記述をします。

それでは文字サイズの指定がされた「p-002.xhtmlの見出し（h1、h2）」がどのように見えるか確認してみましょう。

p-002.xhtmをブラウザで開きます。

見出しの文字サイズが大きくなっていることが確認できます。またh1、h2でそのサイズが異なっている（h1のほうがh2より大きい）のも確認できます。これが「CSSに登録されたスタイルが、xhtml側のしかるべき場所（今回の場合h1とh2）に反映させた状態」です。

■CSSについての知識

今回、話しの中心となった「CSS」ですが、説明としてはこれから電子書籍をつくり進めるうえで、必要最低限の内容になっています。こちらもHTML同様、知識の積み増しをした方がより楽しく電子書籍を制作することができますし、またweb制作にも深く関係している技術なので、そちらの知識習得も兼ねて学び進めるのも良いと思います。

初心者向けの解説サイトとしては

やさしいホームページ入門：CSS入門

http://www.ink.or.jp/~bigblock/css/index.html

が解りやすくておすすめです。また「CSS 入門」などのキーワードでGoogle検索して、自分に合った学習サイトを探してみるのも良いかもしれません。そうしてCSSへの理解を深められたら、現在使っているEPUBテンプレートと一緒にダウンロードしたデータの中にある「CSS機能一覧.pdf」に目を通してみてください。これはテンプレート内で「既に設定されているスタイルの一覧」で、今後電子書籍づくりを進める際にとても役に立ちます。

■今日のまとめ

EPUBの構造。今回は

xhtmlフォルダの「.xhtml」

styleフォルダの「.css」

の役割について説明しました。その関係性は

.css：スタイルを登録するファイル

.xhtml：cssに登録されたスタイルが反映されるファイル

となります。

*1:日本電子書籍出版社協会電書協EPUB 3 制作ガイド。下記よりダウンロードできます。http://www.ebpaj.jp/guide.html

その中にある「book-template.epub」というファイルの拡張子を.zipに変更し、解凍すると上図の構造を持ったフォルダが作られます

*2:ここでhtmlとxhtmlの違いは意識しなくてもOKです。同じようなものと理解しておいてください。

*3:この部分を正式には「class名」といいます

k_airyuu 2014-03-02 14:15

本好きに送る「電子書籍のつくり方」講座

http://k-airyuu.hatenablog.com/entry/2014/03/02/141514

CSS For Epub

Back To Top横書き化基本縦書き化基本圏点11種類縦書き標準横書き標準クリップEbookSoftPackage

電子書籍を作るときには、CSSファイルが必要になります。これは、Sigilでは「スタイルシート」として扱われているものです。たてがきにするためには、CSSファイルのほかに、Epubファイルの先頭部分などを書き直す必要があります。それをおこなったうえで、以下に公開するCSSファイルをご利用ください。

■横書き化基本

▽〈html〉タグを次のよう書き直す。

〈html

xml:lang="ja"

xmlns:epub="http://www.idpf.org/2007/ops"

xmlns:xml="http://www.w3.org/XML/1998/namespace"〉

これは4行にもおよび厄介ですが、次の一行でも十分機能します。

〈html xmlns="http://www.w3.org/1999/xhtml"〉

これをコピペしてお使いください。

▽ヘッダ（<head>タグと</head>タグのあいだ）にスタイルシートを読み込むためのつぎのような一文を加える。

〈link class="horizontal" href="../Styles/Style0001.css" rel="stylesheet" title="horizontal" type="text/css" /〉

ここで注意しておきますと、本格的な電子書籍を作るためには、"Style0001.css"ファイルの内容を以下に紹介するCSSファイルの内容によって書き直す必要があります。"Style0001.css"ファイルは、Sigilでは左端ブックブラウザーにある「Styles」を右クリックして、「空のスタイルシートを追加」をクリックすると自動的に生成されます。

以上をすべて書き込んだ「SectionTemplate.xhtml」というファイルを作っておきましたので、このファイルを読み込むことによって、新しいセクションファイルの作成は楽になります。

■セクションファイル（横書き）のダウンロード

▽ページ送り

縦書きの書物として右から左にページ送りするように設定するには、左端のブックブラウザーの下から二番目にある「content.opf」の内容を書き換えます。そのやり方。

〈spine toc="ncx"〉

をだまってつぎのように書き直す。

〈spine page-progression-direction="ltr" toc="ncx">

以上の処理をおこなったうえで必ず、「Styles」にまず「空のスタイルシートを追加」し、そこに以下の「縦書き用の基本的CSS」をコピー・ペーストしてください。とりわけ、その先頭部分である

html {

epub-writing-mode:horizontal-tb;

-webkit-writing-mode:horizontal-tb;

}

は必ず書き込んでおかねばなりません。これで縦書き用の電子書籍を作ることができます。

■縦書き化基本

▽〈html〉タグを次のよう書き直す。

〈html

xml:lang="ja"

xmlns:epub="http://www.idpf.org/2007/ops"

xmlns:xml="http://www.w3.org/XML/1998/namespace"〉

これは4行にもおよび厄介ですが、次の一行でも十分機能します。

〈html xmlns="http://www.w3.org/1999/xhtml"〉

これをコピペしてお使いください。

２．ヘッダ（〈head〉タグと〈/head〉タグのあいだ）にスタイルシートを読み込むためのつぎのような一文を加える。

〈link class="vertical" href="../Styles/Style0001.css "

rel="stylesheet" title="vertical" type="text/css" /〉

ここで注意しておきますと、本格的な電子書籍を作るためには、”Style0001.css”ファイルの内容をいかに紹介するCSSファイルの内容によって書き直す必要があります。”Style0001.css”ファイルは、Sigilでは左端ブックブラウザーにある「Styles」を右クリックして、「空のスタイルシートを追加」をクリックすると自動的に生成されます。

■ページ送り

〈spine toc="ncx"〉

をだまってつぎのように書き直す。

〈spine page-progression-direction="rtl" toc="ncx"〉

html {

width: 100%;

writing-mode: vertical-rl;

-epub-writing-mode: vertical-rl;｝

は必ず書き込んでおかねばなりません。これで縦書き用の電子書籍を作ることができます。

■セクションファイル（縦書き）のダウンロード

圏点

横書き標準ＣＳＳ　下記のクリップのなかに最新版が収納されて居rます。2018/3/1改訂

縦書き標準ＣＳＳ　下記のクリップのなかに最新版が収納されて居rます。2018/3/1改訂

クリップ 2018/3/5 改訂。ここをクリックするとzipホルダーがダウンロードされます。そのなかにｃｓｓとclipファイルが入っています。

キンドル本作制のためのソフト・パッケージ。2018/3/1改訂。電子書籍を作るために必要な無料の基本ソフトを収めました。各ソフトについては、拙著『電子書籍の効率的な作り方』をご参照ください。Windows用とMac用があります。

Windows用 (2018年03月05日改訂) 追加ソフト（20180324, 14.4MB）

Mac用　(2018年03月05日改訂)追加ソフト（20180324, 15.8MB）

.PKGファイル　(2018年05月17日改訂)　　

CSS For Epub

http://kogawara.sakura.ne.jp/Ebook/CssForEpub/cssforepub.html

今更だけどEPUB（イーパブ）ファイルどうやって読むの？

2017年4月22日

@WebfieldTW

■EPUB（イーパブ）っていったいなに？

EPUBとは、「電子出版」を意味する「Electronic Publication」からとった名称で、 International Digital Publishing Forum (IDPF) (http://www.idpf.org/) が主体となり、仕様の策定や普及を行っている電子書籍を読むためのファイルフォーマットです。

■EPUBファイル構造

HTML（ホームページ制作の言語）を土台としており、今後デバイスがなくなった等の理由で読めなくなることはまずありません。

EPUBファイルの構造を簡単に言えば、HTMLファイルをzipでまとめ、拡張子を.epubとしたものです。ですので、「.epub」ファイルの拡張子を.zipに変更すれば、zipファイルとなり、解凍すればHTMLファイルとして構成を確認することができます。HTMLファイルとして読めるのですが、ちょっと不便です。そこで便利に読むために登場するのが・・・。

■EPUBを読むには

電子書籍の共通フォーマットであるEPUB形式のファイルを閲覧するには、いろいろなリーダーが出ていますが、代表的なものは「Adobe Digital Editions」や「iBook」などがあります。Macユーザなら迷わずiBooksでしょう。デフォルトでインストールされているアプリですので、PCでもiPadでもiPhoneでも安心して読むことが出来ます！万が一インストールされていない場合でもAppStoreやiTunesから無料で簡単にインストールすることが出来ます。

WindowsユーザはAdobe Digital Editionsがオススメです。Adobeによって開発されたEPUBリーダーですがPDFドキュメントも読むことが出来ます。

以下からダウンロード出来ます。

http://www.adobe.com/solutions/ebook/digital-editions/download.html

その他、オンライン上で使用できるEPUBリーダーもあります。Google Chromeブラウザの場合、Readiumという拡張機能が有名です。

https://chrome.google.com/webstore/detail/readium/fepbnnnkkadjhjahcafoaglimekefifl?hl=ja

Firefoxブラウザの場合、ePUBReaderという拡張機能も！拡張子が.epubのファイルを受け取ったけれど、どうして開いたらいいか分からないという時には、とりあえず、ブラウザのこういったアドオンは手軽でいいかも知れません。

https://addons.mozilla.org/ja/firefox/addon/epubreader/

Metell

https://www.appleach.co.jp/2017/04/210/

電子書籍フォーマットの本命、「EPUB」をいまのうちに理解しておく

2011年3月10日

Publickeyでは、現在策定中の電子書籍フォーマット「EPUB 3」の動向について積極的に伝えていますが、ここでちょっと立ち止まって、EPUB 3とは何か？という基本的な情報について簡単にまとめておこうと思います。

■EPUBの仕様はオープンかつフリー

EPUBとは、「電子出版」を意味する「Electronic Publication」からとった名称といわれていて、International Digital Publishing Forum（IDPF、国際電子出版フォーラム）が策定をすすめている電子書籍のファイルフォーマットです。ちなみにEPUBは「イーパブ」と読みます（EPUB 3はイーパブスリー）。また、表記は「ePub」と表記されることもありますが、最近は「EPUB」とすべて大文字で表記されることが多いようです（仕様書などでは「EPUB」と表記されています）。

イースト株式会社の高瀬拓史氏による資料「EPUBの現状とEPUB3.0への期待」から内容を少しお借りしつつ、EPUBがどういうものかを紹介していきましょう。

EPUBの標準仕様としての特徴はオープンかつフリーであることです。そしてその具体的な実体は、XML、XHTML/HTML/CSSファイルなどをまとめてZIPで圧縮し、.epubという拡張子を付けたもの。

EPUBの仕様は基本的にWeb標準であるHTMLやCSSをベースにしています。そして現在策定中のEPUB 3はHTML5やCSS3をベースにしているため、基本的にHTML5やCSSが備えている機能はEPUBでそのまま利用可能です。文中にCanvasで描いたグラフィックを入れたり、Videoタグで動画を入れたり、CSS3のアニメーションを利用することも可能です。EPUBリーダーによってはJavaScriptも動作するでしょう（JavaScriptの動作は仕様上必須とはなっていません）。

EPUBで電子書籍を作成するということは、Webサイトを作成するのと同じようにHタグで見出しを書き、Pタグで本文を書き、CSSでレイアウトをして、それをZIPで圧縮する、ということになります。ここから分かるように、EPUBはWebと非常に親和性が高く、これまでのWebのノウハウを使って電子書籍を作成することが可能です。このWebとの親和性が、EPUBを電子書籍フォーマットの本命と位置づけさせる最大の要素です。

EPUB 3 | International Digital Publishing Forum

ただしWebとEPUBの違いは、EPUBは電子書籍リーダーにダウンロードしてオフラインで参照することを前提にしているため、画像や動画などすべてのファイルがまとめて圧縮されていること。そして、表紙や目次や索引、章立て、ページ番号といった、（Webには存在しない）書籍に特有の内容や機能を記述するためのマークアップ方法やファイル構成が決められている、ということです。

EPUB 3の仕様はIDPFのサイト内の「EPUB 3 | International Digital Publishing Forum」のページから参照できます。

参考記事

EPUB3を、世界各国の代表から構成されるISO／IEC（国際標準化機構／国際電気標準会議）による公的標準（デジュールスタンダード）にする動きが始まっています。

EPUB 3、今夏以降にISO国際標準となる見通し

EPUB 3対応電子書籍リーダーのリファレンス実装（＝見本となる実装）をオープンソースで開発するプロジェクト「Readium」が公開されました。

EPUB 3リーダーのリファレンス実装「Readium」、オープンソースで開始

JEPA（日本電子出版協会）とイーストは、EPUB 3に対応した電子書籍の作成方法を解説した「EPUB日本語文書作成チュートリアル」と、EPUB 3に対応した電子書籍リーダーを実装するためのガイドラインのための「EPUB日本語文書対応Reading System実装ガイドライン」の公開を開始しました。

EPUB 3に対応した電子書籍の作成チュートリアル公開

■EPUBは「リフロー」が大きな特徴

EPUBのレイアウト上の最大の特徴が「リフロー」（再流し込み）です。リフローのもっとも身近な例がWebページです。Webページは、Webブラウザのウィンドウの大きさに合わせて一行の長さや縦方向に表示される行数が変化します。EPUBのレイアウトも同様に、iPadを縦にして表示したときと横にして表示したときで1行の文字数が変化するのに合わせてレイアウトが変化します。もっと小さいiPhoneの画面で見れば、今度は画像が1つと数行くらいしか表示されないかもしれません。EUPBはWebページと同じように、画面の大きさに合わせてレイアウトが変化するのです。EPUBではどのデバイスでみるかは利用者の環境に依存しますから、雑誌でいう見開きで完結したレイアウト、といったことをすべてのデバイスで表現することは事実上できません。

小説や文学作品のような文字中心の書籍では、画面の行数や文字数が変化してもそれほど問題にはならないと予想されますが、ページごとに写真と見出しと文字のバランスを考えてレイアウトされる雑誌や実用書などでは、リフローが前提となっているEPUBでどのようにレイアウトするかは課題となっています。リフローしても美しく見えるようなレイアウトと、画面の幅によってスタイルシートを切り替える機能を使いこなすテクニックなどが今後開発されていくことでしょう。あるいは出版物ごとに推奨デバイスが示されるなどの動きもでてくると予想されます。

■EPUB 3からは縦書き、ルビなどに対応

日本でEPUB 3が注目される背景には、EPUB 3ではいままでのEPUBではできなかった縦書き、ルビ、圏点（傍点）といった、日本語の書籍を作成するうえでニーズの高かった表現が可能になり、文芸書などの電子書籍を実現できるようになったことが1つ。もう1つはiPadやKindle、ソニーのReader、シャープのGalapagosといった電子書籍リーダー搭載のデバイスが昨年から一斉に登場しはじめたこと、この2つのタイミングが重なった点にあると思います。EPUB 3の仕様は5月に完成する見通しとなっており、おそらく夏頃にはiPadをはじめとしてEPUB 3に対応する電子書籍リーダー、つまり日本語の縦書きやルビなどを表示可能な電子書籍リーダーが次々に登場してくることでしょう。と同時に、そうした電子書籍リーダーに電子書籍を配信するための電子書籍マーケットもさらに活気を増すはずです。電子書籍の動向に詳しいイースト代表取締役の下川和男氏は、この頃には国内向けのアップルのiBook Storeがオープンするだろうと予想しています。夏頃にはこうした目に見える動きが予想されることから、いまの段階でこれらを先取りしたいと考える企業や個人がEPUBに注目し、いまから情報収集や実験的な製品の発表をはじめているのです。ただし前述のリフローのように、どのデバイスで見ても美しいレイアウトを実現するようなEPUBを作成するのは現時点でかなり難しいといわざるを得ません（iPad限定など画面サイズと電子書籍リーダーを決め打ちしてしまえば、きれいなレイアウトが可能です）。レイアウトをきれいに見せたいならばPDFやアプリ化してしまう方が優れており、EPUB 3が商業的な電子出版で本格的に使われだすには、まだしばらくは電子書籍リーダーやデバイス、そして書籍製作の3つすべての進化と試行錯誤のための時間が必要ではないかと考えています。

（情報開示：EPUBの動向をこうして昨年から記事にしていたところ、JEPA（日本電子出版協会）によるEPUB関連の活動を手伝ってほしいと依頼があり、少し手伝っているところです。3月22日のJEPAの成果報告会にもちょっとだけ登場します）

参考記事

慶應義塾大学SFC研究所、KADOKAWA、講談社、集英社、小学館、出版デジタル機構は、共同で慶應義塾大学湘南藤沢キャンパス（SFC）に、未来の出版に関する研究を行う「Advanced Publishing Laboratory」（APL）を設置することで合意したと発表しました。

Publickey

https://www.publickey1.jp/blog/11/epub.html

2013年11月14日木曜日

css,リンク色パターン

サイト内で複数のリンク色パターンを作る（CSS）
2013-11-30
本日はリンクの色について
通常時、訪問済み、マウスオーバー時、クリック時と色を変えられますが、
メニューとナビではリンク色を変えたい場合。
つまり複数のパターンのリンク色を設定したい場合のCSS記述方法を紹介します。
通常CSSファイルに以下のような記述をするとします。
a:link { color: #000000; }
a:visited { color: #800000; }
a:hover { color: #191970; }
a:active { color: #ff0000; }
これだと、すべてのリンク色に反映されてしまいます。
例えば
通常のリンク色を設定した上で、

の中に貼られているリンク色だけは個別で設定したい場合は、

以下の様にCSSを記述します。
a:link { color: #000000; }
a:visited { color: #800000; }
a:hover { color: #191970; }
a:active { color: #ff0000; }
#navi a:link { color:#CCC; }
#navi a:visited { color:#CCC; }
#navi a:hover { color:yellow; }
#navi a:active { color:red; }
ポイントは、a：　の前に #div名を付ける事により、下４行はdiv指定でリンク色を設定できるという事です。

WEBクリエイターになるための学習
http://dwcc.blog.fc2.com/blog-entry-33.html

2011年3月14日月曜日

[Code] ＆nbsp;(Non-Breaking SPace)

＆nbsp;
HTML での表記			UTF8	サンプル	説明
文字/文字実体参照	数値文字参照 (Unicode)		UTF8
文字/文字実体参照	10進表記	16進表記	16進表記
				\|\|	空白なし(比較用)
			0x20	\| \|	普通の半角スペース
			0xC2A0	\| \|	そこでは改行しないスペース
&ensp;			0xE28082	\| \|	n と同じ幅のスペース
&emsp;			0xE28083	\| \|	m と同じ幅のスペース
			0xE28089	\| \|	細い空白
n/a			0xE2808B	\|\|	ゼロ幅スペース
			0xE28080	\|　\|	表意空白(いわゆる全角スペース)

[Code] ＆nbsp;(Non-Breaking SPace)

＆nbsp; は半角スペースではないというお話

2011-06-28

こんにちはこんにちは！　エンジニア川端です。

たまには目で見てわかるネタも披露したいので、今日は HTML の話です。

「HTML だと半角スペースは   だよ」

というようなお話は未だにあちこちで耳にします。

まぁ、私も十数年前はそう思ってたわけですが、「nbsp ってどういう意味よ？」と思って調べ始めたら、いろいろと勉強になりましたよ、と。

最近ふと思い出したので、ちょっとそのお話を。

そもそも   の「nbsp」って何？　ということなんですが、

「Non-Breaking SPace」

の省略なんですね。よくわからないですが、英文とかで「ここの空白では改行したくない」という時に使うのだそうです。

同じような特殊な「スペース」は他にも

「&ensp; (n と同じ幅のスペース)」や

「&emsp; (m と同じ幅のスペース)」

等あるようで、実際の見た目がどうなるのか、ちょっと比較してみました。

WEBブラウザにもよりますが、結構実際の見た目も違うように思います。

で、冒頭の「半角スペースと  」の件ですが、ちゃんと意識しておかないと「あれ？」と思うことがあります。

「  を半角スペース (0x20) に置き換える」プログラムがあるように、「  を半角スペースに置き換えず、nbsp (0xC2A0) に置き換える」プログラムもありますから、WEB ブラウザのように 0xC2A0 を表示できる場合はいいですけど、表示できないプログラムだと困りますよね。

冒頭の画像は、わが愛するテキステエディタ Emacs だとこんな感じになります、というサンプルでした

おまけとして、  を 0xC2A0 に置き換える例を。雰囲気をお楽しみください。

use HTML::Entities;

use Encode;

use Data::Dumper;

my $text = Encode::decode('utf8', '| | | |');

HTML::Entities::decode_entities($text);

my $encoded = Encode::encode('utf8', $text);

print $text,"\n";

print Dumper $text;

print $encoded,"\n";

exit;

あんまし目で見てわかるネタでもなかったですね。見た目にごまかされずにちゃんと内容を考えよう、というお話でした。

参考URL:

Wikipedia:文字参照

Character entity references in HTML 4

XHTML 1.0 ? DTDs ? Entity Sets

HTML5 ? Named character references

Developpers Blog

https://blog.fenrir-inc.com/jp/2011/06/post_51.html

登録: 投稿 (Atom)