Line風のアイコンを作る方法

今回はcssを使ってlineのトーク画面風を作ってみたいと思います。
lineと言えばアイコンがありますよね。そちらの方をまた作って行こうと思います。今回はアイコンの代わりに名前を使います。

line.html.erb

  <p class = "lineheader">ユーザーネーム</p>
  <p class = "linetext">テキスト</p>

line_header.css

.lineheader{
  color: white;
  background-color: balck;
  text-align: center;
  font-weight: bold;
  border-radius: 20vh;
}

これでアイコンについては完成です。

次にテキストに移ります。ここからが本番ですね!頑張って行きましょう!!!

line_text.css

.linetext{
  position: relative;
  ここからしたはお好みに合わせて
  color: balck;
  font-weight: bold;
  text-decoration: none;
  padding: 17px 13px 15px 18px;
  border-radius: 12px;
  background-color: red;
}

多分これで四角ができたと思います。さあ、次からです。でっぱりを作りましょう。

今回必要となるのが擬似要素という単語です.擬似要素とは一部だけにクラスを与えることです。例えば

  <h2>私<span class = "line_textdemo1">は</span>トムだ</h2>

こうすることで文字の一部にクラスを与えることができました。
今回使用している下のコードにあるafterは要素の右隣にまた同じ要素を出すことだ可能になります。

line_afterdemo1.html.erb

   <p class = "afterdemo1">私はトムだ</p>

line_afterdemo1.css

   .afterdemo1:after{
   color: red;
   }

実行結果
私はトムだ。　私はトムだ。←赤文字　　このようになります。

line_text.css

   linetext:after{
   content: "" ;
   position: absolute;
   border: 10px solid transparent;
   left: -26px;
   border-right: 22px solid red;
   }

border: 10px solid transparent;と
border-right: 22px solid red;
の解説をしていきたいと思います。

borderとはとは三角形を作るcssです。border-topで逆三角形、border-downで三角形を作ることができます。
border-rightでyoutubeの再生ボタン逆の三角形が作れます。border-leftではyoutubeの再生ボタンを作ることができます。border〜〜とかで三角形の底辺を指定することができます。

border-right 22pxで三角形を指定することができます。例えば1pxの場合とても鈍角な三角形ができますが、
33pxだととても鋭角な三角形が完成します。

borderを指定することでそれ以外の三角形を指定することができます。今回は一つの三角形しか使わないのでtransparent（透明）を使います。

これで完成したと思います。
意外と簡単にできましたね。これで以上です!