Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
0
Help us understand the problem. What is going on with this article?
@ryos36

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

More than 1 year has passed since last update.

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

Header のつくり

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

header の中は div で区切られている。イメージの背景部分の 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 があり、それがおおもとになっている。つまり、大半のデザインは

<div class="ibm">

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

画面サイズに合わせた拡大縮小

フォントサイズは画面に合わせて拡縮する。あるサイズを超えると拡大をやめて固定サイズになる。1行目のメッセージは h1 要素で囲まれていて、class は .ibm-type-h となっている。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 の属性は上書きされることになる。

@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 がふられている。

<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 より小さい幅の表示では見えないように設計されている。

#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 になっている。

 <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">
@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;
  }
}

その他の細かい微妙な設定もしつつウェブのデザインを統一している

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

0
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ryos36

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
0
Help us understand the problem. What is going on with this article?