Help us understand the problem. What is going on with this article?

cssを使ったくの字型の大きさを変える方法

初めに

くの字型の矢印をcssを使って書くことができる人は多いはず(多分😰)
ただ、その大きさを変えることができる人は何人いるだろうか。

今回、crowdworksの案件を受注した際に、

ボタン名 > 

みたいなボタンを作らなければいけなかったのに、
ボタン名はfont-sizeで大きくできるけど、その右にあるくの字型を
大きくする方法がわからずに試行錯誤したが、
なんとかできたので、備忘録としてこの記事を書く

くの字型の書き方(復習)

まずは、復習としてくの字型の書き方をおさらいしておく

<p class="arrow"></p>
<p>arrow</p>
.arrow{
    position: relative;
    display: inline-block;
    padding-left: 20px;
  }

  .arrow::before{
    content: '';
    width: 6px;
    height: 6px;
    border: 0px;
    border-top: solid 2px #5bc0de;
    border-right: solid 2px #5bc0de;
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    position: absolute;
    top: 50%;
    left: 0;
    margin-top: -4px;
  }

これで、htmlファイルを開いてみると、
スクリーンショット 2019-06-18 10.25.21.png

こうなる。

大きさを変える

じゃあ、次に大きさを変えてみよう。
大きさを変えるには.arrow::before
のwidthとheightを任意の大きさに変えれば、くの字の大きさを変えることができます。

<p class="arrow"></p>
<p>arrow</p>
.arrow{
    position: relative;
    display: inline-block;
    padding-left: 20px;
  }

  .arrow::before{
    content: '';
    width: 60px;
    height: 60px;
    border: 0px;
    border-top: solid 2px #5bc0de;
    border-right: solid 2px #5bc0de;
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    position: absolute;
    top: 50%;
    left: 0;
    margin-top: -4px;
  }

widthとheightをそれぞれ10倍にしました。
これでhtmlファイルを開いてみると。。。。

スクリーンショット 2019-06-18 10.28.24.png

こうなりました。

大きさは変わったけど。。。

見てもらえばわかると思うが、大きさは変わったが、文字列arrowにくの字がめり込んでいる。

これを解消せねば、真の意味での大きさを変えるとはいかない

<p class="arrow"></p>
<p class="text">arrow</p>
.arrow{
    position: relative;
    display: inline-block;
    padding-left: 20px;
  }

  .arrow::before{
    content: '';
    width: 60px;
    height: 60px;
    border: 0px;
    border-top: solid 2px #5bc0de;
    border-right: solid 2px #5bc0de;
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    position: absolute;
    top: 50%;
    left: 0;
    margin-top: -4px;
  }
  .text{
      padding-top:40px;
  }

これでhtmlファイルを開いてみるとこうなる。(ドキドキ、ドキドキ)
スクリーンショット 2019-06-18 10.35.20.png

移動させたいテキストにクラスを付与して、padding-topを追加すれば良いとな:hushed:

これで、皆さんのcssライフがより良くなると信じて筆を置きます。

tnatsume00
都内のWeb制作会社でバックフロントエンジニアとして働いています。 現在、人づてに聞いたreactnative,expoにはまっていて、色々と触って、 その中での気づきなどを記事にしています。
https://github.com/tnatsume?tab=repositories
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした