ホーム > ウェブデザイン

ウェブデザインのアーカイブ

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

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:◯◯%

を使っての横並び

ホーム > ウェブデザイン

フィード

ページの上部に戻る