CSSを使ってウェブサイトの画面レイアウトを、スマホ用とPC用とで切り替える方法です。
スマホを認識するというよりは、画面の横幅が何ピクセル以下か、によって読み込ませるCSSを変える、という方法をとります。
まず、メインとなるスタイルシート（layout.css ※名前は自由です）を用意します。
layout.cssの中に画面サイズごとに読み込ませるCSSを変える記述をします。
layout.css
@import url(pc.css) screen and (min-width:800px); /* 横幅800px以上 */
@import url(phone.css) screen and (max-width:799px); /* 横幅799px以下 */
@importはcssを読み込ませるための構文です。
min-width:800pxということは、「最低でも800pxの横幅がある場合」ということになります。
2行目のmax-width:799pxは、「最大でも799pxの横幅がある場合」という意味です。
ここでは、800px以上ある場合はPCの画面、799px以下ならばスマホの画面、という意味あいで記述しています。
因みに、2019年2月時点ではPCの画面は1200px以下でサイトを作り、スマホの画面は750px以下で作るのがよいようです。
Chromeでウェブサイトをチェックしている場合、CSSを更新した際にブラウザの更新を行って再表示しても、CSSの変更が反映されません。 これはキャッシュがChrome内に残っているために起こっている…続きを読む
CSS3を使ってテーブルの両端の列の右側はボーダーを表示せず、それ以外のセルの右側にはボーダーを表示したい、という場合には、複数の条件を適用したセレクターを設定する方法です。 「～かつ、～」というセレ…続きを読む
Microsoft Edgeのキャッシュを削除する方法を調べました。 Edgeの右上の設定アイコンから「設定」をクリックします。 「Cookieとサイトのアクセス許可」から、「Cookieとサイトデー…続きを読む
GoogleMapにリンクを貼るときに、URLが長くなってしまうのを防ぐ、短縮URLの取得の方法です。 まず、GoogleMapを開きます。 左上の検索窓に住所を入力して、その住所を検索します（ここで…続きを読む
CSSでfloatを使って二段組レイアウトをつくった場合、フッターにfloatの効果を解除するには、clear:bothなどを使っていました。 しかし、clear:bothを使うと、marginなどの…続きを読む
ウェブページの内容量が少ない場合には、フッターをブラウザの表示領域最下部に表示し、内容量がある場合にはスクロールした最下部に表示する方法です。 フッターを画面最下部に表示する HTMLソース <…続きを読む
ウェブサイトにメールアドレスを記載するときに、「xxx@aaa.com」のように直接表記すると、メールアドレスを収集され、スパムメールを送り付けられてしまう可能性が増えてきてしまうため、JavaScr…続きを読む
Fireworks CS6を起動しようとしたら「現在のFireworksユーザー権限では、レジストリ情報を更新することができません。Dreamweaverを併用しての起動と編集機能は、管理者権限でFi…続きを読む
Zoomを有料で契約していると、1年ごとの自動更新に設定されます。 Zoomを解約する方法を調べました。 Zoomの自動更新をキャンセルする Zoomの解約とは、契約の自動更新をさせなくすることと同義…続きを読む
ウェブサイトをスマホ対応しようとCSSをつくり、いざ確認してみるとAndroidとiPhoneで文字サイズがかなり違う、ということが起こりました。 iPhoneの方がAndroidよりも小さく、iPh…続きを読む