Webデザインラボ当サイトはJavaScriptが有効に設定されていないと正しく表示されません。【iPhone・iPad】投稿の準備中にエラーが起きました。後でやり直してください。2018/05/16こんにちは(・∀・)こちらの【CSS】スマホ対応CSSだけでドロップダウンメニューの横並びドロップダウンメニューをスマホに対応させました。3パターンのサンプルをご用意しましたのでよろしければご活用ください。横並びで表示するドロップダウンメニューのサンプルです。class="content"><p>通常の横並びドロップダウンメニューです。メニュー部分にマウスオーバーするとコンテンツの上に子メニューが展開します。</p><p>メニュー数が少ない、またはメニューの文字列の数が少ないデザイン向けです。</p><p>PCサイトの子孫メニューの制御ははoverflowで行っております。displayでの制御も可能ですが、その場合はcontentプロパティで表示している▶矢印は見えなくなります。class="content2"><p>通常の横並びドロップダウンメニューです。メニュー部分にマウスオーバーするとコンテンツの上に子メニューが展開します。</p><p>スマホサイトでは横スクロールのナビゲーションとなり、子メニューは展開しません。</p><p>メニュー数が多かったりメニューの文字列の数が多いデザイン向けです。</p><p>メニューの一部が表示されなくなるのでHTMLのリンク構造をスマホサイトとPCサイトで変える必要があります。</p><p>PCサイトの子孫メニューの制御ははoverflowで行っております。displayでの制御も可能ですが、その場合はcontentプロパティで表示している▶矢印は見えなくなります。class="content3"><p>通常の横並びドロップダウンメニューです。メニュー部分にマウスオーバーするとコンテンツの上に子メニューが展開します。</p><p>スマホサイトでは横スクロールのナビゲーションとなり、子メニューは展開しません。</p><p>メニュー数が多かったりメニューの文字列の数が多いデザイン向けです。</p><p>メニューの一部が表示されなくなるのでHTMLのリンク構造をスマホサイトとPCサイトで変える必要があります。</p><p>PCサイトの子孫メニューの制御ははoverflowで行っております。displayでの制御も可能ですが、その場合はcontentプロパティで表示している▶矢印は見えなくなります。Webデザインラボ中の人NYのデザイン学校でグラフィックデザインを学んだ後、同じくNYにあるWeb制作会社にてインターンからWebデザイナーへ。同時期に米国永住権(グリーンカード)を取得。その後某旅行会社系のWebクリエーター兼社内インフラ担として働いた後、結婚を機に約12年に渡るアメリカ生活を終え日本に帰国。日本では某携帯キャリアの社内Webクリエーターとして勤務。Web系に携わる前はホノルル空港でGreeterとして働いていた経験や、アメリカ国内の衣料品を中心としたアパレル系のバイヤー経験もあり。趣味はお酒を飲みながらの家でまったり音楽鑑賞とアウトドア系全般。最近は自転車にもハマってます。更新情報はTwitterかFacebookで配信してるのでフォローして確認してみて。