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内に残っているために起こっている…続きを読む
Googleカレンダーに、別のGoogleアカウントのカレンダーを同期させることはできますが、別のGoogleアカウントで複数設定しているカレンダーをそれぞれ同期させる方法がわからなかったので調べまし…続きを読む
CSSでfloatを使って二段組レイアウトをつくった場合、フッターにfloatの効果を解除するには、clear:bothなどを使っていました。 しかし、clear:bothを使うと、marginなどの…続きを読む
ウェブサイトの表示をさせる際に、自分で指定したフォントで相手にも表示させる方法です。 通常、ウェブサイトのフォントは、閲覧する人のコンピュータに同じフォントがなければ、CSSでfont-familyを…続きを読む
ウェブページの内容量が少ない場合には、フッターをブラウザの表示領域最下部に表示し、内容量がある場合にはスクロールした最下部に表示する方法です。 フッターを画面最下部に表示する HTMLソース <…続きを読む
CSS3を使ってテーブルの両端の列の右側はボーダーを表示せず、それ以外のセルの右側にはボーダーを表示したい、という場合には、複数の条件を適用したセレクターを設定する方法です。 「～かつ、～」というセレ…続きを読む
FTPソフトである「FileZilla」を使ってサーバ上のファイルを削除しようとしたときに、 「8ビット文字コードへ変換するコマンドに失敗しました」 というメッセージが出てしまい、削除できないことがあ…続きを読む
Zoomを有料で契約していると、1年ごとの自動更新に設定されます。 Zoomを解約する方法を調べました。 Zoomの自動更新をキャンセルする Zoomの解約とは、契約の自動更新をさせなくすることと同義…続きを読む
縦横比を保ったまま画像のサイズを変えて表示する方法です。 例えば、ウェブサイトをPCで閲覧するためのサイズとスマホで閲覧するサイズの2種類をCSSで切り替えてつくる場合、画像のサイズもPCとスマホによ…続きを読む
CSSで、マウスオーバー時に、徐々に色が変化したり、形が変化するようなアニメーション効果を付ける方法です。 CSS3で実現 例えば、マウスオーバー時に色を徐々に変化させたい場合には、以下のように書きま…続きを読む