関連記事:「PCの時は画面内に横並びでモバイルの時は画面外からスワイプして横スクロール」を更新しております。(2022年10月6日)
こちらの方がより簡単に実装できます。
スマートフォンでアクセスした際、ナビゲーションを最初非表示にして、ハンバーガーメニュー(←こんなの)をタップするとナビゲーションが表示されるサイトはたくさんありますし、私も使います。
しかしユーザビリティというか、やっぱりこのボタンをボタンとして理解してくれず、下層ページに移動できないユーザーが一部いたりしている場合が稀にあります。特にご年配の方もスマートフォンを普通に持っている今、誰にでもわかりやすいUIを考えることは非常に重要ではないでしょうか。なんて思うわけです。
まずはこちらのサイトをスマホでご覧ください。
https://www.apple.com/jp/iphone/
iPhoneが並んでいるナビゲーション、横スクロールしませんか?これだとユーザーにもボタンの存在をわかりやすく伝えることができるのと同時にレイアウト的にもスッキリしていいですよね。しかも横にスワイプすると慣性スクロールするのも気持ちいい!
というわけで作ってみます。
この辺りでしょうか
<nav> <div> <ul> <li><a href="#">First</a></li> <li><a href="#">Second</a></li> <li><a href="#">Third</a></li> <li><a href="#">Fourth</a></li> <li><a href="#">Fifth</a></li> <li><a href="#">Sixth</a></li> </ul> </div> </nav>
シンプルなhtmlです。これにCSSを加えます。
nav{ width:100%; overflow: hidden; } nav div{ width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } nav ul{ display: inline-table; max-width: 100%; } nav ul li{ display: table-cell; } ::-webkit-scrollbar{ display: none; }
ざっくり書くとこんな感じです。
CSSのポイントはulを包むdivを一個作って、
そこに-webkit-overflow-scrolling: touch;を
加えることで、慣性スクロールが実現されます。
また、ulにinline-tableを設定し、
liにはtable-cellで
横並びにさせることがポイントです。
inline-tableにしないと
画面外からやってきてくれません。
また、スクロールバーの表示に関しては
::-webkit-scrollbarで
表示を調整することができます。
サンプルを作りました。スマホでご覧ください。
コーポレートサイトは企業の看板となるウェブサイトです。顧客とのファーストコンタクトになる場合が多いので、ブランディング視点で企業を魅力的に伝えるホームページを構築いたします。
ブランドサイトや集客サイトはお問い合わせなど、コンバージョンの獲得を強く意識したホームページになります。クライアントの事業内容によって、コーポレートサイトをそのまま集客の核とする場合と、別途ブランドサイトや集客サイトを作ってブランディングを行う場合があります。
採用サイトは、コーポレートサイトと同様、求職者の心に響くためのブランディング視点が必要になります。求職者の琴線に触れる非金銭的ポイントと貴社の強みや特徴をきちんと整理し、伝わるサイトを制作いたします。
検索ユーザーだけでなく、潜在ユーザーにも適切にアプローチできるFacebookやInstagramなどのSNS広告を運用します。
エリアや年齢性別など、細かくターゲットをセグメントし、適切なユーザーへアプローチします。
近年重要視されているMEO(Map Engine Optimization)
Googleマップでの検索結果において上位表示させる対策です。アルラボではGoogleマイビジネスの最適化のほか、サイテーション施策など、上位表示に必要なノウハウをご提供可能。
私たちは、お客様のビジネスを成長させ、
より前に進ませるためにともに考え、創るWeb制作会社です。
ホームページの新規・リニューアル制作から
ブランディング・広告運用・SEO対策などWeb集客導線を作ります。
ホームページ制作・広告運用・SEOなど
ご相談はお気軽にご相談ください。
お電話でのご相談も随時受け付けております。
お気軽にご連絡ください。
0952-20-1501(佐賀)
092-717-3446(福岡)
営業時間:9:00~17:00(休業日:土日祝)