スタイルシートの技

スタイルシートで細かい化学式を作成してみよう

ルーズリーフを作る時に注意しなくては行けないのが、 やっぱり高さだと思います。また、変に行間などを空けてしまうと、それも考慮して作らなくてはいけません。 市販のルーズリーフだとだいたい「6mm」とか「7mm」とかで売られていますが、今回は、コンピュータという事で、 「ピクセル」を使って見る事にしましょう！

非常に小さいのでパターン化する画像を使ってみたい人はダウンロード(右クリックで「対象をファイルに保存」)してください。 この画像をうまく並べる（敷き詰める）事でルーズリーフのようなコンテンツボックスを作成する事ができますが、 またこのようなノートの罫線のようなものを作成しようとした場合には、 フォントの大きさ、行の間隔がピンポイントで合ってなければならないというシビアさがありますので、 私の場合はうまく行かなかったので行間とフォントのサイズを細かく変動させて見て合うまで調整してみるという感じでしょうか。

looseleaf.gif
サンプル画像 
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
   <meta http-equiv="content-style-type" content="text/css">
   <title></title>
   <style type="text/css">
      *.looseleaf
      {
         font-family: 'Times New Roman', serif;
         font-size: 12px;
         background-image: url('../img/stylesheet/looseleaf.gif');
         line-height: 150%;
      }
      p    { text-indent: 1em; }
   </style>
</head>
<body>
   <h1>Nonlinear Fiber Optics</h1>
   <div class="looseleaf">
      <p>The performance of long-haul fiber transmission systems,
      in terms of capacity and distance, is primarily limited by
      linear and nonlinear propagation effects in fibers.
      Various dispersion compensation methods either in optical or
      electric domain have been studied, in terms of chromatic dispersion,
      dispersion slope and polarization mode dispersion. </p>
      <p>However, there still remain difficulties and system impairments
      induced by fiber nonlinearities, which is becoming important
      in high speed transmission systems of 40 Gb/s or beyond.</p>
   </div>
</body>
</html>
Nonlinear Fiber Optics
The performance of long-haul fiber transmission systems, in terms of capacity and distance, is primarily limited by linear and nonlinear propagation effects in fibers. Various dispersion compensation methods either in optical or electric domain have been studied, in terms of chromatic dispersion, dispersion slope and polarization mode dispersion.
However, there still remain difficulties and system impairments induced by fiber nonlinearities, which is becoming important in high speed transmission systems of 40 Gb/s or beyond.

フォントの大きさ（font-size）・行間設定（line-height）をうまく設定しなくてはなりません。 また、Internet ExplorerだけではなくOperaやFireFoxでも確認した方が良いでしょう。

フォントを指定する時にはfont-familyを使います。属性値にはフォント名を指定するのですが、 複数指定する事が可能です。例えば、WindowsとMacintoshで個別のフォントなど存在するためです。 「serif」「sans-serif」はそれぞれ明朝体・ゴシック体を表すもので、 パソコンが自動認識してくれるフォントですので、一番安全です。 保険として指定しておきましょう。

見出しもいつも普通だったので、センターに持ってくるというスタイルシート「text-align: center;」を指定しました。 HTMLではタグの中にalign属性を書いたりしますが、これはW3Cは廃止する方向で考えています。 確かにちょっとしたテキストの位置合わせに便利なのですが、やはりHTMLでレイアウトをするべきではない… という考えに基づいているのでしょうか。そんな気がします。

普通の罫線では物足りない！という人は次の素材を使ってみてはどうですか？ 線が点線になっていますのでちょっと変わった雰囲気になります。

looseleaf_dot.gif
サンプル画像
上記画像をCSSにて適応した例
Nonlinear Fiber Optics
The performance of long-haul fiber transmission systems, in terms of capacity and distance, is primarily limited by linear and nonlinear propagation effects in fibers. Various dispersion compensation methods either in optical or electric domain have been studied, in terms of chromatic dispersion, dispersion slope and polarization mode dispersion.
However, there still remain difficulties and system impairments induced by fiber nonlinearities, which is becoming important in high speed transmission systems of 40 Gb/s or beyond.

こちらの方が論文っぽくてしっくりくる感じがします。

top