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

ますみのブログ

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

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

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

2023年04月29日

Read More

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

立体的に見える不思議なボタン【書いてわかる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

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

こんにちは!エンジニアのますみです!本日はハンバーガーボタンと呼ばれる三本線のボタンの作り方を解説します。スマートフォンで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

CSSで半円を作る方法【書いてわかるCSS】

こんにちは!エンジニアのますみです!本日はCSSで半円を作る方法を解説します。たった4行のスタイルを書くだけでできちゃいます!この記事では実際にCSSをこのページ上で書くことができるので、プレビューを見ながら使い方を覚えることができます!是非、ブックマークして学習などに役立てていただけたら幸いです!テーマ CSSで半円を作る方法をマスターできる この記事上でプレビューを見ながらCSSを書くことで、CSSの仕組みを深く理解できる目次 サンプル 半円を作る手順 1. 辺の長さが2対1の長方形を作る 2. 角を丸くするborder-radiusを追加する 3. border-radiusを調整して半円を作る 覚えておきたい%(パーセント)を使った書き方 %(パーセント)を使うと楕円の半円が作れる 半円の方向を変える 下向きの半円 右向きの半円 左向きの半円それではさっそく見ていきましょうサンプル.circle { width : height : background-color : border-radius : } このような半円を作っていきます。この記事では上向き、下向き、右向き、左向きすべての書き方を解説します。半円を作る手順HTMLはこのようにしてください。div class="circle"/divクラスにcircleを設定した要素を半円にしていきます。1. 辺の長さが2対1の長方形を作る.circle { width : height : background-color : } まずはwidthとheightを調節して、辺の長さが2対1の長方形を作ります。背景色(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に4つの数値を設定します。長方形の長辺と同じ長さのサイズを、1つ目、2つ目に指定し、後の値は0を指定してください。border-radius: 長辺の長さ長辺の長さ 0 0border-radiusに指定した4つの数値はborder-radius: 左上の角の丸さ右上の角の丸さ右下の角の丸さ左下の角の丸さというように左上の角から時計回りで丸くする角が割り振られており、上の例では左上、右上の角を目いっぱい丸くしています。つまり上のエディターでborder-radius: 0 0長辺の長さ長辺の長さこのようにすると右下、左下の角が目いっぱい丸くなり、下向きの半円が作れます。エディターをborder-radius: 0 0 100px 100pxと編集してみると、下向きの半円が作れるはずです。覚えておきたい%(パーセント)を使った書き方.circle { width : height : background-color : border-radius : } 上のように書いても上向きの半円を作れます。border-radiusは/(スラッシュ)で値を区切るとさらに細かく角丸を調整できます。詳しく知りたい方はこちらの記事を読んでみてください。今回は細かくは割愛しますがborder-radius: 左上の角の丸さ右上の角の丸さ右下の角の丸さ左下の角の丸さ /左上の角の丸さ右上の角の丸さ右下の角の丸さ左下の角の丸さというように/(スラッシュ)の前後で左上の角から時計回りに丸くする角が割り振られていることは一緒です。/(スラッシュ)の前の丸くしたい角には50%、/(スラッシュ)の後の丸くしたい角には100%を指定すると、半円を作ることができます。%(パーセント)を使うと楕円の半円が作れるpx(ピクセル)を使った場合、2対1の長方形ではない時には、このようにかまぼこ型になります。.circle { width : height : background-color : border-radius : } 上の例では幅を100px、高さを75pxに指定しており、1対2の長方形ではないため半円にはなりません。.circle { width : height : background-color : border-radius : } %(パーセント)を使うとこのように楕円の半円が作れます。必要になったときに使えるように覚えておくか、この記事をブックマークしておきましょう。半円の方向を変える長方形の向き、丸くする角を調整することで様々な向きの半円を作ることができます。下向きの半円.circle { width : height : background-color : border-radius : } 2対1の横長の長方形を作りborder-radius: 0 0 長辺の長さ長辺の長さborder-radiusをこのように設定すると下向きの半円を作ることができます。右向きの半円.circle { width : height : background-color : border-radius : } 1対2の横長の長方形を作りborder-radius: 0 長辺の長さ長辺の長さ0 border-radiusをこのように設定すると右向きの半円を作ることができます。左向きの半円.circle { width : height : background-color : border-radius : } 1対2の横長の長方形を作りborder-radius:長辺の長さ0 0長辺の長さborder-radiusをこのように設定すると左向きの半円を作ることができます。最後まで読んでいただきありがとうございました!今更ですが、角丸の向きってどこを基準にするのが正解なんでしょうね...丸いほう?平らなほう?プログラミング学習は反復して覚えていくことが大切です!是非ブックマークして学習に役立ててみてください!質問や、こんなことを記事にしてほしい!というのがありましたらTwitterのコメント等で受け付けていますので、お気軽にどうぞ!ますみ - 愛知県在住の20代プログラマー - | @mashmy_98それでは次の投稿もお楽しみに!

2023年04月26日

Read More

Laravelのページネーションを自分でデザインする

こんにちは!エンジニアのますみです!本日はLaravelのページネーションを自分でデザイン、カスタマイズする方法を解説します!目次 まずは普通に表示 Viewテンプレートを変更する アプリ全体のページネーション用Viewテンプレートを変更する 自作のページネーション用Viewテンプレートを編集する テンプレートを自分でデザインする際に重要なプロパティ一覧 $paginator-hasPages() $paginator-onFirstPage() $paginator-currentPage() $paginator-lastPage() $paginator-perPage() $paginator-total() $paginator-count() $paginator-firstItem() $paginator-lastItem() $paginator-hasMorePages() $paginator-nextPageUrl() $paginator-previousPageUrl() デフォルトのテンプレートをアレンジして使うまずは普通に表示div {{ $collection-paginate(24)-links() }}/divLaravelはデフォルトでtailwindcssのテンプレートを使用しています。とりあえず表示させたいのであればCDNをヘッダーに追加して確認してみてください。https://tailwindcss.com/head script src="https://cdn.tailwindcss.com"/script/headこんな感じで表示されたらOKです。Viewテンプレートを変更するlinks()のかっこの中にViewテンプレートのパスを指定します。resources/views/components/paginate.blade.phpにテンプレートを作成した場合はcomponents.paginateをかっこの中に書きます。div {{ $collection-paginate(24)-links('components.paginate') }}/divこれでページネーションのテンプレートが指定したbladeファイルに置き換わります。アプリ全体のページネーション用Viewテンプレートを変更する上の書き方は、bladeファイルごとにページネーション用Viewテンプレートを指定できます。もしページごとにページネーションのテンプレートを変える必要がなく、統一してもよいのであれば、app/Providers/AppServicePrivider.phpを編集してアプリ全体のページネーション用Viewテンプレートを変更しておきましょう。app/Providers/AppServicePrivider.php?phpnamespace App\Providers;use Illuminate\Pagination\Paginator; // 追加use Illuminate\Support\ServiceProvider;class AppServiceProvider extends ServiceProvider{ /** * Register any application services. * * @return void */ public function register() { // } /** * Bootstrap any application services. * * @return void */ public function boot() { Paginator::defaultView('components.paginate'); // 追加 }}自作のページネーション用Viewテンプレートを編集するViewテンプレートには、ページ送りに関する情報が$paginaterに格納されて送られます。blade上で@dump($paginator)とするとプロパティを見ることができます。テンプレートを自分でデザインする際に重要なプロパティを解説します。テンプレートを自分でデザインする際に重要なプロパティ一覧$paginator-hasPages()コレクションの要素数がpaginate(数値)の数値以上あり、ページ送りをする必要があるかをbooleanで返します。基本的には1ページ目にすべてのデータを表示できたらページネーションボタンを表示する必要はないため、ページネーションボタンを表示するかどうかを判定するのに使えます。使用例@if ($paginator-hasPages()) {{-- ここにページネーションボタンを作成 --}}@endif$paginator-onFirstPage()現在のページが最初のページかどうかをbooleanで返します。最初のページにいる場合は、前のページのリンクを無効にする必要があるためこのプロパティを使用して判定することができます。使用例@if ($paginator-onFirstPage()) span戻る/span@else a href="{{ $paginator-previousPageUrl() }}"戻る/a@endif$paginator-currentPage()現在のページの番号を返します。使用例span{{ $paginator-currentPage() }}ページ目/span$paginator-lastPage()最後のページの番号を返します。使用例span{{$paginator-lastPage()}}ページ中{{ $paginator-currentPage() }}ページ目です/span$paginator-perPage()1ページあたりの表示件数を返します。使用例span{{$paginator-perPage()}}件ずつ表示/span$paginator-total()コレクションの総数を返します。使用例span全{{$paginator-total()}}件/span$paginator-count()現在のページに表示される要素数を返します。使用例span{{$paginator-count()}}件表示/span$paginator-firstItem()現在のページの最初の要素の番号を返します。使用例span{{$paginator-firstItem()}}~{{ $paginator-lastItem() }}を表示しています/span$paginator-lastItem()現在のページの最後の要素の番号を返します。使用例span{{$paginator-firstItem()}}~{{ $paginator-lastItem() }}を表示しています/span$paginator-hasMorePages()現在のページが最後のページではない場合、つまり次のページがある場合にtrueを返します。最後のページにいる場合は、次のページのリンクを無効にする必要があるためこのプロパティを使用して判定することができます。使用例@if($paginator-hasMorePage()) ​a href="{{ $paginator-nextPageUrl() }}"次へ/a@endif$paginator-nextPageUrl()次のページのURLを返します。使用例​a href="{{ $paginator-nextPageUrl() }}"次へ/a$paginator-previousPageUrl()前のページのURLを返します。使用例 a href="{{ $paginator-previousPageUrl() }}"戻る/aデフォルトのテンプレートをアレンジして使うphp artisan vendor:publish --tag=laravel-paginationこのコマンドを実行すると、resources/views/vendor/pagination/にLaravelのデフォルトのテンプレートが作成されます。resources/views/vendor/pagination/ default.blade.php simple-default.blade.php bootstrap-5.blade.php simple-bootstrap-5.blade.php bootstrap-4.blade.php simple-bootstrap-4.blade.php tailwind.blade.php simple-tailwind.blade.php semantic-ui.blade.php bulma.blade.php生成されたテンプレートは、既にページ数に応じたボタンの無効化判定などがされており、これを元にアレンジして使うのもおすすめです。最後まで読んでいただきありがとうございました!質問や、こんなことを記事にしてほしい!というのがありましたらTwitterのコメント等で受け付けていますので、お気軽にどうぞ!ますみ - 愛知県在住の20代プログラマー - | @mashmy_98それでは次の投稿もお楽しみに!

2023年04月25日

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

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入門】書いて覚える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

【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で角丸の作り方を実際にコードを書きながら覚えよう

こんにちは!エンジニアのますみです!本日は枠線の角を丸くすることのできる、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入門】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入門】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

簡単に管理画面を作れる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

ますみ

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

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

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

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

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


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

ますみ

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

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

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

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