ヤビブロ

  • ホーム
  • ブログ
  • お問い合わせ

ヤビブロ

  • ホーム
  • ブログ
  • お問い合わせ

「もっと見る」ボタンの「>」矢印アイコン画像をレスポンシブでも位置を綺麗に表示する方法

2016年11月10日
css

コーディング作業をしていて、必ずと言っていいほど出てくる「>」などの矢印アイコンですが、画像で入れる場合に、レスポンシブでコーディングすると、スマホ画面で幅が変わる時に位置がズレてしまったりするので調整が意外とめんどうだったりしますよね。

しかし、cssの書き方次第で矢印アイコンの位置がズレずに表示ができるのです!
では早速、サンプルのソースコードと解説をしていきたいと思います。

html

1
<p class="moreBtn"><a href="">もっと見る</a></p>

css

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
.moreBtn a {
    position: relative;
    display: block;
    width: 440px;
    margin: 0 auto;
    padding: 16px 0;
    border-radius: 5px;
    background-color: #4c362a;
    color: #fff;
    font-size: 16px;
    text-align: center;
    text-decoration: none;
}
 
/* ↓ これが重要 */
 
.moreBtn a:after {
    display: inline-block;
    position: absolute;
    width: 40px;
    height: 23px;
    background: url(./img/icon_arrowCircle_right.png) no-repeat center center;
    background-size: 20px 20px;
    content: "";
}
 
/*@media screen and (max-width:640px) {
  .moreBtn a {
      width: 80%;
  }
}*/

デモ

解説

今回、aタグに指定しているcssはそんなに重要ではないので、擬似要素である:afterに指定してあるcssに注目して頂けたらと思います。
では、解説していきます。

display: inline-block;擬似要素の:afterでinline-blockをつけることで、「もっと見る」のテキストの後に改行せずにcontentを表示することができる

position:absolute; position:absolute;を入れることで、「もっと見る」のテキストの高さよりも高いアイコンでも切れずに表示できる、必要に応じて入れる。

width: ○px;
height: ○px;
幅と高さを入れることで、背景画像の位置をbackground-positionで調整することができるようになる。

content: “”;擬似要素:before、:afterのみで使用するプロパティ。Contentがないと表示ができないので必ず入れるようにする。

上記の方法で位置を調整することで、PC、スマホの場合にもいい感じの位置にアイコンを表示できるかと思います。

関連記事

  • 【css】counter-incrementプロパティを使ってcssでリストに番号をふる方法2016年6月6日 【css】counter-incrementプロパティを使ってcssでリストに番号をふる方法
  • 超簡単!cssを使って背景画像のみ透過にする方法2016年11月5日 超簡単!cssを使って背景画像のみ透過にする方法
  • 【css】文字(テキスト)にborderをつけるように縁取りをする方法2019年1月30日 【css】文字(テキスト)にborderをつけるように縁取りをする方法
  • js不要!cssのみで『無限ループスライダー』を作成する方法2019年2月24日 js不要!cssのみで『無限ループスライダー』を作成する方法
  • IE7・8も簡単に対応! IEのバージョンごとに cssを適用させるhtml・cssハック2016年12月8日 IE7・8も簡単に対応! IEのバージョンごとに cssを適用させるhtml・cssハック

スポンサードリンク

  • 最近の投稿

    • 【基礎】Vue.jsの『コンポーネント』とは?【基礎】Vue.jsの『コンポーネント』とは?2019年6月25日
    • 【Yarn + Vue CLI】を使って簡単にVue.jsの環境構築をする方法【Yarn + Vue CLI】を使って簡単にVue.jsの環境構築をする方法2019年6月17日
    • コピペでOK!Vue.jsで『ハンバーガーメニュー』を実装する方法コピペでOK!Vue.jsで『ハンバーガーメニュー』を実装する方法2019年3月8日
    • 【Mac】vscodeの拡張機能を一括インストールする方法【Mac】vscodeの拡張機能を一括インストールする方法2019年3月8日
    • js不要!cssのみで『無限ループスライダー』を作成する方法js不要!cssのみで『無限ループスライダー』を作成する方法2019年2月24日
    • jQuery・vue.js不要!javascriptで複数対応のアコーディオンを作成する方法jQuery・vue.js不要!javascriptで複数対応のアコーディオンを作成する方法2019年1月30日
    • 【git】新規作成、複製したファイルがsourcetree上で反映されない!?そんな時の解決法【git】新規作成、複製したファイルがsourcetree上で反映されない!?そんな時の解決法2019年1月30日
    • 【css】文字(テキスト)にborderをつけるように縁取りをする方法【css】文字(テキスト)にborderをつけるように縁取りをする方法2019年1月30日
  • カテゴリー

    • AMP (2)
    • android (1)
    • atom (2)
    • css (25)
    • facebook (1)
    • font (1)
    • form (1)
    • FTP (1)
    • git (3)
    • gulp (3)
    • html (2)
    • IE (1)
    • instagram (1)
    • iphone (3)
    • jquery (13)
    • js (5)
    • Mac (10)
    • Photoshop (5)
    • SourceTree (5)
    • Subversion (1)
    • twitter (1)
    • Vue.js (3)
    • Webフォント (1)
    • windows (2)
    • WordPress (7)
    • お知らせ (1)
    • サクラエディタ (1)
    • セキュリティ (1)
    • パララックス (1)
    • 便利ツール (6)
    • 差分チェック (1)
    • 日記 (4)
  • アーカイブ

  • タグ

    android atom background-image before break-all clcl clipmail counter-increment cssハック facebook git github html IE11 instagram iphone ipアドレス linear-gradient Math.random mCustomScrollbar Noto Sans Japanese select snapwidget SourceTree table tool transform transition twitter url改行 windows word-break お問い合わせ コピペ サクラエディタ スクロールバー タスクバー テキストエディタ パッケージ フォーム プラグイン 埋め込み 擬似クラス 改行コード 純正ボタン

    Copyright © 2016 ヤビブロ All Rights Reserved.