12日目:ドットインストールで勉強中(CSSで吹き出しを作ろう完了)

SNSやってます。

今日は珍しく残業を1時間しました。仕事がの時間配分を間違えたせいです。残業がなければ1時間分余計に勉強ができていたのにと思うと残念です。

こんにちはSPF36.comのダイ(@daijirok_jp)です。

今日のプログラミング勉強はドットインストールのレッスン「CSSで吹き出しを作ろう(全8回)」を始めました。全8回と短く、また、興味深いレッスンだったので一気に終えてしまいました。

本日の学習結果

今日はCSSで吹き出しを作ろう(全8回)の勉強を始めレッスンを完了しました。

  • #01 CSSで吹き出しを作ろう
  • #02 borderで三角形を作ってみよう
  • #03 三角形を切り出してみよう
  • #04 三角形を変形させてみよう
  • #05 ベタ塗りの吹き出しを作ってみよう
  • #06 ベタ塗りの吹き出しを変形させよう
  • #07 枠線付きの吹き出しを作ってみよう
  • #08 枠線付きの吹き出しを変形させよう

下の実際にコードを書いた時の表示結果(右側)を見てもらえると分かる思いますが、今回はCSSで吹き出しを作りました。

これでフロートを設定すればLINE等メッセージアプリ風の表示もできるという事です。これは表現の幅が広がります。

CSSと実行結果

↑ 実際にレッスンに沿ってコードを書いた時のキャプチャ

感想

ブログを見ていると時々見かける写真から吹き出しにしている表示

吹き出しの写真

ですが、こういうのも頑張れば自分で作れるということになります。

ちなみに上記はワードプレスの「Speech Bubble」というプラグインを使って表示したもののキャプチャです。

この「Speech Bubble」は吹き出しの形や吹き出す人の顔を選択できたりと非常に良くできているとは思うのですが、実際に使うと毎回書き込むコードが長く面倒だったりします。

ですので、ワードプレスやそのプラグインの作り方を勉強すれば「Speech Bubble」的のような感じで、且つ自分にとって使いやすいものができたりするかもしれないなぁなんて思ってます。

やっと見つけた! LINEやFacebookみたいな会話をブログで使う事ができる、めちゃくちゃ便利な吹き出しプラグインを見つけました。 今回は、こんなふうに漫画風や会話風にブロ ...

↑ Speech Bubbleについてはこちらのウェブサイトが分かりやすかったです。

さて、明日からはドットインストールの「ホームページを作れる様になろう」にあるレッスンの中から「Bootstrap 3.0入門 (全18回)」に進みたいと思います。

なーんて、さぞ分かってる感で書きましたが、実は「Bootstrap」なんて聞いたこともありません。笑

知りませんが、まあ、楽勝でしょう。