# だいありー実験中
## ラグマスチャット風をめざして！


<div class="ragmas">
<div class="pudding"></div>
<div class="left-msg">
<h5>
吹き出し風味のテンプレートだよ。<br>
h5タグのとこにメッセージをかいてね。<br>
class="pudding"をかえるとアイコンがかわるよ。<br>
</h5>
</div>
</div>

<div class="ragmas">
<div class="right-msg">
<h5>
leftとrightを変えれば、吹き出しの向きがかわるよ。<br>
顔アイコンつくりたいひとはぷりんちゃんに画像をわたそう。
<br>
</h5>
</div>
<div class="tencha"></div>
</div>

<style>
.ragmas {
display: flex
}
.ragmas > div.pudding {
/* block形式 */
display: block;
width: 80px;
height: 80px;
content: '';
/* icon設定 */
background-image: url(https://i.imgur.com/LeUZYPc.jpg);
background-repeat: no-repeat;
background-size: contain;
background-color: #000000;
/* アイコン枠 */
border: solid 3px #6091d3;
border-radius: 10px;
}
.ragmas > div.tencha {
/* block形式 */
display: block;
width: 80px;
height: 80px;
content: '';
/* icon設定 */
background-image: url(https://i.imgur.com/CboP21f.jpg);
background-repeat: no-repeat;
background-size: contain;
background-color: #000000;
/* アイコン枠 */
border: solid 3px #6091d3;
border-radius: 10px;
}
.left-msg {
-webkit-flex: 1;
flex: 1;
position: relative;
display: inline-block;
margin: 0 0 1.5em 15px;
padding: 7px 10px;
min-width: 120px;
max-width: 100%;
color: #555;
font-size: 16px;
background: #e0edff;
border-radius: 15px;
}
.left-msg:before {
content: "";
position: absolute;
top: 60%;
left: -30px;
margin-top: -25px;
border: 15px solid transparent;
border-right: 15px solid #e0edff;
}
.left-msg > h5 {
margin-top: 3px;
font-size: 16px;
}
.ragmas {
display: flex
}

.right-msg {
-webkit-flex: 1;
flex: 1;
position: relative;
display: inline-block;
margin: 0 15px 1.5em 0;
padding: 7px 10px;
min-width: 120px;
max-width: 100%;
color: #555;
font-size: 16px;
background: #e4ffe0;
border-radius: 15px;
}
.right-msg:before {
content: "";
position: absolute;
top: 50%;
left: 100%;
margin-top: -15px;
border: 15px solid transparent;
border-left: 15px solid #e4ffe0;
}
.left-msg > h5 {
margin-top: 3px;
font-size: 16px;
}
.right-msg > h5 {
margin-top: 3px;
font-size: 16px;
}

.part > img {
display: block;
height: 200px;
border-radius: 15px;
}

/* https://0edition.net/archives/1448 ここを参考にしています。*/
.ui-view-area:not(.ui-scrollable) #doc > *[id]::before {
/* きれいじゃないけど、これで段落ずれおきない。*/
height: 30px;
}

.markdown-body > h1{
background-color: #f5d5da; /* 背景色 */
border-radius: 5px;
color: #ef858c; /* 文字色 */
padding: 10px 10px 10px 10px; /* 上・右・下・左の余白 */
position: relative;
text-shadow: 0px 0px 10px #fff, 0px 0px 6px #fff, 0px 0px 4px #fff, 0 0 0.5px #fff; /* 文字の影 */
}
.markdown-body > h1:before{
content: '＊*'; /*花に見せかけるためのアスタリスク*/
color: #fff; /* アスタリスクの色 */
display: inline-block;
font-size: 30px; /* アスタリスクの大きさ */
font-weight: bold;
margin-right: 10px;
position: relative;
top: 0px;
left: 0px;
transform: rotate(20deg);
-moz-transform: rotate(20deg);
-webkit-transform: rotate(20deg);
-o-transform: rotate(20deg);
text-shadow: 0px 0px 3px #fff, 0px 0px 2px #fff, 0 0 0.5px #fff; /* アスタリスク周りの影 */
}

.markdown-body > h1:after{
border-bottom: 2px dotted #fff; /* 下線 */
content: '';
position: absolute;
bottom: 3px;
left: 3px;
right: 3px;
}

.markdown-body > h2{
color: #d04255; /* 文字色 */
padding: 10px 10px 10px 10px; /* 上・右・下・左の余白 */
position: relative;
}
.markdown-body > h2:before{
content: '＊*'; /*花に見せかけるためのアスタリスク*/
color: #fff; /* アスタリスクの色 */
display: inline-block;
font-size: 30px; /* アスタリスクの大きさ */
font-weight: bold;
position: relative;
top: 0px;
left: 0px;
transform: rotate(20deg);
-moz-transform: rotate(20deg);
-webkit-transform: rotate(20deg);
-o-transform: rotate(20deg);
text-shadow: 0px 0px 6px #EAA8BF, 0px 0px 4px #EAA8BF, 0 0 0.5px #EAA8BF; /* アスタリスク周りの影 */
}
.markdown-body > h2:after{
border-bottom: 2px dotted #EAA8BF; /* 下線 */
content: '';
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
}

h3{
border-bottom: 1px solid #f0bdc4; /* 下線 */
color: #ff99ac; /* 文字色 */
padding: 10px 10px 10px ; /* 上・右・下・左の余白 */
position: relative;
}

/* https://saruwakakun.com/html-css/reference/ul-ol-li-design ここを参考にしています。*/
.markdown-body > ul, ol {
background: #fffde8;
box-shadow: 0px 0px 0px 10px #fffde8;/*線の外側*/
border: dashed 2px #ffb03f;/*破線*/
border-radius: 9px;
margin-left: 10px;/*はみ出ないように調整*/
margin-right: 10px;/*はみ出ないように調整*/
padding: 0.5em 0.5em 0.5em 2em;
}

.markdown-body > ul li, ol li {
line-height: 1.5;
padding: 0.5em 0;
}

.part > img {
display: block;
height: 200px;
border-radius: 15px;
}
</style>