質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

3883閲覧

iphone(safari)でチェックボックス表示のズレを解消したい

kajokajo

総合スコア1

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

1クリップ

投稿2020/11/16 01:39

スマホサイズのwebサイト制作は初心者で細かい部分に苦労しています。

前提・実現したいこと

リストを表示するために
頭にチェックボックス(チェック入り)をつけたリストを作りたいです。
チェックボックスは見る人が動かせないようにして欲しいと言われています。

ここに質問の内容
スマホで表示することを前提にしたページでiphone7(8)safari、Chromeで表示した場合、チェクボックスが微かに切れて表示されることを解消したいです。確認できる範囲でAndroidの一部ではずれて表示されないようです。
解決のためにアドバイスいただければ幸いです。

発生している問題・エラーメッセージ

iphone7(8)safariで表示した場合、チェクボックスが微かに切れて(ずれて)表示される

該当のソースコード

HTML

1<!DOCTYPE html> 2<html lang="ja"> 3<meta charset="UTF-8"> 4<title>リスト</title> 5<meta name="keywords" content=""> 6<meta name="description" content=""> 7<meta name="viewport" content="width=device-width,initial-scale=1"> 8 9<head></head> 10<body> 11<header> 12</header> 13 <main> 14 <div class="wapper"> 15 <h1><span class="under">リスト</span></h1> 16 <h2><span class="under">くだもの</span></h2> 17<p><input type="checkbox" name="foo" value="1" checked="checked" disabled="disabled" /><input type="hidden" name="foo" value="1" /> 18 りんご</p> 19<p><input type="checkbox" name="foo" value="2" checked="checked" disabled="disabled" /><input type="hidden" name="foo" value="2" /> 20 みかん</p> 21<p><input type="checkbox" name="foo" value="3" checked="checked" disabled="disabled" /><input type="hidden" name="foo" value="3" /> 22 なし</p> 23<p><input type="checkbox" name="foo" value="4" checked="checked" disabled="disabled" /><input type="hidden" name="foo" value="4" /> 24 スイカ</p> 25<p><input type="checkbox" name="foo" value="5" checked="checked" disabled="disabled" /><input type="hidden" name="foo" value="5" /> 26 ぶどう</p> 27<p><input type="checkbox" name="foo" value="6" checked="checked" disabled="disabled" /><input type="hidden" name="foo" value="6" /> 28 もも</p> 29 </div> 30 </main> 31 <div class="wrap"> 32 <input type="checkbox" name="check" value="本店" id="honten" checked disabled> 33 <label for="honten" class="sample">本店</label> 34 <input type="checkbox" name="check" value="東京支店" id="tokyo" disabled> 35 <label for="tokyo" class="sample">東京支店</label>  36 <input type="checkbox" name="check" value="大阪支店" id="osaka"> 37 <label for="osaka" class="sample">大阪支店</label>  38 <input type="checkbox" name="check" value="名古屋支店" id="nagoya"> 39 <label for="nagoya" class="sample">名古屋支店</label>  40 <input type="checkbox" name="check" value="福岡支店" id="hukuoka"> 41 <label for="hukuoka" class="sample">福岡支店</label>  42 </div> 43<footer> 44</footer> 45</body> 46<html>

試したこと

cssのinlineやフォントサイズやマージンやパディングで整えることを試しましたが改善されませんでした。チェックボックスを操作できるようにすると綺麗に表示されました。
cssが効果的でなかったのでこちらではcssの記述はしていません。
input type="hidden"を削除してチェックボックスを操作できるようにすると綺麗に表示されました。

補足情報(FW/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

cerfweb

2020/11/16 08:41

cssが影響しているとしか思えませんので、今適用しているcssを提示していただけますか。
kajokajo

2020/11/16 09:07

コメントありがとうございます。 初めにcssが影響していることを疑ったので現在テスト環境でcssは記述(link)をしていませんが同様の表示になります。htmlのみです。iphone7(8)Safari、Chromeで少しだけずれて表示されてしまいます。
guest

回答1

0

ベストアンサー

確かにおっしゃる通り、disabledの状態だと端が切れてしまうのを確認いたしました。Safariの開発ツールで調べたところ、opacityが1の時は表示されるが半透過にすると隠れてしまうようです。これはCSSフレームワークのBootstrap使用時でも同じなので、どうしても気になるようでしたら、デフォルトのcheckboxをdisplay:noneにしてカスタマイズするより方法がなさそうですね。(カスタマイズの方法はググれば色々紹介されていますので割愛します。)

投稿2020/11/16 11:22

cerfweb

総合スコア1907

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kajokajo

2020/11/16 12:12

checkboxをdisplay:noneというアイデアが抜けていました!cssでカスタマイズを試してみます。アドバイスいただきありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問