CSSのお勉強第1回目 〜会話吹き出し〜

おはようございます、こんにちは、こんばんは。ハルクマです。

いきなりですが、CSSについて勉強をしていきたいと思います。

いきなり何言ってんのこいつ?と思うかもしれませんが、数年前に少しだけWEB制作をしていたことがありまして。

最近になって触る機会がでてきたので、改めて勉強していこうと思ったわけです。

ブランク数年。どう考えても浦島状態なので、感覚を取り戻したり、過去の産物をドヤ顔で使ったりしないようにしなければいけないわけです。

その一環で、できれば毎週、CSSで何かしらやっていこうと思っております。とは言っても基本的には簡単なことばかりにはなると思いますが。

まぁ、自分で使う(かどうかはわからないけど)ライブラリを作っていくという意味も兼ねてやっていきましょう。

第1回目は会話吹き出しを作ってみました。
このヒヨコラボのブログの中で使っていく話もあったので、作ってみました。

今日は・・・・・・風が騒がしいな・・・
でも少し・・・この風・・・泣いています・・・

会話の内容が思いつかなくて不意に思い出した一文を入れています。男子高校生の日常、好きなんですよね(関係ない)とりあえずhtmlをぺたり。

<div class="balloon">
    <div class="faceicon_left"></div>
    <div class="says_left">今日は・・・・・・風が騒がしいな・・・</div>
    </div>
    <div class="balloon">
    <div class="faceicon_right"></div>
    <div class="says_right">でも少し・・・この風・・・泣いています・・・</div>
</div>

次にCSSぺたり。

.balloon{
    width: 100%;
    margin: 1.5em 0;
    overflow: hidden;
}
.faceicon_left{
    float: left;
    margin-right: -90px;
    width: 80px;
    height: 80px;
    background-image:url(../hiyoko.png);
    border-color: #d9cbff;
    background-size: contain;
    background-repeat: no-repeat;
    border-radius: 100%;
    border: solid 3px;
}
.faceicon_right{
    float: right;
    width: 80px;
    height: 80px;
    background-image:url(../nezumi.png);
    border-color: #b3ddff;
    background-size: contain;
    background-repeat: no-repeat;
    border-radius: 100%;
    border: solid 3px;
}
.says_left{
    max-width: 75%;
    display: inline-block;
    position: relative;
    margin: 5px 0 0 105px;
    padding: 17px 13px;
    border-radius: 12px;
    background: #d9cbff;
}
.says_left:after{
    content: "";
    display: inline-block;
    position: absolute;
    top: 14px;
    left: -24px;
    border: 12px solid transparent;
    border-right: #c8baee;
}
.says_right{
    float: right;
    max-width: 75%;
    display: inline-block;
    position: relative;
    margin: 5px 20px 0 0px;
    padding: 17px 13px;
    border-radius: 12px;
    background: #b3ddff;
}
.says_right:after{
    content: "";
    display: inline-block;
    position: absolute;
    top: 14px;
    right: -24px;
    border: 12px solid transparent;
    border-right: #a2ccee;
}

左右に配置することによって会話をしているように見えますね。
吹き出しの矢印の色も別個で変えることによって多少の立体感も出ていい感じに仕上がってると思います。

このような感じで、色々作っていければと思います。
ワードプレスの見出しとかも、代わりのものを作れたりしたらいいかもしれませんね。
このようなものを綺麗に作っていけるように精進していきたいと思います。

今後、何か「こんなのがあってもいいんちゃう?」「こういうのが欲しい!作れ!」みたいなコメントとかも大歓迎です。できそうであれば作ってみたいと思います。できそうになければ・・・がんばります(笑)

今回はこの辺で。

関連記事

  1. CSSのお勉強第3回目 〜怒りマーク〜

  2. CSSのお勉強第2回目 〜思考吹き出し〜

プライバシーポリシー