質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.02%
デザイン

プログラミングでのデザインとは、プログラムの構成や、使用の信頼性・持続性・正確性・利便性の目標達成にはどうするのがベストなのか特定の選択を行うことです。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

受付中

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

hira1121
hira1121

総合スコア0

デザイン

プログラミングでのデザインとは、プログラムの構成や、使用の信頼性・持続性・正確性・利便性の目標達成にはどうするのがベストなのか特定の選択を行うことです。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

2回答

0グッド

0クリップ

212閲覧

投稿2020/11/03 08:20

前提・実現したいこと

【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;
}

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

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

回答2

0

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

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


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

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

css

1body { 2 font-size: 1rem; 3} 4 5html { 6 font-size: 10px; 7} 8 9@media only screen and (min-width: 320px) { 10 html { 11 font-size: 3.2vw; 12 } 13} 14 15@media only screen and (min-width: 768px) { 16 html { 17 font-size: 1.508621vw; 18 } 19} 20 21@media only screen and (min-width: 928px) { 22 html { 23 font-size: 14px; 24 } 25}

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

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

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

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

投稿2020/11/03 09:24

編集2020/11/03 09:36
Lhankor_Mhy

総合スコア33631

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

0

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

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

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

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

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

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

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

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


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

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

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

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

投稿2020/11/03 08:51

m.ts10806

総合スコア80030

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

hira1121

2020/11/04 02:08

ご回答いただき誠にありがとうございます。 遅くなり申し訳ありません、初めて知る知識が多く詰まった回答で、調べながらで時間がかかってしまいました。 ------------ >レスポンシブで崩れないのは当然かと思います。 HPの品質の高さを実感し、インハウスデザイナーですが更なる技術向上が必要だと感じました。 --- >CSSフレームワーク入れずとも、自社の仕組みがあればそこは可能でしょう。 >normalize.cssは採用されているようですが、あくまでそれはブラウザやレスポンシブ対応の前準備のようなものですしね。 CSSフレームワークを初めて知りました。 「normalize.css」を採用されているということで、調べたら大変便利な内容だったので目から鱗です! 私もベースを整えて崩れが軽減するために採用したいと思いました。 --- >可能性としてSASS(SCSS) SASSについても調べまして、変数を扱えたりなど可能性はありそうですね。 こちらも崩れ防止としても採用を検討したいです。 --- >なので、モックなど作成段階からモバイルレイアウトを組んで設計を進め、そこからPCをどう見せるかという対応をすることが主流になってきているようです。 お恥ずかしい話ですが、SPユーザーが多い中PC優先で作成しておりました。 今までイラストレーターで作成しており、モックを使用したことが無く、XD等から使用してみたいと思いました。 --- >レスポンシブ部分だけを既存のフレームワークに任せ、 >今回入れたいというブロークンのところに注力するのも1つありだとは思います。 アドバイスをいただきありがとうございます。大変参考になります。 ------------ m.ts10806様の視点で回答いただき、無知だったことを多く知れたのが本当に助かりました。 色々な媒体をうまく使って手早く綺麗に作成していきたいです。 ありがとうございます。

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.02%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

デザイン

プログラミングでのデザインとは、プログラムの構成や、使用の信頼性・持続性・正確性・利便性の目標達成にはどうするのがベストなのか特定の選択を行うことです。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。