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

ますみのブログ

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

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

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

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

こんにちは!エンジニアのますみです!本日は機械学習とは何かをわかりやすく解説していきます!テーマ どのサイトよりも機械学習についてわかりやすく解説 機械学習とは何かがわかる 身近なところで活躍する機械学習を使ったサービスがわかる目次 機械学習とは?簡単にわかりやすく解説! 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

ハンバーガーメニューボタンの作り方【レスポンシブ】

こんにちは!エンジニアのますみです!本日はハンバーガーボタンと呼ばれる三本線のボタンの作り方を解説します。スマートフォンでWebサイトを見たときによく見るボタンですね!この記事では実際にCSSをこのページ上で書くことができるので、プレビューを見ながら使い方を覚えることができます!是非、ブックマークして学習などに役立てていただけたら幸いです!テーマ ハンバーガーボタンの作り方を覚えられる 応用してオリジナルのデザインが作れるになる この記事上でプレビューを見ながらCSSを書くことで、CSSの仕組みを深く理解できる目次 サンプル HTMLの解説 CSSの解説 ヘッダー ハンバーガーボタンのボックス ハンバーガーボタンの3本線 1本目、3本目の位置 総まとめそれではさっそく見ていきましょうサンプル今回はこのようなメニューバーとハンバーガーボタンを作成します。HTMLdiv class="header" div class="ham-box" div class="ham"/div /div div/div/divCSS.header { display: flex; justify-content: space-between; width: 100%; padding: 0.8rem; border: 1px solid #004373; border-radius: 5px;}.ham-box { position: relative; display: flex; justify-content: center; align-items: center; width: 24px; height: 20px; cursor: pointer;}.ham,.ham-box::before,.ham-box::after { display: flex; align-self: center; width: 100%; height: 3px; background-color: #004373;}.ham-box::before,.ham-box::after { content: ""; position: absolute;}.ham-box::before { top: 0;}.ham-box::after { bottom: 0;}上のソースコードはコピペOKです!特に報告義務はありませんが、Twitter等で使いました!とコメントしていただけたら今後の励みになります!HTMLの解説div class="header" div class="ham-box" div class="ham"/div /div div/div/div.headerがメニューバー、.ham-boxがハンバーガーボタンの入れ物になります。そして.hamが線そのものになります。.hamは一つしかありませんが、CSSで要素を増やすことができる疑似要素を使って残り2本の線を追加していきます。疑似要素については下の1本目、3本目の線の位置で解説します。空のdivは無くてもいいのですが、作っておくと後々メニューバーの右隅に何か表示したいとなった時にレイアウトが崩れる恐れが減ります。CSSの解説ヘッダー.header { display: justify-content: width: padding: border: border-radius: } 上のCSSが適用されるボックスがオレンジ色の部分です。padding、border、border-radiusはお好みで変更してみてください。それ以外のプロパティdisplay、justify-content、widthは基本的には変更する必要はありません。ハンバーガーボタンのボックス.ham-box { position: display: justify-content: align-items: width: height: cursor: } 上のCSSが適用されるボックスがオレンジ色の部分です。width、heightでハンバーガーボタンの大きさを決めています。.ham-box { display: flex; justify-content: center; align-items: center;}この3つでは、ボックス内の要素を上下左右中央揃えにしています。こうすることで、のちに3本線の位置を指定する時にコード量が少なく済みます。ハンバーガーボタンの3本線.ham, .ham-box::before, .ham-box::after { display: align-self: width: height: background-color: } 上のCSSが適用される部分がオレンジ色の部分です。セレクタを3つ指定して、3つの線にまとめてスタイルを適用しています。1本目の線は.ham-box::beforeです。疑似要素といい、HTMLを書かなくても要素を追加することができます。疑似要素の設定は下の1本目、3本目の線の位置で解説します。2本目の線は.hamです。3本目の線は.ham-box::afterになっており、これも疑似要素です。widthは親要素の.ham-boxに従うように100%に指定されています。heightで線の太さを指定できます。お好みで変えてみてください。1本目、3本目の線の位置.ham-box::before, .ham-box::after { content: position: } .ham-box::before { top: } .ham-box::after { bottom: } 上のCSSが適用される部分がオレンジ色の部分です。.ham-box::beforeが1本目、.ham-box::afterが3本目の線になります。これらは疑似要素といい、HTMLを書かなくても要素を追加することができます。疑似要素はセレクタで指定した要素の中に追加されます。この時content: ;と書いておかないと何も表示されません。.ham-box::before { content: "";}div class="ham-box"  !-- ここに::beforeが追加される -- div class="ham"/div/div::afterと指定すると、要素は最後に追加されます。.ham-box::after { content: "";}div class="ham-box" div class="ham"/div  !-- ここに::afterが追加される --/div今回の例では::before、::afterどちらも使って.ham-boxの中に合計3つの要素を表示させています。追加した2つの疑似要素にposition: absoluteを指定して::beforeを.ham-boxの一番上、::afterを.ham-boxの一番下に表示し、ハンバーガーボタンのレイアウトを作ります。div class="ham-box"  !-- ::before -- div class="ham"/div  !-- ::after --/div総まとめ下のエディターではすべてのプロパティを編集することができます。これまでの内容をふまえて、ハンバーガーボタンのサイズや色などを変更してみてください。.header { display: justify-content: width: padding: border: border-radius: } .ham-box { position: display: justify-content: align-items: width: height: cursor: } .ham, .ham-box::before, .ham-box::after { display: align-self: width: height: background-color: } .ham-box::before, .ham-box::after { content: position: } .ham-box::before { top: } .ham-box::after { bottom: } 最後まで読んでいただきありがとうございます!プログラミング学習は何度も繰り返して覚えていくことが大切です!是非ブックマークして学習に役立ててみてください!質問や、こんなことを記事にしてほしい!というのがありましたらTwitterのコメント等で受け付けていますので、お気軽にどうぞ!ますみ - 愛知県在住の20代プログラマー - | @mashmy_98それでは次の投稿もお楽しみに!

2023年04月25日

Read More

Zero-Shotプロンプティングとは?わかりやすく解説!

こんにちは!エンジニアのますみです!本日はZero-Shotプロンプティングについて解説していきます!Zero-ShotプロンプティングとはZero-Shotプロンプティングとは回答例などを含まないプロンプトで人工知能(AI)に回答を求めることです。わかりやすく回答例としましたが、サンプルと言ったほうが本来の意味合いに近いですプロンプトとは、人工知能(AI)に対してどんな質問や指示を出すか、どんな言葉を使って話しかけるかを決めることです。プロンプトにはAIから的確な回答を得るために、回答例を書いておくテクニックがあります。プロンプト以下の質問に答えてください。回答は1. 材料名、2. 材料名の形式で答えてください質問: 目玉焼きの材料を教えてください。回答: 1. 卵質問: 苺ジャムの材料を教えてください。AIの回答回答: 1. 苺、2. 砂糖上の例では以下の質問に答えてください。回答は1. 材料名、2. 材料名の形式で答えてください質問: 目玉焼きの材料を教えてください。回答: 1. 卵質問: 苺ジャムの材料を教えてください。この部分が回答の例になります。Zero-Shotプロンプティングでは質問: 目玉焼きの材料を教えてください。の部分が無い状態でAIに回答を求めます。Zero-Shotプロンプティングの例プロンプト次の様子を最高、普通、最低に分類してください大好物の焼肉を食べてお腹いっぱい回答最高上記の例では回答例(サンプル)が無くてもAIが適切な回答をしてくれました。AIは事前に学習された大量のデータから、大好物の焼き肉を食べてお腹いっぱいな状況は最高だ!と推測できるように学習されているということです。シンプルな質問であればこのように回答例(サンプル)をプロンプトに含まないZero-ShotプロンプティングでもAIは的確な文章を出力します。複雑な質問にはZero-Shotプロンプティングは不向き回答の形式を具体的に指定したい等、複雑な指示の場合はAIから欲しい回答を得られない可能性が高いです。その為、指示の内容によっては回答例(サンプル)を含むプロンプトを使う必要があります。回答例(サンプル)を含むものはFew-Shotプロンプティングと言う少数の回答例(サンプル)を含むプロンプトでAIに回答を求めることをFew-Shotプロンプティングと言います。プロンプト以下の質問に答えてください質問 : 目玉焼きの材料をリスト形式で教えて回答 : 1. 卵質問 : 苺ジャムの回答をリスト形式で教えて回答 :AIの回答1. 苺2. 砂糖3. レモン汁回答 : 1. 卵の部分が回答例(サンプル)になります。まとめ Zero-Shotプロンプティングとはサンプル無しのプロンプトでAIに回答を求めること シンプルな指示であればZero-Shotプロンプティングでも的確な回答を得られる 複雑な指示にはZero-Shotプロンプティングは不向き最後まで読んでいただきありがとうございます!質問や、こんなことを記事にしてほしい!というのがありましたらTwitterのコメント等で受け付けていますので、お気軽にどうぞ!ますみ - 愛知県在住の20代プログラマー - | @mashmy_98それでは次の投稿もお楽しみに!

2023年04月24日

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のページネーションでパラメータを保持したままページ遷移する

こんにちは!エンジニアのますみです!本日はLaravelのページネーションでパラメータを保持した状態でページ遷移する方法を解説します!目次 デフォルトの状態 結論それではさっそく見ていきましょうデフォルトの状態Laravelのviewでこのように書けば自動でページネーションボタンが生成されて便利ですがdiv {{ $collection-paginate(24)-links() }}/div例えば検索機能付きのページで使おうとすると、ページネーションボタンをクリックして画面遷移するとパラメータが消えてしまいます。https://mashmy.net?keyword=AこのようにキーワードAで絞り込みをした状態で何らかのリストを表示していても、ページネーションボタンをクリックするとhttps://mashmy.net?page=2keyword=Aが消えてしまうため、2ページ目以降は絞り込みされていないリストが表示されてしまいます。結論div {{ $collection-paginate(24)-withQueryString()-links() }}/divこのようにwithQueryString()を追加することでクエリを保持した状態でページ送りができます。1ページ目https://mashmy.net?keyword=A2ページ目https://mashmy.net?page=2keyword=Aこれで解決!最後まで読んでいただきありがとうございました!質問や、こんなことを記事にしてほしい!というのがありましたらTwitterのコメント等で受け付けていますので、お気軽にどうぞ!ますみ - 愛知県在住の20代プログラマー - | @mashmy_98それでは次の投稿もお楽しみに!

2023年04月24日

Read More

【CSS入門】書いて覚えるtransitionの使い方

こんにちは!エンジニアのますみです!本日はCSSでアニメーションを作る際に重要なtransitionについて解説していきます。マウスホバーアニメーションやインプットフォーカス時によく使われます!この記事では実際にCSSをこのページ上で書くことができるので、プレビューを見ながら使い方を覚えることができます!是非、ブックマークして学習などに役立てていただけたら幸いです!テーマ transitionの使い方をマスターできる CSSで思い通りのアニメーションが作れるようになる この記事上でプレビューを見ながらCSSを書くことで、CSSの仕組みを深く理解できる目次 transitionの基本 transitionを細かく設定する アニメーションが開始するまでを遅らせる アニメーションの速度に波をつける #stepsの使い方 アニメーションする属性を指定する さらに自由にアニメーションを作る方法 ,(カンマ)で区切ると複数のアニメーションを同時に指定できる :hoverと通常時で別々のtransitionを書くそれではさっそく見ていきましょうtransitionの基本HOVER.box { transition: padding: border: background-color: cursor: } .box:hover { transform: } 青いボックスにマウスカーソルを当ててみるとボックスが一回転します。ボックスが一回転するのにかかる時間を指定するのがtransitionです。上の例ではtransitionの値は0.3sとなっています。『s』という単位は『秒(second)』のことなので、0.3秒でボックスが一回転することになります。上のエディターのtransitionを1sにしてみてください。ボックスが回転する速度が遅くなることがわかります。transitionを細かく設定するアニメーションが開始するまでを遅らせるHOVER.box { transition: padding: border: background-color: cursor: } .box:hover { transform: } transitionに2つ目の数値を指定すると、アニメーションが始まるまでの時間を指定できます。上の例ではtransitionの値は0.3s 1sとなっています。1つ目の数値がボックスが一回転するのにかかる時間、2つ目の数値がアニメーションが始まるまでの時間になります。transition: アニメーションの長さ アニメーションが始まるまでの時間アニメーションの速度に波をつけるHOVER.box { transition: padding: border: background-color: cursor: } .box:hover { transform: } transitionはアニメーションが最初はゆっくりでだんだん速くなるといったような緩急を設定することができます。上の例では2sとease-in-outを指定しており、ease-in-outが緩急を指定する値になります。緩急を指定する値には次の種類があります。上のエディターを編集してみて変化を確認してみましょう。 ease(デフォルト):ゆっくりと始まり、中間で速くなり、最後にゆっくりと終わる linear:等速でアニメーションする ease-in:ゆっくりと始まり、最後に速くなる ease-out:速く始まり、ゆっくりと終わる ease-in-out:ゆっくりと始まり、中間で速くなり、最後にゆっくりと終わる step-start:アニメーションの最初の瞬間に即座に変化を加える step-end:アニメーションの最後の瞬間に即座に変化を加える steps(n, start/end):アニメーションをnステップに分割し、startまたはendで即座に変化を加えるstepsの使い方stepsが少しややこしいと思いますので、詳しく解説します。HOVER.box { transition: padding: border: background-color: cursor: } .box:hover { transform: } 簡単に言うとコマ送りのようなアニメーションになります。steps(12,start)の12の部分がコマ数になるので、数値を大きくすると滑らかなアニメーションになります。steps(12,start)のstartの部分は変化するタイミングを指定します。例えばこのようにtransitionを4s steps(4, start);とした場合HOVER.box { transition: padding: border: background-color: cursor: } .box:hover { transform: } 4秒で360度回転するアニメーションを4コマに分割するので、1秒ごとに90度回転します。startを指定した場合、マウスカーソルがボックスに当たった瞬間から90度回転します。その為、0秒で90度、1秒で180度回転するため、3秒目でアニメーションが完了します。endを指定した場合は、マウスカーソルが当たった瞬間ではなく1秒後からアニメーションがスタートします。steps(4,start)を指定した場合HOVER0秒90度HOVER1秒180度HOVER2秒270度HOVER3秒360度完了!HOVER4秒360度steps(4,end)を指定した場合HOVER0秒0度HOVER1秒90度HOVER2秒180度HOVER3秒270度HOVER4秒360度完了!アニメーションする属性を指定するHOVER.box { transition: padding: border: background-color: cursor: } .box:hover { transform: background-color: } 上のソースコードは、マウスカーソルが当たったらボックスが回転しつつ背景色が変わるアニメーションを指定したものです。例えば回転はアニメーションにしたいけど背景色は瞬時に変えたいといった場合は、transitionにアニメーションにしたい属性を指定することができます。.box { transition: transform 1s;}このようにtransitionにtransformを追加すると、この値はtransformに対する変化のみに適用されます。HOVER.box { transition: padding: border: background-color: cursor: } .box:hover { transform: background-color: } 回転だけアニメーションで、背景色の変化はアニメーションしないように指定できました。さらに自由にアニメーションを作る方法このようなアニメーションを作りたいとします。HOVERマウスカーソルを当てると 360度回転する(transformを使う) ボックスが大きくなる(paddingを使う)の順番でアニメーションが実行されます。このようなアニメーションを作る方法を見ていきましょう。,(カンマ)で区切ると複数のアニメーションを同時に指定できるこのように,(カンマ)で区切ると、別のアニメーションの調整を行うことができます。.box { transition: transform 0.5s, padding 0.5s 0.5s; }.box:hover { transform: rotate(360deg); padding: 0.4rem 5rem;}上の例では、,(カンマ)の前でtransform 0.5sを指定し,(カンマ)の後でpadding 0.5s 0.5sと指定しています。こうすることで transform: roate(360deg)はマウスカーソルが当たった瞬間からスタートし、0.5秒でアニメーション完了 padding: 0.4rem 5remはマウスカーソルが当たってから0.5秒後からスタートし、それから0.5秒でアニメーション完了といった設定ができます。:hover内と通常時で別々のtransitionを書く上の,(カンマ)で区切ってtransformとpaddingのアニメの開始タイミングをずらしただけではこのようになります。HOVER.box { transition: transform 0.5s, padding 0.5s 0.5s; padding: 0.4rem 0.8rem; border: 2px solid #0072c6; background-color: white; cursor: pointer;}.box:hover { transform: rotate(360deg); padding: 0.4rem 5rem;}マウスカーソルが当たった時のアニメーションはいい感じですが、マウスカーソルが外れたときのアニメーションはどうでしょう。変化を元に戻す順番もtransform(回転) padding(サイズ変更)となってしまうため、おかしなことになってしまっていますね。:hoverにtransitionを指定するとマウスカーソルが当たった時にはそちらが適用されるHOVER.box { transition: padding: border: background-color: cursor: } .box:hover { transition: transform: padding: } CSSをこのように修正すると、マウスカーソルが当たった時とマウスカーソルが外れたときのアニメーションのタイミングを変えることができます。マウスカーソルが当たった時は.box:hover内のCSSが適用されるためtransform 0.5s, padding 0.5s 0.5sで指定したように、回転サイズ変更の順番でアニメーションが実行されます。マウスカーソルが外れた時は.box内のCSSが適用されるためtransform 0.5s 0.5s, padding 0.5sで指定したように、サイズ変更回転の順番でアニメーションが実行されます。最後まで読んでいただきありがとうございます!プログラミング学習は何度も繰り返して覚えていくことが大切です!是非ブックマークして学習に役立ててみてください!質問や、こんなことを記事にしてほしい!というのがありましたらTwitterのコメント等で受け付けていますので、お気軽にどうぞ!ますみ - 愛知県在住の20代プログラマー - | @mashmy_98それでは次の投稿もお楽しみに!

2023年04月24日

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

Laravelのmake:migrationでテーブル名を指定して作成する方法

こんにちは!エンジニアのますみです!本日はLaravelのmake:migrationコマンドを実行するときに、テーブル名をあらかじめ指定しておく方法を解説します!覚えておくとちょっと便利!目次 テーブルを新しく作る場合(Schema::create) マイグレーションファイル名によっては自動でテーブル名付きのひな形が生成される コマンドを追加してテーブル名を指定することもできる テーブルをアップデートする場合(Schema::table) マイグレーションファイル名によっては自動でテーブル名付きのひな形が生成される コマンドを追加してテーブル名を指定することもできるそれではさっそく見ていきましょうテーブルを新しく作る場合(Schema::create)コマンドを打ち込んだだけでこのようなusersテーブルを作るひな形が生成されている状態にしていきます。public function up(){ Schema::create('users', function (Blueprint $table) { $table-id(); $table-timestamps(); });}マイグレーションファイル名によっては自動でテーブル名付きのひな形が生成されるたとえばこのようにコマンドを入力すると自動でテーブル名付きのひな形が生成されますphp artisan make:migration create_usersマイグレーションファイル名がcreate_から始まる場合は自動でテーブル名を読み取り、Laravelがひな形を作ってくれます。ちなみにcreateUsersのようにキャメルケースでファイル名を指定してもひな形が生成されます。php artisan make:migration createUsersパスカルケース(CreateUsers)でもひな形が生成されます。php artisan make:migration CreateUsersケバブケース(create-users)ではひな形は生成されませんでした。php artisan make:migration create-usersこの項目のまとめ createからファイル名が始まることが条件 〇 スネークケース(create_users)ではひな形が生成される 〇 キャメルケース(createUsers)ではひな形が生成される 〇 パスカルケース(CreateUsers)ではひな形が生成される ケバブケース(create-users)ではひな形は生成されないコマンドを追加してテーブル名を指定することもできる通常このようにコマンドを打つとひな形は生成されませんがphp artisan make:migration usersこのように--create=テーブル名とするとひな形が追加されます。php artisan make:migration users --create=usersこの項目のまとめ --create=テーブル名をコマンドに追加でひな形が生成できるテーブルをアップデートする場合(Schema::table)public function up(){ Schema::table('users', function (Blueprint $table) { // });}テーブルを更新する場合はこのようなひな形を作ります。マイグレーションファイル名によっては自動でテーブル名付きのひな形が生成されるこちらもマイグレーションファイル名によっては自動でひな形が生成されます。php artisan make:migration add_to_usersこのようにadd_to_から始まるファイル名を指定すると自動でひな形が生成されます。先ほど同様、スネークケース(add_to_)、キャメルケース(addTo)、パスカルケース(AddTo)であればひな形が生成されます。ケバブケース(add-to-)はやはりひな形は生成されません。この項目のまとめ add to からファイル名が始まることが条件 〇 スネークケース(add_to_users)ではひな形が生成される 〇 キャメルケース(addToUsers)ではひな形が生成される 〇 パスカルケース(AddToUsers)ではひな形が生成される ケバブケース(add-to-users)ではひな形は生成されないコマンドを追加してテーブル名を指定することもできるこのように--table=テーブル名をコマンドに追加することでひな形付きのマイグレーションファイルを生成することができます。php artisan make:migration update_users --table=usersこの項目のまとめ --table=テーブル名をコマンドに追加でひな形が生成できる最後まで読んでいただきありがとうございました!質問や、こんなことを記事にしてほしい!というのがありましたらTwitterのコメント等で受け付けていますので、お気軽にどうぞ!ますみ - 愛知県在住の20代プログラマー - | @mashmy_98それでは次の投稿もお楽しみに!

2023年04月23日

Read More

【CSS入門】書いて覚える『:hover』の使い方

こんにちは!エンジニアのますみです!本日はマウスホバー時に要素の見た目を変化させることができる:hoverの使い方を解説していきます!魅力的なWebサイトを作るには欠かせないテクニックです!この記事では実際にCSSをこのページ上で書くことができるので、プレビューを見ながら使い方をマスターすることができます。是非、ブックマークして学習に役立てていただけたら幸いです。目次 :hoverの基本 枠線の色を変えたいときの注意点 transitionを指定してアニメーションにする ホバー時によく使われるアニメーション box-shadowで影をつける transformでボタンそのものを動かすそれではさっそく見ていきましょう!:hoverの基本BUTTON.button { background-color : } .button:hover { background-color : } セレクタ:hoverと書くことで、マウスホバー時のスタイルを指定できます。上の例では、.buttonクラスを持つ要素の背景色が通常時にはwhite、マウスホバー時には#D2ECFFになるように指定されています。#D2ECFFの部分を好きなカラーコードに書き換えてみると、マウスホバー時の背景色が変わることがわかります。例えば#D2ECFFをredに書き換えてみてください。ボタンにマウスカーソルを当てると背景色が赤に変わります。枠線の色を変えたいときの注意点BUTTON.button { background-color : } .button:hover { border : } 上の例のように、マウスホバー時のみ枠線を表示したいときには注意が必要です。ボタンにマウスカーソルを当てると、枠線は表示されますが画面がガタつくことがわかると思います。これは通常時の枠線の太さが0pxになっているため、ホバー時にボタンのサイズが変わってしまうことが原因です。BUTTON.button { background-color : border : } .button:hover { border : } このように通常時には透明な枠線を指定しておくことで、マウスホバー時のガタつきを防ぐことができます。線の太さは通常時、ホバー時どちらも同じ値を指定してください。transitionを指定してアニメーションにするBUTTON.button { background-color : transition : } .button:hover { background-color : } 通常時のクラスにtransition: 秒数とすることで、ホバー時のスタイルに変化するまでにかかる時間を指定できます。エディターのtransition: 0.3sを変更してtransition: 1sとすると、ボタンの色が変化するまでにかかる時間が長くなることがわかります。ホバー時によく使われるアニメーションbox-shadowで影をつけるBUTTON.button { transition : } .button:hover { box-shadow : } マウスホバー時に影をつけるにはbox-shadowを使います。box-shadowはbox-shadow: 影の位置(横) 影の位置(縦) 影のぼかし度 影の色のように書けます。上のエディターで、box-shadowを6px 6px 8px lightblue とすると、ボタンの右下に水色の影をつけることができます。影の位置が0以外、transitionで秒数を指定していると、上のままでは影がボタンの位置から徐々にホバーで指定した位置に影が伸びていきます。あらかじめ通常時に、ホバー後の位置と同じ透明の影を指定しておくことで、影がその場からふわっと現れるアニメーションにできます。BUTTON.button { transition : box-shadow : } .button:hover { box-shadow : } あえて影の位置を動かすエフェクトも面白いと思います。数値を色々変えてみて試してみてください!transformでボタンそのものを動かすBUTTON.button { transition : box-shadow : } .button:hover { box-shadow : transform: } atransformを使用すると、指定した要素を移動したり、形を変えたりすることができます。上の例ではtranslateYという縦方向の位置をずらすプロパティを指定して、ホバー時にボタンが5px上方向に動くようにしています。transformには他にも、要素を拡大するscale、要素を回転させるrotateなどのホバーアニメーションに使いやすいプロパティがたくさんあります。上のエディターのtransformにscale(1.1)を指定すると、ホバー時にボタンが1.1倍になることがわかります。また、エディターのtransformにrotate(360deg)を指定すると、ホバー時にボタンが1回転します。最後まで読んでいただきありがとうございました!プログラミング学習は反復して覚えていくことが大切です!是非ブックマークして学習に役立ててみてください!質問や、こんなことを記事にしてほしい!というのがありましたらTwitterのコメント等で受け付けていますので、お気軽にどうぞ!ますみ - 愛知県在住の20代プログラマー - | @mashmy_98それでは次の投稿もお楽しみに!

2023年04月23日

Read More

簡単に管理画面を作れるlaravel-adminのセットアップ方法を解説

こんにちは!エンジニアのますみです!本日はlaravel-adminのセットアップのやり方を解説します!laravel-adminとは PHPフレームワーク『Laravel』用の管理画面用ライブラリ 管理人用テーブル、管理画面のレイアウト、CRUDが一瞬で作れる リレーションにも対応した便利なフォームが既に準備されているlaravel-adminの公式ドキュメントはこちら目次 インストール コマンドで管理人のアカウントを作成する Modelから管理画面を作成する 管理画面にログインしてルーティングの設定を完了するインストールcomposerを使ってインストールしますcomposer require encore/laravel-admin:1.*インストールが完了したら以下のコマンドを実行しますphp artisan vendor:publish --provider="Encore\Admin\AdminServiceProvider"configディレクトリ内にadmin.phpが作成されます。admin.phpを編集して管理画面に関する様々な設定を行うことができます。その後、以下のコマンドを実行してセットアップを完了しますphp artisan admin:installこのコマンドを実行するとapp/Adminapp/Admin/Controllers/HomeController.php app/Admin/Controllers/AuthController.php app/Admin/Controllers/ExampleController.phpapp/Admin/bootstrap.phpapp/Admin/routes.phpが作成されます。特に編集することが多いのはapp/Admin/routes.phpです。このファイルを編集してテーブルごとのルーティングを定義します。app/Admin/Controllers/ExampleController.phpはサンプルとして作成されるだけなので消してしまっても良いです。コマンドで管理人のアカウントを作成する以下のコマンドを実行すると管理人アカウントを作成できます。php artisan admin:create順番にユーザーネーム、パスワード、名前を聞かれるので入力していきます。 Please enter a username to login: ますみ Please enter a password to login: Please enter a name to display: ますみこのように表示されたら完了です。User [ますみ] created successfully.http://localhost:8000/adminにアクセスして、先ほど設定したusernameとpasswordを入力してログインできます。管理画面ダッシュボードはこんな感じです。Modelから管理画面を作成するlarave-adminはadmin:makeコマンドを使用して管理画面を作成できます。php artisan admin:make 作成するコントローラー名 --model=モデルのパス例えばこのようなモデルがあったなら?phpnamespace App\Models;use Illuminate\Database\Eloquent\Factories\HasFactory;use Illuminate\Database\Eloquent\Model;class Blog extends Model{ use HasFactory; protected $fillable = [ 'title', 'text' ];}こんな感じでBlogモデルの管理画面を作成できます。php artisan admin:make BlogController --model=App\\Models\\Bloglaravel-adminは自動でテーブルのカラムを読み込み管理画面を設定してくれますが、マイグレーションを行う前に上記のコマンドを実行してしまうと、空のコントローラーが作成されてしまいます。ターミナルには親切にapp/Admin/routes.phpにこのコードを追加してねと表示されると思います。INFO App\Admin\Controllers\BlogController [C:\Users\mashmy\laravel-admin\app/Admin/Controllers/BlogController.php] created successfully.Add the following route to app/Admin/routes.php: $router-resource('blogs', BlogController::class);app/Admin/routes.phpに上記のソースコードを追加しないと、作成したBlog用管理画面にアクセスできません。app/Admin/routes.php?phpuse Illuminate\Routing\Router;Admin::routes();Route::group([ 'prefix' = config('admin.route.prefix'), 'namespace' = config('admin.route.namespace'), 'middleware' = config('admin.route.middleware'), 'as' = config('admin.route.prefix') . '.',], function (Router $router) { $router-get('/', 'HomeController@index')-name('home'); $router-resource('blogs', BlogController::class);});このようにルーティングの設定をします。コントローラーを作成するたびにapp/Admin/routes.phpを編集してルーティングの設定を行っていきます。作成されたコントローラーはこんな感じで、カラムを自動で読み込みセットアップしてくれています。?phpnamespace App\Admin\Controllers;use App\Models\Blog;use Encore\Admin\Controllers\AdminController;use Encore\Admin\Form;use Encore\Admin\Grid;use Encore\Admin\Show;class BlogController extends AdminController{ /** * Title for current resource. * * @var string */ protected $title = 'Blog'; /** * Make a grid builder. * * @return Grid */ protected function grid() { $grid = new Grid(new Blog()); $grid-column('id', __('Id')); $grid-column('title', __('Title')); $grid-column('text', __('Text')); $grid-column('created_at', __('Created at')); $grid-column('updated_at', __('Updated at')); return $grid; } /** * Make a show builder. * * @param mixed $id * @return Show */ protected function detail($id) { $show = new Show(Blog::findOrFail($id)); $show-field('id', __('Id')); $show-field('title', __('Title')); $show-field('text', __('Text')); $show-field('created_at', __('Created at')); $show-field('updated_at', __('Updated at')); return $show; } /** * Make a form builder. * * @return Form */ protected function form() { $form = new Form(new Blog()); $form-text('title', __('Title')); $form-textarea('text', __('Text')); return $form; }}このままではブログの管理画面にはアクセスできません。管理画面から作成した管理ページを表示するための設定を行う必要があります。管理画面にログインしてルーティングの設定を完了する管理画面にログインしたら画面左側のメニューからMenuをクリックします。表示された画面で先ほどコマンドで作成したBlog用管理画面へのルーティングを設定します。Parentはメニューのどこに表示するかを指定できます。ROOTにした場合は左側のメニューバーにそのまま表示されます。この状態で例えばAdminを設定すると、メニューバーのAdmin内のリストに追加されます。Titleは好きな名前で大丈夫ですが、URLはテーブル名を指定する必要があります。今回はParentにROOTを指定したので、メニューバーにアイコンが追加されました。作成されたアイコンをクリックまたはマウスカーソルを当てると、指定したタイトルのボタンが表示されます。今回はTitleはブログと指定したのでブログと表示されます。ボタンをクリックするとブログ用の管理画面にアクセスできました。右上のNewボタンをクリックすると編集画面にアクセスできます。編集画面は既にTitleとText用のフォームが自動で設定されています。素晴らしい...データを保存する処理も自動でやってくれているので、このまま編集してSubmitをクリックすれば入力したデータがデータベースに保存できます。おしまいこんな感じで簡単に管理画面のセットアップができました!Laravelの管理画面用ライブラリの中では有名なものだと思っているのですが、意外と記事が無かったので解説記事を書いてみました!質問や、こんなことを記事にしてほしい!というのがありましたらTwitterのコメント等で受け付けていますので、お気軽にどうぞ!ますみ - 愛知県在住の20代プログラマー - | @mashmy_98それでは次の投稿もお楽しみに!

2023年04月22日

Read More

【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

【CSS入門】px、%、vw、vh、em、remを実際にコードを書きながら覚えよう

こんにちは!エンジニアのますみです!本日は要素の大きさを指定する単位、px、%、vw、vh、em、remを解説していきます!CSSの基本中の基本です!是非最後まで読んでマスターしてくださいね!この記事を読んでほしい方! CSSを学習してスキルを身に着けたい方 基礎知識をまとめた記事をブックマークしておきたい方 実際にコードを書きながら覚えたい方この記事では実際にCSSを書きながら書き方をマスターすることができます。さらに実際にCSSをこのページ上で書くことができるので、プレビューを見ながら使い方を覚えることができます。是非、ブックマークして学習に役立てていただけたら幸いです。目次 基礎 つまづきやすいポイント pxの使い方 %の使い方 vwの使い方 vwは画面サイズの横幅、vhは画面サイズの縦幅で指定する emの使い方 remの使い方 どの単位を使うべきか 基本的には相対的な単位を使う 絶対的な単位を使うケースそれではさっそく見ていきましょう!基礎px、%、vw、vh、em、remというのは、数値の単位です。日常生活で言う、cmや、mmと同じと思っていただけたら大丈夫です。つまづきやすいポイント絶対的な単位と相対的な単位がある先ほどcmや、mmと同じとお話ししました。例えば、『クローゼットの横幅が2mだから、2m以内の収納ボックスを買わないといけないね』という感じで使っていくわけですが、CSSで使う単位には独特なものがあります。絶対的な単位こちらは日常生活で使う単位と一緒で、そのまま指定したサイズで表示されます。当たり前ですが、横幅1mの収納ボックスを横幅2mのクローゼットに入れても、収納ボックスの大きさは1mのままで変わりませんね。pxが絶対的な単位に当てはまります。相対的な単位CSSの世界では、横幅1mの収納ボックスを横幅2mのクローゼットに入れたら2mになった!みたいなことが起こります。どういうことかというと、CSSではこの収納ボックスは、クローゼットの100%の横幅です!というように、入れ物の大きさを基準にサイズを決める単位がほとんどです。これを踏まえて、px、%、vw、vh、em、remそれぞれの書き方を覚えていくとつまづきづらいと思います。pxの使い方ParentBox.parent { width : } .box { width : } pxは絶対的な単位です。親要素の大きさに関わらず、指定した数値で要素を表示します。上のエディターのparentのwidthを変更してみてください。boxの大きさが変化しないことがわかると思います。%の使い方ParentBox.parent { width : } .box { width : } %は相対的な単位です。親要素の何%の横幅で要素を表示します。上の例ではparentの横幅の50%の横幅で青いボックスを表示しています。エディターでboxのwidthを100%にしてみてください。parentの横幅と同じになることがわかると思います。また、boxに%で横幅を指定した状態でparentの横幅を変更すると、parentの大きさに合わせて青いボックスの大きさも変化していきます。vwの使い方ParentBox.parent { width : } .box { width : } vwは相対的な単位ですが、親要素ではなく画面サイズの横幅の何%で要素を表示します。上の例では30vwと指定しているため、画面サイズサイズの横幅の30%で青いボックスが表示されています。この単位の時はparentの横幅は影響を与えないので、parentの大きさを変更しても青いボックスの横幅が変わらないことがわかります。vwは画面サイズの横幅、vhは画面サイズの縦幅で指定するParentBox.parent { width : } .box { width : height : } 上の例では、青いボックスの縦横の大きさを、画面サイズの縦幅の10%に指定してあります。例えばwidthを100vw、heightを100vhとすると、画面サイズ目いっぱいに青いボックスを表示することになります。もちろんvhもparentの大きさの影響は受けないため、parentのサイズを変更しても青いボックスの大きさは変わりません。emの使い方ParentBox.parent { width : } .box { width : font-size : } emは相対的な単位ですが、親要素ではなくフォントサイズの何倍かで要素を表示します。上の例ではfont-sizeを16pxに指定しており、青いボックスの横幅を10emと指定しているため、16 10pxで青いボックスが表示されます。この単位の時はparentの横幅は影響を与えないので、parentの大きさを変更しても青いボックスの横幅が変わらないことがわかります。青いボックスにフォントサイズを指定しておらず、.parentにフォントサイズを指定している場合は、.parentのフォントサイズが青いボックスに適用されるため、.parentのフォントサイズ emの数値で要素が表示されます。ParentBox.parent { width : font-size : } .box { width : } remの使い方ParentBox.parent { width : font-size : } .box { width : font-size : } emは相対的な単位ですが、親要素ではなくWebサイトの基準のフォントサイズの何倍かで要素を表示します。Webサイトの基準のフォントサイズとは、htmlに設定されているフォントサイズのことを指します。htmlのデフォルトのフォントサイズは16pxとなっていますので、上の例では青いボックスの横幅は16 10pxで表示されます。各要素のフォントサイズの影響を受けないため、parent、boxのフォントサイズ、またはparentの横幅を変更しても、青いボックスの横幅が変わらないことがわかります。どの単位を使うべきかそれぞれの単位がどのような働きをするかを解説していきました。レイアウトに応じて適切な単位を使っていきましょう。単位を選ぶ基準をざっくりと解説していきます。基本的には相対的な単位を使う紹介した単位の中で、絶対的な単位はpxのみでしたが、基本的には相対的な単位で大きさを指定しましょう。相対的な単位を使う理由を解説します。柔軟なレイアウトが実現できるパソコンやスマートフォンによって画面のサイズが違うため、絶対的な単位で横幅を指定した時に画面からはみ出したり、小さすぎたりなどの問題が起こることがあります。相対的な単位を使うことで画面サイズに応じて要素のサイズが自動で変わるため、レイアウト崩れを起こしづらくなります。管理がしやすい絶対的な単位を使うと、一か所の要素のサイズを変更した際に他のレイアウトが崩れ、複数個所修正することになったりします。相対的な単位を使っていると、一か所の要素のサイズを変更すると、その子要素なども連動してサイズが修正されるため、変更箇所が少なくなることが多いです。絶対的な単位を使うケースpxを使ったほうが良い場合もあります。その例をご紹介します。高さを指定する場合パソコンは基本的には横長の画面、スマートフォンでは縦長の画面になっています。要素の高さを相対的な単位で指定した場合、パソコン、スマートフォンでそれぞれ見たときにレイアウトが大幅に変わってしまう場合があります。その為、Webサイトのヘッダーの高さなどを指定する際は、pxを使う選択も考えられます。最後まで読んでいただきありがとうございました!要素の大きさを指定する単位は種類も多く、それぞれ働きが複雑なため、反復して学習することが大切です!是非ブックマークして学習に役立ててみてください!質問や、こんなことを記事にしてほしい!というのがありましたらTwitterのコメント等で受け付けていますので、お気軽にどうぞ!ますみ - 愛知県在住の20代プログラマー - | @mashmy_98それでは次の投稿もお楽しみに!

2023年04月22日

Read More

CSSで角丸の作り方を実際にコードを書きながら覚えよう

こんにちは!エンジニアのますみです!本日は枠線の角を丸くすることのできる、border-radius属性の書き方を解説します!よく使うCSSの書き方ですので覚えておきましょう!この記事ではborder-radiusの基本的な使い方、応用した使い方をマスターすることができます。さらに実際にCSSをこのページ上で書くことができるので、プレビューを見ながら使い方を覚えることができます。是非、ブックマークして学習に役立てていただけたら幸いです。テーマ Webサイトデザインに必須のborder-radius属性の使い方をマスターできる内容 実際にスタイル属性を書くことが可能な記事なので、深く理解して使いこなすことができる内容目次 基本の角丸 値を2つ指定した場合 値を3つ指定した場合 値を4つ指定した場合 角ごとに分けてCSSを書く方法 正円を作る方法 複雑な角丸を指定する方法 border-radiusの基本的な仕組み border-radius属性のみで書く場合 角ごとに分けて書く場合それではさっそく見ていきましょう。基本の角丸サンプル.box { border : border-radius : } 上のようにborder-raduisに角丸のサイズを書くことで、丸みの帯びた四角形を作ることができます。borderとborder-radiusの値は編集可能なので、実際に値を変えてみながら使い方を覚えてみてください。指定した値が大きくなればなるほど滑らかな角になります。値を2つ指定した場合200px 200px.box { border : border-radius : } 2つの値を指定するとborder-radius : 左上と右下 右上と左下のように、対角線上の角に対して角丸の大きさを指定することができます。値を3つ指定した場合200px 200px.box { border : border-radius : } 3つの値を指定するとborder-radius : 左上右上と左下右下のように角丸の大きさを指定することができます。値を4つ指定した場合200px 200px.box { border : border-radius : } 3つの値を指定するとborder-radius : 左上右上右下 左下のように、左上から時計回りに角丸の大きさを指定することができます。角ごとに分けてCSSを書く方法200px 200px.box { border-top-left-radius : border-top-right-radius : border-bottom-right-radius : border-bottom-left-radius : } このように各角ごとに分けて角丸の大きさを指定することもできます。シンプルな角丸であればborder-radiusのみでよいかもしれませんが、複雑に値を指定する場合はこっちのほうがわかりやすいかもしれません。正円をつくる方法200px 200px.box { border : border-radius : } ボックスのサイズの半分の値をborder-radiusに指定すると正円を作ることができます。例のボックスのサイズは200pxの正方形なので、100pxと指定しても正円になります。複雑な角丸を指定する方法ぐにゃっとした複雑な図形を書くことにもborder-radiusを使います。少し仕組みがややこしいので基本的な仕組みから解説していきます。border-radiusの基本的な仕組み角丸をどのように指定しているかを細かく見てみましょう。これまでborder-radiusで指定していた長さは、各角丸の半径です。border-radiusで複雑な角丸を作る際には、この半径を横と縦に分けて指定することで実現できます。それでは早速具体的なやり方を見てみましょう。border-radius属性のみで書く場合200px 200px.box { border-radius : } 例のように / で区切って横の半径と縦の半径を指定します。/ の前は横の半径、 / の後は縦の半径となっています。border-radius: 横の半径/ 縦の半径また、 / の前も後ろも、先ほど基本の角丸で解説した通り 値が1つの場合はすべての角 値が2つの場合は左上と右下 右上と左下 値が3つの場合は左上右上と左下右下 値が4つの場合は左上右上右下 左下という順番で角丸が適用されます。角ごとに分けて書く場合200px 200px.box { border-top-left-radius : border-top-right-radius : border-bottom-right-radius : border-bottom-left-radius : } それぞれの属性に2つの値を指定することでborder-top-left-radius : 横の半径 縦の半径というように指定することができます。最後まで読んでいただきありがとうございました!border-radius属性をマスターするには反復して学習することが大切です!是非ブックマークして学習に役立ててみてください!質問や、こんなことを記事にしてほしい!というのがありましたらTwitterのコメント等で受け付けていますので、お気軽にどうぞ!ますみ - 愛知県在住の20代プログラマー - | @mashmy_98それでは次の投稿もお楽しみに!

2023年04月21日

Read More

【CSS入門】枠線の作り方を実際にコードを書きながら覚えよう

こんにちは!エンジニアのますみです!本日は枠線を指定することのできる、border属性の書き方を解説します!この記事では実際にCSSを書きながら枠線の使い方を覚えることができます!この記事はborder属性でできることを一通りまとめました。さらに実際にCSSをこのページ上で書くことができるので、プレビューを見ながら使い方を覚えることができます!是非、ブックマークして学習などに役立てていただけたら幸いです!テーマ border属性でできることを一通り覚えることができる内容 実際にスタイル属性を書くことが可能な記事なので、深く理解して使いこなすことができる内容この記事では、下のような黒い部分が編集可能になっていますので、実際にCSSを書きながらborder属性の使い方を覚えることができるようになっています!サンプル.box { border : } 10px solid #ffa500の部分が編集可能です。書き換えることで上のボックスの枠線を調節することができます。目次 基本の枠線 枠線を表示 枠線の太さを指定 枠線の色を指定 枠線を装飾する方法 点線にする 額縁のような枠にする 1 額縁のような枠にする 2 額縁のような枠にする 3 額縁のような枠にする 4 破線にする 二重線にする 角丸にする さらに複雑な枠線を指定する方法① | 辺ごとに指定する 辺ごとに細かく指定するサンプル さらに複雑な枠線を指定する方法②| 属性ごとに指定する 指定する値が一つの場合 指定する値が二つの場合 指定する値が三つの場合 指定する値が四つの場合それではさっそく見ていきましょう!基本の枠線枠線を表示サンプル.box { border : } 上のように書くことで枠線を表示することができます。solidの部分を消してみると枠線が消えることがわかります。枠線の太さを指定サンプル.box { border : } 上のように書くことで枠線の太さを指定することができます。10pxの部分を書き換えてみると、枠線の太さが変わることがわかります。枠線の色を指定サンプル.box { border : } 上のように書くことで枠線の色を指定することができます。#ffa500の部分を好きなカラーコードに書き換えてみると、枠線の色が変わることがわかります。枠線を装飾する方法点線にするサンプル.box { border : } 上のようにsolidと書いてあった部分をdottedにすると、点線の枠線を作ることができます。額縁のような枠にする 1サンプル.box { border : } 上のようにinsetと書くことで、額縁のようなデザインにすることができます。額縁のような枠にする 2サンプル.box { border : } 上のようにoutsetと書くことで、額縁のようなデザインにすることができます。insetと非常に似ていますが、色が濃いところと薄いところが逆になっています。額縁のような枠にする 3サンプル.box { border : } 上のようにgrooveと書くことで、insetよりも複雑なデザインにすることができます。額縁のような枠にする 4サンプル.box { border : } 上のようにridgeと書くことで、insetよりも複雑なデザインにすることができます。grooveと非常に似ていますが、色が濃いところと薄いところが逆になっています。破線にするサンプル.box { border : } 上のようにdashedと書くことで、破線の枠線を作ることができます。二重線にするサンプル.box { border : } 上のようにdoubleと書くことで、破線の枠線を作ることができます。角丸にするサンプル.box { border : border-radius : } 上のようにborder-radius属性を追加することで、角丸の枠線を作ることができます。指定した値が大きくなればなるほど滑らかな角になります。さらに複雑な枠線を指定する方法① | 辺ごとに指定するこれまでは.box { border: 枠線の太さ 枠線のタイプ 枠線の色;}borderという属性のみにプロパティを指定していましたが、辺ごとに指定することもできます。.box { border-top: 2px solid #ffa500; border-right: 2px solid #ffa500; border-bottom: 2px solid #ffa500; border-left: 2px solid #ffa500;}border-topが上辺、border-rightが右辺、border-bottomが下辺、border-leftが左辺です。このように書くことで、細かく値を指定することができます。辺ごとに細かく指定するサンプルサンプル.box { border-top : border-left : border-bottom : border-right : } 各プロパティの値を変えてみると、対応した辺の装飾が変化することがわかります。さらに複雑な枠線を指定する方法②| 属性ごとに指定するこれまでは.box { border: 枠線の太さ 枠線のタイプ 枠線の色;}のようにborder属性にすべてのプロパティを書き込んでいきましたが、下のようにそれぞれの値を別々に書くこともできます。.box { border-width: 2px; border-style: solid; border-color: #ffa500;}上のCSSはborder: 2px solid #ffa500;と書いた時と同じ働きをします。枠線の太さはborder-widthに、枠線のタイプはborder-styleに、枠線の色はborder-colorに書いていきます。行数は増えてしまいますが、こうすることでさらに複雑な枠線を指定することができます。指定する値が一つの場合サンプル.box { border-width : border-style : border-color : } 指定する値が一つの場合はすべての辺に値が適用されます。指定する値が二つの場合サンプル.box { border-width : border-style : border-color : } 二つの値を指定すると、一つ目の値が上下の辺、二つ目の値が左右の辺に適用されます。指定する値が三つの場合サンプル.box { border-width : border-style : border-color : } 三つの値を指定すると、一つ目の値が上辺、二つ目の値が下辺、三つ目の値が左右の辺に適用されます。指定する値が四つの場合サンプル.box { border-width : border-style : border-color : } 四つの値を指定すると、一つ目の値が上辺、二つ目の値が右辺、三つ目の値が下辺、四つ目の値が左辺のように、時計回りに順番に適用されます。本日はborder属性の書き方について解説しました!プログラミング学習は何度も繰り返して覚えていくことが大切です!是非ブックマークして学習に役立ててみてください!質問や、こんなことを記事にしてほしい!というのがありましたらTwitterのコメント等で受け付けていますので、お気軽にどうぞ!ますみ - 愛知県在住の20代プログラマー - | @mashmy_98それでは次の投稿もお楽しみに!

2023年04月21日

Read More

【コピペOK!】料理系サイト向けののニッチなCSSボタンサンプル集

こんにちは!エンジニアのますみです!ニッチなボタンサンプルも作ってみたくなりまして、最初に食べ物に関するサイトに使えそうなボタンのサンプル集を作ってみようと思います!サンプルで使用している画像はこちらのサイトのものを使用しています!https://icooon-mono.com/紹介するソースコードはコピペで自由に使っていただいて大丈夫です!なのですがTwitterのリプライとかで一言いただけると今後の励みになります!『使いました!』って言ってもらえたらすごく嬉しいので、よろしくお願いします!1. ホバーで湯気が出るアニメーション料理のレシピを扱うサイトで使うことをイメージしてみました!湯気のアニメーションは料理以外にもいろいろ使えます!レシピを見る div class="button" spanレシピを見る/span img src="./画像path" alt="" div class="steam"/div/div.button{ position: relative; display: flex; flex-direction: column; align-items: center; background-color: #f9a11b; padding: 1rem; border-radius: 0.4rem; cursor: pointer; overflow: hidden;}.button span{ font-weight: bold; color: white; text-align: center; margin-bottom: 1rem; transition: 0.3s;}.button:hover span{ opacity: 0;}.button img{ width: 3rem;}.steam { position: absolute; width: 3rem; height: 2rem; border-radius: 70% 0 33% 40% / 30% 0 54% 55%; background: rgba(255, 255, 255, 0.627); filter: blur(0.3rem); bottom: 3rem; opacity: 0;}.button:hover .steam{ animation: steam 2s ease-out infinite;}@keyframes steam { 0% { transform: translateY(0) scale(1, 1); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(-3rem) scale(1.2, 1.2); opacity: 0; }}2. 予約ボタンのサンプル来店予約フォームにリンクするボタンのイメージでデザインしました。画像を他のものに差し替えることでいろいろなサイトに使えます!ご予約はこちら div class="button" spanご予約はこちら/span img src="./画像path" alt=""/div.button{ position: relative; display: flex; align-items: center; background-color: #f9a11b; padding: 1rem; border-radius: 0.4rem; cursor: pointer; overflow: hidden;}.button span{ position: relative; color: white; font-weight: bold; margin-right: 0.4rem;}.button span::before{ content: ""; position: absolute; width: 0%; height: 0.1rem; bottom: 0; background-color: white; transition: 0.3s;}.button:hover span::before{ width: 100%;}.button img{ width: 1.2rem; height: 1.2rem; transition: 0.3s;}.button:hover img{ transform: rotate(360deg);}3. 上から料理が降ってくるボタンホバーすると上から料理の画像が降ってくるボタンのサンプルです!アニメーションによる変化が大きいので目に留まりやすくなります!ですが、ホバー時には文字が消えてしまうため、押し間違えてはまずいボタン(支払い確定)のデザインをする際は何のボタンなのか常にわかるようにデザインすることが大事です!ご予約はこちら div class="button" spanご予約はこちら/span img src="./画像path" alt=""/div.button{ position: relative; display: flex; justify-content: center; align-items: center; background-color: #f9a11b; padding: 1rem; border-radius: 0.4rem; cursor: pointer; overflow: hidden;}.button span{ position: relative; color: white; font-weight: bold; transition: 0.3s;}.button:hover span{ opacity: 0;}.button img{ position: absolute; transform: translateY(-3rem); height: 2rem; transition: 0.3s;}.button:hover img{ transition-delay: 0.3s; transform: translateY(0rem);}最後まで見ていただきありがとうございます!こんなニッチなテーマでサンプルを作ってほしい!等ありましたらTwitterのコメントなどで教えてください!それでは次の記事もお楽しみに!

2023年04月20日

Read More

超便利なJavascriptの配列処理まとめ【初心者向け】

こんにちは!エンジニアのますみです!本日は超便利なJavascriptの配列処理について書いていきます。Javascriptの配列にはすごく簡単にやりたい処理ができるような書き方がたくさんあるんです!目次 map | 全ての値に対して処理を行う filter | 条件に合うものを抽出する find | 条件に一致する一つの値を見つける every | 配列の中身がすべて条件に当てはまるか reduce | 配列の値の合計などを求める まとめそれでは早速超便利なJavascriptの配列処理を見ていきましょう!map | 全ての値に対して処理を行うconst prices = [100, 200, 300];const taxIncludePrices = prices.map(p = p * 1.1);console.log(taxIncludePrices);配列の中身すべてに処理を行う際はmapを使うことができます。配列名.map(配列の値 =処理)と書くことができます。上の例では、価格をまとめた配列の値すべての消費税込み価格を計算し、taxIncludePricesに定義しています。もっと複雑な処理を行いたい場合はconst prices = [100, 200, 300];const taxIncludePrices = prices.map(p = { // 複雑な処理 return p * 1.1;});console.log(taxIncludePrices);このように{}で処理を囲うことで、数行にわたる処理を書くことができます。この書き方をする際は、returnを使わないとundefinedがtaxIncludePricesに代入されてしまうため、注意してください。さらに、今配列の何番目の要素かを示すインデックスを使いたい場合にはconst prices = [100, 200, 300];const taxIncludePrices = prices.map((p, i) = { console.log(i + 1 + "個目の価格を処理しています。") return p * 1.1;});console.log(taxIncludePrices);このように配列名.map((配列の値,インデックス) = 処理)と書くことができます。このように配列内の値すべてに共通した処理を行いたいときはmap関数を使うとよいです。filter | 条件に合うものを抽出するconst ages = [19, 29, 13, 44];const minors = ages.filter(a = a 20);console.log(minors);配列から条件に当てはまる値のみに絞り込みをする際にはfilterを使うことができます。配列名.filter(配列の値 = 条件)と書くことができます。上の例では、年齢をまとめた配列の中から、未成年のみをminorsに定義しています。もっと複雑な処理を行いたい場合はconst ages = [19, 29, 13, 44];const minors = ages.filter(a = { // 複雑な処理 return a 20;});console.log(minors);このように{}で処理を囲うことで、数行にわたる処理を書くことができます。この書き方をする際は、returnを使わないとundefinedがminorsに代入されてしまうため、注意してください。さらに、今配列の何番目の要素かを示すインデックスを使いたい場合にはconst ages = [19, 29, 13, 44];const minors = ages.filter((a, i) = { if(i !== 0){ return a 20; };});console.log(minors);このように配列名.filter((配列の値,インデックス) = 処理)と書くことができます。このように配列内の値から絞り込みを行いたいときは、filter関数を使うとよいです。find | 条件に一致する一つの値を見つけるconst ages = [19, 29, 13, 44];const minor = ages.find(a = a === 19);console.log(minor);配列から条件に一致する値を見つけるにはfindを使うことができます。配列名.find(配列の値 = 条件)と書くことができます。上の例では、年齢をまとめた配列の中から、19のみをminorに定義しています。もっと複雑な処理を行いたい場合はconst ages = [19, 29, 13, 44];const minor = ages.find(a = { // 複雑な処理 return a === 19;});console.log(minor);このように{}で処理を囲うことで、数行にわたる処理を書くことができます。この書き方をする際は、returnを使わないとundefinedがminorに代入されてしまうため、注意してください。さらに、今配列の何番目の要素かを示すインデックスを使いたい場合にはconst ages = [19, 29, 13, 44];const minor = ages.find((a, i) = { if(i !== 0){ return a 19; };});console.log(minor);このように配列名.find((配列の値,インデックス) = 処理)と書くことができます。このように配列内の値から絞り込みを行いたいときは、find関数を使うとよいです。every | 配列の中身がすべて条件に当てはまるかconst ages = [19, 29, 13, 44];const isMinor = ages.every(a = a 20);console.log(isMinor); // false配列の値がすべて条件に一致するかを検証するにはeveryを使うことができます。配列名.every(配列の値 = 条件)と書くことができます。上の例では、年齢をまとめた配列が、すべて未成年かどうかを検証しています。もっと複雑な処理を行いたい場合はconst ages = [19, 29, 13, 44];const minor = ages.every(a = { // 複雑な処理 return a 20;});console.log(minor);このように{}で処理を囲うことで、数行にわたる処理を書くことができます。この書き方をする際は、returnを使わないと強制的にfalseがminorに代入されてしまうため、注意してください。さらに、今配列の何番目の要素かを示すインデックスを使いたい場合にはconst ages = [19, 29, 13, 44];const minor = ages.find((a, i) = { if(i !== 0){ return a 19; };});console.log(minor);このように配列名.every((配列の値,インデックス) = 処理)と書くことができます。このように配列内の値から絞り込みを行いたいときは、find関数を使うとよいです。reduce | 配列の値の合計などを求めるconst prices = [100, 200, 300];const total = prices.reduce((sum, p) = sum + p);console.log(total);配列の中身すべての合計などを求めるはreduceを使うことができます。配列名.map((合計を格納しておく変数, 配列の値)= 処理)と書くことができます。上の例では、価格をすべて合計した値をtotalに定義しています。もっと複雑な処理を行いたい場合はconst prices = [100, 200, 300];const total = prices.reduce((sum, p) = { // 複雑な処理 return sum + p;});console.log(total);このように{}で処理を囲うことで、数行にわたる処理を書くことができます。この書き方をする際は、returnを使わないとundefinedがsumに代入されてしまうため、注意してください。さらに、今配列の何番目の要素かを示すインデックスを使いたい場合にはconst prices = [100, 200, 300];const total = prices.reduce((sum, p, i) = { console.log(i + "個目の値を処理しています。"); // 複雑な処理 return sum + p;});console.log(total);このように配列名.reduce((配列の値,インデックス) = 処理)と書くことができます。このように配列内の値の合計などを求めるときにはreduce関数を使うとよいです。まとめ今回は超便利なJavascriptの配列処理についてお話ししました!質問や、こんなことを記事にしてほしい!というのがありましたらTwitterのコメント等で受け付けていますので、お気軽にどうぞ!ますみ - 愛知県在住の20代プログラマー - | @mashmy_98それでは次の投稿もお楽しみに!

2023年04月20日

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

【サンプルあり】コピペOK!丸を使ったボタンのホバーアニメーション

こんにちは!エンジニアのますみです!先日は四角いデザインの背景色が濃いときに使いたいボタンデザインを紹介しましたので、今回は丸をテーマにやってみたいと思います!丸いボタンはアニメーションの選択肢が増えるメリットがあるので、思わず目を引くアニメーションでクリック率を上げることができるのがいいですね!ただ、配置をしっかり考えないとおさまりが悪くなってしまうので、サイト全体のレイアウトに合うように四角いボタンと使い分けてみてください!紹介するソースコードはコピペで自由に使っていただいて大丈夫です!なのですがTwitterのリプライとかで一言いただけると今後の励みになります!『使いました!』って言ってもらえたらすごく嬉しいので、よろしくお願いします!1. くるっと回転丸いボタンのメリットは回転させても違和感が少ないところですね!transform: rotate(360deg)として、時計回りに一回転するアニメーションです!BUTTON.button { width: 6rem; height: 6rem; display: flex; justify-content: center; align-items: center; border: 1px solid gray; border-radius: 3rem; background-color: white; color: #ff7473; font-weight: bold; cursor: pointer; transition: 0.6s;}.button:hover { transform: rotate(360deg);}2. ころころ転がる矢印矢印がころころと、下線を引きながら転がっていくアニメーションです!矢印を画像等に置き換えたりして、好みの矢印のデザインにしてもいいですね!BUTTON.button { position: relative; display: flex; align-items: center; color: white; cursor: pointer;}.button span { margin-left: 1.6rem;}.button::before { content: "→"; position: absolute; left: -10%; display: flex; justify-content: center; align-items: center; width: 1.6rem; height: 1.6rem; border-radius: 0.8rem; color: #ffc952; background-color: white; transition-duration: 1.5s;}.button:hover::before { transition-duration: 1s; transform: rotate(720deg); left: 110%;}.button::after { content: ""; position: absolute; left: 1.6rem; bottom: 0; width: 0; height: 2px; background-color: white; transition-duration: 1s; transition-delay: 0s;}.button:hover::after { width: calc(100% - 1.6rem); transition-delay: 0.1s;}3. 強調したい箇所に使いたい目を引くアニメーションぶわっと広がるように見えるアニメーションです!要素の大きさ自体は変わっていないので、周りの要素に影響を与えないのが◎主張が激しいので使いすぎると目がチカチカしますからほどほどに~BUTTON BUTTON BUTTON.button { width: 6rem; height: 6rem; background-color: white; border-radius: 50%; color: #47b8e0; position: relative; display: flex; justify-content: center; align-items: center; overflow: hidden; cursor: pointer; font-weight: bold;}.button .inner-1,.button .inner-2 { position: absolute; overflow: hidden; display: flex; justify-content: center; align-items: center; font-weight: bold;}.button .inner-1 { width: 0%; height: 0%; background-color: #47b8e0; border-radius: 50%; color: white; z-index: 10; transition: 0.3s;}.button .inner-2 { width: 0%; height: 0%; background-color: white; border-radius: 50%; color: #47b8e0; z-index: 20; transition-delay: 0.15s; transition-duration: 0.3s;}.button:hover .inner-1,.button:hover .inner-2 { width: 100%; height: 100%;}4. 角から色が変わるエフェクト四角いパターンはこちらの記事で紹介しましたが、今回は丸のバージョンです!円の中心を角に合わせないとおかしなことになってしまうので、アニメーションで円を拡大しながら中央を角に合わせる工夫が必要です!角に丸がちょこっとあるのがかわいくてお気に入りのデザインです!BUTTON.button{ padding: 0.4rem 2rem; color: white; font-weight: bold; border: 1px solid white; position: relative; cursor: pointer; z-index: 1; transition: 0.4s; overflow: hidden;}.button:hover{ color: #34314c;}.button::before{ content: ""; width: 2rem; height: 2rem; left: -1rem; top: -1rem; background-color: white; position: absolute; z-index: -1; transition: 0.4s; border-radius: 50%;}.button:hover::before{ width: 12rem; height: 12rem; left: -6rem; top: -6rem;}.button::after{ content: ""; width: 2rem; height: 2rem; right: -1rem; bottom: -1rem; background-color: white; position: absolute; z-index: -1; transition: 0.4s; border-radius: 50%;}.button:hover::after{ width: 12rem; height: 12rem; right: -6rem; bottom: -6rem;}最後まで見ていただきありがとうございます!丸い形のメリットを生かしたアニメーションを考えてみました!CSSについてこんなことを記事にしてほしい!等ありましたら、Twitterのコメントなどで教えてください!それでは次の記事もお楽しみに!

2023年04月19日

Read More

わたしが未経験からエンジニアになってよかったこと

こんにちは!エンジニアのますみです!私はエンジニアとは全く関係のない仕事をしていましたが、コロナ禍の影響でほぼ無職になったことがあります。それからプログラミングの勉強を0から始め、未経験からエンジニアに採用していただくことができました!エンジニアになってから約2年ほどになりますが、私が『エンジニアになってよかった!』と思ったことをお話ししてみようと思います!読んでくださっている皆様へこの記事では私がエンジニアになって生活にどんな変化があったかお話ししていきます。これからプログラミングの勉強を始めてみようかな...?もうプログラミングの勉強をしているけど、本当に余裕のある生活ができるのかな...?と思っている方は、この記事を読むことで、勉強した先にはどんな未来があるのかイメージしやすくなると思います。私はエンタメ系の業界で仕事をしていましたが、コロナ禍の影響で仕事がほぼ無くなってしまうという経験をしました。自分の時間も欲しいし、安定した仕事がしたい!と思って選んだ仕事がエンジニアでした。今ではエンジニアという選択をして本当によかったと思います!それでは私の生活にどんな変化があったかお話ししていきます。1. エンジニアになる前の生活まずは私がエンジニアになる前は、どんな生活をしていたのかをお話ししていきます。私はエンタメ系の専門学校を卒業してから、そのままエンタメ系の業界で働き始めました。当時は仕事の開始時間、就業時間もばらばらで、一日10時間以上働くこともよくありました。それでも大好きな業界での仕事だったので苦ではありませんでしたが、エンタメの世界は不安定で厳しい業界ですから先の不安はずっと感じていました。それでも私は好きなことを好きなだけやりたい!という人間ですので、不安定な業界でも自分の好きなことができることが魅力で、エンタメ業界での仕事を続けていました。そして、コロナ禍になってしまい、エンタメ業界は多大な影響を受けます。私がやっていた仕事は、エンタメ業界の中でも特に大打撃を受けたジャンルの仕事でしたから、そのままほぼ無職になるという結果を迎えます。無職時代、私は何か手に職をつけようと思い、プログラミングの勉強を始めました。私がエンジニアを目指した理由手に職をつけようと思ったタイミングで、勉強することの選択肢はいろいろありました。私がなぜプログラミングを選んだのかと言うと 安定している リモートワークで自分の時間がしっかりとれる可能性があるからでした。先ほどもお話ししたように、私は好きなことを好きなだけやりたい人間ですので、自分の時間がとれることは最優先事項でした。2. エンジニアになってからの生活必死に勉強をして、自分でWebサイトや簡単なシステムを組めるようになってきた私は、面接をうけて未経験からエンジニアになることができました。私が目指していた生活は、収入が安定している、自分の時間がしっかりとれることです。収入は増え、生活リズムが安定した私はエンジニアになった結果、残業もほぼなく、収入も増やすことができました。エンジニアはスキルがどんどん身についていく職業なので、さらに収入アップも見込める業種です。私は働き出してからまだ2年ほどですが、既に4回ほどお給料を上げていただくことができました。リモートワークで自分の時間が増えたエンジニアになってから、最初は出社して仕事をしていましたが、数か月働いたところでほぼフルリモートで働くことができるようになりました。会社までの往復の時間が無くなり自分の時間が増え、休憩中も家にいるのでスキマ時間を好きなことに使うことができています。といった感じで、私はエンジニアになって収入が増えた既に数回昇給し、やりがいが感じられるリモートワークで自分の時間がとれて好きなことができるこんな感じの生活の変化がありました。3. エンジニアになって大変だったことデメリットも知りたい方もいらっしゃると思うので、私が感じた大変だったこともお伝えしておこうと思います。学習し続けなければいけないプログラミングの学習は、基礎文法を完璧にしたらOK!というわけではありません。デジタル分野の発展スピードはとても速く、世間のニーズもどんどん変わっていくため、エンジニアに求められる技術も変化していきます。そのため学習は採用されてからも続きます。ですが、しっかり頑張れば評価されやすい業種だと思いますし、転職でキャリアアップもしやすい業種ですから、やりがいをもって学習に取り組むことができるのでこの辺は私は特に気になっていません。4. まとめ私がエンジニアになってよかったと思ったことは 収入が増えた 既に数回昇給し、やりがいが感じられる リモートワークで自分の時間がとれて好きなことができるでした。学習することはたくさんあるのでそこは大変なところですが、昇給やキャリアアップが見込める業界ですのでやりがいをもって取り組めています。最後まで読んでいただきありがとうございました!質問や、こんなことを記事にしてほしい!というのがありましたらTwitterのコメント等で受け付けていますので、お気軽にどうぞ!ますみ - 愛知県在住の20代プログラマー - | @mashmy_98それでは次の投稿もお楽しみに!

2023年04月18日

Read More

ますみ

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

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

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

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

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


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

ますみ

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

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

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

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