![](https://www.i-secure.jp/blog/wp-content/uploads/2024/04/swell2_pr_banner.jpg)
ポイント
ホームページを作成する際にはPCを使うと思いますが、そのままでは、作成したホームページがスマホやタブレットでどのように見えるのか、がわかりません。
スマホやタブレレットで直接確認するのが確実ですが、パソコンでもスマホやタブレットでの見え方を確認する方法があります!
作成はパソコン、閲覧はスマホやタブレットが主流ですので、必ずスマホやタブレットでの見え方を確認する習慣をつけましょう!
目次
WordPressのテーマにSWELLを使ってホームページを作成している場合
![](https://www.i-secure.jp/blog/wp-content/uploads/2024/04/Snag_34d1e38.png)
SWELLの「カスタマイズ」の一番下に表示の切替ボタンがあります。
このボタンを押すと、右側の表示が切り替わります!
- 左=パソコン
- 中央=タブレット
- 右=スマホ
直接、スマホやタブレットでホームページを閲覧する方法
試しにこの当サイトのHOMEの画面上で右クリックしてみました。
Chromeの場合
![](https://www.i-secure.jp/blog/wp-content/uploads/2024/04/Snag_35ab72d.png)
![](https://www.i-secure.jp/blog/wp-content/uploads/2024/04/Snag_35ac9f9.png)
Chromeの場合、QRコードの中央に恐竜のような絵が表示されます。
Edgeの場合
![](https://www.i-secure.jp/blog/wp-content/uploads/2024/04/Snag_35b218f.png)
![](https://www.i-secure.jp/blog/wp-content/uploads/2024/04/Snag_35b2c4d.png)
Edgeの場合は、普通のQRコードです。
スマホのカメラでQRコードを読み取ってくれないときの別のやり方
スマホのGoogleのアプリのGoogleレンズでQRコードを読ませてみて下さい!
![](https://www.i-secure.jp/blog/wp-content/uploads/2024/04/Snag_38ace17.png)
![](https://www.i-secure.jp/blog/wp-content/uploads/2024/04/Snag_38ada3c.png)
パソコンでスマホやタブレットでの見え方を確認する方法
レシポンシブルで見え方を表示してくれるサイトを利用する方法
いろいろな種類のスマホやタブレットを一度に一覧で表示してくれる便利なコイトがあります!
4
「Enter your site」の欄にスマホやタブレットの見え方を確認したいURLを入力します。
![](https://www.i-secure.jp/blog/wp-content/uploads/2024/04/Snag_3640b1d.png)
![](https://www.i-secure.jp/blog/wp-content/uploads/2024/04/Snag_36505d9.png)
![](https://www.i-secure.jp/blog/wp-content/uploads/2024/04/Snag_36761e9.png)
![](https://www.i-secure.jp/blog/wp-content/uploads/2024/04/Snag_365f886.png)
![](https://www.i-secure.jp/blog/wp-content/uploads/2024/04/Snag_367ed12.png)
![](https://www.i-secure.jp/blog/wp-content/uploads/2024/04/Snag_3686d00.png)
![](https://www.i-secure.jp/blog/wp-content/uploads/2024/04/Snag_368ec33.png)
![](https://www.i-secure.jp/blog/wp-content/uploads/2024/04/Snag_36afff0.png)
![](https://www.i-secure.jp/blog/wp-content/uploads/2024/04/Snag_36b54c7.png)
ブラウザのChromeを使って確認する方法
![](https://www.i-secure.jp/blog/wp-content/uploads/2024/04/Snag_36d8ee8.png)
Chromeでホームページを表示させてキーボードの「F12」を押します。
![](https://www.i-secure.jp/blog/wp-content/uploads/2024/04/Snag_37034f2.png)
すると左側にスマホやタブレットの種類を選択できるボタンが表示されます。
ここから、いろいろなスマホやタブレットの見え方を確認できます。
どの方法でも、臨機応変に使い分ければいいと思いますが、SWELLを使ってホームページ作成している場合、「カスタマイズ」の一番下に表示される切替ボタンを使うのがてっとりばやくて便利です。