モバイルデザイン10 ／ aタグ範囲｢切り替え」

デザイン ＞ モバイルデザイン

レスポンシブ

　状態:- 　閲覧数:1,894 　投稿日:2016-01-15 　更新日:2016-01-15
PCとスマホでは、aタグ範囲が異なる
・どうやって切り替えるの？

参考例


「Yahoo! JAPAN」「ユニクロ」
・何れも「繰り返し表示するリストブロック毎」にaタグで囲っている

専用サイトではなくレスポンシブサイトでaタグ囲み実装すると

　閲覧数:623　投稿日:2016-01-15　更新日:2016-01-15

問題点


専用サイトではなくレスポンシブサイトで上記実装すると
・PC画面でリンク範囲が広がり過ぎる不具合が発生

取り敢えずの対応


スマホでのaタグ囲み実装ブロック数を減少
・4ブロック数 → 2ブロック数

修正前
<a>

  <p></p>

  <img>

  <p></p>

  <p></p>

</a>


修正後
<a>

  <p></p>

  <img>

</a>

<p></p>

<p></p>



モバイルデザイン9 ／ トップページリスト表示

PC画面で、モバイル表示確認



類似度ページランキング
順位 ページタイトル抜粋 ％
1 モバイルデザイン10 ／ aタグ範囲｢切り替え」 92
2 モバイルデザイン7 ／ スマホ pc 広告 切り替え　bootstrap 47
3 モバイルデザイン6 ／ フォーム 45
4 モバイルデザイン4 ／ スマホメニュー　 41
5 モバイルデザイン2 ／ スマホサイトにおけるtableタグ使用可否を検討 40
6 モバイルデザイン3 ／ display: table; 39
7 モバイルデザイン8 ／ スマホはbodyタグに余白なしがデフォ？　 39
8 モバイルデザイン9 ／ トップページリスト表示 38
9 モバイルデザイン5 ／ スクロールアニメーション 38
10 モバイルデザイン1 ／ スマホサイトのベースとなるフレームワークを検討 34
11 タブ切り替え候補 31
12 「Bootstrapデザイン」✕「グラフ」 31
13 UIテキスト仕様調査「ログイン」 ／ 2018/2/17 31
14 「Bootstrapデザイン」✕「円グラフ」解析 29
15 Chrome「39.0.2171.95 m」でデザインが崩れる 29
16 UI仕様調査「ログイン」「ログアウト」 ／ 2011/11/23 29
17 モバイル フレンドリー テスト ／ viewport設定 27
18 デザイン変更 27
19 デザイン変更 27
20 Privateスマートフォンデザインルール 27
2026/3/31 13:13 更新
週間人気ページランキング ／ 3-24 → 3-30
順位 ページタイトル抜粋 アクセス数
1 Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない | モバイルデザイン(デザイン) 6
2 「.epsファイル」はあらゆるグラフィックソフトで編集できるとは限らない | Fireworks 8(Fireworks) 5
2 RGB ⇔ Lab | 色変換(色) 5
2 RGBの種類 ／ ビットカラー | RGB(色) 5
3 Design 0 4
4 「position:absolute;」指定する際は、必ず(親要素を含む)祖先要素の何れかで「position」を明示的に指定 | position(CSS) 3
4 ログイン 3
4 textareaを手動リサイズできない時は、ブラウザを落としてみる | Google Chrome(ブラウザ) 3
4 レスポンシブ カテゴリー 3
4 FontAwesomeでアイコンが□（四角）になって表示されない　Forbidden　 | Font Awesome(フォント) 3
4 HSV ／ HSB 3
4 bootstrap3で意図せず横スクロールバーが表示される場合は、containerクラスの入れ子を疑う | 3系(Bootstrap) 3
4 キャラクター無料作成ジェネレーター ／ FLASH ／ オンラインサービス | イラスト参考(デザイン) 3
4 Chrome でキャッシュを効かさない | Google Chrome(ブラウザ) 3
4 「属性」「プロパティ」「アトリビュート」の違い | CSS 3
4 画像縦横比の問題 | 画像 3
4 resizeが効かない場合は、min-heightを設定してみる | CSS 3
4 「bgcolor」「background-color」「background」の違い | CSS 3
4 「パッケージ化されてない拡張機能を読み込む」でインストールした拡張は、chromeを「更新」すると正常動作しなくなることがあります。 | Chrome 拡張機能 3
4 「直後が A 要素 でない B 要素」を指定するCSSセレクタは、「A:not(:has(+ B)) {}」 | CSS 3
2026/3/31 5:05 更新