某IBM社のサイトの作りをちょっとみてみた(後編)

某社のサイトの作りのごく一部を解析した結果の後編。

# New Today のアニメーションとデザイン
最初にこのトップページを読み込むとびよ～～～んと右から New Today のコンテンツの見出し（クリックするとそのページに飛ぶ）がアニメーションしてくる。これはいわずとしれた JavaScript でやっているのでその部分は割愛する。ここで取り上げたいのは、New Today の静的なデザインだ。

ブラウザの横幅を変えるとわかるのだが、細かく制御されている。この、１行（あるいは２行）のためにものすごく細かいデザイン制御をしているのだ。

# New Today とコンテンツ
それぞれ次のような div で修飾されている。ポイントは class の ibm-col-md-1(あるいは7)とibm-col-lg-2(あるいは14)。p 要素のクラスの ibm-type-b ibm-textcolor-gray-40 ibm-type-mono ibm-padding-bottom-0 はなんとなくわかるのでここでは割愛。

```html:
<div class="ibm-col-md-1 ibm-col-lg-2">
  <p class="ibm-type-b ibm-textcolor-gray-40 ibm-type-mono ibm-padding-bottom-0">New today</p>
</div>
```

```html:
<div class="ibm-col-md-7 ibm-col-lg-14">
   <p class="ibm-type-b ibm-textcolor-white-core ibm-type-mono ibm-padding-bottom-0 ibm-animate bounceInRight animated" style="width:100%!important;max-width:100%!important">
コンテンツ内容(日によって違う)
</div>
```

# "|" で区切られている
html には "|" という文字列出てこないが表示上では New Today のあとに縦棒がある。これは css で設定されている。p:after のキーワードを使い、content に "|" を設定することで表示されるようにしてある。

```css:
#ibm-newsflash .ibm-col-group .ibm-col-lg-2 p:after {
  position: absolute;
  right: -10px;
  color: #959595;
  content: "|";
}
```


# 一番大きなサイズの対応(1650 以上)
横幅 1650 以上であるとつぎの css が効いてくる。

```css:
@media (min-width: 1650px) {
  .ibm-type-b, .think-newsflash .news-item h3, .think-ustream .que .section .feature em {
    font-size: 1.125rem;
    line-height: 1.5rem;
    max-width: 37.5rem;
    letter-spacing: 0;
    margin-bottom: 1.5rem;
  }
}
```

こまかいことだが、padding なども連動している

```css:
@media (min-width: 1650px) {
  .ibm > *,
  .ibm-col-group > *,
  .ibm-padding,
  .think-ustream .que .section .see-all {
    padding: 25px;
  }
  .ibm-padding-horizontal {
    padding-left: 25px;
    padding-right: 25px;
  }
  .ibm-padding-vertical {
    padding-bottom: 25px;
    padding-top: 25px;
  }
```

そしてこの細かい padding 調整をしてデザインが崩れないようにしている。

# 横幅 1056 以上 1650 未満
ibm-col-md-2 が このサイズだと 400px になるように設定されている。

```css:
@media (min-width: 1056px) {
中略
  .ibm-col-md-2 {
    max-width: 400px;
    width: 24.2424242424vw;
  }
中略
}
```
そして ibm-col-lg-14 は

```css:
  .ibm-col-lg-14 {
    max-width: 1400px;
    width: 84.8484848485vw;
  }
```

さらにこのサイズのフォントは拡縮するように設計されている。

```css:
@media (min-width: 1056px) {
  .ibm-type-b, .think-newsflash .news-item h3, .think-ustream .que .section .feature em {
    font-size: calc( 14px + 0.0067340067 * (100vw - 1056px));
    line-height: calc( 20px + 0.0067340067 * (100vw - 1056px));
    max-width: calc( 480px + 0.202020202 * (100vw - 1056px));
    letter-spacing: calc( 0.16px + -0.0002693603 * (100vw - 1056px));
    margin-bottom: calc( 20px + 0.0067340067 * (100vw - 1056px));
  }
}
```

とうぜん padding も調整してある

```css:
@media (min-width: 1056px) {
  .ibm {
    padding: 0 1.5151515152vw;
  }
}
```

これによりこのサイズにあるタブレットや PC で見やすいように設計されている。

# 横幅 640以上 1056未満
ここがより芸の細かいところ。1056 を切ると、New today の後にあった縦棒が消える。そして、New today が２段になる。縦棒が消えるのは次のようにしている。この上書によりcontent が "" と何もなしになって縦棒が消える。

```css:
@media only screen and (min-width: 0px) and (max-width: 1055px) {
  #ibm-newsflash .ibm-col-group .ibm-col-lg-2 p {
    position: relative;
  }
  #ibm-newsflash .ibm-col-group .ibm-col-lg-2 p:after {
    content: "";
  }
}
```

消えるようにデザインしている理由は New today が二段になるのと関連している。そのまま残ると
縦棒が中途半端な位置になるためだ。消えるとどうなる？微妙にパディングが変わる。そのため、そういったパディング調整をしている。

ではもうひと突っ込んでなんで二段のデザインにするのか？これは content が長いので２段になることがあるからだ。あくまでなることがあるのであって、短いとき（非によってい違うぞ）は２段にならない。

このサイズ(640以上1056未満)のデザインを日替わりのコンテンツでも統一した高さ、かつ、PC などで横幅を変えてもデザインの切り替わりがおこらないようにという配慮なのだ（たぶん）。どうでもいいきもしなくもないが、デザイナーの気持ちなのだろう。

一昔前はこの New today を２段にするといったたぐいのは table を使っていた。というか、今でもこの方が簡単だと思う。しかし、div で実現している。しかも、実現の方法は font のサイズと padding 調整で、ブラウザーが New と today の空白を認識して改行してくれるであろうサイズに調整しているのだ。awful!!(やばい!!)

私は Firefox でしか確認していないが、きっとすべてのブラウザでそうなるように調整している。暇と興味がある人は是非 PC でブラウザで横幅を変えてほしい。1056おサイズの前後で切り替わるがフォント位置とかデザインがなるべく変わらないように設計されている。ここまでするか？という芸の細かさである。

# 横幅 640未満
前編でも書いた通り、このサイズになるとバックグラウンドのイメージは消え、小さいイメージが現れる。最近のスマートフォンでこのサイズはないだろうから、ここまでやる必要ない気もするが、むかしのパワーのないスマートフォンでもストレスなくできるような配慮がされているのだろう。

そして New today とコンテンツは上下に分かれる（今までは左右）。New today とコンテンツの距離が離れすぎないように margin や padding が調整されている。

```css:
@media only screen and (min-width: 0px) and (max-width: 639px) {
  #ibm-newsflash .ibm-col-group .ibm-col-md-1 {
    padding-bottom: 0;
  }
  #ibm-newsflash .ibm-col-group .ibm-col-md-7 {
    padding-top: 0;
  }
}
```

#ここの解析はごく一部だ
トップページはコンテンツとしてこの後延々と続く。このような配慮がこのページの最初から最後まで事細かになされている。もちろん、トップページだけではないだろう。
IBM のウェブサイトは以前から凝っていると思っていたが、解析すると、凝っているだけでなく様々な考慮がされていることがわかる。
前編でも書いたがこの手の事を一貫して行うには強力なツール（開発システム）が必要だ。

#CSS の問題点
さて、最後に感想。解析を進めていくうえで、css をよりコンパクトにして何が起こっているかを解析した。主要な２つの css である  ibm-ushp.cssと ibm.css はそれぞれ 4400 行、2133行にもなる。それを必要な部分だけにし 500 行程度にした。css での各設定は必要に応じて上書きされるため、必要十分なすべての css の記述を抜き出すのは非常に困難だった（だったらやるなという話もある）。
抜き出しが正しくても、書く順番(ブラウザの読出し順）が異なればうまくいかない。必要なさそうな記述が必要だったりなっている。

また、そもそもコンテンツを修飾するのに

```html:
<p class="ibm-type-b ibm-textcolor-gray-40 ibm-type-mono ibm-padding-bottom-0">New today</p>
```

等と書いているが、これは class にそもそもする必要がないじゃないか。style で埋め込んだ方がわかりやすい。おそらく、ツールでの自動生成だから、あとで誰がか読んだりそれを使いまわしたりするようにはできていないのだろう。

html のコンテンツを css で修飾する方法は、コンテンツそのものとデザインを分離することに成功したが、デザインを統一的に構成するのには失敗している。個々のパーツは css の個々のパーツでデザインすることは出来ても、その css のパーツを統括するすべがない。ツールがないととてもじゃないとできない。

wordpress はそのツールの一つだ。便利ではあるが、しかし、誰かが作ったデザイン（しかもかなり制約のあるデザイン）の上に自分のコンテンツを載せていかないといけない。折角の css の良さを殺してしまっているのも事実だ。

本当はみんなこうしたいのだ。

```html:
<p style="
switch (width) {
case 0..639:
       デザインの指定.small
case 640..1055:
       デザインの指定.mid
case 1056..1649:
       デザインの指定.large
csse 1650..:
       デザインの指定.xlarge
}"
>
コンテンツ</p>
```

個別にコンテンツへの指示が出来、それが統括的に管理され、関連することろを変えたらちゃんとすべてに反映され、ここのブラウザやサイズによりレンダリングもしてくれる、、、、そんなツール（あるいはそう記述できる HTML）が欲しいのだと思う。