浮世絵の曲線

浮世絵というものに関する私の知識は今のところはなはだ貧弱なものである。西洋人の書いた、浮世絵に関する若干の書物のさし絵、それも大部分は安っぽい網目版の複製について、多少の観察をしたのと、展覧会や収集家のうちで少数の本物を少し念入りにながめたくらいのものである。それだけの地盤の上に、それだけの材料でなんらかの考察を築き上げようとするのである。ちょうど子供がおもちゃの積み木で伽藍の雛形をこしらえようとしているのとよく似た仕事である。それが多少でも伽藍らしい格好になるかならないかもおぼつかないくらいである。しかし古来の名匠は天然の岩塊や樹梢からも建築の様式に関する暗示を受け取ったとすれば、子供の積み木細工もだれかに何かの参考になる場合がないとは限らない。

浮世絵というものに関する私の知識

色彩をぬきにして浮世絵というものを一ぺんばらばらにほごしてしまうと、そこに残るものは黒白のさまざまな切片といろいろの形状をした曲線の集団である。こうしてほごした材料を一つ一つ取り出して元の紙の上にいろいろに排列してみる。するとそこにできたものは未来派の絵のあるものの写真とよく似たものができるだろうと思う。

しかしそのような排列のあらゆる可能な変化のうちで、何かしらだらしなく見えるのと、どこか格好よく調子よく見えるものとの区別がありはしないか。これはむつかしい問題ではあるが、そういう区別があるとしないとある種の未来派の絵などの存在理由は消滅しそうに思われる。

色彩を取り去ったあとの浮世絵の中に見いだされる美の要素がいかなるものであるかを考えるのは、結局前にあげた問題の答案を求めると同じ事に帰着するのではないかと私には思われる。

黒白の切片の配置、線の並列交錯に現われる節奏や諧調にどれだけの美的要素を含んでいるかという事になると、問題がよほど抽象的なものになり、むしろ帰納的な色彩を帯びては来るが、しかしそれだけにいくらか問題の根本へ近づいて行きそうに思われる。

ともかくもこのような考えを頭において浮世絵の写真を見て行くのも一つのおもしろい実験にはなるだろう。そう思って私は試みに手近な書物のさし絵を片はしから点検して行った。その時に心づいた事を後日のための備忘録としてここに書き止めておきたいと思う。ことによるとこんな事はもうとうにだれかが言いふるした陳腐な議論かもしれない。もしそういう文献に通じた読者があったら教えを請いたいと思うのである。

私の調べてみたのは主として人物、特に女性を描いたものである。しかし以下にいうところの命題の大部分は、適当に翻訳する事によって風景画にも応用されるだろうと思っている。

青空文庫

CSS変数

CSS変数(カスタムプロパティ)を使用しています。
メインのフォントカラーやフォントファミリーの変更が容易になりました、たぶん。
※IE非対応。

ギャラリー表示の補足

ギャラリーは以下の表示が可能です。

  • スクエア表示(2~4カラム)
  • 元の比率で表示(2~4カラム)
  • 画像の遅延読み込み
スクエア表示
gallery-square-col-[カラム数]

画像gallery-item

画像gallery-item

画像gallery-item

<div class="gallery-square-col-[カラム数] inner">
 <div class="gallery-item gallery-bg">
  <a href="#">
   <div class="gallery-bg-img lazyload" data-expand="-20" data-bg="[画像]"></div>
   <!-- JavaScriptオフ -->
   <noscript><div class="gallery-bg-img" style="background-image: url([画像])"></div></noscript>
   <div class="gallery-item-meta[-hover]">[画像の説明]</div>
  </a>
 </div>
 ~略~
</div>
元の比率で表示
gallery-col-[カラム数]
1列目gallery-column
画像gallery-item
画像gallery-item
画像gallery-item
2列目gallery-column
画像gallery-item
画像gallery-item
画像gallery-item
3列目gallery-column
画像gallery-item
画像gallery-item
画像gallery-item
4列目gallery-column
画像gallery-item
画像gallery-item
画像gallery-item
  1. カラムの数だけgallery-columnを作成します。

    <div class="gallery-col-[カラム数] inner">
      <div class="gallery-column"> ~略~ </div>[1列目]
      <div class="gallery-column"> ~略~ </div>[2列目]
      ...
    </div>
  2. gallery-column 内に gallery-item を作成します。
    [縦横比]は、例えば4:3の画像ならば「calc(3 / 4 * 100%)」あるいは「75%」を指定します。

    <div class="gallery-column">
     <div class="gallery-item" data-expand="-40">
      <a href="#" style="padding-bottom: [縦横比];">
       <img data-src="[画像]" class="lazyload" alt="SAMPLE">
       <noscript><img src="[画像]" alt="SAMPLE"></noscript>[JavaScriptオフ]
       <div class="gallery-item-meta[-hover]">[画像の説明]</div>
      </a>
     </div>
     ...
    </div>
画像の遅延読み込み(Lazysizes)

img タグ、または div.gallery-bg-imgclass="lazyload" を追加します。
ギャラリーページ以外でも lazysizes.js を読み込めば使用可能です。

詳しくは、配布元ページを参照してください。

コードサンプル

よく使いそうなタグの装飾やデフォルトの表示例です。

大きな画像
<img src="sample.jpg" alt="画像" class="image-full">
<figure class="image-full">
 <img src="sample.jpg" alt="画像">
 <figcaption>画像の説明</figcaption>
</figure>
フォト
大きく表示された画像
引用
<blockquote></blockquote>
私の調べてみたのは主として人物、特に女性を描いたものである。しかし以下にいうところの命題の大部分は、適当に翻訳する事によって風景画にも応用されるだろうと思っている。ほにゃらら
ツイートを表示

表示したいツイートを選び、「ツイートをサイトに埋め込む」コードをコピーします。埋め込みをよく使う場合は、以下のようにhead(またはbody)でjsファイルを読み込むと便利です。

<head>
 <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</head>
<body>
 <blockquote class="twitter-tweet" data-lang="ja">ツイート1</blockquote>
 <blockquote class="twitter-tweet" data-lang="ja">ツイート2</blockquote>
</body>
レスポンシブ対応テーブル
<div class="overflow-area">
 <table> ~略~ </table>
</div>
大腸菌 エシェリヒア・コリ Escherichia coli
ニホンコウジカビ アスペルギルス・オリゼー Aspergillus oryzae
ブルガリア乳酸桿菌 ラクトバチルス・ブルガリクス Lactobacillus bulgaricus
動画を埋め込む

ユーザーやサーバーの回線を圧迫したくない場合、preload="none" でバックグラウンドの読み込みを停止します。

<video poster="poster.jpg" src="video.mp4" preload="none" controls>