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

IBM 社のウェブサイトの作りが気になったのでちょっと調べてみた。

#Header のつくり
まずは　"GDPR marks a new era for data privacy" と(2018/5/26 時点で)なっているトップ部分。ここは header でくくられている部分だ。背景にイメージが来て前面に文字がある。

header の中は div で区切られている。イメージの背景部分の HTML が最初に来る。

```html:
<div id="ibm-leadspace-head" style="background:url(images/editorial/05212018-is-gdpr-countdown-18956-bg-2112x760.jpg) center center/cover no-repeat #000;border-bottom:0">
```

この div で 2112x760 の jpg が背景に設定される。この背景はべったりはりついてブラウザを広げたり縮めたりすると、それに合わせて、拡縮する。よくみると、フォントのサイズも微妙に変わっている。どうやっているのか？

#css のつくり
表示される文字等はデザイン div で分けられている。統一感のあるデザインを管理するために ibm という class があり、それがおおもとになっている。つまり、大半のデザインは 

```html:
<div class="ibm">
````

というように ibm class をもとにして、さらに細かい設定は div で細分化するという方針をとっている。オブジェクト指向っぽい？設計が漂ってっくる。天下の IBM がこられを人力でやっているとは思えないので、class を継承したり上書きしたりするようなシステムを組んでいると思う。

#画面サイズに合わせた拡大縮小
フォントサイズは画面に合わせて拡縮する。あるサイズを超えると拡大をやめて固定サイズになる。１行目のメッセージは h1 要素で囲まれていて、class は .ibm-type-h となっている。css をみると次のように修飾されている。

```css:
.ibm-type-h, .think-newsflash .ibm .ibm-col-group h1, .think-large-cta h2, .think-live-title .title h1 {
  font-size: 1.75rem;
  font-weight: 300;
  line-height: 2.25rem;
  max-width: 39.5rem;
  margin-bottom: 2rem;
}
```

これが基本で後はサイズに応じての @media による定義が羅列される。これによりあるサイズになるとこの ibm-type-h の属性は上書きされることになる。

```css:
@media (min-width: 320px) {
  .ibm-type-h, .think-newsflash .ibm .ibm-col-group h1, .think-large-cta h2, .th
ink-live-title .title h1 {
  line-height: 2.25rem;
  max-width: 39.5rem;
  margin-bottom: 2rem;
}

@media (min-width: 320px) {
  .ibm-type-h, .think-newsflash .ibm .ibm-col-group h1, .think-large-cta h2, .think-live-title .title h1 {
    font-size: calc( 28px + 0.0125 * (100vw - 320px));
    line-height: calc( 36px + 0.0125 * (100vw - 320px));
    max-width: calc( 632px + 0.275 * (100vw - 320px));
  }
}

@media (min-width: 640px) {
  .ibm-type-h, .think-newsflash .ibm .ibm-col-group h1, .think-large-cta h2, .think-live-title .title h1 {
    font-size: 2rem;
    line-height: 2.5rem;
    max-width: 45rem;
    font-size: calc( 32px + 0.0096153846 * (100vw - 640px));
    line-height: calc( 40px + 0.0096153846 * (100vw - 640px));
    max-width: calc( 720px + 0.2115384615 * (100vw - 640px));
  }
}

@media (min-width: 1056px) {
  .ibm-type-h, .think-newsflash .ibm .ibm-col-group h1, .think-large-cta h2, .think-live-title .title h1 {
    font-size: 2.25rem;
    line-height: 2.75rem;
    max-width: 50.5rem;
    font-size: calc( 36px + 0.0101010101 * (100vw - 1056px));
    line-height: calc( 44px + 0.0101010101 * (100vw - 1056px));
    max-width: calc( 808px + 0.228956229 * (100vw - 1056px));
  }
}

@media (min-width: 1650px) {
  .ibm-type-h, .think-newsflash .ibm .ibm-col-group h1, .think-large-cta h2, .think-live-title .title h1 {
    font-size: 2.625rem;
    line-height: 3.125rem;
    max-width: 59rem;
  }
}
```

#スマートフォンに対応して見やすくしている
フォントサイズを変えているだけではない。あるサイズより小さくなると、スマートフォン対応になり、背景の上に文字があるデザインではなくなり、小さな画像と文字が順に並ぶようになる。どうやっているのか？

背景画像の場合は次のように ibm-leadspace-head という ID がふられている。

```html:
<div id="ibm-leadspace-head" style="background:url(images/editorial/05212018-is-gdpr-countdown-18956-bg-2112x760.jpg) center center/cover no-repeat #000;border-bottom:0">
```

これは次の css でコントロールされ 640 より小さい幅の表示では見えないように設計されている。

```css:
#ibm-leadspace-head {
  border-bottom: 1px solid #777677;
  position: relative;
}

@media only screen and (max-width: 639px) {
  #ibm-leadspace-head {
    background: none !important;
    background-color: #000000 !important;
  }
}
```

そして、 スマートフォン用には小さい画像を用意している。duo-hidden-medium、duo-hidden-large と ibm-hidden-xlarge がこの画像を表示するかしないかを決める class になっている。

```html:
 <div class="duo-hidden-medium duo-hidden-large ibm-hidden-xlarge ibm-padding-bottom-0" style="padding-bottom:6px!important">
     <img src="IBM%20-%20United%20States_files/05212018-is-gdpr-countdown-18956-mobile-520x260.jpg" class="ibm-resize" alt="GDPR marks a new era for data privacy" title="GDPR marks a new era for data privacy">
```

```css:
@media only screen and (min-width: 640px) and (max-width: 1054px) {
  .duo-hidden-medium {
    display: none !important;
  }
}

@media only screen and (min-width: 1055px) {
  .duo-hidden-large {
    display: none !important;
  }
}
```

#その他の細かい微妙な設定もしつつウェブのデザインを統一している
その他、サイズが変われば文字背景が変化したりと、ご丁寧な設定をしている。スマートフォンでどのように見えるのか？というのは強く意識しているようだ。ただ、これを手書きでまねるのは至難の業であろう。