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以下で作るのがよいようです。
ウェブサイトにメールアドレスを記載するときに、「xxx@aaa.com」のように直接表記すると、メールアドレスを収集され、スパムメールを送り付けられてしまう可能性が増えてきてしまうため、JavaScr…続きを読む
CSSで、マウスオーバー時に、徐々に色が変化したり、形が変化するようなアニメーション効果を付ける方法です。 CSS3で実現 例えば、マウスオーバー時に色を徐々に変化させたい場合には、以下のように書きま…続きを読む
縦横比を保ったまま画像のサイズを変えて表示する方法です。 例えば、ウェブサイトをPCで閲覧するためのサイズとスマホで閲覧するサイズの2種類をCSSで切り替えてつくる場合、画像のサイズもPCとスマホによ…続きを読む
GoogleMapにリンクを貼るときに、URLが長くなってしまうのを防ぐ、短縮URLの取得の方法です。 まず、GoogleMapを開きます。 左上の検索窓に住所を入力して、その住所を検索します（ここで…続きを読む
Fireworks CS6を起動しようとしたら「現在のFireworksユーザー権限では、レジストリ情報を更新することができません。Dreamweaverを併用しての起動と編集機能は、管理者権限でFi…続きを読む
CSSの設定のみで、内容が少ないページであっても、フッターは最下部に表示され、さらに内容がたくさん書いてある場合には、スクロールした最後にフッターが表示されるようにする方法です。 以前にも紹介しました…続きを読む
ウェブサイトをスマホ対応しようとCSSをつくり、いざ確認してみるとAndroidとiPhoneで文字サイズがかなり違う、ということが起こりました。 iPhoneの方がAndroidよりも小さく、iPh…続きを読む
Zoomを有料で契約していると、1年ごとの自動更新に設定されます。 Zoomを解約する方法を調べました。 Zoomの自動更新をキャンセルする Zoomの解約とは、契約の自動更新をさせなくすることと同義…続きを読む
Googleカレンダーに、別のGoogleアカウントのカレンダーを同期させることはできますが、別のGoogleアカウントで複数設定しているカレンダーをそれぞれ同期させる方法がわからなかったので調べまし…続きを読む
ウェブサイトの表示をさせる際に、自分で指定したフォントで相手にも表示させる方法です。 通常、ウェブサイトのフォントは、閲覧する人のコンピュータに同じフォントがなければ、CSSでfont-familyを…続きを読む