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

ますみのブログ

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

【CSS入門】displayの使い方を実際にコードを書きながら覚えよう

こんにちは!エンジニアのますみです!本日はCSSの基本、displayの使い方を解説していきます!自由なレイアウトを作るには欠かせない知識です!是非覚えてみてください!この記事を読んでほしい方! CSSを学習してスキルを身に着けたい方 基礎知識をまとめた記事をブックマークしておきたい方 実際にコードを書きながら覚えたい方この記事では実際にCSSをこのページ上で書くことができるので、プレビューを見ながら使い方をマスターすることができます。是非、ブックマークして学習に役立てていただけたら幸いです。目次 display:blockの使い方 〇幅、高さを指定できる 余白を指定できる display:inlineの使い方 親要素の横幅に到達すると自動で改行される 余白を指定する際は注意が必要 横の余白は綺麗に表示される 縦のmarginは指定できない 縦のpaddingを指定するとレイアウトが崩れやすいため注意 display:inline-blockの使い方 親要素の横幅に到達すると自動で改行される 縦、横の余白が指定可能 改行しても余白が綺麗に表示できる display:flexの使い方 子要素を左寄せ、中央寄せ、右寄せにする 子要素を横幅いっぱいに均等に配置するそれではさっそく見ていきましょう!display:blockの使い方ParentBoxBox.parent { display : } .box { display : } blockを指定すると、要素は縦に並べられます。〇幅、高さを指定できるParentBoxBox.parent { display : } .box { display : width : height : } blockを指定した要素は幅、高さを指定することができます。エディターの.boxの大きさを編集してみると、幅、高さが指定できることがわかります。余白を指定できるParentBoxBox.parent { display : } .box { display : margin : padding : } blockを指定した要素は余白(margin)、要素の内側の余白(padding)を指定することができます。エディターの.boxのmargin、paddingを編集してみると、余白が指定できることがわかります。display:inlineの使い方ParentBoxBoxBox.parent { display : .box { display : } inlineを指定すると、要素は横に並べられます。親要素の横幅に到達すると自動で改行されるParentBoxBoxBox.parent { display : width : } .box { display : } 上の要素がもしも改行していなければ、parentのwidthを小さくしてみてください。inlineを指定した要素は、親要素の横幅に到達すると自動で改行されます。marginを適切に指定することで、見やすいレイアウトにすることができます。余白を指定する際は注意が必要横の余白は綺麗に表示できるParentBoxBox.parent { display : } .box { display : margin : padding : } inlineを指定した要素に、横の余白を指定した例です。このように各要素に適切な余白を指定して、見やすいレイアウトを作ることができます。縦のmarginは指定できないParentBoxBox.parent { display : } .box { display : margin : padding : } inlineを指定した要素は、縦向きのmarginを指定しても無効となるため、変化が起こりません。縦のpaddingを指定するとレイアウトが崩れやすいため注意ParentBoxBox.parent { display : } .box { display : margin : padding : } inlineを指定した要素は、縦のpaddingを指定することが可能ですが、レイアウトが崩れやすいため注意が必要です。上の例では、青いボックスの縦のpaddingに50pxを指定しました。青いボックス自体は指定したpadding分大きく表示されましたが、親ボックスの大きさに影響を与えられないため、おかしなレイアウトになってしまっています。ParentBoxBoxBox.parent { display : width : } .box { display : margin : padding : } また、要素が改行した際にはpaddingで指定した縦幅分、他の要素とかぶってしまいます。上のeditorのpaddingを編集して、padding: 0px 10px;とすると表示崩れが直ることがわかると思います。その為、inlineを指定した要素には基本的には縦のpaddingは指定するべきではありません。display:inline-blockの使い方ParentBoxBoxBox.parent { display : .box { display : } inline-blockを指定すると、要素は横に並べられます。親要素の横幅に到達すると自動で改行されるParentBoxBoxBox.parent { display : width : } .box { display : } 上の要素がもしも改行していなければ、parentのwidthを小さくしてみてください。inline-blockを指定した要素は、親要素の横幅に到達すると自動で改行されます。ここまではinlineと変わりない働きをしますが、余白の指定で大きな差があります。縦、横の余白が指定可能ParentBoxBoxBox.parent { display : } .box { display : padding : margin : } inline-blockはmargin、paddingが縦も横も設定可能です。改行しても余白が綺麗に表示できるParentBoxBoxBox.parent { display : width : } .box { display : padding : margin : } inline-blockを指定した要素は自身の高さを明確に持つことができるので、 改行しても要素同士がかぶることはありません。display:flexの使い方ParentBoxBoxBox.parent { display : } .box { display : padding : margin : } これまでの属性は、指定した要素自身の働きが変わる属性でしたが、flexは特殊で、子要素の並べ方に影響を与えます。flexは子要素を横並びに表示するため、青いボックスが横並びに配置されます。子要素を左寄せ、中央寄せ、右寄せにするParentBoxBoxBox.parent { display : width : justify-content : } .box { display : padding : margin : } flexを指定した要素に、justify-content: centerとすると、子要素を中央に寄せて配置することができます。また、flex-startで左寄せ、flex-endで右寄せになります。是非上のエディターでjustify-contentを編集して、動きを確認してみてください。子要素を横幅いっぱいに均等に配置するParentBoxBoxBox.parent { display : width : justify-content : } .box { display : padding : margin : } さらに、justify-conentにspace-betweenを指定すると、子要素を横幅いっぱいに広げて配置することができます。均等に配置する設定は他にもあり、space-aroundと指定すると最初と最後の要素も余白を持たせた状態で配置され、space-evenryと指定すると、一つ目の要素の前の余白、要素間の余白、最後の要素の後の余白がすべて均等になるように配置されます。flexは他にも柔軟なレイアウトに対応するための設定がたくさんあるため、この記事ではよく使うものを厳選して紹介しました。Webデザインにおいて欠かせない属性なので、是非覚えてみてください!最後まで読んでいただきありがとうございました!プログラミング学習は反復して覚えていくことが大切です!是非ブックマークして学習に役立ててみてください!質問や、こんなことを記事にしてほしい!というのがありましたらTwitterのコメント等で受け付けていますので、お気軽にどうぞ!ますみ - 愛知県在住の20代プログラマー - | @mashmy_98それでは次の投稿もお楽しみに!

2023年04月22日

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

スキルアップできるJavascript変数の知識【初心者向け】

こんにちは!エンジニアのますみです!本日は誰も教えてくれないスキルアップできるJavascript変数の知識についてお話していきます。私がプログラミング初心者の頃に知りたかったことを書いていきます!テーマ プログラミング初心者の方が、現場で使える知識を学べる内容。 ネット上だけではなかなか教えてもらえない本当に大切なポイントがわかる内容まず、学習する言語にJavascriptを選んだあなた、素晴らしいです!JavascriptはWebサイトの目に見えるデザイン面、裏側で動いているシステムにも活用できる万能な言語ですので、学習することで就職、転職の際に広い選択肢を持つことができます!目次 変数名はしっかり考えて決める やってはいけない例1,変数名を無意味な名前にしてしまう やってはいけない例2,変数名が具体的でない むやみに再代入しない 変数名と関係のない値を代入してしまう 再代入によって後から値が使えなくなってしまう 本当に変数にする必要ある? 変数を再代入することに疑問を持つ 変数にするべきケース スキルアップするための変数の考え方 まとめそれではさっそく、私がプログラミング初心者の頃に知りたかったスキルアップできるJavascript変数の知識を見ていきましょう!変数名はしっかり考えて決める変数は値を格納しておける箱のようなもので、定義しておけば後から値をとりだして使うことができます。let price = 1000;console.log(price); // 1000と出力できるこのとき、変数名は自分で考えて決めるのですが、適当に決めていませんか?やってはいけない例 1、変数名を無意味な名前にしてしまう悪い例let a = 100;let b = "トマト";let c = 5;この例のダメなポイントは、変数名から何の値が中に入っているか想像できないところです。変数名は中身が容易に想像できる名前を付けてあげましょう。修正後let price = 100;let name = "トマト";let count = 5;こうすることで、変数の中に何が入っているのか簡単に想像できるようになりましたね!やってはいけない例 2、変数名が具体的でない悪い例let price_1 = 150;let price_2 = 100;let price_3 = 120;この例では、価格が入っていることがわかる変数名ですが、何の価格なのかがわかりません。具体的な変数名を付けて、なるべくナンバリングすることは避けましょう。修正後let tomatoPrice = 150;let bananaPrice = 100;let applePrice = 120;また、そもそもこのような定義のやり方でいいのか、この変数は何に使うためなのかを考えて、配列やオブジェクトを適切に使うのも大切です。むやみに再代入しない変数は値を書き換えることができますが、むやみに再代入を行うと読みづらいコードを書いてしまう原因になります。変数名と関係のない値を代入してしまう悪い例let price = 100;price = "トマト";この例では、せっかくわかりやすくpriceという名前で価格を入れておく変数を作ったのに、後から価格でない値を入れてしまっています。修正後let price = 100;let name = "トマト";このようにむやみに再代入せずに、値の役割ごとに変数を定義していきましょう。再代入によって後から値が使えなくなってしまう悪い例let price = 100;price = 100 * 1.1;この例では消費税の計算をしてpriceに再代入しています。一見やってもよさそうですが、後から税抜き価格を使いたいタイミングがでてくるかもしれません。priceの値は既に上書きされてしまっているので、税抜き価格を取得するには消費税率を使って計算をしなければいけません。let price = 100;price = 100 * 1.1; // 税込み価格price = price / 1.1; // 税抜き価格このようなコードの書き方は、ミスを引き起こしやすく、するべきではありません。修正後let price = 100;let priceIncludeTax = price * 1.1;このように書くことで、後から税抜き価格を使いたくなったタイミングでも、priceIncludeTaxを呼び出せば税抜き価格を使うことができます。本当に変数にする必要ある?Javascriptには変数と定数という概念があり、変数は上書き可能、定数は上書きができないという性質があります。let price = 100; // 変数、上書き可能const tax = 1.1; // 定数、上書きできない変数を再代入することに疑問をもつ実は現場では変数を使うことはまれで、ほとんど定数でプログラムを書きます。書いているプログラムに変数が出てきたら、処理のやり方が不適切なケースの方が多いです。変数にするべきケース例えば、数値の配列をループして、中身の値からインデックスを引いた値の合計が欲しい場合には変数を使うことができます。例がめちゃくちゃですみません...それくらいに変数を使う機会は少ないんです...const numbers = [10, 15, 20]; // 定数を使うlet sum = 0; // 変数を使うnumbers.map((num, index) = { sum += num - index;});console.log(sum);仮に単純に合計を求めたいだけであれば、Javascriptにはreduceというメゾッドがあり、それを使えばいいようになっています。const numbers = [10, 15, 20];const total = numbers.reduce(function(sum, num){ return sum + num;}, 0);console.log(total);スキルアップするための変数の考え方変数を使う際の注意するポイントを書いていきましたが、共通して大切な考え方は 誰が見てもわかるように 何年後の自分が見てもわかるように上記のポイントを意識することです!現場では複数人で一つのプログラムを書いたり、何年も後にプログラムを修正したりする機会があります。その為、 この書き方だとこんなミスが起こりそうだな... 他の人が見たときにわかりやすいかな...といったことを考えながら書いていくことが大切です。まとめ 変数名は中身が何か誰でもわかるようにしっかり考える むやみに再代入せず、その値の意味をもつ変数をそのつど作ることをまず考える そもそも定数を使ったほうがいいケースがほとんどということで、プログラミング初心者の方向けにスキルアップできるJavascript変数の知識について書いてみました。質問や、こんなことを記事にしてほしい!というのがありましたらTwitterのコメント等で受け付けていますので、お気軽にどうぞ!ますみ - 愛知県在住の20代プログラマー - | @mashmy_98それでは次の投稿もお楽しみに!

2023年04月19日

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

#3ChatGPTだけで素人が本当にプログラムを書けるのか検証してみた

こんにちは!プログラマーのますみです!今回はChatGPTだけで素人が本当にプログラムを書けるのか検証してみたの三回目の記事です!一回目の記事はこちら二回目の記事はこちらこの検証の条件は 私はプログラムの知識が皆無なものとする 私はChatGPTに説明してもらったプログラミング用語はその都度覚えて使うことができる 私が覚える用語はChatGPTの回答からのみで、Google等の検索エンジンは一切使わない作るものは下記の機能をもったブログとしました ブログ記事投稿 ブログ記事の一覧を表示 ブログ記事を表示前回はデータを保存していくところ、データベースのセットアップをする工程で終わりましたので、その続きからやっていきます!さて、前回はデータベースについての質問をして、このような回答が返ってきましたMySQLサーバーを起動する方法は、オペレーティングシステムによって異なりますが、一般的には以下の手順になります。 MySQLサーバーをインストールするまず、MySQLサーバーをインストールする必要があります。MySQLはオープンソースのため、公式サイトから無料でダウンロードできます。インストール手順はOSによって異なるため、MySQLの公式ドキュメントを参照してください。 MySQLサーバーを起動するMySQLサーバーを起動するには、OSによって異なる方法がありますが、一般的には以下のようになります。 LinuxやmacOSの場合:ターミナルを開いて、以下のコマンドを入力します。sudo systemctl start mysql Windowsの場合:コマンドプロンプトやPowerShellを開いて、以下のコマンドを入力します。net start mysql MySQLサーバーに接続するMySQLサーバーが起動したら、MySQLクライアントを使用してMySQLサーバーに接続することができます。一般的には、以下のコマンドを使用して接続します。mysql -u ユーザー名 -p ユーザー名には、MySQLに接続するためのユーザー名を指定します。このコマンドを実行すると、パスワードを要求されます。以上の手順でMySQLサーバーを起動し、接続することができます。まずは一番のMySQLサーバーをインストールする からやってみましょう!公式サイトからダウンロードしてねと書いてありますが、検索エンジンは使わない縛りなのでChatGPTに公式サイトを聞いていきます!MySQLの公式サイトを教えてChatGPTの回答MySQLの公式サイトは以下のURLからアクセスできます。https://www.mysql.com/ありがとね、自分で調べろよって思うよね...それではダウンロードしていきたいのですが、MySQLの公式サイトのどこからダウンロードできるのかも聞いちゃいましょうMySQLの公式サイトからどうやってMySQLをダウンロードできますかChatGPTの回答はこちらMySQLをダウンロードする手順は以下の通りです。 MySQLの公式サイト(https://www.mysql.com/)にアクセスします。 ナビゲーションバーの「Downloads」をクリックします。 ダウンロードページが表示されます。ここで、利用したいMySQL製品を選択します。 製品を選択すると、OSやバージョン、エディションなどの情報を選択できます。必要な情報を選択し、「Download」をクリックします。 ダウンロードページに移動し、MySQLのライセンス契約に同意したことを確認します。同意する場合は「Accept License Agreement」にチェックを入れます。 OSに応じたインストーラーをダウンロードします。 ダウンロードが完了したら、インストーラーを実行します。インストーラーに従って、MySQLをインストールします。 以上の手順でMySQLをダウンロードしてインストールすることができます。といった感じで、公式サイトのどこをクリックしてダウンロードすればよいか教えてくれました。ですが、私は今3の利用したいMySQL製品を選ぶ知識が無いので、公式サイトの文字をそのままコピーしてChatGPTに質問を投げてみましょう利用したいMySQLの選び方がわかりません どこをクリックすればいいですか MySQL Enterprise Edition MySQL Enterprise Edition includes the most comprehensive set of advanced features, management tools and technical support for MySQL. Learn More Customer Download Trial Download MySQL Cluster CGE MySQL Cluster is a real-time open source transactional database designed for fast, always-on access to data under high throughput conditions. MySQL Cluster MySQL Cluster Manager Plus, everything in MySQL Enterprise Edition Learn More Customer Download (Select Patches Updates Tab, Product Search) Trial Download MySQL Community (GPL) Downloads ChatGPTの回答はこちらMySQLを選ぶ際のポイントは、利用目的や利用方法、規模、予算などによって異なります。以下のリストから自分の目的に合ったMySQL製品を選んでください。 MySQL Enterprise Edition: 高度な機能とツール、技術サポートを提供する商用製品です。大規模な企業向けの利用に向いています。 MySQL Cluster CGE: リアルタイムなトランザクション処理を高速に行うことができるオープンソースのデータベースです。高い信頼性を求める企業向けに利用されます。 MySQL Community Edition: オープンソースで、無償で利用できるMySQL製品です。小規模のWebアプリケーションや個人的なプロジェクトなどに向いています。 利用目的や規模によって異なるため、ご自身の用途に合った製品を選択してください。詳しくは、MySQLの公式サイトの製品紹介ページ(https://www.mysql.com/products/)を参照してください。なるほどまあ無料のやつにするよねなんせ私はいまプログラミングの知識が皆無なので、価格ですべて決めます。実際今回作りたいものは無料版で充分ですしというわけでMySQL Community (GPL) Downloads をクリックしてみますするとこんなページに飛びました。訳がわからないのでChatGPTに聞いてみますMySQL Community Editionを選びました MySQL Yum Repository MySQL APT Repository MySQL SUSE Repository MySQL Community Server MySQL Cluster MySQL Router MySQL Shell MySQL Operator MySQL NDB Operator MySQL Workbench MySQL Installer for Windows C API (libmysqlclient) Connector/C++ Connector/J Connector/NET Connector/Node.js Connector/ODBC Connector/Python MySQL Native Driver for PHP MySQL Benchmark Tool Time zone description tables Download Archives この画面ではどうすればいいですかこの質問では無料版を選んだことを伝え、あとは先ほどの画像の文字をそのまま書き込んでいますChatGPTの回答はこちらMySQL Community Editionをダウンロードする場合、以下の手順を実行してください。 MySQL Community Serverをクリックします。 ページの一番下にある「Looking for previous GA versions?」というリンクをクリックして、利用したいバージョンを選択します。 ダウンロードしたいパッケージの形式(zip、tar.gz、rpm、deb)を選択します。 OSの種類に応じて、適切なパッケージをダウンロードします。MySQL Community Serverのダウンロードが完了したら、インストール手順に従ってMySQLをインストールしてください。現在Looking for previous GA versions?というボタンはありませんでしたので、その旨を伝えました。申し訳ありません、MySQL Community Editionのダウンロードページが更新されたため、以前の手順が変更されている可能性があります。最新版のMySQL Community Editionをダウンロードする方法は、以下の通りです。 MySQL Community Serverをクリックします。 ページの下部にスクロールして、Generally Available (GA) Releasesという項目を見つけます。 GAリリースの下にある「Select Version」をクリックして、利用したいバージョンを選択します。 Select Operating Systemで自分のOSを選択します。 Downloadボタンをクリックして、MySQL Community Serverをダウンロードします。以上の手順でMySQL Community Serverをダウンロードできます。こんなに他力本願な質問攻めをしておきながら 謝らせてしまった...良心が痛んできます...ChatGPTの回答ではGenerally Available (GA) Releasesという項目を見つけてくださいと書いてありますが、この項目もありませんでした。ChatGPTの知識は少し古いらしいので、現在のMySQLの公式サイトの状態は知らないわけですね...ということで、検証の条件は 私はプログラムの知識が皆無なものとする 私はChatGPTに説明してもらったプログラミング用語はその都度覚えて使うことができる 私が覚える用語はChatGPTの回答からのみで、Google等の検索エンジンは一切使わないとしたのでこの条件ではChatGPTの回答のみでブログを作ることはできないという結果でした。最終的にはMySQLのセットアップの段階でストップしてしまいましたね。ただこれだけでは味気ないので、MySQLのセットアップは済んでいるものとして、続きをChatGPTの回答のみで書いてみようと思います!それでは続きは次回の記事で!お楽しみに~

2023年04月16日

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】

こんにちは!エンジニアのますみです!本日はCSSで丸を作る方法を解説します!メリハリのあるレイアウトを作るために必須のテクニックです!この記事では実際にCSSをこのページ上で書くことができるので、プレビューを見ながら使い方を覚えることができます!是非、ブックマークして学習などに役立てていただけたら幸いです!テーマ CSSで丸を作る方法をマスターできる この記事上でプレビューを見ながらCSSを書くことで、CSSの仕組みを深く理解できる目次 丸を作る手順 正方形を作る 角を丸くするborder-radius属性を追加する border-radiusを調整して丸を作る 枠線だけ表示するそれではさっそく見ていきましょう丸を作る手順HTMLはこのようにしてください。div class="circle"/divクラスにcircleを設定した要素を丸くしていきます。1. 正方形を作る.circle { width : height : background-color : } widthとheightに同じ値を設定しておけば大丈夫です。背景色(background-color)はお好みで設定してください。2. 角を丸くするborder-radius属性を追加する.circle { width : height : background-color : border-radius : } CSSにborder-radiusを追加します。border-radiusにはpxなどのサイズを指定することができます。これを大きくすると青いボックスの角が丸くなっていきます。試しにborder-radius : 10pxと設定してみてください。青いボックスの角が丸くなったのがわかると思います。3. border-radiusを調整して丸を作る.circle { width : height : background-color : border-radius : } border-radiusを50%に設定してみてください。綺麗な丸が作れたと思います。border-radiusは、要素の半分の大きさを指定すると綺麗な丸を作ることができます。ということは50pxと指定しても丸が作れるはずです。上のエディターでborder-radius : 50pxと設定してみてください。これでもきれいな丸になることがわかると思います。基本的にはborder-radius : 50%でOK50%で指定しておけば、丸の大きさを後から変更した時にborder-radiusを再調整しなくても綺麗な丸が表示されるため、らくちんです!border-radiusについてはこちらの記事で詳しく解説しています!楕円やぐにゃっとした丸を作れるようになりたい方は読んでみてください。枠線だけ表示する.circle { width : height : border : border-radius : } background-colorを削除して、border: 2px solid #0072c6を追加すると、青い枠線の綺麗な丸を作れます。線の色を変更したいときはborder: 2px solid #0072c6;この部分を好きなカラーコードに変更してください。線の太さを変更したいときはborder: 2px solid #0072c6;この部分を好きな太さに変更してください。borderについてはこちらの記事で詳しく解説しています!いろんなデザインの線を作りたい方は是非読んでみてください。最後まで読んでいただきありがとうございます!プログラミング学習は何度も繰り返して覚えていくことが大切です!是非ブックマークして学習に役立ててみてください!質問や、こんなことを記事にしてほしい!というのがありましたらTwitterのコメント等で受け付けていますので、お気軽にどうぞ!ますみ - 愛知県在住の20代プログラマー - | @mashmy_98それでは次の投稿もお楽しみに!

2023年04月25日

Read More

【書けるからわかるCSS】text-decorationで文字を装飾する方法

こんにちは!エンジニアのますみです!本日はtext-decorationの使い方を解説します。意外と自由なデザインが可能なCSSです。是非覚えておきましょう!この記事ではtext-decorationの使い方をサンプル付で解説します。さらに実際にCSSをこのページ上で書くことができるので、プレビューを見ながら使い方を覚えることができます!是非、ブックマークして学習などに役立てていただけたら幸いです!テーマ text-decorationの使い方を覚えて自由なデザインを作れるようになる この記事上でプレビューを見ながらCSSを書くことで、CSSの仕組みを深く理解できる目次 サンプル 基本的な使い方 text-decorationを使用するための最小限のCSS 装飾線の太さを指定する 装飾線のデザインを指定する 装飾線の色を指定する もっと自由にデザインする underlineの位置を指定するそれではさっそく見ていきましょうサンプルHTMLはこのようにしています!HTMLCSS は、HTMLで記述されたウェブページのspan class=decorationスタイルやレイアウト/spanを指定するための言語です。HTMLがウェブページの構造を表現するのに対し、CSSはspan class=decoration見た目や装飾/spanを指定することができます。CSS は、HTMLで記述されたウェブページのスタイルやレイアウトを指定するための言語です。HTMLがウェブページの構造を表現するのに対し、CSSは見た目や装飾を指定することができます。.decoration { text-decoration : text-underline-offset : } text-decorationは文字に装飾をつけることができるCSSです。border等と違い、文章の途中で改行してもレイアウトが崩れにくいため、上の例のような要点だけ目立たせたいときに便利です。基本的な使い方text-decorationを使用するための最小限のCSSCSS は、HTMLで記述されたウェブページのスタイルやレイアウトを指定するための言語です。HTMLがウェブページの構造を表現するのに対し、CSSは見た目や装飾を指定することができます。.decoration { text-decoration : } このようにtext-decoration : 装飾線の種類とすることで、文字の装飾を表示することができます。装飾線の種類は下記になります。上のエディターを編集してみると装飾線の種類が変わることがわかります。 none :装飾無し (サンプル) underline:下線 (サンプル) overline:上線 (サンプル) line-through:打ち消し線 (サンプル)装飾線の太さを指定するCSS は、HTMLで記述されたウェブページのスタイルやレイアウトを指定するための言語です。HTMLがウェブページの構造を表現するのに対し、CSSは見た目や装飾を指定することができます。.decoration { text-decoration : } text-decorationにサイズを追加すると装飾線の太さを変えることができます。デフォルトでは非常に細い線が表示されるため、サイズを指定する機会は多いです。是非太さを変える方法を覚えておきましょう。装飾線のデザインを指定するCSS は、HTMLで記述されたウェブページのスタイルやレイアウトを指定するための言語です。HTMLがウェブページの構造を表現するのに対し、CSSは見た目や装飾を指定することができます。.decoration { text-decoration : } 下記の値をtext-decorationに追加すると、装飾線のデザインを変更できます。 solid :1本線 (サンプル) double :2本線 (サンプル) dotted :点線 (サンプル) dashed :破線 (サンプル) wavy : 波線 (サンプル)装飾線の色を指定するCSS は、HTMLで記述されたウェブページのスタイルやレイアウトを指定するための言語です。HTMLがウェブページの構造を表現するのに対し、CSSは見た目や装飾を指定することができます。.decoration { text-decoration : } text-decorationにカラーコードサイズを追加すると装飾線の色を変えることができます。上のエディターの#ffa500の部分を好きなカラーコードに変更してみると装飾線の色が変わることがわかります。もっと自由にデザインするunderlineの位置を指定するCSS は、HTMLで記述されたウェブページのスタイルやレイアウトを指定するための言語です。HTMLがウェブページの構造を表現するのに対し、CSSは見た目や装飾を指定することができます。.decoration { text-decoration : text-underline-offset : } text-underline-offsetを追加すると、underlineの上下の位置を指定することができます。太めのunderlineを使用する時はほんの少し文字とかぶるように位置を調整してバランスをとることが多いです。最後まで読んでいただきありがとうございます!プログラミング学習は何度も繰り返して覚えていくことが大切です!是非ブックマークして学習に役立ててみてください!質問や、こんなことを記事にしてほしい!というのがありましたらTwitterのコメント等で受け付けていますので、お気軽にどうぞ!ますみ - 愛知県在住の20代プログラマー - | @mashmy_98それでは次の投稿もお楽しみに!

2023年04月29日

Read More

【CSS入門】書いて覚えるbox-shadowの使い方

こんにちは!エンジニアのますみです!本日は要素に影をつけるbox-shadowの使い方を解説します。立体感のあるデザインや、ボタンのホバー時にもよく使われるテクニックですこの記事はbox-shadow属性でできることを一通りまとめました。さらに実際にCSSをこのページ上で書くことができるので、プレビューを見ながら使い方を覚えることができます!是非、ブックマークして学習などに役立てていただけたら幸いです!テーマ box-shadow属性でできることを一通り覚えることができる内容 実際にスタイル属性を書くことが可能な記事なので、深く理解して使いこなすことができる内容目次 box-shadowとは 基本的な使い方 影をつける最低限の設定 影をぼかす 影の大きさを指定する 影を要素の内側にするそれではさっそく見ていきましょうbox-shadowとはBOX.box { box-shadow : } box-shadowは要素に影をつけることができるCSSのプロパティです。基本的にはbox-shadowを適用した要素と同じ大きさの影が表示されます。デフォルトでは元の要素と全く同じ位置に配置されるため、影は見えません。元の要素から影の位置をどれだけずらすかを指定し、理想のレイアウトを作っていきます。基本的な使い方box-shadowは複数の数値と色を指定することができます。数値の数は最小2つから最大4つ指定でき、1つ目の数値は影の縦方向の位置2つ目の数値は影の横方向の位置3つ目の数値は影のぼかし具合4つ目の数値は影の大きさというように、順番に役割が割り振られていきます。まずは数値が2つの、最小限の設定から解説します。影をつける最小限の設定BOX.box { box-shadow : } 数値を2つ指定した場合、それぞれの働きはbox-shadow: 影の縦方向の位置 影の横方向の位置 影の色となります。位置を指定する値を0pxとすると、元の要素と同じ位置になります。縦方向の位置は数値を増やすと影の位置は下へ、数値をマイナスの値にすると影の位置は上に移動していきます。横方向の位置は数値を増やすと影の位置は右へ、数値をマイナスの値にすると影の位置は左に移動していきます。影をぼかすBOX.box { box-shadow : } 3つ目の数値を指定して、影のぼかし度合を指定することができます。数値を大きくすると影のぼかしが強くなります。それぞれの値の役割はbox-shadow: 影の縦方向の位置 影の横方向の位置影のぼかし度合影の色となります。影の大きさを指定するBOX.box { box-shadow : } 4つ目の数値は影の大きさを指定することができます。0pxで元の要素と同じ大きさです。数値を増やすと影は大きくなり、マイナスの値では影は小さくなっていきます。それぞれの値の役割はbox-shadow: 影の縦方向の位置 影の横方向の位置影のぼかし度合 影の大きさ影の色となります。影を要素の内側にするBOX.box { box-shadow : } insetを指定すると要素の内側に影をつけることができます。高度なbox-shadowの使い方BOX.box { box-shadow : } ,カンマで区切り、複数の影を作ることができます。上の例では青系の影をボックスから少しずらしたところに、グレーの影をさらにずらした部分に配置しています。指定する値は、,カンマを境に同じ役割になります。box-shadow: 影①の縦方向の位置 影①の横方向の位置影①のぼかし度合 影①の大きさ影①の色,影②の縦方向の位置 影②の横方向の位置影②のぼかし度合 影②の大きさ影②の色影を複数使ったデザインサンプル画面が突起して見えるBOX.box { box-shadow : } 背景色とボックスを同じ色にし、ボックスよりも薄い色の影を左上、ボックスよりも濃い色の影を右下に表示します。画面がくぼんで見えるBOX.box { box-shadow : } 先ほどの書き方にinsetを追加することで、ボックスがくぼんで見えます。3つ以上も影をつけられるBOX.box { box-shadow : } 影の位置をずらしながら色をだんだん薄くしていき、ボックスに残像がついているようなデザインになりました。本日はbox-shadow属性の書き方について解説しました!プログラミング学習は何度も繰り返して覚えていくことが大切です!是非ブックマークして学習に役立ててみてください!質問や、こんなことを記事にしてほしい!というのがありましたらTwitterのコメント等で受け付けていますので、お気軽にどうぞ!ますみ - 愛知県在住の20代プログラマー - | @mashmy_98それでは次の投稿もお楽しみに!

2023年04月23日

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

【CSS入門】書いて覚える::before、::afterの使い方

こんにちは!エンジニアのますみです!本日は疑似要素::before、::afterについて解説していきます。少し難しいですが、使いこなせたらCSSレベルアップです!この記事では実際にCSSをこのページ上で書くことができるので、プレビューを見ながら使い方を覚えることができます!是非、ブックマークして学習などに役立てていただけたら幸いです!テーマ ::before、::afterの使い方をマスターできる 覚えるとどんなメリットがあるかがわかる この記事上でプレビューを見ながらCSSを書くことで、CSSの仕組みを深く理解できる目次 ::before、::afterの基礎 ::before ::after ::before、::afterは両方指定できる スタイルを指定する より自由なデザインを作る どんな時に便利か HTMLが見やすくなる 使いまわしやすいそれではさっそく見ていきましょう::before、::afterの基礎::before最小限の設定ポイント.point::before { content: } ::before要素を表示するにはcontentを指定する必要があります。::beforeはセレクタで指定した要素の中の最初にcontentで指定した内容が追加されます。div class="point" !--ここに::beforeが表示される-- ポイント/divそのため、上の例では表示される要素はこのようになりますdiv class="point" "●" ポイント/div::after最小限の設定ポイント.point::after { content: } ::after要素を表示するにはcontentを指定する必要があります。::afterはセレクタで指定した要素の中の最後にcontentで指定した内容が追加されます。div class="point" ポイント !--ここに::afterが表示される--/divそのため、上の例では表示される要素はこのようになりますdiv class="point" ポイント "●"/div::before、::afterは両方指定できるポイント.point::before { content: } .point::after { content: } 上のように、一つの要素に::before、::afterどちらも指定することが可能です。この場合表示される要素はこのようになります。div class="point"  !--ここに::beforeが表示される-- ポイント !--ここに::afterが表示される--/divdiv class="point"  "●" ポイント  "●"/divスタイルを指定するポイント.point::before { content: color: } .point::after { content: color: } 通常のHTML要素同様にスタイルを適用することが可能です。より自由なデザインをつくるポイント.point::before { content: display: width: height: background-color: vertical-align: } .point::after { content: display: width: height: background-color: vertical-align: } 上のようにcontent: として空の要素を作りwidth、heightなどを使って自由なデザインを作ることができます。注意するポイントは、疑似要素はデフォルトではdisplay: inlineとなっているためwidth、heightが無効化されてしまいます。display属性をblock、inline-block、flexなどのサイズが指定できるプロパティに変更することを忘れないでください。どんなときに便利か::before、::afterを使わなくても、HTML上に要素を書いてしまえば同じことができます。::before、::afterを使った場合ポイントHTMLdiv class="point"ポイント/divCSS.point::before { content: ""; display: inline-block; width: 1rem; height: 2px; background-color: #ffa500; vertical-align: middle;}.point::after { content: ""; display: inline-block; width: 1rem; height: 2px; background-color: #ffa500; vertical-align: middle;}::before、::afterを使わない場合ポイントHTMLdiv class="point" span/span ポイント span/span/divCSS.point span { display: inline-block; width: 1rem; height: 2px; background-color: #ffa500; vertical-align: middle;}それなのにあえて::before、::afterを使うメリットを解説します。HTMLが見やすくなるdiv class="point" span/span ポイント span/span/div例えばこのHTMLは::before、::afterを使わない場合のコードになります。HTMLだけを見ると、spanが何のためにあるのかわかりませんし、コードが読みづらくなってしまいます。::before、::afterを使うことで、HTMLの見通しがよくなり、管理、修正がやりやすくなります。使いまわしやすい::before、::afterを使わない場合は、その都度span文字spanというHTMLを書く必要があります。頻繁に使いたいスタイルだった場合、HTMLは複雑になり、書き間違いによるミスも引き起こしやすくなります。​div class="point" span/span ポイント1 span/span/divdiv class="point" span/span ポイント2 span/span/divh2見出し/h2div class="point" span/span ポイント3/div​div h3見出し/h3 div class="point" span/span ポイント4 span/span /div div class="point" span/span ポイント5 /div/divdiv class="point" span/span ポイント6 span/span/div上のHTMLには書き間違えている箇所がありますが、非常にわかりづらいです。​div class="point" span/span ポイント1 span/span/divdiv class="point" span/span ポイント2 span/span/divh2見出し/h2div class="point" span/span ポイント3 !--ミス1--/div​div h3見出し/h3 div class="point" span/span ポイント4 span/span /div div class="point" span/span ポイント5 !--ミス2-- /div/divdiv class="point" span/span ポイント6 span/span/div上の2か所が書き間違えている箇所です。::before、::afterを使うことで、pointというクラスさえ書けばスタイルが適用されるため、ミスを防ぎつつ使いまわしやすいコードを書くことができます。​div class="point" ポイント1/divdiv class="point" ポイント2/divh2見出し/h2div class="point" ポイント3/div​div h3見出し/h3 div class="point" ポイント4 /div div class="point" ポイント5 /div/divdiv class="point" ポイント6/div最後まで読んでいただきありがとうございます!プログラミング学習は何度も繰り返して覚えていくことが大切です!是非ブックマークして学習に役立ててみてください!質問や、こんなことを記事にしてほしい!というのがありましたらTwitterのコメント等で受け付けていますので、お気軽にどうぞ!ますみ - 愛知県在住の20代プログラマー - | @mashmy_98それでは次の投稿もお楽しみに!

2023年04月24日

Read More

laravel-adminで編集したデータを前処理してからデータベースに保存する

こんにちは!エンジニアのますみです!本日はlaravel-adminのフォームで、入力値を保存する前に処理をする。入力値を別のカラムにも保存する方法を解説します!目次 入力値の前処理、保存時の処理をするには$form-savingを使う フォームの入力値を取得する フォームの値を更新する モデルを取得 $form-savingの使用例、サンプルコード 前処理をしてからデータベースに保存する フォームの値を別のカラムにも保存するそれではさっそく見ていきましょう入力値の前処理、保存時の処理をするには$form-savingを使う/** * Make a form builder. * * @return Form */protected function form(){ $form = new Form(new Blog()); $form-text('title', __('Title')); $form-saving(function (Form $form) { // フォームの入力値の取得、上書き、値のセットができる }); return $form;}このようにform()メゾッド内で$form-savingを追加し、入力値の処理、値のセットができます。フォームの入力値を取得する/** * Make a form builder. * * @return Form */protected function form(){ $form = new Form(new Blog()); $form-text('title', __('Title')); $form-saving(function (Form $form) { $form-title; // 'title'フォームの値を呼び出せる }); return $form;}$form-カラム名とすることで、フォームに入力した値を呼び出し前処理などを行うことができます。フォームの値を更新する/** * Make a form builder. * * @return Form */protected function form(){ $form = new Form(new Blog()); $form-text('title', __('Title')); $form-saving(function (Form $form) { $form-title = 'これはタイトルです'; }); return $form;}$form-カラム名に値を代入すると、データベースには代入した値が保存されます。上の例では$form-text(title, __(Title));のフォームに何を入力していても$form-saving内でこれはタイトルですという文字を代入しているため、データベースにはこれはタイトルですが保存されます。モデルを取得/** * Make a form builder. * * @return Form */protected function form(){ $form = new Form(new Blog()); $form-text('title', __('Title')); $form-saving(function (Form $form) { $model = $form-model(); // モデルを取得 }); return $form;}$form-model()とするとモデルを取得することができます。ここで取得したモデルに対し、値のセットなども行うことができます。$form-savingの使用例、サンプルコード前処理をしてからデータベースに保存する/** * Make a form builder. * * @return Form */protected function form(){ $form = new Form(new Blog()); $form-text('title', __('Title')); $form-saving(function (Form $form) { // 前処理をしてからデータベースに保存する $form-title = trim($form-title); }); return $form;}何らかの理由でミューテタが使えないケースでは$form-savingを使いデータの前処理をすることができます。フォーム$form-text(title, __(Title))の値を前処理するのであれば$form-text(title, __(Title));$form-saving(function (Form $form) { $form-title = trim($form-title);});このようにフォームで指定したカラム名を呼び出して値を取得、上書きすることができます。前処理をしてからデータベースに保存する例 余計な空白を削除 パスワードをハッシュ化する プレフィックス、サフィックスを自動で追加フォームの値を別のカラムにも保存する/** * Make a form builder. * * @return Form */protected function form(){ $form = new Form(new Blog()); $form-text('title', __('Title')); $form-textarea('text', __('Text')); $form-saving(function (Form $form) { $blog = $form-model(); // textフォームの値をplane_textカラムにも保存する $blog-plane_text = strip_tags($form-text); }); return $form;}$form-model()でモデルを取得し、取得したモデルに値をセットすることで別のカラムにデータを保存することができます。フォームの値を別のカラムにも保存する例 ckeditor等で作成したテキストからHTMLタグを削除した値を保存する URLパラメータに使用するための値をエスケープして保存する最後まで読んでいただきありがとうございます!質問や、こんなことを記事にしてほしい!というのがありましたらTwitterのコメント等で受け付けていますので、お気軽にどうぞ!ますみ - 愛知県在住の20代プログラマー - | @mashmy_98それでは次の投稿もお楽しみに!

2023年04月25日

Read More

【python入門】配列を使ってみよう!

こんにちは!プログラマーのますみです!今回はpythonで配列を使う方法をご紹介します!Pythonはこちらのサイトで簡単に動かしてみることができます!paiza.io是非実際にプログラムを書いてみながら変数の使い方を覚えてみてくださいね!配列ってなに?変数とはデータを格納するための箱のようなものです!プログラムの中で変数に値を格納しておくと、変数を書くだけで値を呼び出して、計算したり表示したりすることができます!pythonで配列を使う方法配列とは、複数のデータを一つの変数で扱うことができる仕組みのことです!例えば、pythonの場合は、以下のように配列を定義することができます!prices = [1000, 1200, 2000, 500]これは4種類の商品の価格を一つの配列に定義した例ですね、この配列を使ってどんな処理ができるのかを紹介していきます!配列を使うメリット配列をうまく使うことで、複数のデータに一括で処理を行うことに強いプログラムを書くことができます!例えば、上記のpricesという配列に定義した価格をすべて表示してみましょう!配列内の値すべてに処理を実行するには、pythonのmapという機能を使っていきます。prices = [1000, 1200, 2000, 500]for price in prices:    # ここに処理を書く!ではすべての価格を表示してみましょう!prices = [1000, 1200, 2000, 500]for price in prices:    print(price)こうすると、配列に格納されている価格を順番に表示することができます!※paiza.ioでコピペで動かしてみる場合、黄色い部分を一度消してTabキーを押してから実行してみてください!prices = [1000, 1200, 2000, 500]for price in prices: print(price)これだけでは味気ないので、価格の後に円と表示してみましょう!prices = [1000, 1200, 2000, 500]for price in prices:    print(str(price) + "円")これで1000円という形式で価格を表示することができました!さらに消費税を含めた価格を表示するようにしてみましょう!prices = [1000, 1200, 2000, 500]for price in prices:    print(str(price * 1.1) + "円")こんな感じで、配列を使うことでプログラミング言語に備わっている便利な機能を使える上、変更に強い良いソースコードが書けるようになります!今回はpythonでの配列の使い方を解説しました!このブログは、わたしがプログラミングを学習し始めたころに悩んでいたポイントをわかりやすく記事にして、わたしと同じ悩みを持つ方が少しでも減るように!と思って運用しています!共有やお気に入り登録していただけたら励みになりますので是非よろしくお願いします!それでは次の記事もお楽しみに!

2023年04月14日

Read More

立体的に見える不思議なボタン【書いてわかるCSS】

こんにちは!エンジニアのますみです!本日はこんな感じの画面が出っ張って見えたりくぼんで見えたりする不思議なボタンの作り方を解説します。BUTTONBUTTONBUTTONBUTTON難しそうに見えますが意外と簡単ですよ!テーマ 不思議なボタンの作り方をマスターできる box-shadowを使って立体感を出す方法をマスターできる この記事上でプレビューを見ながらCSSを書くことで、CSSの仕組みを深く理解できる目次 とりあえずCSSをコピペしたい方はこちら 不思議なボタンを作る手順 背景色を指定 ボタンを作成 余白を指定 角を丸める 影を追加① 影を追加② くぼんで見えるボタンの作り方 丸いボタンの作り方 くぼんで見える丸いボタンもinset指定、影の色反転でOKそれではさっそく見ていきましょうとりあえずCSSをコピペしたい人はこちらBUTTONHTMLdiv class="container" div class="button"BUTTON/div/divCSS.container { display: flex; justify-content: center; padding: 3rem 0; background-color: #0072c6;}.button { color: white; padding: 0.4rem 0.8rem; border-radius: 5px; box-shadow: 4px 4px 8px #3996d9, -4px -4px 8px #004c83;}意外とシンプルなCSSですね。.containerのスタイルはこの記事上で綺麗に表示できるように左右中央寄せ、余白を指定していますので、使用したいWebサイトに合わせて調整してください。不思議なボタンを作る手順box-shadowで2種類の影を作ることでボタンの立体感を表現します。より不思議な見た目にするには余白や角丸もいい感じに調整すると良いでしょう。立体感を出すために、背景色は白以外が望ましいです。背景色を指定div class="container"/div.container { display : justify-content : padding : background-color : } 今回紹介するボタンは薄い色の影を使うため、背景色は白以外が望ましいです。.containerのスタイルはこの記事上で綺麗に表示できるように左右中央寄せ、余白を指定していますので、使用する場面によってレイアウトは変更して使ってください。ボタンを作成BUTTONdiv class="container" div class="button"BUTTON/div/div.container { display : justify-content : padding : background-color : } .button { color : background-color : } ボタンの背景色(background-color)は最終的には無しになりますが、作業しやすいので一旦仮の色を指定しておくのが良いでしょう。HTMLはここから変更がないため、次の手順から省略しますね!余白を指定BUTTON.container { display : justify-content : padding : background-color : } .button { color : padding : background-color : } ちょうどいい具合の余白をpaddingで指定しておきます。私は縦よりも横の余白が少し長いほうが好みです。角を丸めるBUTTON.container { display : justify-content : padding : background-color : } .button { color : padding : border-radius : background-color : } border-radiusを使い、ボタンの角を丸めます。影が丸くつくため、角を丸めておくとバランスがよく見えます。影を追加①BUTTON.container { display : justify-content : padding : background-color : } .button { color : padding : border-radius : box-shadow : } このあたりからボタンの背景色は削除しても良いでしょう。box-shadowを使い、背景色よりも少し薄い色をボタンの右下に表示します。box-shadowの値はbox-shadow:影の縦方向の位置影の横方向の位置影のぼかし度合影の色このように役割が割り振られます。上の例では影の縦方向の位置と影の横方向の位置に4pxを指定しているので、影は下に4px、右に4pxずれて表示されます。box-shadowの使い方はこの記事で解説しています。詳しく知りたい方は是非読んでみてください。影を追加②BUTTON.container { display : justify-content : padding : background-color : } .button { color : padding : border-radius : box-shadow : } box-shadowに2つ目の影を設定します。,(カンマ)で区切ることで複数の影を作ることができます。2つ目の影は背景色よりも少し濃い色をボタンの左上に配置します。くぼんで見えるボタンの作り方BUTTON.container { display : justify-content : padding : background-color : } .button { color : padding : border-radius : box-shadow : } くぼんで見えるボタンは、まず先ほどのCSSのbox-shadowにinsetを追加します。そして2つの色を入れ替え、一つ目の影(右下)は薄く、2つ目の影(左上)が濃くなるようにします。box-shadow:inset 4px 4px 8px #004c83, inset4px -4px 8px #3996d9;丸いボタンの作り方BUTTON.container { display : justify-content : padding : background-color : } .button { display : justify-content : align-items : color : width : height : border-radius : box-shadow : } CSSで丸を作る方法をご存じの方なら、先ほどのCSSからボタンを正円にするだけでOKです。buttonにwidth、heightを指定して正方形をまず作り、display: flex、justify:content、align-items:centerで文字を中央寄せにします。そしたらborder-radius: 50%を追加して、ボタンを丸くしたら完了です。CSSで丸を作る方法はこちらの記事で解説しています。詳しく知りたい方は是非読んでみてください。くぼんで見える丸いボタンもinset指定、影の色反転でOKBUTTON.container { display : justify-content : padding : background-color : } .button { display : justify-content : align-items : color : width : height : border-radius : box-shadow : } こちらも四角いボタン同様、box-shadowの設定を変更するだけでOKです。最後まで読んでいただきありがとうございます!プログラミング学習は何度も繰り返して覚えていくことが大切です!是非ブックマークして学習に役立ててみてください!質問や、こんなことを記事にしてほしい!というのがありましたらTwitterのコメント等で受け付けていますので、お気軽にどうぞ!ますみ - 愛知県在住の20代プログラマー - | @mashmy_98それでは次の投稿もお楽しみに!

2023年04月26日

Read More

機械学習とは?簡単にわかりやすく解説!

こんにちは!エンジニアのますみです!本日は機械学習とは何かをわかりやすく解説していきます!テーマ どのサイトよりも機械学習についてわかりやすく解説 機械学習とは何かがわかる 身近なところで活躍する機械学習を使ったサービスがわかる目次 機械学習とは?簡単にわかりやすく解説! SNSがユーザーが興味のある投稿を選んで表示するときの機械学習のしくみ つまり機械学習は『関連付け』と『連想ゲーム』をベースにしている 正確に情報を表示するには大量のデータが必要 機械学習における『多数決』とは まとめ 機械学習はコンピューターがデータから共通点を見つけて関連付けをしていくこと 学んだ共通点を元に私たちの役に立つ機能が作られているそれではさっそく見ていきましょう機械学習とは?簡単にわかりやすく解説!機械学習とは、コンピュータがデータを学び、問題を解決する方法を覚えるための技術です。機械学習はすでに私たちの身近で活躍しており、例えばSNSでは ユーザーが興味のある投稿を選んで表示する 悪意のあるコメントや投稿を非表示にするといった機能がありますが、これらはコンピューターが機械学習で学んだことを活かして投稿の表示、非表示をしているのです。SNSがユーザーが興味のある投稿を選んで表示するときの機械学習のしくみ例えばあなたがSNSで『箱根』というキーワードで投稿の検索をしたとします。すると画面には箱根に関連する投稿が表示されると思います。表示された投稿には、本文に箱根という言葉が含まれているものが表示されます。ここまではまだ機械学習を使っていません。コンピューターは本文に箱根が入っている、入っていないかどうかで判定をしているだけですね。さて、表示された投稿の中には箱根という言葉が含まれていないものや、草津や下呂、道後などについての投稿も表示されることがあります。これが機械学習を使った結果になります。SNSは機械学習によって『箱根』が『温泉旅行』に関連することを知っているこれはあなたの前に『箱根』と検索した人や、『箱根』についての投稿のデータから、SNSが『箱根』が『温泉旅行』に関連するということを学習済みのため草津や下呂、道後などについての投稿も表示できるのです。もしあなたの前に『箱根』と検索した人が、その後『草津』『下呂』などのキーワードで検索したとします。するとコンピューターは『箱根、草津、下呂は関連性があるのでは?』と判断します。また『箱根』についての投稿の本文内には『温泉』や『旅行』というキーワードも含まれていることが多いと思います。するとコンピューターは『箱根、温泉、旅行は関連性があるのでは?』と判断します。それによりSNSは『箱根』というキーワードから『温泉、旅行、草津、下呂、道後』などのキーワードを連想して、検索結果を表示することができます。つまり機械学習は『関連付け』と『連想ゲーム』をベースにしているこのようにSNSではこれまでのユーザーの操作、投稿などから共通点を見つけてキーワードを関連付けして学びます。そして覚えたキーワードで連想ゲームをして表示する投稿を選ぶということをしています。正確に情報を表示するには大量のデータが必要『箱根』と検索した後に『旅行、草津』などの温泉旅行に関連するキーワードで検索をするとは限りません。急に温泉旅行と全く関係のないもの、例えば『ペット』について調べたくなったり『おしゃれなカフェ』について調べる人もいます。そんな感じで、人間の行動は必ずしも関連性がはっきりしているわけではないため、SNSの投稿を表示する機能では正確な情報を表示するための工夫がされています。簡単に言えば機械学習では『多数決』をとって正確な情報を表示する仕組みを作っています。機械学習における『多数決』とはSNSのユーザーのAさんが『箱根道後犬』という順番で検索をしたとします。Bさんは『箱根道後スポーツカー』という順番で検索をしたとします。Cさんは『温泉名物メイク』という順番、Dさんは...というように、SNSは大量のデータを元にユーザーが検索をするときの動きを学習します。そして大量のデータから傾向として多いものを多数決で選んでキーワードを関連付けすることで情報を正確にしていくことができます。このようにSNSのユーザーは知らず知らずのうちに多数決に参加して、情報を正確にすることに役立っています。もしもSNSのユーザーがAさんとBさんしかおらず、検索のデータが『箱根道後犬』と『箱根道後スポーツカー』しかなければ、道後と犬、道後とスポーツカーは関連性がある!というようになってしまうのです。そのため機械学習には大量のデータが必要不可欠と言えます。まとめ機械学習はコンピューターがデータから共通点を見つけて関連付けをしていくことざっくりですが、機械学習とはこういうことです。正確に関連付けをするには大量のデータが必要であり、かつどれくらい共通点があれば関連があると判断するのかを決めるという部分も重要になります。学んだ共通点を元に私たちの役に立つ機能が作られている私たちは知らず知らずのうちに機械学習による便利なサービスに協力しています。既に身近なところで機械学習は活かされていて、これからどんどん便利な世の中になっていくと思われます。最後まで読んでいただきありがとうございました!人工知能は既に私たちの身近で活躍しており、研究も目まぐるしい速さで進んでいるのでどんどん生活を便利にしてくれると思います。これからは人工知能を作る、人工知能をうまく扱う人が求められる時代になるでしょう。質問や、こんなことを記事にしてほしい!というのがありましたらTwitterのコメント等で受け付けていますので、お気軽にどうぞ!ますみ - 愛知県在住の20代プログラマー - | @mashmy_98それでは次の投稿もお楽しみに!

2023年04月25日

Read More

ますみ

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

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

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

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

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


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

ますみ

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

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

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

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