タドワークスコンテンツへスキップタドワークス個人や団体、企業のホームページ集客・運用を総合的に支援します。TadWorksコピペで使う!レスポンシブデザイン用CSSサンプルレスポンシブデザインとはレスポンシブデザインとは、PC(パソコン)用、スマートフォン用のウェブページをひとつのHTMLソースを使って最適化させるウェブデザインです。以前はスマートフォン用に独自のデザインを表示させるには、携帯端末の持つ端末情報(ユーザーエージェント)をもとに、サーバープログラム側でスマートフォン専用のHTMLソースを出力させる方法が主流でした。URLも同じでなく、https://tadworks.jp/m/~などディレクトリを分けたりしていましたね。今はこういった方法ではなく、HTMLファイルは同じで、画面幅を検知してCSS側でデザインを変えるという方法がとられるようになりました。これをレスポンシブデザインといいます。これはコンテンツ重複を嫌う検索エンジン向けにも好まれる仕様といえるかと思います。今回は、このレスポンシブデザインを実現するために必要な最低限の形のCSSサンプルをご紹介します。スマートフォン」という前提でできる限りシンプルなものにしました。これをベースに肉付けすることで必要なデザインを作成していって頂ければ幸いです。/>レスポンシブデザインを導入するには、上記ビューポイントのタグを設定する必要があります。このタグはHTMLの<head></head>内に記述してください。このタグは画面幅を検知するためのタグとなりますので、これがないとCSS側で設定しているブレイクポイント自体を認識できないということになります。*/}上記の場合は、画面幅が「768px以上」の場合は、PC用CSS記述を、画面幅が「768px以下」の場合は、スマートフォン用CSS記述を適用するという内容となります。タブレット専用のデザインも作りたい場合には、ブレイクポイントをもっと細かく設定することで実現が可能です。