diff --git a/css/font.css b/css/font.css index b4adf82..d728c45 100644 --- a/css/font.css +++ b/css/font.css @@ -1,63 +1,98 @@ @charset "utf-8"; - body { - font: normal normal normal 14px/2em "Lucida Grande", "Lucida Sans Unicode", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo, "MS Pゴシック", Helvetica, Arial, Verdana, sans-serif; - font-family: "Lucida Grande", "MS Pゴシック", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif; - background-color: transparent; - color: #555; - -webkit-font-smoothing: antialiased; -} -article{ - color: #555; - font-size: 14px; - font-family:inherit; - line-height:2em; -} -article h1{ - font-size:2em; - margin: 1em 0; -} -article h2{ - font-size:1.75em; - margin: 0.75em 0; -} -article h3{ - font-size:1.5em; - margin:0.5em 0; -} -article h4{ - font-size:1.3em; - margin:0.3em 0; -} -article h5{ - font-size:1.2em; - margin:0.2em 0; + font: normal normal normal 14px /2em "Lucida Grande", "Lucida Sans Unicode", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo, "MS Pゴシック", Helvetica, Arial, Verdana, sans-serif; + font-family: "Lucida Grande", "MS Pゴシック", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif; + background-color: transparent; + color: #555; + -webkit-font-smoothing: antialiased; +} +article { + color: #555; + font-size: 14px; + font-family: inherit; + line-height: 2em; +} +.title { + text-align: center; +} +.alert { + border-radius: 5px; + -webkit-border-radius: 5px; + -moz-border-radius: 5px; + background-color: #ff6666; + border: 1px solid #FF0000; + color: white !important; + padding: 3px 5px; + font-weight: bold; + margin:5px 0; +} +article h1 { + font-size: 2.5em; + margin: 1em 0; +} +article h2 { + font-size: 1.8em; + margin: 0.75em 0; +} +article h3 { + font-size: 1.4em; + margin: 0.5em 0; +} +article h4 { + font-size: 1.2em; + margin: 0.3em 0; +} +article h5 { + font-size: 1.1em; + margin: 0.2em 0; } article p { - font-size: inherit; - color: inherit; - font-family: inherit; - line-height: inherit; + font-size: inherit; + color: inherit; + font-family: inherit; + line-height: inherit; } article a { - color: #006BFF; - text-decoration:none; + color: #006BFF; + text-decoration: none; } -article a:hover{ - text-decoration:underline; +article a:hover { + text-decoration: underline; } -article span.dd{ - font-size:1.3em; - line-height:inherit; - letter-spacing:-2px!important; - padding:0 2px; - vertical-align:baseline; +article span.dd { + font-size: 1.3em; + line-height: inherit; + letter-spacing: -2px !important; + padding: 0 2px; + vertical-align: baseline; } -article span.tpr{ - font-family:"MS Pゴシック","ヒラギノ角ゴ Pro W3"!important; +article span.tpr { + font-family: "MS Pゴシック", "ヒラギノ角ゴ Pro W3" !important; } - -article ruby rt{ - font-size:65%; +article ruby rt { + font-size: 65%; +} +article ul { + margin-left: 20px; + margin-bottom: 20px; +} +article li { + list-style: disc; +} +article pre { + background-color: whiteSmoke; + display: block; + padding: 8.5px; + margin: 0 0 18px; + line-height: 18px; + font-size: 12px; + border: 1px solid #CCC; + border: 1px solid rgba(0, 0, 0, 0.15); + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + border-radius: 3px; + white-space: pre; + white-space: pre-wrap; + word-wrap: break-word; } diff --git a/index.html b/index.html index 6a9de95..2ac2b8a 100644 --- a/index.html +++ b/index.html @@ -1,225 +1,380 @@ - - - - - IZANAGI - - - - - - - - - - - - - - - + + + + + + - - -
-
-
- -
-
-
- -
-
-
-
- + + + +
+
+
+ +
+
+
+
+

IZANAGI

+
+
+

目次

+ +
+
+

概要

+

+ 〝IZANAGI〟はhtml5+jsで実装されたwebリーダーです。リーダビリティが低いウェブ上の文章をレイアウトデザインに基づいた設計で読みやすい文章にします。 +

+
+
+

実装環境

+
    +
  • + html5 +
  • +
  • + jQuery(1.7.1) +
  • +
  • + jQuery-UI(1.8.16) +
  • +
  • + jQuery-easing +
  • +
  • + jQuery-ui.touch-punch +
  • +
+
+
+

対応ブラウザ

+
    +
  • + Google Chrome +
  • +
  • + Mozila Firefox +
  • +
  • + Safari +
  • +
+

+ ※ Internet Explorerは現状非対応です。 +

+
+
+

機能

+

+ IZANAGIにはブラウザ上で文章を快適に読むために様々な機能が実装されています。左のタスクバーから操作いただけます。 +

+
    +
  • +

    文字の大きさ(font-size)

    +

    + Webデザインにおけるデフォルトのフォントサイズは12pxだと言われます。しかしながら、解像度の高いディスプレイではこれはやや小さく表示されてしまい、文章の可読性を損ないます。 +

    +

    + IZANAGIではシークバーによって文章のフォントサイズを操作いただけます。デフォルトのサイズは14pxです。最小サイズは10px、最大サイズは20pxです。 +

    +
  • +
  • +

    文字色(color)

    +

    + ディスプレイのカラー環境によって黒(#000)や白(#fff)といったwebセーフカラーも発色が微妙に異なります。それらの異なる色環境に左右されることなく、ご自身が一番読みやすい文字濃度をお選びいただけます。 +

    +

    + デフォルトのカラーはRGB(75,75,75) #555です。最高濃度はRGB(0,0,0) #000 最低濃度は RGB(150,150,150) #969696です。 +

    +
  • +
  • +

    フォント(font-face)

    +

    + IZANAGIでは文章中で使用するフォントに明朝体かゴシック体の二種類が用意されています。それぞれ太字(bold)と細字(light)が対応しており、計4種類のフォントフェイスからお選びいただけます。 +

    +

    + デフォルトではゴシック体(細)が使用されています。cssのfont-family設定は以下のようになっています。 +

    +
      +
    • + ゴシック体 +
    • +
    +
    "Lucida Grande", "MS Pゴシック","ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Arial, Verdana, sans-serif
    +
      +
    • + 明朝体 +
    • +
    +
    "IPA明朝",Times, 'Times New Roman',"ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS 明朝",serif
    +
  • +
  • +

    行間(line-height)

    +

    + シークバーを操作することによって文章中の行間を任意の値に設定することができます。行間の値はすべてem(フォントサイズに対する相対値)で設定されているので、フォントサイズを変更しても同じ比率で行間が変化します。   +

    +

    + デフォルトの行間は2em(フォントサイズの2倍)、最小は1em、最大は3.5emです。 +

    +
  • +
  • +

    ページ幅(width)

    +

    + 文章の横幅はリーダビリティを考える上でとても重要な要素です。書籍の場合、◯文字×△文字というフォーマットに合わせて文字組がなされますが、ブラウザのウィンドウサイズによって横幅が任意に変化するweb文章には1行あたりの文字数という概念がありません。そのため、cssで適切なレイアウトを設定しなかった場合、パラグラフ要素はウィンドウの端から端まで描画されてしまい、可読性を損ないます。 +

    +

    + IZANAGIでは画面中央に位置する文章エリアの横幅をシークバーおよびマウスのドラッグ操作で自由に設定することができます。デフォルトでは740pxに設定されていますが、文章エリアは両端に50pxの余白を挟んでいるので、実際の横幅は640pxです。最小幅は540px、最大幅はブラウザのウィンドウからタスクバーの幅を除いた数値になります。その下のボタンではそれぞれの幅へショートカットができます。 +

    +
  • +
  • +

    共有

    +

    + IZANAGIでは現在の文章を簡単にSNSに共有することができます。 +

    +

    現在非対応です。

    +
  • +
  • +

    オプション

    +

    + オプションは文字やレイアウトに関係のない設定ができます。 +

    +

    + 背景の設定ではボタン操作によって文章の背景を任意の色もしくは画像に変更することができます。デフォルトでは白色が設定されています。 +

    +
  • +
+
+
+
+
+ diff --git a/js/izanagi.js b/js/izanagi.js index 90244ec..4cb33dc 100644 --- a/js/izanagi.js +++ b/js/izanagi.js @@ -1,6 +1,8 @@ -/* - * Html document reader for "scrivel" - * developed by @keroxp / Kaeru Yana / Yusuke Sakurai +/* IZANAGI + * - Html document reader + * - developed by @keroxp / Yusuke Sakurai + * - http://keroxp.me/ + * - http://github.com/keroxp/izanagi.js/ */ var Izng; @@ -666,7 +668,7 @@ var Ajax = { Ajax.loadText(setHash); }); //Ajax.setAnchor("#izng-toclist a"); - location.hash = "#!/data/1.html"; + //location.hash = "#!/data/1.html"; }, setAnchor : function(a) {