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

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

レスポンシブ

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

参考例


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

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

　閲覧数:666　投稿日: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/11/06 14:22 更新
週間人気ページランキング ／ 10-30 → 11-5
順位 ページタイトル抜粋 アクセス数
1 Design 0 6
1 ログイン 6
2 「bgcolor」「background-color」「background」の違い | CSS 5
3 血の色 ／ #b30000 ／ #360800 ／ #ff0000 | カラーコード(色) 4
3 CSS カテゴリー 4
3 黒体 ／ 色温度 ／ D65（6500K）／ D50（5000K）／ K | 色 4
4 「東京都」のカラーコード取得は難しい | カラーコード(色) 3
4 Google Chrome(ブラウザ) カテゴリー 3
5 「display:flex;」を設定している「
  • タグ」内の「タグ」クリック範囲を拡大する | Flexible Box Layout Module(CSS)
    		• 2
    5 textareaのスクロールバーが横へはみ出す場合は、「box-sizing:border-box;」を指定する | CSS 2
    5 「コズミックブルー」は、くすんだ青系全般の色を指す用語だと思います。 | カラーコード(色) 2
    5 右クリック出来るのに、コピペ出来ないWebページ。2020 年 | ブラウザ 2
    5 「パッケージ化されてない拡張機能を読み込む」でインストールした拡張は、chromeを「更新」すると正常動作しなくなることがあります。 | Chrome 拡張機能 2
    5 MHTML | Google Chrome(ブラウザ) 2
    5 画像 2
    5 「属性」「プロパティ」「アトリビュート」の違い | CSS 2
    5 Chromeブックマーク(ブラウザ) カテゴリー 2
    5 「position:sticky;」がどうしても効かない →
    を一旦削除してみる →
    に「display:inline;」を指定 | CSSトラブル対応(CSS)
    		2
    5 フェイスアイコンメーカー ／ オリジナル顔アイコン ／ 江崎グリコ株式会社 2
    5 カラーマネージメント | 色 2
    2026/11/6 5:05 更新