ITblog

Aribnbのデザイン、コーディング勉強

2018年09月29日

Airbnbのサイトデザインの構成についての調査、勉強です。

調査サイト
Airbnb

調査日
2018年10月

全体的なレイアウト

レスポンシブデザイン

トップページ

下にスクロールすることでコンテンツがjsで追加表示されていく。

総コンテンツはかなり多い

ファーストビューに検索ボックスが大きくでる。
大きく印象的な写真(日替わり?)

白地に余白が多め

グローバルメニュー

横並びのメニューで、縮めるとホームメニューがドロップダウンに変化する。

横並びの部分

ul display:table list-style:none
li display:table-cell

floatは使っていない

ある程度横に縮めるとウグローバルナビは左上のアイコンに折りたたまれる

ヘッダは
position: absoluteで画面上表示

折り畳まれたメニューは、クリックするとz-indexと、position:fixedで画面いっぱいに表示される

ページ内のメニュー

メニューの横並び

display:inline-bock

要素は横並びで中はブロック要素

での

width:◯◯%

を使っての横並び。widthは、メディアしていで、max-width,min-widthで横幅を変更している。
(レスポンシブデザインの基本)

その他で気がついた点

多くの画像を、img src で指定せずに、 div styleでbackground-image: で指定している。
理由は不明。

画像が入っているdiv要素にrole=imgをつけているが、アクセシビリティのためにつけてあるものでSEOや機能的な意味はない。
その他にも、 aria-label要素も、その要素の解説のために使われている。

横並び要素の中の横並びは

display:table-cell で実装している?

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です