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以下で作るのがよいようです。
Windows7からWindows10にアップグレードしたところ、Apacheが起動しなくなりました。 Apacheが起動しなくなる理由には大きく2つあります。 1つ目は、httpd.confの書き間…続きを読む
Chromeでウェブサイトをチェックしている場合、CSSを更新した際にブラウザの更新を行って再表示しても、CSSの変更が反映されません。 これはキャッシュがChrome内に残っているために起こっている…続きを読む
FTPソフトである「FileZilla」を使ってサーバ上のファイルを削除しようとしたときに、 「8ビット文字コードへ変換するコマンドに失敗しました」 というメッセージが出てしまい、削除できないことがあ…続きを読む
ウェブサイトの表示をさせる際に、自分で指定したフォントで相手にも表示させる方法です。 通常、ウェブサイトのフォントは、閲覧する人のコンピュータに同じフォントがなければ、CSSでfont-familyを…続きを読む
Fireworks CS6を起動しようとしたら「現在のFireworksユーザー権限では、レジストリ情報を更新することができません。Dreamweaverを併用しての起動と編集機能は、管理者権限でFi…続きを読む
GoogleMapにリンクを貼るときに、URLが長くなってしまうのを防ぐ、短縮URLの取得の方法です。 まず、GoogleMapを開きます。 左上の検索窓に住所を入力して、その住所を検索します（ここで…続きを読む
CSS3を使ってテーブルの両端の列の右側はボーダーを表示せず、それ以外のセルの右側にはボーダーを表示したい、という場合には、複数の条件を適用したセレクターを設定する方法です。 「～かつ、～」というセレ…続きを読む
ウェブサイトをスマホ対応しようとCSSをつくり、いざ確認してみるとAndroidとiPhoneで文字サイズがかなり違う、ということが起こりました。 iPhoneの方がAndroidよりも小さく、iPh…続きを読む
CSSでfloatを使って二段組レイアウトをつくった場合、フッターにfloatの効果を解除するには、clear:bothなどを使っていました。 しかし、clear:bothを使うと、marginなどの…続きを読む
ウェブサイトにメールアドレスを記載するときに、「xxx@aaa.com」のように直接表記すると、メールアドレスを収集され、スパムメールを送り付けられてしまう可能性が増えてきてしまうため、JavaScr…続きを読む