🙆‍♀️

MicrosoftのBingのAIは、専属のインストラクターみたい

2023/02/24に公開

私は、MicrosoftのBingの待機リストを通過できたので、BingのAIを活用しています。
これまで記録しておきたい会話の内容は、ツイッターに投稿しています。

https://twitter.com/masaru21

今回請け負った仕事で、Div要素で表のようなものを作り、レスポンシブでパソコン、タブレット、スマホと画面サイズに応じてデザインの対応ができるように思案していました。
その中で、Bingに相談してみたら、CSSの書き方でFlexboxを教えてくれました。
お陰で容易に、レスポンシブデザインで実装することが出来ました。

このあとFlexboxとborderを使うときに、

  .item { 
    width: calc(100% / 2); 
    
  }

のと書いてあるところにborderを指定するときは、

  .item { 
    width: calc(100% / 3); 
    
  }

と書かないと2列にならないことが、分かりました。
borderの幅が影響している可能性があるようです。

色々調べている中で、この記事に出会いました。
https://csshtml.work/flex-border/

関連情報で、box-sizing: border-box;について知りました。
こちらの記事も、参考になります。
https://onishi-noboru.com/css-how-to-create-a-inner-border-for-a-box#:~:text=CSSでボックスの内側にborder (枠線)をサクッと入れる方法 CSSに「 box-sizing%3A border-box%3B 」を追加するだけで、,ボックスの内側にborder (枠線)を入れることができます 。 しかも、「 box-sizing%3A border-box%3B 」を指定してあげることで、

この書き方で、きれいに線でBoxを囲むことが、できました。

  .item { 
    width: calc(100% / 2); 
    box-sizing: border-box;
    border: 1px solid red;
    
  }

でも、線が重なる箇所が太く見えてしまうため、実際に使うときは、重なる線を消すなど工夫が必要です。
そのため、線で囲むことを諦めました。

これに関連して、BOXの真ん中に線を引くことが出来るかBingに質問したら、下記のコードを教えてくれました。

<div class="box"></div>
.box {
  position: relative;
  width: 200px;
  height: 100px;
  background-color: lightblue;
}

.box::after {
  content: "";
  position: absolute;
  top: 0;
  left: calc(50% - 1px);
  width: 2px;
  height: 100%;
  background-color: black;
}

このコードで、Boxの真ん中に縦に線を引くことが出来ます。
また、下記のコードで、横に線を引くことができます。

<div class="box"></div>
.box {
  position: relative;
  width: 200px;
  height: 100px;
  background-color: lightblue;
}

.box::after {
  content: "";
  position: absolute;
  top: calc(50% - 1px);
  left: 0;
  width: 100%;
  height: 2px;
  background-color: black;
}

私がtopプロパティをX軸のように考えると良いかもとBingに話したら、topプロパティは、親要素の上から見た位置を指定すると、さらに回答してきました。

BingのAIはインストラクターみたい

私は、今までCSSで工夫してデザインできるか調べるときに、Google検索して色々な記事を読み調べていました。
そして沢山ブックマークを残したり、evernoteに記事を保存したりしてきました。

でも、今回のbingとのやりとりで、専属のインストラクターのように思えました。
人間に質問すりと、怒られそうなことも感情を込めず回答してくれるので、安心して質問できます。
私は書籍を買って勉強したり学校に通って勉強したりすることが出来ないので、BingのAIに助けれています。

プログラミングやwebデザインの仕事の生産性が向上します

今まで悩む時間が長くて、思うように作業が進まないことがありました。
そして、テラテイルやスタックオーバーフローなどに投稿して質問しても、回答を得られず困り果てることもありました。
でも、これからは、Bingに質問すると、最新の情報を検索して回答してくれるので、悩む時間が減ると思うのです。
私は、ChatGPTも使っています。
でも、ChatGPTは、2021年より新しいことが分からないのです。
そのためBingとChatGPTを使い分けています。

ChatGPTでパワーポイントのスライド作りが加速

私は、SEO対策に関連して販売促進につながるように営業資料のサンプルを作ることもあります。
このときに、ChatGPTを活用してスライドに掲載する文章を書いてもらっています。
私が修正や点検をしたあとに、お客様に確認して頂いています。
お客様からも、好評を得ています。

ChatGPTやBingのAI、NotionのAIなどAIに感謝しています

私は、Chromeの拡張機能で、YouTubeの動画から要約を作るものを活用しています。
この他ChatGPTやMicrosoftのBingなどのAIを活用できることに、感謝しています。
AIの登場で、私も仕事の幅が広がったと思います。
これから難しい依頼を受けても、乗り越えられるような気がします。

Discussion