【ブログ一覧】 - ますみのブログ

ますみのブログ

パソコンとかプログラミングに関するあれこれ発信してます

backgroundが効かない??そんな時に確認してほしい7つのポイント

こんにちは!エンジニアのますみです!本日はbackgroundが効かない時に確認してほしい7つのポイントを解説します!目次 CSSのセレクタに問題はないか id、classの名前が間違っている id、classの名前に誤字がある #(シャープ)と.(ドット)が間違っている CSSを上書きしていないか スタイルを上書きしている CSSの優先順位が原因の場合も 要素の大きさが0になっている 要素にサイズが無い インライン要素にwidth、heightを指定してもサイズは0のままそれではさっそく見ていきましょうCSSのセレクタに問題はないかid、classの名前が間違っているHTMLspan class="text"TEXT/spanCSS.item { background : red;}上の例では対象の要素にはtextというクラスが設定されていますが、CSS上では.itemというセレクタを使っています。意外とやりがちなミスなので、HTMLとCSSを照らし合わせて確認してみてくださいid、classの名前に誤字があるHTMLspan class="text"TEXT/spanCSS.texl { background : red;}上の例では対象の要素にはtextというクラスが設定されていますが、CSS上では.texlというセレクタを使っています。CSSは誤字があってもエラーメッセージなどで教えてくれません。その為、結構誤字でスタイルが当たらないこともあり得ます。#(シャープ)と.(ドット)が間違っているHTMLspan class="text"TEXT/spanCSS#text { background : red;}上の例では対象の要素にはtextというクラスが設定されていますが、CSS上では#textというセレクタを使っています。その為、textというidを持つ要素にスタイルが適用されてしまうため、上のspan要素には背景色が適用されません。こちらも意外とやりがちなミスです。CSSを上書きしていないかスタイルを上書きしているHTMLspan class="text"TEXT/spanCSS.text { background : red;}.text { background : transparent;}CSSの行数が多かったりすると起こりがちです。後に読み込まれたスタイル(行で言うと下の方)が優先されるため、上の例ではtransparent(透明)が背景色に適用されてしまいます。CSSの優先順位が原因の場合もHTMLspan id="text" class="text"TEXT/spanCSS#text { background : transparent;}.text { background : red;}基本的には後に読み込まれたスタイル(行で言うと下の方)が優先されますが、例外があります。id(#を使うもの)で背景色を指定していた場合、idの方が優先順位が高いです。そのため上の例では背景色は#textに指定されたtransparent(透明)が適用されます。また、CSSはid class 要素名の優先順位でスタイルを適用するため.text { background : transparent;}span { background : red;}この場合は.textに指定されたtransparent(透明)が適用されます。要素の大きさが0になっている要素にサイズが無いHTMLdiv class="box"/divCSS.box { background : lightcoral;}色付きの四角形や丸などを作りたい時にやりがちですが、上の例では何も表示されません。このような場合は、width、heightを指定するか、padding等を指定して要素に大きさを持たせる必要があります。HTMLdiv class="box"/divCSS.box { background : lightcoral;}HTMLdiv class="coral-box"/divdiv class="green-box"/divdiv class="blue-box"/divCSS.coral-box { width: 2rem; height: 2rem; background: lightcoral;}.green-box { width: 2rem; height: 2rem; background: lightgreen; border-radius: 50%;}.blue-box { padding: 1rem; background: lightblue;}インライン要素にwidth、heightを指定してもサイズは0のままHTMLspan class="box"/spanCSS.box { width: 2rem; height: 2rem; background : lightcoral;}上の例では、画面には何も表示されません。インライン要素はwidth、heightが無効のため、要素のサイズは0のままです。CSSで display : block 等を指定してサイズを有効にするか、HTMLで要素をdiv等に変更することで解決できます。最後まで読んでいただきありがとうございます!質問や、こんなことを記事にしてほしい!というのがありましたらTwitterのコメント等で受け付けていますので、お気軽にどうぞ!ますみ - 愛知県在住の20代プログラマー - | @mashmy_98それでは次の投稿もお楽しみに!

2023年05月02日

Read More

文字が一文字ずつ現れるアニメーションの作り方【HTML、CSS】

こんにちは!エンジニアのますみです!本日はCSSで作れる文字が一文字ずつ表れるアニメーションの作り方とサンプルを紹介します!目次 一文字ずつペラペラ現れるアニメーション 文字が下からスライドして現れる 文字が上からふわっと降ってくる 一文字ずつ横からスライドして現れるそれではさっそく見ていきましょう一文字ずつペラペラ現れるアニメーションS a m p l e T e x t再生HTMLdiv span class='text' style="animation-delay: 0s"S/span span class='text' style="animation-delay: 0.2s"a/span span class='text' style="animation-delay: 0.4s"m/span span class='text' style="animation-delay: 0.6s"p/span span class='text' style="animation-delay: 0.8s"l/span span class='text' style="animation-delay: 1s"e/span span class='text' style="animation-delay: 1.2s" /span span class='text' style="animation-delay: 1.4s"T/span span class='text' style="animation-delay: 1.6s"e/span span class='text' style="animation-delay: 1.8s"x/span span class='text' style="animation-delay: 2s"t/span/divCSS.text { display: inline-block; font-size: 2rem; font-family: "Ryumin ExtraBold KL"; letter-spacing: -0.15rem; animation: text-animation 0.8s forwards; transform: rotateY(90deg);}@keyframes text-animation { 0% { transform: rotateY(90deg); } 100% { transform: rotateY(0deg); }}@keyframesはCSSでアニメーションを定義できるプロパティです。transformと:hoverや:focus等の疑似クラスの組み合わせでもアニメーションは作成可能ですが、@keyframesは より複雑なアニメーションが作れる マウスホバーやフォーカス等の操作に関係なくアニメーションをスタートできるといったメリットがあります。Sample Textという文字を一文字ずつspanで区切り、文字ごとにアニメーションをスタートするタイミングを変えることで順番に文字が現れるアニメーションを作ることができます。文字が下からスライドして現れる再生HTMLdiv class="container" span class='text' style="animation-delay: 0s"S/span span class='text' style="animation-delay: 0.2s"a/span span class='text' style="animation-delay: 0.4s"m/span span class='text' style="animation-delay: 0.6s"p/span span class='text' style="animation-delay: 0.8s"l/span span class='text' style="animation-delay: 1s"e/span span class='text' style="animation-delay: 1.2s" /span span class='text' style="animation-delay: 1.4s"T/span span class='text' style="animation-delay: 1.6s"e/span span class='text' style="animation-delay: 1.8s"x/span span class='text' style="animation-delay: 2s"t/span/divCSS.container { overflow: hidden;}.text { display: inline-block; font-size: 2rem; font-family: "Ryumin ExtraBold KL"; letter-spacing: -0.15rem; animation: llfsdi-text-animation 0.8s forwards; transform: translateY(3rem);}@keyframes text-animation { 0% { transform: translateY(3rem); } 100% { transform: translateY(0rem); }}基本的な部分は先ほどと同様、@keyframesとanimation-delayによるアニメーション開始時間の調整で作ることができます。親要素にoverflow : hiddenを指定して、文字が下の方にいる時に表示されないようにします。文字が上からふわっと降ってくる再生HTMLdiv span class='text' style="animation-delay: 0s"S/span span class='text' style="animation-delay: 0.2s"a/span span class='text' style="animation-delay: 0.4s"m/span span class='text' style="animation-delay: 0.6s"p/span span class='text' style="animation-delay: 0.8s"l/span span class='text' style="animation-delay: 1s"e/span span class='text' style="animation-delay: 1.2s" /span span class='text' style="animation-delay: 1.4s"T/span span class='text' style="animation-delay: 1.6s"e/span span class='text' style="animation-delay: 1.8s"x/span span class='text' style="animation-delay: 2s"t/span/divCSS.text { display: inline-block; font-size: 2rem; font-family: "Ryumin ExtraBold KL"; letter-spacing: -0.15rem; animation: llfsdi-text-animation 0.8s forwards; transform: translateY(-1rem); opacity: 0;}@keyframes text-animation { 0% { opacity: 0; transform: translateY(-1rem); } 100% { opacity: 1; transform: translateY(0rem); }}こちらのサンプルでは透明度を調整するopacityも追加しました。他のアニメーションにもopacityを追加するとふわっと現れるアニメーションになります。お好みでカスタマイズしてみてください。一文字ずつ横からスライドして現れる再生HTMLdiv span class='text'span style="animation-delay: 0s"S/span/span span class='text'span style="animation-delay: 0.2s"a/span/span span class='text'span style="animation-delay: 0.4s"m/span/span span class='text'span style="animation-delay: 0.6s"p/span/span span class='text'span style="animation-delay: 0.8s"l/span/span span class='text'span style="animation-delay: 1s"e/span/span span class='text'span style="animation-delay: 1.2s" /span/span span class='text'span style="animation-delay: 1.4s"T/span/span span class='text'span style="animation-delay: 1.6s"e/span/span span class='text'span style="animation-delay: 1.8s"x/span/span span class='text'span style="animation-delay: 2s"t/span/span/divCSS.text-container { overflow: hidden;}.text { display: inline-block; font-size: 2rem; font-family: "Ryumin ExtraBold KL"; overflow: hidden;}.text span{ display: block; animation: llfsdij1-text-animation 0.8s forwards; transform: translateX(-2rem);}@keyframes text-animation { 0% { opacity: 0; transform: translateX(-1rem); } 100% { opacity: 1; transform: translateX(0rem); }}一文字ずつ横スライドして現れるように見せるには、HTMLも修正する必要があります。テキストをさらに一階層深い要素にし、テキストの親要素にoverflow : hiddenを指定してテキストが横から現れて見えるようにする必要があります。最後まで読んでいただきありがとうございます!質問や、こんなことを記事にしてほしい!というのがありましたらTwitterのコメント等で受け付けていますので、お気軽にどうぞ!ますみ - 愛知県在住の20代プログラマー - | @mashmy_98それでは次の投稿もお楽しみに!

2023年05月01日

Read More

【HTML、CSS】1-1、1-2みたいなネストしたリストの作り方

こんにちは!エンジニアのますみです!本日は1-1、1-2のようなナンバリングを指定するCSSの書き方を解説します。ブログの目次などを見やすくするには欠かせないテクニックです!目次 サンプル 1-1、1-2みたいなネストしたリストの作り方 リストを作る 子リストを少し右に寄せる デフォルトのリストスタイルを非表示にする 疑似要素とcountersを使いナンバリングする ネストしたリストにも同じようにナンバリングの設定をする 親リストのナンバリング、子リストのナンバリングを組み合わせて表示したい形式で表示それではさっそく見ていきましょうサンプル 親リストのli要素 親リストのli要素 子リストのli要素 子リストのli要素 子リストのli要素 親リストのli要素 親リストのli要素 子リストのli要素 子リストのli要素 子リストのli要素こんな感じのリストを作っていきます。ol要素のようなナンバリングに見えますが、1-1、1-2のようなナンバリングもありますねこれは通常のol要素では作れないため、疑似要素とcounter属性を使っていきます。ちなみに1.1、1.2のようなナンバリングもできます。 親リストのli要素 親リストのli要素 子リストのli要素 子リストのli要素 子リストのli要素 親リストのli要素 親リストのli要素 子リストのli要素 子リストのli要素 子リストのli要素応用するとこんな感じのデザインもできます。 親リストのli要素 親リストのli要素 子リストのli要素 子リストのli要素 子リストのli要素 親リストのli要素 親リストのli要素 子リストのli要素 子リストのli要素 子リストのli要素1-1、1-2みたいなネストしたリストの作り方手順1. リストを作る 親リストのli要素 親リストのli要素 子リストのli要素 子リストのli要素 子リストのli要素 親リストのli要素 親リストのli要素 子リストのli要素 子リストのli要素 子リストのli要素HTMLdiv class="コンテナ"    ul class="親リスト"        li class="親リストのli要素"親リストのli要素/li        li class="親リストのli要素"親リストのli要素/li    /ul    ul class="子リスト"        li class="子リストのli要素"子リストのli要素/li        li class="子リストのli要素"子リストのli要素/li        li class="子リストのli要素"子リストのli要素/li /ul    ul class="親リスト"        li class="親リストのli要素"親リストのli要素/li        li class="親リストのli要素"親リストのli要素/li    /ul    ul class="子リスト"        li class="子リストのli要素"子リストのli要素/li        li class="子リストのli要素"子リストのli要素/li        li class="子リストのli要素"子リストのli要素/li    /ul/div今回はCSSを書く際にセレクタの付け方が少々複雑になります。その為、わかりやすいように日本語でクラス名を付けましたが、本来は日本語のクラス名はおすすめしません。また、以下のようにHTML要素もネストさせたいところですがナンバリングをつける際にCSSが難解になってしまうため、上記のように書くことにします。HTMLul class="親リスト" style="margin-bottom: 0" li class="親リストのli要素"親リストのli要素/li li class="親リストのli要素"親リストのli要素/li li ul class="子リスト" style="margin-bottom: 0" li class="子リストのli要素"子リストのli要素/li li class="子リストのli要素"子リストのli要素/li li class="子リストのli要素"子リストのli要素/li /ul /li/ulちなみにul、ol要素でなくても今回紹介するナンバリングを表示させることが可能なので、場面に応じでHTML要素を決めてください!手順2. 子リストを少し右に寄せる 親リストのli要素 親リストのli要素 子リストのli要素 子リストのli要素 子リストのli要素 親リストのli要素 親リストのli要素 子リストのli要素 子リストのli要素 子リストのli要素CSS.子リスト { margin-left: 0.8rem;}やりたいレイアウトによってはこの工程は無くても可です。こうすることにより、ネストしているとわかりやすくなります。手順3. デフォルトのリストスタイルを非表示にする 親リストのli要素 親リストのli要素 子リストのli要素 子リストのli要素 子リストのli要素 親リストのli要素 親リストのli要素 子リストのli要素 子リストのli要素 子リストのli要素CSS.親リスト { list-style: none; // 追加}.子リスト { margin-left: 0.8rem; list-style: none; // 追加}デフォルトのリスト装飾は使わないため、親リスト、子リストともにlist-style:noneをセットします。手順4. 疑似要素とcountersを使いナンバリングする 親リストのli要素 親リストのli要素 子リストのli要素 子リストのli要素 子リストのli要素 親リストのli要素 親リストのli要素 子リストのli要素 子リストのli要素 子リストのli要素CSS.コンテナ { counter-reset: ul; // 追加}.親リスト { list-style: none;}.親リスト .親リストのli要素::before { counter-increment: ul 1; // 追加 content: counter(ul); // 追加}.子リスト { margin-left: 0.8rem; list-style: none;}コンテナにcounter-reset、親リストのli要素に疑似要素(::before)を追加し、counter-incrementという値を使用しています。そして::beforeのcontentにはcounter(ul)という指定をしています。疑似要素(::before)について詳しく知りたい方はこちらの記事をご覧くださいCSSにはセレクタで指定した要素が出てきた回数を数えて、順番にナンバリングする機能があります(若干語弊があるのですが後ほど詳しく解説します)その為に使う属性がcounter-reset、counter-increment、counterです。counter-resetで名前と初期値を指定、リセットするcounter-reset: 名前 初期値;この時に指定した名前に回数を記憶していきます。初期値は指定しなければ0になります。counter-resetを指定した要素が現れるたびに名前に記憶された回数は初期値にリセットされます。今回は.コンテナを持つ要素は一つだけですが、二つ以上に.コンテナを持つ要素が増えるかもしれません。変更が起こる可能性を考えてcounter-resetはしっかり指定しておきましょう。counter-incrementで回数を更新するcounter-increment: 名前 増加数;counter-incrementを指定した要素が現れるたびに、名前に記憶されている回数を更新します。この時、counter-incrementに指定した増加数分数値が増えていきます。今回は.親リスト .親リストのli要素::beforeに対してcounter-incrementを指定しました。.親リスト .親リストのli要素::before { counter-increment: ul 1;}.親リスト .親リストのli要素::beforeが現れるということはHTML上では.親リスト .親リストのli要素が現れたタイミングなのでul class=親リスト style=margin-bottom: 0 ulをリセット、初期値の0がセットされる li class=親リストのli要素親リストのli要素/li ulに1を足す ul = 1 li class=親リストのli要素親リストのli要素/li ulに1を足す ul = 2 li ul class=子リスト style=margin-bottom: 0 li class=子リストのli要素子リストのli要素/li li class=子リストのli要素子リストのli要素/li li class=子リストのli要素子リストのli要素/li /ul /li/ulこういうことですねcounter(名前)で要素を表示content: counter(名前)counter-reset、counter-incrementで使用していた名前に記憶されている数値を表示するときにcounter(名前)とします。div class=コンテナulをリセット、初期値の0がセットされるul class=親リストli class=親リストのli要素親リストのli要素/li ulに1を足す ul = 1 counter(ul)で表示、1が表示されるli class=親リストのli要素親リストのli要素/li ulに1を足す ul = 2 counter(ul)で表示、2が表示される/ulul class=子リストli class=子リストのli要素子リストのli要素/lili class=子リストのli要素子リストのli要素/lili class=子リストのli要素子リストのli要素/li /ulul class=親リストli class=親リストのli要素親リストのli要素/li ulに1を足す ul = 3 counter(ul)で表示、3が表示されるli class=親リストのli要素親リストのli要素/li ulに1を足す ul = 4 counter(ul)で表示、4が表示される/ulul class=子リストli class=子リストのli要素子リストのli要素/lili class=子リストのli要素子リストのli要素/lili class=子リストのli要素子リストのli要素/li/ul/divもちろん名前を間違えてしまうとおかしなカウントになってしまうので誤字には注意してください。手順5. ネストしたリストにも同じようにナンバリングの設定をする 親リストのli要素 親リストのli要素 子リストのli要素 子リストのli要素 子リストのli要素 親リストのli要素 親リストのli要素 子リストのli要素 子リストのli要素 子リストのli要素CSS.コンテナ { counter-reset: ul;}.親リスト { list-style: none; margin-bottom: 0;}.親リスト .親リストのli要素::before { counter-increment: ul 1; content: counter(ul);}.子リスト { margin-left: 0.8rem; list-style: none; counter-reset: uul; // 追加}.子リスト .子リストのli要素::before { counter-increment: uul 1; // 追加 content: counter(uul); // 追加}子リストにもナンバリングをする設定を追加します。親リストの出現回数を記憶しているulとは別でカウントをしていく必要があるため、別途uulという名前に子リストの出現回数を記憶するようにします。div class=コンテナulをリセット、初期値の0がセットされるul class=親リストli class=親リストのli要素親リストのli要素/li ulに1を足す ul = 1 counter(ul)で表示、1が表示されるli class=親リストのli要素親リストのli要素/li ulに1を足す ul = 2 counter(ul)で表示、2が表示される/ulul class=子リストuulをリセット、初期値の0がセットされるli class=子リストのli要素子リストのli要素/li uulに1を足す uul = 1 counter(uul)で表示、1が表示されるli class=子リストのli要素子リストのli要素/li uulに1を足す uul = 2 counter(uul)で表示、2が表示されるli class=子リストのli要素子リストのli要素/li uulに1を足す uul = 3 counter(uul)で表示、3が表示される /ulul class=親リストli class=親リストのli要素親リストのli要素/li ulに1を足す ul = 3 counter(ul)で表示、3が表示されるli class=親リストのli要素親リストのli要素/li ulに1を足す ul = 4 counter(ul)で表示、4が表示される/ulul class=子リストuulをリセット、初期値の0がセットされるli class=子リストのli要素子リストのli要素/li uulに1を足す uul = 1 counter(uul)で表示、1が表示されるli class=子リストのli要素子リストのli要素/li uulに1を足す uul = 2 counter(uul)で表示、2が表示されるli class=子リストのli要素子リストのli要素/li uulに1を足す uul = 3 counter(uul)で表示、3が表示される/ul/div今回はcounter-resetを指定した子リストが二回出現します。そのためuulが記憶している数値はリセットされて、二個目の子リストはまた1,2,3とナンバリングされます。手順6. 親リストのナンバリング、子リストのナンバリングを組み合わせて表示したい形式で表示 親リストのli要素 親リストのli要素 子リストのli要素 子リストのli要素 子リストのli要素 親リストのli要素 親リストのli要素 子リストのli要素 子リストのli要素 子リストのli要素CSS.コンテナ { counter-reset: ul;}.親リスト { list-style: none; margin-bottom: 0;}.親リスト .親リストのli要素::before { counter-increment: ul 1; content: counter(ul);}.子リスト { margin-left: 0.8rem; list-style: none; counter-reset: uul;}.子リスト .子リストのli要素::before { counter-increment: uul 1; content: counter(ul) "-" counter(uul); // 修正}子リストのli要素の::beforeを修正し、親リストの出現回数を記憶しているulを呼び出すことで1-1、1-2というナンバリングが表示できます。子リストのli要素の一つ目が出現したタイミングで、親リストの出現回数を記憶しているulは2になっているため2-1と表示できるわけですねdiv class=コンテナulをリセット、初期値の0がセットされるul class=親リストli class=親リストのli要素親リストのli要素/li ulに1を足す ul = 1 counter(ul)で表示、1が表示されるli class=親リストのli要素親リストのli要素/li ulに1を足す ul = 2 counter(ul)で表示、2が表示される/ulul class=子リストuulをリセット、初期値の0がセットされるli class=子リストのli要素子リストのli要素/li uulに1を足す uul = 1 counter(ul) - counter(uul)で表示、2-1が表示される...content: counter(ul) - counter(uul);の-が親リストの出現回数と子リストの出現回数の間に表示される文字なので、お好みの文字を入れることで1.1、1.2、1.3と表示したり1:1、1:2と表示したりできます。あとは余白や色を微調整したら完成! 親リストのli要素 親リストのli要素 子リストのli要素 子リストのli要素 子リストのli要素 親リストのli要素 親リストのli要素 子リストのli要素 子リストのli要素 子リストのli要素CSS.コンテナ { counter-reset: ul;}.親リスト { list-style: none; margin-bottom: 0;}.親リスト .親リストのli要素::before { counter-increment: ul 1; content: counter(ul); margin-right: 0.4rem; // 追加 font-weight: bold; // 追加}.子リスト { margin-left: 0.8rem; list-style: none; counter-reset: uul;}.子リスト .子リストのli要素::before { counter-increment: uul 1; content: counter(ul) "-" counter(uul); margin-right: 0.4rem; // 追加 font-weight: bold; // 追加}この辺はお好みで!::before要素に背景色や文字色等のスタイルを指定することで自由なデザインが可能です!最後まで読んでいただきありがとうございます!質問や、こんなことを記事にしてほしい!というのがありましたらTwitterのコメント等で受け付けていますので、お気軽にどうぞ!ますみ - 愛知県在住の20代プログラマー - | @mashmy_98それでは次の投稿もお楽しみに!

2023年04月30日

Read More

HTML、CSSで太めのアンダーラインを作る方法

こんにちは!エンジニアのますみです!本日はHTML、CSSで太めの下線を作る方法を解説します!いわゆるアンダーラインですね!是非覚えておきましょう!テーマ HTML、CSSで太めの下線を作る方法がわかる text-decorationの使い方がわかる backgroundの応用した使い方がわかる うまくいかないパターンが覚えられる目次 太めの下線を作る方法 text-decorationを使う backgroundを使う うまくいかない例 border-bottomを使う 疑似要素を使うそれではさっそく見ていきましょう太めの下線を作る方法今回はこのようなHTMLで作っていきます。HTMLCSS は、HTMLで記述されたウェブページのspan class=avds9-decorationスタイルやレイアウト/spanを指定するための言語です。HTMLがウェブページの構造を表現するのに対し、CSSはspan class=avds9-decoration見た目や装飾/spanを指定することができます。1. text-decorationを使うCSS は、HTMLで記述されたウェブページのスタイルやレイアウトを指定するための言語です。HTMLがウェブページの構造を表現するのに対し、CSSは見た目や装飾を指定することができます。このようなアンダーラインはこんなCSSで作れます。.decoration { text-decoration: underline solid #fedc9c 0.4rem; text-underline-offset: -0.2rem;}text-decorationで下線をある程度太くして、色を指定します。text-underline-offsetで下線の位置をちょうどいい位置まで上に移動します。text-decorationについてはこちらの記事で解説しています。詳しく知りたい方は是非読んでみてください2. backgroundを使うCSS は、HTMLで記述されたウェブページのスタイルやレイアウトを指定するための言語です。HTMLがウェブページの構造を表現するのに対し、CSSは見た目や装飾を指定することができます。.decoration { background: linear-gradient(transparent 60%, #fedc9c 30%);}背景の上側が透明、下側が指定した色というグラデーションを作ることで太めの下線が作成できます。transparent 60%の部分が透明な部分、#fedc9c 30%の部分が指定した色の部分になります。うまくいかない例border-bottomを使うCSS は、HTMLで記述されたウェブページのスタイルやレイアウトを指定するための言語です。HTMLがウェブページの構造を表現するのに対し、CSSは見た目や装飾を指定することができます。.decoration { border-bottom: 0.4rem solid #fedc9c;}borderは自由度の高いデザインができるCSSプロパティですが、下線を少し上にするということができません。その為、上のようなレイアウトになってしまいます。疑似要素を使うCSS は、HTMLで記述されたウェブページのスタイルやレイアウトを指定するための言語です。HTMLがウェブページの構造を表現するのに対し、CSSは見た目や装飾を指定することができます。.decoration{ position: relative; z-index: 1;}.decoration::after { content: ""; position: absolute; display: inline-block; width: 100%; height: 0.4rem; background-color: #fedc9c; left: 0; bottom: -0.2rem; z-index: -1;}疑似要素::before、::afterを使うと非常に自由度が高いデザインができますが、改行時のコントロールが難しく、あまりお勧めしません。最後まで読んでいただきありがとうございます!プログラミング学習は何度も繰り返して覚えていくことが大切です!是非ブックマークして学習に役立ててみてください!質問や、こんなことを記事にしてほしい!というのがありましたらTwitterのコメント等で受け付けていますので、お気軽にどうぞ!ますみ - 愛知県在住の20代プログラマー - | @mashmy_98それでは次の投稿もお楽しみに!

2023年04月30日

Read More

HTML、CSSはプログラミング言語ではない?その真相は...

こんにちは!エンジニアのますみです!本日はHTML、CSSはプログラミング言語ではないと言われる理由や、その真相を解説します!目次 このブログではHTML、CSSもプログラミング言語として扱っています HTML、CSSはプログラミング言語ではないのか? HTML、CSSはプログラミング言語でないと言われる理由 Java、PHP、Python等のプログラミング言語の共通点とは まとめこのブログではHTML、CSSもプログラミング言語として扱っていますますみのブログでは、HTML、CSSもプログラミング言語として扱っています。理由としては、このブログはプログラミング初心者の方に向けての記事も多くあるため、一般的な認識に合わせた書き方をしています。プログラミングに精通している方であれば違和感を感じるかもしれませんが、私はプログラミング初心者の方が混乱しないためにHTML、CSSもプログラミング言語と呼ぶことにしています。HTML、CSSはプログラミング言語ではないのか?結論は、なんともいえない。です...なぜ名言できないかというと、定義が明確に書かれている文献などが無いためです。風潮としてHTML、CSSはプログラミング言語ではないと言われています。HTML、CSSはプログラミング言語でないと言われる理由プログラミング言語の定義は以下に当てはまるものとされています。 プログラミング言語とは、コンピュータが理解できる命令の集合で、プログラムを記述するための文法を持っているものです。 人間が理解しやすい形式で、コンピュータが実行するための命令を表現します。 アルゴリズムやデータ構造の表現、制御構造を含み、汎用的な機能を提供します。HTML、CSSはあくまでWebページの構造や見た目を定義するもので、複雑な処理を行うことはできません。また、プログラミング言語とされているJava、PHP、Python等には共通点が多くあります。HTML、CSSはその点では独特です。Java、PHP、Python等との共通点はほぼ無く、HTML、CSS特有の記法が殆どです。Java、PHP、Python等のプログラミング言語の共通点とはプログラミング言語には非常に多くの種類があります。 Java Python C++ JavaScript Ruby PHP Swift Kotlin一部をリストアップしましたが、まだまだたくさんあります。これらのプログラミング言語には共通する概念があります。プログラミング言語の共通点変数多くのプログラミング言語には変数という概念があります。const num = 10;変数というのは箱のようなもので、中には数値や文字などの値を入れることができます。これは、一度変数を作ったら同じ値を使いまわす目的などで使われます。この概念はHTML、CSSにはありません。配列const names = ["太郎", "次郎", "三郎"]複数の値を一つの変数に入れておき、これらをまとめて使いまわしたり処理を行ったりするのに使われます。この概念もHTML、CSSにはありません。関数function sample(num){ return num + 1;}関数は処理をまとめておくものです。関数を使うと同じ処理を使いまわすことができます。この概念もやはりHTML、CSSにはありません。まとめこのように、HTML、CSSとそれ以外の言語には大きな違いがあります。明確にプログラミング言語の定義を示している文献などはありませんが、大きく異なるものであることは間違いありません。先ほども書きましたが、私はこのブログではHTML、CSSもプログラミング言語と呼んでいます。プログラミング初心者の方に向けての記事も多いため、記事を読みに来て下さる方々がわかりやすい言い回しを心掛けているためです。明確な定義は無いため、状況に応じてHTML、CSSをプログラミング言語と呼ぶかどうか決める感じで良いかと思います。最後まで読んでいただきありがとうございます!質問や、こんなことを記事にしてほしい!というのがありましたらTwitterのコメント等で受け付けていますので、お気軽にどうぞ!ますみ - 愛知県在住の20代プログラマー - | @mashmy_98それでは次の投稿もお楽しみに!

2023年04月30日

Read More

checkboxをデザインできる:checkedの解説【HTML、CSS】

こんにちは!エンジニアのますみです!本日はcheckboxのチェック時のデザインができる:checkedの使い方を解説します!目次 サンプル チェック時のスタイルを作成する手順 デフォルトのスタイルをリセットする チェックされていない状態のスタイルを決める :checkedを使い、チェック時のスタイルを決めるそれではさっそく見ていきましょうサンプル利用規約に同意する 上の利用規約に同意するにチェックをすると、ハンコが押されたようなアニメーションをします。:checkedはcheckboxがチェックされている時のスタイルを指定できるCSS疑似クラスになります。サンプルのHTML、CSSはこの記事の後半に載せておきます。チェック時のスタイルを作成する手順1. デフォルトのスタイルをリセットするチェックしてください 上はデフォルトの状態のチェックボックスです。ブラウザによりますが、チェックすると背景色が変わったり、チェックマークが現れたりしますね自由なデザインにするために、このデフォルトの変化を無しにしていきます。.checkbox { -webkit-appearance: none; -moz-appearance: none; appearance: none; outline: none; background-color: transparent; border-color: inherit;}2. チェックされていない状態のスタイルを決めるチェックしてください .checkbox { -webkit-appearance: none; -moz-appearance: none; appearance: none; outline: none; background-color: transparent; border: 1px solid lightgray; border-radius: 0.2rem; width: 1rem; height: 1rem;}お好みで通常時のスタイルを決めます。私は大きさ、枠線、角丸を指定してみました。3. :checkedを使い、チェックされている時のスタイルを決めるチェックしてください .checkbox { -webkit-appearance: none; -moz-appearance: none; appearance: none; outline: none; background-color: transparent; border: 1px solid lightgray; border-radius: 0.2rem; width: 1rem; height: 1rem;}.checkbox:checked { background-color: lightcoral;}チェックボックスのセレクタの後に:checkedを付け加えたものをCSSに追加します。ここでチェック時のスタイルを定義します。とりあえず背景色を指定してみました。チェックを入れてみると背景色がオレンジ系の色になると思います。ハンコを押すCSSのサンプルどこに需要があるかわかりませんが、この記事冒頭のハンコを押すチェックボックスのHTMLとCSSです。HTMLlabel class="checkbox-label" span チェックしてください /span input class="checkbox" type="checkbox"/labelCSS.checkbox-label { display: flex; align-items: center; cursor: pointer;}.checkbox { width: 3rem; height: 3rem; margin-left: 0.8rem; display: flex; justify-content: center; align-items: center; position: relative; outline: none; border: 1px solid lightgray; -webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer;}.checkbox:checked { background-color: transparent; border: 1px solid lightgray;}.checkbox:before { position: absolute; content: "可"; font-size: 1.8rem; font-weight: bolder; display: flex; justify-content: center; align-items: center; width: 95%; height: 95%; left: 0; color: #C42121; border: 3px solid #C42121; border-radius: 50%; transition: 0s; opacity: 0;}.checkbox:checked:before { opacity: 1; animation: stamp 1s linear;}@keyframes stamp { 0% { opacity: 0; transform: scale(1.2) rotate(720deg); } 10% { opacity: 1; } 50% { transform: scale(1.2) rotate(0deg); } 85% { transform: scale(1.2) rotate(0deg); } 95% { transform: scale(0.8) rotate(0deg); } 100% { transform: scale(1) rotate(0deg); }}最後まで読んでいただきありがとうございます!質問や、こんなことを記事にしてほしい!というのがありましたらTwitterのコメント等で受け付けていますので、お気軽にどうぞ!ますみ - 愛知県在住の20代プログラマー - | @mashmy_98それでは次の投稿もお楽しみに!

2023年04月30日

Read More

CSSで使われる*って何?

こんにちは!エンジニアのますみです!本日はCSSで使われる*(アスタリスク)について解説します!目次 *(アスタリスク)はすべての要素に適用される *(アスタリスク)以外の特殊な書き方 HTMLタグで指定 :から始まるCSSセレクタ 属性による指定それではさっそく見ていきましょう*(アスタリスク)はすべての要素に適用されるH1タグH2タグParagraph(段落)こんな感じのHTMLがあるとします。div h1H1タグ/h1 h2H2タグ/h2 pParagraph(段落)/p/div*(アスタリスク)で要素を指定すると、すべての要素にスタイルが適用されます。では*(アスタリスク)を使ってCSSを書いてみましょう。H1タグH2タグParagraph(段落)CSS* { background-color: lightblue;}*(アスタリスク)を使い、背景色にlightblue(薄い青色)を指定しました。このようにすべてのタグにlightblue(薄い青色)が適用されましたね*(アスタリスク)以外の特殊なCSSの書き方ここでいう特殊なというのは、クラス名やid以外のことを指します。HTMLタグで指定H1タグH2タグParagraph(段落)CSSh1 { background-color: lightblue;}h1、h2、p、span等のHTMLタグで指定することもできます。ですが、HTMLタグを使ってCSSを書く方法は、管理が大変になってしまいがちなので注意が必要です。HTMLタグを使ってCSSを書く最も多いケースはbodyに対してスタイルを適用することです。body { margin: 0; padding: 0;}通常、Webブラウザーはデフォルトで body要素に余白やパディングなどのスタイルを設定しています。デフォルトのスタイルがページのスタイリングに影響を与えることがあるため、CSSで余白などをリセットする際に使われます。また、font-family等のウェブサイト全体で統一したいスタイルも、bodyタグでCSSを書くと良いでしょう。:から始まるCSSセレクタH1タグH2タグParagraph(段落)CSSh1:hover { background-color: lightblue;}:や::で始まるものは疑似クラスと呼ばれ、マウスホバー時や、インプットにフォーカスした時の状態を指定します。マウスホバー時のスタイルを定義できる:hoverの使い方はこちらの記事で解説しています。インプットにフォーカスした時のスタイルを定義できる:focusの使い方はこちらの記事で解説しています。属性による指定 HTMLdiv input type="text" input type="email"/divCSSinput[type="text"] { border: 1px solid lightgray; width: 100%; padding: 0.4rem 0.8rem; border-radius: 0.4rem; margin-bottom: 1rem;}このように、input要素でtypeがtextのもの、といった指定方法もあります。name属性で指定する場合はこんな感じで書くことができます。HTMLdiv input name="name" type="text" input name="email" type="email"/divCSSinput[name="name"] { border: 1px solid lightgray; width: 100%; padding: 0.4rem 0.8rem; border-radius: 0.4rem; margin-bottom: 1rem;}最後まで読んでいただきありがとうございます!質問や、こんなことを記事にしてほしい!というのがありましたらTwitterのコメント等で受け付けていますので、お気軽にどうぞ!ますみ - 愛知県在住の20代プログラマー - | @mashmy_98それでは次の投稿もお楽しみに!

2023年04月29日

Read More

HTMLの特殊文字まとめ

こんにちは!エンジニアのますみです!本日はHTMLの特殊文字について書いていきます。よく忘れるのでメモ用に!目次 lt; : (小なり記号) gt;: (大なり記号) amp;: (アンドマーク) quot;: (二重引用符) apos;: (シングルクォーテーション) nbsp;: (空白) iexcl;: (逆感嘆符) cent;: (セント記号) pound;: (ポンド記号) yen;: (円記号) euro;: (ユーロ記号 times;: (掛け算記号) divide;: (割り算記号) plusmn;: (プラスマイナス記号) deg;: (度記号) percnt;: % (パーセント記号) raquo;: (右角かっこ) laquo;: (左角かっこ) hellip;: (省略記号) middot;: (中黒) ndash;: (ハイフン) mdash;: (エムダッシュ) copy;: (コピーライト記号) reg;: (登録商標記号) trade;: (商標記号)HTML特殊文字一覧lt;: (小なり記号)使用例p100lt;200/p実際に表示するとこうなる100200gt;: (大なり記号)使用例p200gt;100/p実際に表示するとこうなる200100amp;: (アンドマーク)使用例pATamp;T/p実際に表示するとこうなるATTquot;: (二重引用符)使用例pShe said, quot;Hello!quot;/p実際に表示するとこうなるShe said, Hello!apos;: (シングルクォーテーション)使用例pI'm happyapos;./p実際に表示するとこうなるIm happy.nbsp;: (空白)使用例pThisnbsp;isnbsp;anbsp;sentence./p実際に表示するとこうなるThisisasentence.iexcl;: (逆感嘆符)使用例piexcl;Hola!/p実際に表示するとこうなるHola!cent;: (セント記号)使用例pThe price is 10cent; per item./p実際に表示するとこうなるThe price is 10 per item.pound;: (ポンド記号)使用例pThe price is pound;10./p実際に表示するとこうなるThe price is 10.yen;: (円記号)使用例pThe price is yen;1000./p実際に表示するとこうなるThe price is 1000.euro;: (ユーロ記号)使用例pThe price is euro;10./p実際に表示するとこうなるThe price is 10.times;: (掛け算記号)使用例p2 times; 3 = 6/p実際に表示するとこうなる2 3 = 6divide;: (割り算記号)使用例p10 divide; 2 = 5/p実際に表示するとこうなる10 2 = 5plusmn;: (プラスマイナス記号)使用例pThe temperature is 20 plusmn; 2 degrees Celsius./p実際に表示するとこうなるThe temperature is 20 2 degrees Celsius.deg;: (度記号)使用例pThe angle is 45deg;./p実際に表示するとこうなるThe angle is 45.percnt;: % (パーセント記号)使用例p50percnt; discount/p実際に表示するとこうなる50% discountraquo;: (右角かっこ)使用例pNext page raquo;/p実際に表示するとこうなるNext page laquo;: (左角かっこ)使用例plaquo; Previous page/p実際に表示するとこうなる Previous pagehellip;: (省略記号)使用例pRead more hellip;/p実際に表示するとこうなるRead more middot;: (中黒)使用例pJohn middot; Doe/p実際に表示するとこうなるJohn Doendash;: (ハイフン)使用例pMonday ndash; Friday/p実際に表示するとこうなるMonday Fridaymdash;: (エムダッシュ)使用例pThe author is unknown mdash; or is it?/p実際に表示するとこうなるThe author is unknown or is it?copy;: (コピーライト記号)使用例pcopy; 2023 John Doe/p実際に表示するとこうなる 2023 John Doereg;: (登録商標記号)使用例pMicrosoftreg;/p実際に表示するとこうなるMicrosofttrade;: (商標記号)使用例pInteltrade;/p実際に表示するとこうなるIntel最後まで読んでいただきありがとうございます!質問や、こんなことを記事にしてほしい!というのがありましたらTwitterのコメント等で受け付けていますので、お気軽にどうぞ!ますみ - 愛知県在住の20代プログラマー - | @mashmy_98それでは次の投稿もお楽しみに!

2023年04月29日

Read More

ニュートラルネットワークとは?わかりやすく解説します!

こんにちは!エンジニアのますみです!本日はニュートラルネットワークとは何か、わかりやすく解説します!目次 ニューラルネットワークとは何ですか? ニューラルネットワークができることは? 画像認識 言語処理 予測 自己学習 ニューラルネットワークを使った身近なものは? 音声アシスタント 自動運転車 オンラインショッピングの推薦機能 ニューラルネットワークをプログラミングするためにはどのようなプログラミング言語やライブラリが必要? Python Scratch C++ Kerasニューラルネットワークとは?ニューラルネットワークは、簡単に言うと、機械が脳みそのような仕組みでデータを処理する方法の1つです。人間の脳は、たくさんの神経細胞が結合して情報を処理する仕組みを持っています。ニューラルネットワークも同じように、膨大な量の数値データを複雑な仕組みで処理することができます。ニューラルネットワークは、画像認識、音声認識、言語処理、ゲームAIなどに応用されています。ニューラルネットワークができることは?ニューラルネットワークは、いろいろなことができます。その例をいくつか紹介します。画像認識ニューラルネットワークを使って、画像の中に何が写っているかを自動的に認識することができます。例えば、ニューラルネットワークを使って、犬や猫などの動物を自動的に識別することができます。言語処理ニューラルネットワークを使って、文章の中に含まれる単語の意味を理解することができます。例えば、ニューラルネットワークを使って、自動翻訳や文章の自動要約を行うことができます。予測ニューラルネットワークを使って、将来のイベントや価格の変動を予測することができます。例えば、ニューラルネットワークを使って、株価の変動を予測することができます。自己学習ニューラルネットワークは自己学習ができるため、人間が手でプログラムを書かなくても、自分で問題を解決することができます。例えば、ニューラルネットワークを使って、自動運転車のように、自分で周りの状況を認識して、安全に運転することができます。これらは、ニューラルネットワークの例の一部であり、実際にはさまざまな分野で使われています。ニューラルネットワークを使った身近なものは?ニューラルネットワークを使用した身近なものには、以下のようなものがあります。音声アシスタント音声アシスタントは、スマートフォンやスマートスピーカーなどで使われることがあります。ニューラルネットワークを使って、人間の声を聞き取り、質問に答えたり、命令を受け付けたりすることができます。代表的なものとして、SiriやGoogleアシスタントがあります。自動運転車自動運転車は、ニューラルネットワークを使って、周りの状況を認識し、安全に運転することができます。車に搭載されたカメラやセンサーが周りの状況を捉え、ニューラルネットワークがその情報を解析し、車の運転を制御します。オンラインショッピングの推薦機能オンラインショッピングサイトでは、ニューラルネットワークを使って、過去の購入履歴や商品の閲覧履歴から、おすすめの商品を紹介することがあります。これによって、ユーザーが自分の好みに合った商品を見つけやすくなります。ニューラルネットワークは、身近なところにも使われている技術であり、私たちの生活に欠かせないものの一つです。ニューラルネットワークをプログラミングするには?ニューラルネットワークをプログラミングするためにはいくつかのプログラミング言語やライブラリを使うことができます。具体的には、以下のようなものがあります。Pythonニューラルネットワークのプログラミングには、Pythonがよく使われます。Pythonには、ニューラルネットワークのライブラリとして有名なTensorFlowやPyTorchといったものがあります。Scratchニューラルネットワークの概念を覚えるためには、Scratchというプログラミング言語を使うこともできます。Scratchでは、ビジュアルプログラミングという方法でニューラルネットワークの概念を学ぶことができます。C++ニューラルネットワークの処理を高速化するために、C++といった高速なプログラミング言語を使うこともできます。ただし、C++はPythonやScratchよりも難しいため、より高度な知識が必要になります。KerasKerasは、ニューラルネットワークのライブラリの一つで、Pythonで使うことができます。Kerasは、シンプルなインターフェイスを持っているため、初心者でも簡単にニューラルネットワークを作ることができます。これらの言語やライブラリを使ってニューラルネットワークをプログラミングすることができます。ただし、ニューラルネットワークは高度な技術であり、プログラムの理解や扱い方には、しっかりと学習する必要があります。最後まで読んでいただきありがとうございます!質問や、こんなことを記事にしてほしい!というのがありましたらTwitterのコメント等で受け付けていますので、お気軽にどうぞ!ますみ - 愛知県在住の20代プログラマー - | @mashmy_98それでは次の投稿もお楽しみに!

2023年04月29日

Read More

自然言語処理(NLP)とは?わかりやすく解説!

こんにちは!エンジニアのますみです!本日は自然言語処理(NLP)とは何か、わかりやすく解説します!目次 自然言語処理(NLP)とは? 自然言語処理(NLP)が使われている身近な例 スマートフォンやパソコンの音声認識機能 インターネット検索エンジン 自動翻訳サービス スマートスピーカーの音声アシスタント 自然言語処理(NLP)に使われる技術とは? 形態素解析 構文解析 情報抽出 文書分類 自然言語処理(NLP)はこれからどうなっていくの? より高度な文章理解 会話の自然さの向上 精度の向上 情報の自動抽出 新しい応用分野の開拓 自然言語処理(NLP)を学ぶには?それではさっそく見ていきましょう自然言語処理(NLP)とは?「自然言語処理」とは、人間が話す言葉をコンピューターで理解したり処理する技術のことです。たとえば、スマートフォンの音声アシスタントや翻訳アプリがこれに当たります。この技術は人工知能の一分野で、昔から研究されてきました。最近ではインターネット上にたくさんあるテキストデータを使って研究が進んでいます。自然言語処理では、コンピューターに言葉を理解させるために、ディープラーニングと呼ばれる技術も使われます。ただし、自然言語処理はまだまだ発展途上で研究が進んでいる最中です。課題としては、テキストデータは画像や音声と違って、特徴を表現することが難しいといったことなどがあります。自然言語処理(NLP)が使われている身近な例自然言語処理(NLP)は、私たちの日常生活で様々な場面で使われています。以下に、身近なNLPの例をいくつか挙げてみます。スマートフォンやパソコンの音声認識機能スマートフォンやパソコンの音声認識機能:音声で話すと、言葉をテキストに変換してくれます。インターネット検索エンジンキーワードを入力すると、関連する検索結果を表示してくれます。自動翻訳サービス外国語の文章を自動的に翻訳して、日本語に変換してくれます。スマートスピーカーの音声アシスタント音声で話しかけると、音声認識と自然言語処理の技術で、人工知能が応答してくれます。これらのサービスや機能は、自然言語処理の技術が活用されています。自然言語処理(NLP)に使われる技術とは?自然言語処理に使われる技術には以下のようなものがあります形態素解析形態素解析とは、文章を単語ごとに分割してそれぞれの単語の意味を理解するための技術です。例えば、文章中の「走る」という言葉は、動詞であり、意味は「足を速く動かして移動すること」です。形態素解析を使うことで、このような単語の意味を正確に理解することができます。構文解析構文解析は文章を文法に従って解析する技術です。文章の中で単語同士の関係や文の構造を理解し、主語や述語、目的語などの役割や文の種類(疑問文や命令文など)を判断することができます。例えば、「私はリンゴを食べました。」という文章を構文解析すると、「私」が主語、「食べました」が述語、「リンゴ」が目的語となります。このように、構文解析を行うことで、文章の構造や意味を理解することができます。情報抽出情報抽出とは、大量の文章から必要な情報だけを抜き出す技術のことです。例えば、新聞記事から「誰が」「何をしたか」「いつ・どこで」のような情報を自動的に抜き出すことができます。文書分類文書分類とは、大量の文章をいくつかのグループに分けることです。たとえば、新聞記事を「政治」「経済」「スポーツ」などのカテゴリーに分類することができます。そのため、検索エンジンやニュースサイトなどでよく使われています。対話システム対話システムは人とコンピューターが対話をするためのシステムです。例えばスマートフォンの音声アシスタントや、チャットボットなどがあります。ユーザーが話しかけると対話システムはその言葉を理解し、それに応じた回答を返します。自然言語処理はこれからどうなっていくの?自然言語処理は将来的には、以下のような進展が期待されています。より高度な文章理解機械がより自然に文章を理解できるようになり、より正確な文章生成や翻訳が可能になります。また、会話の自然さも向上するため、機械が人間の言語のニュアンスやジョークなども理解しより自然な会話が可能になります。情報の自動抽出も進み、ビジネスや科学技術の分野での活用が進むでしょう。また、医療や法律分野での活用など、新たな応用分野の開拓も期待されます。会話の自然さの向上機械が人間の言語のニュアンスやジョークなども理解し、より自然な会話が可能になります。自然な会話ができると、人工知能と話すことが楽しくなりますし、質問に対して的確な返答を得られるようになることが期待されます。また、会話がスムーズに進むことで、人工知能を使ったサービスや製品がより利用しやすくなることも期待されます。精度の向上自然言語処理が精度の向上ができると、機械がより正確な予測や分類ができるようになります。例えば、文章の意味を正確に理解できるようになったり、大量の文書から情報を正確に抽出できるようになったりします。これによって、ビジネスや科学技術の分野での活用が進むことが期待されます。情報の自動抽出機械が大量の文書から情報を自動的に抽出し、利用できるようになることで、ビジネスや科学技術の分野での活用が進みます。例えば、医療の分野では、患者の治療や病気の研究に必要な情報を自動的に抽出することができます。法律の分野では、法律文書から重要な情報を抽出し、法律家が必要な情報を素早く入手できるようになります。自然言語処理が情報の自動抽出の向上ができるようになることで、人間が手作業で情報を探す手間を省くことができ、より効率的な作業が可能になります。新しい応用分野の開拓自然言語処理が新しい応用分野の開拓ができるようになると、今までになかった便利なサービスやツールが生まれるかもしれません。たとえば、医療の分野では、患者さんの病気の状態を診断するためのテキストデータを自動的に解析し、治療方法を提案するシステムができるかもしれません。また、法律の分野では、契約書や法律の文書を自動的に解析し、法的な問題を早く解決するためのシステムが作られるかもしれません。つまり、自然言語処理が進歩することで、私たちの生活がより便利になり、より多くの人々が助けられる可能性があるということです。自然言語処理(NLP)を学ぶには?自然言語処理を学ぶにはいくつかのオススメの書籍やコースがあります。以下にいくつか例を挙げます。 「自然言語処理の基礎と技術」(石塚満著):自然言語処理の基本的な技術から、応用技術まで幅広く扱っています。 「Python自然言語処理入門」(川口 和也著):Pythonというプログラミング言語を使って自然言語処理を学ぶことができます。 「Coursera 自然言語処理入門」:コースラというオンライン学習プラットフォームで提供されているコースです。自然言語処理の基礎から応用まで学ぶことができます。自然言語処理を学ぶためには、プログラミングの基礎知識が必要になることもありますが、上記の書籍やコースでは初心者向けの内容から始まるものもあります。まずは自分に合ったものを探してみると良いでしょう。最後まで読んでいただきありがとうございます!質問や、こんなことを記事にしてほしい!というのがありましたらTwitterのコメント等で受け付けていますので、お気軽にどうぞ!ますみ - 愛知県在住の20代プログラマー - | @mashmy_98それでは次の投稿もお楽しみに!

2023年04月29日

Read More

【書けるからわかるCSS】deg、rad、turnとは?

こんにちは!エンジニアのますみです!本日はCSSの数値の単位deg、rad、turnについて解説します!聞きなれない単位ですね...何に使うのでしょうか?deg、rad、turnは回転の角度の単位deg、rad、turnはすべて回転の角度を表す単位です。transformのrotate等で使うことができます。それぞれ数値の意味合いが変わってくるので見ていきましょう。degの使い方BOX.box { transform : } degは最も簡単で、1degは円周の360分の1です。普段使う角度の単位と同じですね。数値を増やすと時計回りに要素が回転します。マイナスの値を指定すると反時計回りに回転します。radの使い方BOX.box { transform : } radはラジアンのことです。3.14が180度(180deg)、6.28が360度(360deg)です。動きが難しいのでサンプルは元の角度にオレンジの線、現在の角度に青い線を引きました。turnの使い方BOX.box { transform : } turnはさらに直感的で、1で一周といった意味になります。つまり半回転させたい場合は0.5turnとすればよいというわけですね最後まで読んでいただきありがとうございます!質問や、こんなことを記事にしてほしい!というのがありましたらTwitterのコメント等で受け付けていますので、お気軽にどうぞ!ますみ - 愛知県在住の20代プログラマー - | @mashmy_98それでは次の投稿もお楽しみに!

2023年04月29日

Read More

日程調整のビジネスメールを人工知能に作ってもらって楽をする【Chat-GPTプロンプト】

こんにちは!エンジニアのますみです!本日は日程調整のメール文章を『Chat-GPT』に考えてもらう方法を解説します。目次 日程調整メールのポイントは結構多い 人工知能に日程調整メールを作ってもらう 打ち合わせの日程調整メール セミナーの開催日の日程調整 社内ズームミーティングの日程調整メールそれではさっそく見ていきましょう日程調整メールのポイントは結構多い日程調整はビジネスの世界では非常に重要な作業になります。メールで日程調整をする時の重要なポイントは以下のようになります。タイトルはメールの目的が明確にわかるようにする日程調整が目的のメールだとわかるようなタイトルをつけることで、相手にとっても返信しやすくなります。具体的には、「来週の商談日程調整について」といった具体的なタイトルを付けることが重要です。相手が誰からのメールか一目でわかるように名乗る自身の会社名、部署、名前などを含めて相手が一目でわかるようにします。提案する日程は複数用意し、柔軟に対応する相手のスケジュールに合わせて日程を提案する際には、複数の候補を用意しておくことが重要です。結びメールの締めくくりのあいさつ文を含めます。基本的なポイントだけでもこれだけあります。さて、このような日程調整メールがもし自動でできたらどれだけいいことでしょう。Chat-GPTに必要な情報を送信すればいい感じの日程調整メールを作ることができます。人工知能に日程調整メールを作ってもらう人工知能『Chat-GPT』に必要な情報を与え、日程調整メールを作ってもらいましょう。【何の日程調整か】の日程調整メールを作ってくださいメールの本文は、自身の名乗り、本文、結びの構成にしてください返信期限は【返信期限】です以下の候補日を本文に含めてください候補日:【候補日】このようなテンプレートを使って人工知能に情報を与えていきますChat-GPTは命令文を学習に使うことがありますので、機密情報は送らないようにしましょう打ち合わせの日程調整メール例えば打ち合わせの日程調整メールを作ってもらう場合打ち合わせの日程調整メールを作ってくださいメールの本文は、自身の名乗り、本文、結びの構成にしてください返信期限は5月30日です以下の候補日を本文に含めてください候補日:6月10日12:00~13:00 6月11日12:00~13:00 6月13日12:00~13:00このような文章を人工知能(Chat-GPT)に送信します。Chat-GPTの回答件名: 打ち合わせ日程調整について拝啓 [相手の名前様]私は[自分の名前]と申します。この度は、打ち合わせの日程調整についてご連絡差し上げます。以下の日程について、ご都合いかがでしょうか。いずれかご都合のよい日程をお知らせいただけますと幸いです。返信期限は5月30日となっておりますので、お手数ですが早めのご返信をお願いいたします。6月10日(金)12:00~13:006月11日(土)12:00~13:006月13日(月)12:00~13:00また、上記の日程についてご都合が合わない場合は、別の日程をご提案いただけますと幸いです。ご多忙のところ恐れ入りますが、ご返信をお待ちしております。敬具[自分の名前]こんな感じで件名と本文を回答してくれます。もちろんこのままでは使えませんが、部分的に修正すれば充分使えるメール内容になっています。セミナーの開催日の日程調整セミナーの開催日の日程調整メールを作ってくださいメールの本文は、自身の名乗り、本文、結びの構成にしてください返信期限は5月30日です以下の候補日を本文に含めてください候補日:6月10日12:00~13:00 6月11日12:00~13:00 6月13日12:00~13:00Chat-GPTの回答 件名: セミナー開催日程のご案内 拝啓 [相手の名前様] 私は[自分の名前]と申します。この度は、[セミナー名]の開催日程についてご案内申し上げます。以下の日程について、セミナーの開催を予定しております。いずれかご都合のよい日程をお知らせいただけますと幸いです。返信期限は5月30日となっておりますので、お手数ですが早めのご返信をお願いいたします。6月10日(金)12:00~13:006月11日(土)12:00~13:006月13日(月)12:00~13:00セミナーの開催時間は各日程ともに12時から1時までを予定しております。また、会場は[会場名・住所]となります。なお、ご都合が合わない場合は、別の日程についてご提案いただけますと幸いです。なお、ご参加いただく方には別途ご案内をお送りいたします。ご多忙のところ恐れ入りますが、ご返信をお待ちしております。敬具[自分の名前]セミナーの開催日の日程調整メールを作ってくださいと人工知能に文章を送信すると、関連する文章もセミナーの開催日に修正してくれます。また、会場等の情報を含めることで更に使いやすい回答をしてくれるでしょう社内ズームミーティングの日程調整メールミーティングの日程調整メールを作ってくださいメールは社内に送りますミーティングはZOOMで行いますメールの本文は、自身の名乗り、本文、結びの構成にしてください返信期限は5月30日です以下の候補日を本文に含めてください候補日:6月10日12:00~13:00 6月11日12:00~13:00 6月13日12:00~13:00先ほどより詳細に、人工知能に送信する文章を作った場合はどうでしょうChat-GPTの回答件名: 【社内ミーティング】ZOOMミーティング日程調整のお願い拝啓 [社内の方々]いつもお世話になっております。[自分の名前]です。この度は、社内で開催するZOOMミーティングの日程調整についてご協力をお願いいたします。以下の日程について、ミーティングを予定しております。いずれかご都合のよい日程をお知らせいただけますと幸いです。返信期限は5月30日となっております。【候補日】・6月10日(木)12:00〜13:00・6月11日(金)12:00〜13:00・6月13日(日)12:00〜13:00会議のテーマやアジェンダについては、別途お知らせいたします。また、ZOOMのアクセス方法についても改めてご案内いたしますので、今しばらくお待ちください。何かご不明な点やご質問がございましたら、お気軽にご連絡ください。ご協力をいただけますよう、よろしくお願い申し上げます。敬具[自分の名前]社内メールであること、ZOOMで行うことを人工知能に伝えたため、出力された日程調整メールには社内に向けたZOOMミーティングの日程調整メールの文章になっています。最後まで読んでいただきありがとうございます!質問や、こんなことを記事にしてほしい!というのがありましたらTwitterのコメント等で受け付けていますので、お気軽にどうぞ!ますみ - 愛知県在住の20代プログラマー - | @mashmy_98それでは次の投稿もお楽しみに!

2023年04月29日

Read More

ますみ

愛知県在住の20代プログラマーです!

プログラミングと無縁の専門学校を卒業して働き出しましたが、コロナ禍でほぼ無職に...

無職時代に独学でプログラミングを勉強して、未経験からめでたくプログラマーとして採用していただけました。

このブログを見た方が、わたしが独学で勉強していた時期に悩んでいたことで悩まないように...そう願いながら情報を発信しています!

おすすめレンタルサーバー


当サイトはXserverを利用しています。 HTML、CSSで作成したホームページはもちろん、wordpress、Laravel等で作成した高度なアプリケーションも利用可能です!

ますみ

愛知県在住の20代プログラマーです!

プログラミングと無縁の専門学校を卒業して働き出しましたが、コロナ禍でほぼ無職に...

無職時代に独学でプログラミングを勉強して、未経験からめでたくプログラマーとして採用していただけました。

このブログを見た方が、わたしが独学で勉強していた時期に悩んでいたことで悩まないように...そう願いながら情報を発信しています!