TechAcademy（テックアカデミー） Webデザインコース Webデザイン HTML HTMLでアクセスからスマホ判定して動作を替える方法を現役デザイナーが解説【初心者向け】
オーダーメイドコース
icon
icon
HTML

HTMLでアクセスからスマホ判定して動作を替える方法を現役デザイナーが解説【初心者向け】

初心者向けにHTMLでアクセスからスマホ判定して動作を替える方法について解説しています。ここではjQueryを使ってスマートフォンからのアクセスを判定する方法を紹介します。判定と動作の切り替えの方法を覚えましょう。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社　調査期間：2021年8月12日～8月16日　 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名　 調査手法：インターネット調査

HTMLでアクセスからスマホ判定して動作を替える方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。

そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。

 

なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のHTMLカリキュラムをもとに執筆しています。

 

田島悠介

今回は、HTMLに関する内容だね！

大石ゆかり

どういう内容でしょうか？

田島悠介

アクセスからスマホ判定して動作を替える方法について詳しく説明していくね！

大石ゆかり

お願いします！

 

スマホからのアクセスを判定する方法

スマホからのアクセスを判定する方法は様々ありますが、今回はjavascript(jQuery)を使用して判定したいと思います。

$(function(){
  var ua = navigator.userAgent;
  if(ua.indexOf("iPhone") > 0 || ua.indexOf("Android") > 0 && ua.indexOf("Mobile") > 0){
  console.log("スマートフォン用のコードを書く");
  }else{
  console.log("PC/タブレット用のコードを書く");
  }
});

 

PCとスマホで動作を切り替える理由

最近ではスマホからのアクセスの方が多いサイトが増えてきており、スマホでPCサイトを表示するのではなく、スマホサイトに最適なデザインを作成するのが当たり前となりました。

上記コードを使えば、例えばキャンペーンサイトなどで、アプリのダウンロードボタンをスマホサイトのみ表示し、PCは非表示にすることができます。

うまく使いこなすことで、コンバージョンをあげる施策になるかもしれません。

 

[PR] Webデザインで副業する方法とは

スマホ判定して動作を切り替えてみよう

それではサンプルコードを作成しましたので、ブラウザのユーザーエージェントを切り替えて確認してみましょう！

See the Pen
WNvzRYz by This is standard (@koutafunahashi)
on CodePen.

 

監修してくれたメンター

舟橋幸太郎

フリーのWebデザイナー、グロースハッカーです。

KaizenPlatform社主催のGrowth Hacker Awardsで受賞歴があります。過去行ったA/Bテストが実績として書籍に掲載されました。

TechAcademyではWebデザインコースを担当しています。

 

大石ゆかり

内容分かりやすくて良かったです！

田島悠介

ゆかりちゃんも分からないことがあったら質問してね！

大石ゆかり

分かりました。ありがとうございます！

TechAcademyでは初心者でも、オリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。

記事を検索

関連するキーワード

関連する記事

HTMLエラーチェッカーの使い方を現役デザイナーが解説【初心者向け】

HTMLエラーチェッカーの使い方について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 そもそも、H...
HTML

HTMLでbuttonタグを使ってリンクを貼る方法を現役エンジニアが解説【初心者向け】

本記事では、HTMLでbuttonタグを使ってリンクを貼る方法についてご紹介します。 HTMLでボタンを作りたい方 ボタンを作るためにbutto...
HTML

HTMLでコードを表示する方法【初心者向け】

HTMLについて今さら聞けない！という初心者のために、HTMLの基礎を紹介する記事です。 今回は、HTMLでコードを表示する方法について、テックアカデミー...
HTML

HTMLでvalue属性を使って入力初期値を指定する方法を現役エンジニアが解説【初心者向け】

value属性を使ってHTML内の入力初期値を指定する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。...
HTML

HTMLでspanを使用して右寄せ表示する方法を現役デザイナーが解説【初心者向け】

HTMLのspan要素はご存じでしょうか。 一部の文字の色を変更したり、表示位置を変更させたい時などに便利なタグです。 この記事では、HTMLでspan...
HTML

HTMLでCache-Controlを使用する方法を現役エンジニアが解説【初心者向け】

HTMLでCache-Controlを使用する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...
HTML

あわせてよく読まれている記事

JavaScriptでオセロゲームを作成する方法を現役エンジニアが解説【初心者向け】

JavaScriptでオセロゲームを作成する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 実際のコードをもとに解説していきますので、理解を深めていきましょう。 目次スマホからのアクセスを判定する方法PCとスマホで動作を切り替える理由スマホ判定して動作を切り替えてみよう監修してくれたメンター そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。   田島悠介 今回は、JavaScriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 JavaScriptでオセロゲームを作成する方法について詳しく説明していくね！ 大石ゆかり えっ？オセロゲームを作るなんて、難しそうですね、、、 田島悠介 大丈夫！1つ1つの処理を丁寧に解説するから、一緒に頑張ろう。 大石ゆかり はい！よろしくお願いします！   はじめに 対象読者 本記事は、JavaScriptを学習中であり、変数や関数などひととおりの基礎知識を学習した初心者の方向けに書いています。 本記事が難しすぎると感じた場合や、JavaScriptの基礎を学習してから挑戦したい場合には、以下で紹介しているサイトなどを用いて学習してみましょう！ 入門向けのJavaScriptを学習できるサイト   本記事の目的 本記事の目的は、JavaScriptを用いたオセロゲームの実装を通して、以下のようなスキルを習得・向上させることです。 設計から実装までの、エンジニアの思考プロセスを体験する ゲームロジックに基づいたプログラム実装を通して、論理的思考能力を鍛える オセロゲームの実現に必要な様々な処理を学び、JavaScriptという言語の仕様をより深く理解する 上記の目的を達成するために、本記事は読者のみなさんが実際に手を動かしながら学べるハンズオン形式をとっています。 解説に沿ってコードを書きながら、プログラミングに親しんでいきましょう！   注意点 本記事では、オセロゲームを0から実装するために必要な解説のすべてを記載しているため、記事の分量が多くなっています。 一気に最後まで進めようとせずに、ご自身のペースで学習を進めることを推奨します。 本記事では章ごとに所要時間の目安を記載しているので、学習の区切りを決める参考にしてください。   オセロゲームのルールに基づいて設計をしよう 🕛目安時間：1時間 ゲームに限らず、いかなる実装においても設計は非常に重要です。 機能要件を満たしつつも、できるだけシンプルでメンテナンスしやすい設計を考えるのもエンジニアの醍醐味の1つです。 「その設計、自分ならどうするかな？」ということを考えながら読み進めてみてください。   オセロゲームのルールを確認しよう オセロゲームを実装する上での機能要件は、一言でいうと「オセロゲームのルールに従って盤面の状態が変えられる」ということです。 まずは前提条件となるオセロゲームのルールを確認していきます。   オセロゲームのルール 盤は8×8マスを利用する 初期状態で真ん中の4マスに白黒の石を交互に配置する 先攻を黒とし、黒⇨白⇨黒…の順番で石を置いていく 石を置ける場所は、下記の条件を満たしている 置くマスに他の石がないこと 置くマスの上下左右、斜め1マスの場所に相手の石があること 置いた石、相手の石があった方向の延長上に自身の石があること 石を置ける条件を満たせない場合は、パスをして相手の番になる すべてのマスに石が置かれた時点でゲーム終了（「空きがあるが、白黒どちらも置けない」状況は今回は考えないことにする） ゲーム終了時点で石の数が多い方が勝ちとなる 以上がオセロゲームのルール概要です。   ルール以外の要件を定めよう ゲームのルールのほか、今回の実装では以下の条件を適用することとします。 自動でパスする機能は実装せず、「パス」ボタンを設置する 「現在どちらの手番であるか」を表示する ゲーム終了後、白黒それぞれの石の数と勝敗を表示する ゲームの初期化機能は実装しない 石が裏返るなどのアニメーションは実装しない CPUとの対戦機能は実装しない jQueryなどのフレームワークは使用しない 画像は用いない それでは、要件を確認したところで実際の設計に移りましょう。   要件に沿って実装設計をしてみよう 同じルールや条件でも、それをどのように実装に落とし込むかはエンジニア次第です。 実装設計では、いかに無駄なくすべての要件を満たした実装ができるかを考え尽くします。 それでは、紙やプレゼンスライドなどに、大まかな処理の流れを考えて書いてみてください。 想定されるケースを洗い出し、そのケースに応じてどう処理を分岐するかを矢印で表してみましょう。   本記事の執筆者は、以下のように流れを作成しました。 上図のように場合分けをしつつ、プログラムのフローを書き出すことで、コードに落とし込む際に整理がしやすくなります。 もちろん上記のフロー図が唯一の正解ということではなく、他にもいろいろなパターンの表現方法が考えられます。 想定されるケース・条件を網羅し、かつ無駄のない流れで設計できると、「良いフロー図」と呼ぶことができます。 本セクションは以上です。 休憩・復習などをして、ご自身のペースで次のセクションへ進んでください。   [PR] Webデザインで副業する方法とは開発環境を整えよう 🕛目安時間：30分 今回の開発に必要な環境は以下の通りです。 コードエディタ（図解ではVisual Studio Codeを使用します） Webブラウザ（Google Chrome推奨）   コードエディタを用意しよう コードエディタは普段使い慣れているもので構いませんが、解説に用いるVisual Studio Codeを導入したい方は、以下の記事を参考にセットアップしてください。 Visual Studio Code（VSCode）とは？インストールや使い方も現役エンジニアが解説   Webブラウザの環境を整備しよう 主要なWebブラウザには、コードの構造を確認したり、エラーを発見したりするための開発者用ツールが備えられています。 本記事では、実務現場の多くで使われているGoogle Chromeを用いて開発を進めていきます。 開発者ツールの使い方をまだ学習していない方は、次のセクションに進む前に以下の記事に目を通しておいてください。 Chromeの開発者ツールを使ってJavaScriptのデバッグを行う方法を現役エンジニアが解説【初心者向け】 盤面と石をブラウザ上に表示しよう 🕛目安時間：1時間30分 このセクションでは、オセロゲームに必要な盤および石を表示するための実装を行います。 本格的にHTML / CSS / JavaScriptのコードが登場するので、要点を1つ1つ理解しながらコーディングをしていきましょう。   必要なフォルダとファイルを作成しよう まずはプロジェクトのルートとなるフォルダを1つ、PCの任意の場所に作成してください。 （例ではオセロゲームの一般的な英語名であるreversiというフォルダ名にしました）   フォルダ内には、以下の3つのファイルを作成してください。 index.html style.css main.js 下図のような構成にできていればOKです。   HTMLをコーディングしよう いよいよコーディング作業に入ります！ 今回はサンプルコードに従って、index.htmlの中身を記述してみましょう。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>オセロゲーム</title> <link rel="stylesheet" href="style.css"> </head> <body> <!-- 盤 --> <div id="stage" class="stage"></div> <!-- 各マスを描画するためのテンプレート --> <div id="square-template" class="square"> <div class="stone"></div>
JavaScript

PHPで素数かどうかを判定する方法を現役エンジニアが解説【初心者向け】

今回は、PHPで素数かどうかを判定する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。   PHPについてそもそもよく分からないという方は、PHPとは何なのか解説した記事を読むとさらに理解が深まります。   なお本記事は、TechAcademyのオンラインブートキャンプ、PHP/Laravel講座の内容をもとに紹介しています。   田島悠介 今回は、PHPに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 PHPで素数かどうかを判定する方法について詳しく説明していくね！ 大石ゆかり お願いします！   この記事ではPHPで素数かどうかを判定する方法について解説します。   目次 素数とは 素数かどうかを判定する方法 実際に書いてみよう まとめ   素数とは 素数とは1と自分自身以外に正の約数を持たない自然数で、1でない数のことをいいます。 例えば19だと割り切れるのが「1」と「19」しかないので素数であるのに対し、20だと「1」と「2」、「4」、「5」、「10」、「20」とあるので素数ではないことになります。 100までだと「2, 3, 5, 7, 11, 13, 17, 19, 23, 29, 31, 37, 41, 43, 47, 53, 59, 61, 67, 71, 73, 79, 83, 89, 97」の25個が素数となります。   [PR] Webデザインで副業する方法とは素数かどうかを判定する方法 PHPで素数かどうかを判断するには以下のようなプログラムとなります。 判定 = true; for ($i = 2; $i < 素数か判定したい数字; $i++ ) { if (素数か判定したい数字 % $i == 0) { 判定 = false; break;
PHP

JavaでString型の値のnull判定を行う方法【初心者向け】

この記事では、JavaでString型の値についてnull判定を行う方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 目次スマホからのアクセスを判定する方法PCとスマホで動作を切り替える理由スマホ判定して動作を切り替えてみよう監修してくれたメンター そもそもJavaについてよく分からないという方は、Javaとは何なのか解説した記事を読むとさらに理解が深まります。   田島悠介 今回は、Javaに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 String型の値についてnull判定を行う方法について詳しく説明していくね！ 大石ゆかり お願いします！   nullとは nullとは、値が定義されていない状態のことです。 Javaを実行中に発生しやすいエラーの1つとして、参照型の変数を参照しようとした際に、その変数の値がnullの場合に発生するNullPointerExceptionがあります。 このエラーを防ぐために、コードの中で変数がnullかどうかを判定します。   String型の値が空文字列またはnullのどちらか判定する方法 1. 比較演算子を使って判定する 比較演算子==を使って、変数とnullを比較します。結果はboolenで得られます。   2. StringUtilsクラスのisEmptyメソッドを使う StringUtilsクラスはApache Commons Langライブラリのクラスです。 isEmptyメソッドの引数にnullかどうかを判定したい変数を設定します。結果はboolenで得られ、対象がnullの場合trueが得られます。 また、isEmptyメソッドは空文字かどうかの判定も同時に行い、空文字の場合はtrueが得られます。   [PR] Webデザインで副業する方法とは実際に書いてみよう 比較演算子、およびStringUtilsクラスのisEmptyメソッドを使ってnull判定を行います。 又、StringUtilsクラスのisEmptyメソッドでは空文字判定も実施します。 ソースコード import org.apache.commons.lang3.StringUtils; public class kadai03 { public static void main(String[] args) { // 変数sの値が定義されているか(nullでないかどうか)を判定する String s = null; // 1.比較演算子==を使って判定する方法 if(s == null) { System.out.println("比較演算子で判定⇒変数sはnull"); }   //
Java

PHPで文字コードの判定を行う方法【初心者向け】

PHPで文字コードの判定を行う方法について解説します。 文字コードとは何なのか説明しているので、ぜひ理解しておきましょう。   そもそもPHPについてよく分からないという方は、PHPとは何なのか解説した記事を読むとさらに理解が深まります。   なお本記事は、TechAcademyのオンラインブートキャンプPHP/Laravel講座の内容をもとに紹介しています。   田島悠介 今回は、PHPに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 PHPで文字コードの判定を行う方法について詳しく説明していくね！ 大石ゆかり お願いします！   文字コードとは 文字コードと言えば一般的には「Shift-JIS」や「UTF-8」などのキーワードを連想される方も多くいるかと思います。 ですが、これらは正確には符号化方式と呼ばれるものにあたります。 実は文字コードという概念には2つの概念が含まれておりまして、1つ目は「文字集合」、2つ目は「符号化方式」と呼ばれるものです。 まず「文字集合」とは、その名のとおり文字の集合体と考えてください。 例えば、日本語では「ひらがな」「カタカナ」「漢字」といった様々な種類の文字がありますよね。 これらの日本語を表せる文字の集合として有名なのが「JIS X 0208」です。 もちろん、この「JIS X 0208」には中国語やベトナム語などの文字列は含まれていません。 もう一つ有名な文字集合は「Unicode」です。 「Unicode」の特徴は世界中で使われているすべての文字の集合体となっていることです。もちろん日本語も中国語やベトナム語も含まれています。 そして、これらの文字集合には1つ1つの文字に対して識別するための唯一の番号が振られています。   もうひとつの概念である「符号化方式」とは 文字集合で定義されている各文字に割り当てられている番号に対応するコンピュータが扱う数字の対応表となります。 例えばコンピュータは「あ」等の文字列をUTF-8という「227 129 130」のような数値として認識しています。 例えば、テキストファイルに「あ」と書いてUTF-8で保存した場合は、コンピュータのハードディスクには「227 129 130」という数値が保存されます。 このテキストファイルをエディタで開くときに、エディタは「UTF-8」という文字符号化方式で「227 129 130」を「あ」に変換して表示しています。 最初に述べたように符号化方式には「UTF-8」「Shift-JIS」など多くの種類があります。 「UTF-8」は文字集合「Unicode」に含まれる各文字について「Shift-JIS」は文字集合「JIS X 0208」に含まれる各文字について、文字集合の各文字に割り当てられている番号とコンピュータが扱う数字の対応表を持っています。   文字コードの判定の方法 PHPではmb_detect_encoding( )関数を利用して、第一引数に渡した文字列の文字コードを判定します。 ただ、注意点があり、デフォルトではASCII/UTF-8だけの文字コードしか判定できません。 「Shift-JIS」「EUC-JP」などの文字コードを判定させたい場合は第二引数に、’Shift-JIS,EUC-JP’のようにカンマ区切り文字列で渡す必要があります。 返り値は一致した場合は、一致した文字コードを文字列で返却します。一致する文字コードがない場合はfalseが返却されます。   参考 php.net-mb-detect-encoding   [PR] Webデザインで副業する方法とは実際に書いてみよう ※下記のコードはUTF-8でエンコードされている前提です。 // デフォルトの判定可能な文字コードを確認しましょう！ print_r(mb_detect_order()); // [0] => ASCII [1] => UTF-8 // 文字コードを判定してみよう！ // ① UTF-8とEUC-JPでエンコーディングされた文字列を用意します $utf8 = "テスト"; // デフォルトはUTF-8でエンコードされてます $euc = mb_convert_encoding($utf8, 'EUC-JP'); // EUC-JPでエンコードし直した文字列を別の変数に格納します // ② 文字コードを判定してみましょう // デフォルトの判定可能な文字コードに含まれないEUC-JPの文字列を判定 print_r(mb_detect_encoding($euc).PHP_EOL); // falseなので何も出力されない // デフォルトの判定可能な文字コードに含まれるUTF-8の文字列を判定 print_r(mb_detect_encoding($utf8).PHP_EOL); // 「UTF-8」という文字列が出力される // 判定可能な文字コードにEUC-JPを指定し、EUC?JPの文字列を判定 print_r(mb_detect_encoding($euc).PHP_EOL, 'EUC-JP'); // 「EUC-JP」という文字列が出力される"   この記事を監修してくれた方 青木 敦史（あおきあつし） 昼間は自社のWebサービスを運営している会社でフロントエンド/バックエンドを担当しているエンジニア。 Webエンジニアの経験は5年ほどです。TechAcademyではPHP/Laravelコースを担当しています。 開発実績: メイクレッスン支援アプリ / 電力自由化パッケージ /
PHP

JavaScriptで真偽値と三項演算子を使う方法【初心者向け】

JavaScriptの使い方を初心者向けに紹介した記事です。 今回は、JavaScriptで真偽値と三項演算子を使う方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 また、入門向けのJavaScriptを学習できるサイトを紹介しているので、合わせてご覧ください。   本記事では、テキストエディタのmiを使っていますが、JavaScriptの場合はWebブラウザとテキストエディタがあれば特別な開発環境がなくても開発することができます。 目次スマホからのアクセスを判定する方法PCとスマホで動作を切り替える理由スマホ判定して動作を切り替えてみよう監修してくれたメンター そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。   今回の記事の内容は動画でもご覧いただけます。 テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。   真偽値とは 真偽値とは、その命題が真か偽かを示す2つの値で、それぞれtrue、falseと書きます。 主に条件分岐で使われます。   大石ゆかり trueやfalseって何でしょうか？ 田島悠介 値なんだよね。極端に書くとif(true)で、if文のブロックが実行されるんだ。 大石ゆかり 文字列のようにも見えますよね？ 田島悠介 そうそう。文字列だとシングルクォーテーションなどで囲わないとだめだけど、trueやfalseは値なので、数値のようにそのまま書けるんだよね。   三項演算子とは 三項演算子とは演算子のひとつで、その名の通り3つの項目を使う唯一の演算子です。 その性質から、if文の簡単な書き換えといえるでしょう。     [PR] Webデザインで副業する方法とはif文・三項演算子それぞれの構文 if文の構文 if文による条件分岐では、基本的に3行以上の長い式を書かなければなりませんよね。 条件式が真(true)のときは式1を、偽(false)のときは式2が実行されます。 if (条件式) {   // 式1 } else {   // 式2 }   しかし、三項演算子を使うと、次のように同じ内容を1行で簡潔に記述することができるのです。   三項演算子の構文 条件式 ? 式1 : 式2 ;     三項演算子で値を返す 三項演算子を使うと、条件によって値を返すだけの簡単な式を作成できます。 サンプルコード 変数scoreの値が70以上なら「合格」、70未満なら「不合格」と出力するプログラムです。 var score = 75; var kekka = score >= 70 ? "合格" : "不合格"; document.write(kekka); 実行結果 まず、条件式「score >= 70」で条件判定します。 そしてsocoreが70以上なら?の次にある値「合格」の文字列が返されます。 条件に当てはまらなければ:以降の「不合格」の文字列が返されます。 三項演算子から返された「合格」あるいは「不合格」の文字が変数kekkaに代入されます。 演算子がいっぱいあるので複雑に見えますが、三項演算子をひとつの塊としてみるとわかりやすいでしょう。 var kekka = (score >= 70 ? "合格" : "不合格"); 本来、三項演算子全体を括弧でくくる必要はありませんが、以下のコードのように頭の中のイメージで三項演算子をひとつのまとまりとして判別できるようにしましょう。   実際にプログラムを書いてみよう それでは、実際にプログラミングを書きながら実行してみましょう。   if文で書く まずはif文からです。 サンプルコード 変数moneyに代入される値が5000以上なら「お金持ち」、5000以下なら「貧乏」とブラウザに出力されるようなプログラムを書きます。 <!DOCTYPE html> <html lang = "ja"> <head> <meta charset = "utf-8"> <title>JavaScriptの練習</title> </head> <body> <script> var money = 10000; if (money > 5000) { document.write ("お金持ち"); } else { document.write
JavaScript

Pythonで指定した文字列を含むかどうか判定する方法を現役エンジニアが解説【初心者向け】

Pythonで指定した文字列を含むかどうか判定する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 目次スマホからのアクセスを判定する方法PCとスマホで動作を切り替える理由スマホ判定して動作を切り替えてみよう監修してくれたメンター そもそもPythonについてよく分からないという方は、Pythonとは何なのか解説した記事を読むとさらに理解が深まります。   田島悠介 今回は、Pythonに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 Pythonで指定した文字列を含むかどうか判定する方法について詳しく説明していくね！ 大石ゆかり お願いします！   この記事では、Pythonにおいて、ある文字列中に指定した文字列が含まれているかどうかを判定する方法を解説します。 in演算子を使うことで、リスト型などの複数の要素を持つオブジェクトに、特定の要素が含まれているかを確認できます。 in演算子によって、指定した文字列を含むかどうか判定できます。   in演算子とは まずは、in演算子について解説します。 in演算子とは、「所属検査演算」と呼ばれる処理を実現するための演算子です。 「所属検査演算」とは簡単に言うと、リスト型、辞書型などの複数要素を持つデータ型などに対して、「ある要素が含まれているかどうか」を判定する処理のことです。 in演算子は、以下のように記述します。 x in リストなどのオブジェクト 上記のコードで、変数の要素の中にxという要素が含まれているかどうかを判定します。 結果に応じて、以下のようにTrueかFalseのbool型のオブジェクトを返します。 含まれている場合→True 含まれていない場合→False   指定した文字列を含むかどうか判定する方法 上で説明したin演算子を、以下のコードのように文字列型のオブジェクトに対して使うことで、指定した文字列を含むかどうか判定できます。 含まれているか判定したい文字列 in 文字列型オブジェクト 上記のコードで、ある文字列の中にin演算子の左側に指定した文字列が含まれているかどうかを判定します。 結果に応じて、以下のようにTrueかFalseのbool型のオブジェクトを返します。 含まれている場合→True 含まれていない場合→False 文字列の場合は、大文字小文字を区別して判定します。 また、もし、指定する文字列として、""という空文字列を選んだ場合、必ずTrueが出力されるので注意した方が良いでしょう。   [PR] Webデザインで副業する方法とは実際に書いてみよう それでは、実際にコードを書いてin演算子を実行し、文字列が含まれているか判定してみましょう。 サンプルプログラムでは、”Hello World.”という文字列について、in演算子を使った判定を行っています。 サンプルプログラム #文字列を準備 string = "Hello World." #"Wor"という部分文字列が含まれているかどうかを判定 print("Wor" in string) #部分文字列には、1文字を指定することもできる print("e" in string) #in演算子は大文字と小文字を区別することを確認 print("h" in string) #空文字列を指定した場合必ずTrueが出力される print("" in string) 出力結果 True True False True 指定した文字列が含まれているかどうか、in演算子で判定できていることが確認できますね。 文字列の中身や、部分文字列を変更してみることで、in演算子の使い方をさらに確認してみると良いでしょう。   まとめ この記事では、Pythonを使って、文字列に指定した部分文字列が含まれているかどうかを確認するin演算子を使った方法を解説しました。 コードも1行で済み、非常にシンプルな方法なので、必要な時のために使い方に慣れておくと良いでしょう。   大石ゆかり 内容が分かりやすくて良かったです！ 田島悠介 ゆかりちゃんも分からないことがあったら質問してね！ 大石ゆかり 分かりました。ありがとうございます！   Pythonを学習中の方へ これで解説は終了です、お疲れさまでした。 つまずかず「効率的に」学びたい 副業や転職後の「現場で使える」知識やスキルを身につけたい プログラミングを学習していて、このように思ったことはありませんか？ テックアカデミーのPythonコースでは、第一線で活躍する「プロのエンジニア」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。 合格率10%の選考を通過した、選ばれたエンジニアの手厚いサポートを受けながら、人工知能（AI）や機械学習の基礎を学べます。 まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役エンジニアから教わること」を実感してみてください。 時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！
Python

あなたの目的に合わせて学べるコース

副業したい方

Web制作の力を身につけ
副業までサポート

はじめての副業コース

転職したい方

未経験から
Webエンジニアに

Webエンジニア転職保証コース

スキルアップしたい方

AIも統計解析もできる
Pythonを学ぶ

Pythonコース

※ 経済産業省の行うリスキリングを通じたキャリアアップ支援事業の補助金対象コースです。条件を満たすことで支払った受講料の最大70％がキャッシュバックされます。詳しくは こちら のページをご確認ください。

TechAcademyから
現役エンジニアの方へ
お知らせ

オーダーメイドコース
TechAcademy（テックアカデミー） Webデザインコース Webデザイン HTML HTMLでアクセスからスマホ判定して動作を替える方法を現役デザイナーが解説【初心者向け】