jQuery】デバイスに合わせて特定のタグを挿入するマークアップfacebooktwitter今日は、サイトを訪問したデバイスによってタグを追加するjsを書こうと思います。タブレットやスマートフォンなど、CSSを追加したい時になんか便利ですね。デモのファイルはこちらからダウンロードできます。応用編デモ▼div(id=”apArea“)にデバイスに応じてテキストが挿入されます。Step1:まず下準備こちらはいつもと同じです。必要なファイルを読み込みます。します)を読み込みます。今回は”idを指定して、そのidを持つ要素の中にタグを挿入する”という記述にします。id=”apArea“を持つdivを作ります。該当のidがついていればdiv以外のタグでもOKです。中身を書き込んでいきましょう。「<p>iPadで見てます!</p>」などの緑文字の箇所には、挿入したいタグを書き込みます。-1){$('#apArea').html('<p>iPhoneで見てます!</p>');}else{$('#apArea').html('<p>iPhone・iPad・Android以外で見てます!</p>');};});詳しく書くと、こう。}」のかたまりを削ったり増やしたりしてください。-1){$('#apArea').html('<p>iPhoneで見てます!</p>');}else{$('#apArea').html('<p>iPhone・iPad・Android以外で見てます!</p>');};});▽一つだけの場合。iPadだけ判定したい。{$('#apArea').html('<p>iPadで見てます!</p>');};});◆スマートフォンかPCかの判別だけしたいスマフォかPCかを分けるだけなら、if文を短縮して記述することができます。ifの後の()の条件を「||」で区切って繋げて書くと、「iPadもしくはiPhoneもしくはAndroidの時」というorの意味になります。{$('#apArea').html('<p>スマートフォンで見てます!</p>');}else{$('#apArea').html('<p>iPhone・iPad・Android以外で見てます!</p>');};});◆bodyタグにclassを追加するとかしたいbodyタグにcssを追加したい。「.html」の部分を「.addClass」にすると、指定した要素にclassを付与することができます。CSSの切替に便利ですね。緑文字の箇所は任意で挿入してください。デザイン・マークアップ・映像制作など幅広く担当しています。※この記事は2024年10月現在の情報です。※この記事は2024年10月現在の情報です。※この記事は2024年10月現在の情報です。(エイトビット)東京都目黒区でWebサイト制作、Webシステム開発などを行っております。コーポレートサイトやWebサービスの企画・提案を得意としており、自社での経験を元にアイデアをカタチにするお手伝いをさせていただいております。見積りシミュレーションをご用意いたしました。※この記事は2024年10月現在の情報です。※この記事は2024年10月現在の情報です。※この記事は2024年10月現在の情報です。※この記事は2024年10月現在の情報です。WordPressでも利用することは可能ですが、WordPressはセッション関数を推奨していません。