吹き出しのCSSのコードを詳細に説明 HTML、CSS復習⑪
コードの詳細がのっていないサイトが多いですが、ここでは詳細に説明しています
コピペでは応用が全く効かなくていざ実戦！となった時に使えません。
吹き出しの作り方
まずは角が丸い四角を作ります。
これは以下の記事も参考にしてください。
要素を横並びにする方法 HTML,CSS復習⑩ - ★うつ病の一人暮らし★外で働かないで生きていく
スタイルシートはこうなります。
div.yokohuki {
position: relative; /*位置を相対的に*/
display: inline-block; /*要素を横並びにする*/
border-radius: 10px; /* 四隅を丸くする */
padding: 10px; /*領域と文字との余白10px*/
background: lightblue; /*背景色 lightblue*/
border: 2px solid pink; /*境界線の幅2px solidは実線 色はpink*/
}
記事中には次のように記述します。
<div class="yokohuki">まずはただの四角です。</div>
するとこうなります。
まずはただの四角です。
今回はここに吹き出しを追加します。
まずは吹き出しのポチをどこに配置するかを決めます。
今回はポチを右端の真ん中にしてみます。
一番右端なので
left: 100%;
とします。
また真ん中なので
top: 50%; /*真ん中なので50%*/
とします。
次にポチの三角形を作ります。
まずポチ用の四角形の境界線を全て透明(transparent)にしてから
左にだけ境界線をつけます。
すると三角形になります。
border: 10px solid transparent; /*ポチの四角形を作り境界線を全て透明にする*/
border-left: 10px solid pink; /*左だけに境界線をつけることで三角形にできます*/
またポチの中は空白なので
content: "";
とします。
さらに吹き出しのポチは本体に付属するのでbeforeを使います。
すると次のようになります。
.yokohuki:before {
content: ""; /*ポチには文字を入れないので"”を使う*/
border: 10px solid transparent; /*ポチの四角形を作り境界性を全て透明にする*/
border-left: 10px solid pink; /*左だけに境界線をつけることで三角形にできます*/
position: absolute; /*元の四角に対して絶対的な位置に配置*/
top: 50%; /*ポチを真ん中に配置*/
left: 100%; /*ポチを右端に配置*/
}
ここでプレビューを見ながら微調整をします。
・微調整方法①
transform: translateX(-〇〇%)を使います。
〇〇の数値が小さいほどポチが右に移動します。
・微調整方法②
top: 50%; /*この数値を調整する*/
left: 100%; /*この数値を調整する*/
今回の微調整後の全体のスタイルシートは次のようになります。
div.yokohuki {
position: relative; /*位置を相対的に*/
display: inline-block; /*要素を横並びにする*/
border-radius: 10px; /* 四隅を丸くする */
padding: 10px; /*領域と文字との余白10px*/
background: lightblue; /*背景色 lightblue*/
border: 2px solid pink; /*境界線の幅2px solidは実戦 色はpink*/
}
div.yokohuki:before {
content: ""; /*ポチには文字を入れないので"”を使う*/
border: 10px solid transparent; /*ポチの四角形を作り境界線を全て透明にする*/
border-left: 10px solid pink; /*左だけに境界線をつけることで三角形にできます*/
position: absolute; /*本体の四角に対しポチを相対的な位置に配置
top: 40%; /*上から40%の位置にポチを配置*/
left: 100%; /*左から100%の位置にポチを配置*/
transform: translateX(-5%);
}
記事中には次のように記述します。
<div class="yokohuki">ここが吹き出しになります。</div>
するとこうなります。
ここが吹き出しになります
#HTMLタグ
#CSS
#吹き出しの作り方
