今回はcssを使ってlineのトーク画面風を作ってみたいと思います。
lineと言えばアイコンがありますよね。そちらの方をまた作って行こうと思います。今回はアイコンの代わりに名前を使います。
<p class = "lineheader">ユーザーネーム</p>
<p class = "linetext">テキスト</p>
.lineheader{color:white;background-color:balck;text-align:center;font-weight:bold;border-radius:20vh;}これでアイコンについては完成です。
次にテキストに移ります。ここからが本番ですね!頑張って行きましょう!!!
.linetext{position:relative;ここからしたはお好みに合わせてcolor:balck;font-weight:bold;text-decoration:none;padding:17px13px15px18px;border-radius:12px;background-color:red;}多分これで四角ができたと思います。さあ、次からです。でっぱりを作りましょう。
今回必要となるのが擬似要素という単語です.擬似要素とは一部だけにクラスを与えることです。例えば
<h2>私<span class = "line_textdemo1">は</span>トムだ</h2>
こうすることで文字の一部にクラスを与えることができました。
今回使用している下のコードにあるafterは要素の右隣にまた同じ要素を出すことだ可能になります。
<p class = "afterdemo1">私はトムだ</p>
.afterdemo1:after{color:red;}実行結果
私はトムだ。 私はトムだ。←赤文字 このようになります。
linetext:after{content:"";position:absolute;border:10pxsolidtransparent;left:-26px;border-right:22pxsolidred;}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（透明）を使います。
これで完成したと思います。
意外と簡単にできましたね。これで以上です!