LINE風吹き出しの種明かしなど。

この間の夕食会は、サードで行われたそうですが、資料不足で記事にできません。
申し訳ありませんでした。m(__)mm(__)m

代わりと言ってはなんですが、このブログで使っているテクニックについて紹介したいと思います。
と言っても、かずたも初心者の域を出ていないので、完全に分かってやっているわけでもないのです。

特に、CSSと呼ばれる、飾りの部分を担当するコードなどは、全くの初心者で、インターネットで検索しながら、そのコードを、あーでもないこーでもないと試行錯誤を繰り返しながらやっているので、まだまだです。
特に、LINE風レイアウトを作り上げるコードは、完全に分かれば、自分のスキルが一段階上がると考えていいといったほどのものだと思います。

そこで、今日は、その吹き出しの部分、というか、くっついている小さい三角について解説したいと思います。
と言っても、コードを取り上げて議論してもわからない方もいらっしゃると思うので、素朴な発想で考えられているんだなということがわかっていただけたら結構だと思います。

【解説】

検索ワードを”CSS 三角”とか入れてみれば、関連するサイトは出てきますし、重複する説明も多いのですが、自分なりに説明してみたいと思います。
まずは、太い枠線で、各辺色違いで、少し幅のあるボックスを作ってみます。



勘の良い人なら何を次にやるかわかってしまったと思いますが、枠線の幅を変えずに、高さ、幅を0にする(つまり、真ん中の白い四角を小さくして0にする)とこのようになります。



色違いの三角形が4つできました。
一つを残して、他を透明にしてしまう処理をすれば、完成です。
ここでは、緑の三角形を残してみます。



これが、吹き出しについている三角形の正体です。
あまり目につかないところを利用した、素朴な発想で作られています。
実際には、吹き出し本体との位置関係の設定や、擬似要素というものを使っていたり、その他初心者には一つの鬼門と言われているものが使われていて、吹き出し全体はもっといろいろなテクニックが使われていますが、とりあえず、自分としては三角形が最近スマートに理解できた気がしたので、場違いだと思いましたが書いてみました。

このようにして、かずたは地味なところを非常に苦労してブログを書いています。
写真とか載せてしまえば、苦労せずに目立つんですけどね!

最近、かずたは限界を感じて、CSSの電子書籍を買ってしまいました。
買ってしまえば読まないものですが、少しでも技術の向上を目指して、いいブログを作っていけたらいいなと思っています。(^_^)v

プロフィール

本郷の森

Author:本郷の森


文京区にある作業所。
毎日、メンバーの皆さんが作業に励んでいます。
就労移行、グループホーム等も運営しています。
詳細はこちら(公式HP)
文京区 就労継続支援B型 就労移行支援 共同生活援助 指定特定相談支援

カテゴリー

月別アーカイブ

更新履歴



本郷の森ブログ引っ越しのお知らせ (08/18)

2020年運動会 (03/16)

バレーボール大会のお疲れ様でした会 (03/13)

第70回 家族教室 (03/11)

バレーボール大会 (02/26)

1st:昼食会 (02/07)

2月昼食会 (02/07)

ボッチャ(パラリンピック競技)という球技をやりました (01/16)

銀杏企画 移行分室 昼食会 (01/10)

委託訓練の体験談 (12/25)

総記事数:

リンク

 

銀杏ブログの書き手さん

このブログは、各所数名の書き手さんによって更新されています。