画面の幅(width)に応じて要素にclass名を付与・変更する方法jQueryを使って、ある画面幅を境に任意のボックスへ動的にclass名を付与したり外したりする時のTIPSです。スポンサードリンクある画面幅を境に任意のボックスへ動的にclass名を付与する方法サンプルまずは、こちらのサンプルをご覧くいださい。画面幅を縮めると背景に色が付いて、画面幅を広げると背景色が消えます。これは、画面幅500pxより狭いときには、.pinkというクラスがboxに付与され、500px以上の時にはそのクラス名が外されるからです。上記サンプルの記述例です。jQueryの本体を読み込みます。src=&quot;js/jquery.js&quot;&gt;&lt;/script&gt;続いて以下コードを記述します。5行目に分岐となる値(ここでは500px)を、7行目と9行目には付与されるclass名(ここでは.pink)を記述します。}});解説1行目の.rezizeは画面幅が変更された際にトリガーとなるjQueryメソッドです。画面幅が変更されると、以降のコードが実行されます。はじめに実行されるのが3行目。.windowは幅を見るメソッドで、これで画面サイズを取得して、変数xの中に代入します。変数yの中に境となる値を代入します(上記サンプルでは500(px)となっていますが、ここは任意の値に変更していただいて構いません)。6行目でxとyの値を比較して、画面幅が500pxとしたyより大きかったらそれ以降のコードが実行されます。.addClassはクラスを付与するjQueryメソッド、.removeClassはクラスを外すメソッドです。.pinkというクラス名を付けたり外したりする指定になります。画面幅の取得や特定の変数の値の比較、クラス名を付ける・はずす、といったメソッドは、知っておくと色々と応用が利くので便利ですよ。要素を横並びにさせる時はfloatが主流ですが、inlineやinline-blockを使いたいこともあります。スマホサイトで「-webkit-text-size-adjust」が効かない時の対処法PC向けサイトをスマートフォンで閲覧した時に、なぜか文字サイズが大きくなってしまうことがあります。これは、スマホブラウザが文字サイズ自動で調整節することが原因。Mapを埋め込む方法・手順お店・事務所・会社のウェブサイトに欠かせない要素が住所やアクセス情報の掲載。Mapを利用する方法がありますが、「敷居が高い」と敬遠されている方もいます。ボックスの幅を超えてコンテンツを表示させる方法ボックスの幅を超えて(はみ出して)コンテンツを表示させるデザインってありますよね。コーディング郵便番号から住所を自動入力してくれるフォームを作成してみた「郵便番号から住所を自動で入力できるようにしたい」。問い合わせフォームの製作時にそんな要望が挙がることもあります。角丸を簡単に実現できる「border-radius」の使い方CSS3には角丸が超簡単に実現できるborder-radiusというプロパティがあります。簡単な角丸から難しい角丸まで、その記述方法を解説します。画像ページの先頭へ某企業のウェブ担当を経て2012年に独立。現在は東京・神奈川を中心にウェブ企画/デザイン/コーディングなどウェブ製作業務に従事してます。