【css】見本のようなサイトはどのようなレイアウトで構築しているのでしょうか？

Question

前提・実現したいこと

【css】見本のようなサイトはどのようなレイアウトで構築しているのでしょうか？

見本：http://www.studio-alice-recruit.com/internship/

社内でHPを作成しており、デザイン会社で働かれている方と比べてとスキルや知識が浅い中での質問でございます。
見本のようなレイアウトのHPを作成したく、調べたところ、
cssには「フレックスボックス」と「グリッドレイアウト」という手法があることを知りました。
普段は単純なレスポンシブ対応のページを作成しており、あえてくずしたようなレイアウト（ブロークンレイアウト）は今回初めて作成します。

見本のサイトはそうやってレイアウトを構築しているのでしょうか？

特に知りたいのは以下の箇所です。

<section class="section-block" id="sec_01">

テキスト周りに、良い感じの余白で画像素材を配置していて、
レスポンシブで崩れが起きていないのが、なぜだか分かりません。
なぜ崩れないのでしょうか？（メディアクエリでデバイスごとにcssを切り替える手法は理解できています。）

さらに、以下はサイズが小数点以下の数値で設定されており、細かいと感じたのですが、これはscriptなどで自動で数値設定されているのでしょうか？
<span class="decor decor_31 animated bounceIn displayed"></span>
.decor_31 {
width: 10.142857em;
height: 8.142857em;
background-image: url(../images/top/decor_25.png);
right: 3em;
top: 5em;
}

お手数ですが、ご教授いただけますと大変助かります。

Comments

[m.ts10806]

>142857
一応、当該数値に意味はあります。
https://ja.wikipedia.org/wiki/142857

Answer 1

あえてくずしたようなレイアウト（ブロークンレイアウト）は今回初めて作成します。
見本のサイトはそうやってレイアウトを構築しているのでしょうか？

そうだと思います。ノングリッドはモックを作るデザイナーのセンスも問われるでしょうが、デベロッパーもそのルックアンドフィールを読み取るのが大変でしょうねえ……

---

レスポンシブで崩れが起きていないのが、なぜだか分かりません。

単位をemで統一しているのがいいのかもしれません。

body {
  font-size: 1rem;
}

html {
  font-size: 10px;
}

@media only screen and (min-width: 320px) {
  html {
    font-size: 3.2vw;
  }
}

@media only screen and (min-width: 768px) {
  html {
    font-size: 1.508621vw;
  }
}

@media only screen and (min-width: 928px) {
  html {
    font-size: 14px;
  }
}

---

さらに、以下はサイズが小数点以下の数値で設定されており、細かいと感じたのですが、これはscriptなどで自動で数値設定されているのでしょうか？

違うのではないかと思います。
スクリプトで操作されているならば、style属性が用いられることがほとんどです。

また、前掲のスタイルを見ればわかる通り、タブレットサイズとモバイルサイズはスクリーンサイズを基準としていて、スクリプトで操作する必要が感じられません。

ちなみに、0.142857はおよそ7分の1です。おそらくデザイナーのモックから「10と7分の1」というような基準となるサイズを読み取ったのではないかと思います。

Answer 2

テキスト周りに、良い感じの余白で画像素材を配置していて、

レスポンシブで崩れが起きていないのが、なぜだか分かりません。

スタジオアリスですよね。
作ったのは自社かどうか分かりませんがデザインのプロです。
写真もプロが撮ったものです。
レスポンシブで崩れないのは当然かと思います。
むしろ、レスポンシブ程度で崩れたら仕事になりません。

CSSフレームワーク入れずとも、自社の仕組みがあればそこは可能でしょう。
normalize.cssは採用されているようですが、あくまでそれはブラウザやレスポンシブ対応の前準備のようなものですしね。

これはscriptなどで自動で数値設定されているのでしょうか？

可能性としてSASS（SCSS）
ただ結局目に見えているのはコンパイルされたCSSなので、本当にそうかは作った人のみ知るものかと思います。

見本のサイトはそうやってレイアウトを構築しているのでしょうか？

これも作った人のみ知る。

---

ひとつ言えるのは昨今は社内システムなど要件が限定されない限り、
カスタマ向けサービスのほとんどはモバイルファーストで構築されているという点です。
GoogleがSEOの評点で「モバイル最適化されていないサイトは順位が下がる」のような発表をしてずいぶん経ちますし（
検索結果をもっとモバイル フレンドリーに ）、「崩れない対応されて当然」とも言えます。

なので、モックなど作成段階からモバイルレイアウトを組んで設計を進め、そこからPCをどう見せるかという対応をすることが主流になってきているようです。「PCレイアウトをモバイルレイアウトに対応」というやり方はされません。

なので、モバイルファーストでレイアウト構築していくと良いと思います。
もちろん、組みながらレイアウト決めていくのは難しいので、要素の配置は予め決めておく（画面設計）のは必須です。

レスポンシブ部分だけを既存のフレームワークに任せ、今回入れたいというブロークンのところに注力するのも1つありだとは思います。

Comments

[hira1121]

ご回答いただき誠にありがとうございます。
遅くなり申し訳ありません、初めて知る知識が多く詰まった回答で、調べながらで時間がかかってしまいました。

------------
>レスポンシブで崩れないのは当然かと思います。

HPの品質の高さを実感し、インハウスデザイナーですが更なる技術向上が必要だと感じました。

---
>CSSフレームワーク入れずとも、自社の仕組みがあればそこは可能でしょう。
>normalize.cssは採用されているようですが、あくまでそれはブラウザやレスポンシブ対応の前準備のようなものですしね。

CSSフレームワークを初めて知りました。
「normalize.css」を採用されているということで、調べたら大変便利な内容だったので目から鱗です！
私もベースを整えて崩れが軽減するために採用したいと思いました。

---
>可能性としてSASS（SCSS）

SASSについても調べまして、変数を扱えたりなど可能性はありそうですね。
こちらも崩れ防止としても採用を検討したいです。

---
>なので、モックなど作成段階からモバイルレイアウトを組んで設計を進め、そこからPCをどう見せるかという対応をすることが主流になってきているようです。

お恥ずかしい話ですが、SPユーザーが多い中PC優先で作成しておりました。
今までイラストレーターで作成しており、モックを使用したことが無く、XD等から使用してみたいと思いました。

---
>レスポンシブ部分だけを既存のフレームワークに任せ、
>今回入れたいというブロークンのところに注力するのも1つありだとは思います。

アドバイスをいただきありがとうございます。大変参考になります。

------------
m.ts10806様の視点で回答いただき、無知だったことを多く知れたのが本当に助かりました。
色々な媒体をうまく使って手早く綺麗に作成していきたいです。
ありがとうございます。