レンタルサーバー選びで大切な『SSH』について解説! - ますみのブログ

ますみのブログ

パソコンとかプログラミングに関するあれこれ発信してます
レンタルサーバー選びで大切な『SSH』について解説!のサムネイル

レンタルサーバー選びで大切な『SSH』について解説!

2023年05月04日

このエントリーをはてなブックマークに追加

こんにちは!ますみです!

 

作成したホームページを公開しようと思ってレンタルサーバーを選んでいる時に、『SSH』という言葉をみたことがありませんか?

 

あなたが今プログラミングの学習中で、これからどんどん高度なWebページを作りたいと思っているのなら、SSHが使えるかどうかはレンタルサーバー選びで非常に重要なポイントになります。

\ SSHが使えるおススメレンタルサーバー /

今ならお試し10日間無料!

 

SSHが使えないと高度なWebページを公開するのは難しい理由は?

 

SSHとはコンピューターネットワーク上で安全に通信するための仕組みです。

 

多くのレンタルサーバーでは簡単にファイルをアップロードできる機能が備わっています。

例えば当サイトで利用しているエックスサーバーではこのような画面からHTMLやCSS、画像などをアップロードすることができます。

 

このように特別なツールを使わなくても簡単にホームページやポートフォリオの公開は可能です。

 

SSHを使用してもファイルのアップロードをすることができます。

この場合、ターミナルと呼ばれるツールを利用してレンタルサーバーにアクセスします。

ターミナル

 

ターミナルでは、任意の文字(コマンド)を入力することでコンピュータを操作することができます。

SSHでファイルをアップロードする手順は以下のようになります

  • ① ターミナルにパスワードなどを入力してレンタルサーバーにアクセスする
  • ② ファイルをアップロードするコマンドを入力(Githubからpullする等)

 

さて、何故わざわざこんなことをする必要があるのか?

高度なWebサイトはレンタルサーバーのファイルアップロード機能では何故難しいのかを解説します。

 

ファイルアップロード機能だけでは高度なWebページはアップロードできない

一応、絶対に不可能なわけではありません。ただ、非常に手間がかかる作業になります。

更にWebページは一度作って終わり、というパターンはほぼ無く、機能を追加するたびにアップロードをする必要があります。

何故非常に手間がかかるのかを詳しく見てみましょう

 

高度なWebページは想像以上にファイル数が多い

例えば、当サイトはシンプルなブログサイトで、ページ数もそこまで多くないです。

 

当サイトは大まかに以下のような構成になっています

  • トップページ
  • ブログ一覧ページ
  • ブログページ
  • ブログ検索ページ

主要な部分だけ言えばこの4つのページです。

ですが、皆さんの目に見えない部分では

  • 管理画面トップページ
  • 管理画面のブログ一覧ページ
  • 管理画面のブログ編集ページ

などのページもあります。

 

更に、編集したブログを保存する処理を行うファイル、保存されたブログをロードするファイル、管理画面にログインするページ、ログイン処理等、処理を行うためのファイルも必要ですね。

少なく見積もっても100以上のファイルで当サイトは動いています。

 

このように、データを保存、読み込む機能のあるWebページというだけでも膨大なファイル量になります。

それらをいちいちアップロードするのは手間がかかりますし、Webページを編集して更新する際にもまた同じことを行わなければいけません。

 

レンタルサーバー備え付けのファイルアップロード機能は性能に限界がある

レンタルサーバーのファイルアップロード機能はおまけみたいなもので、負荷の強い処理を行うことは厳しいです。

一度に100以上のファイルをアップロードしようとすれば途中で止まってしまうこともよくあるでしょう。

HTMLやCSSファイルが10個くらいある程度なら問題ないと思いますが、長い目で見るとレンタルサーバーのファイルアップロード機能のみではきついものがあります。

 

使えないプログラムが出てくる

少し難しい話になりますが、高度なWebページを制作する時にはフレームワークと呼ばれるものや、コンパイラといったものを扱う機会があります。

これらは複雑なWebページの編集を簡単なものにしてくれるため、高度なシステムを作る上では欠かせないものです。

 

しかし、フレームワークやコンパイラを利用するにはターミナルでコマンドを入力して実行する必要があり、SSHが使えないレンタルサーバーでは実質利用できません。

そのため、どんどん高度なWebページを作れるようになって公開したいという方は、SSHが使えるレンタルサーバーを選んでおくことは必須になってきます。

 

SSH以外にも確認しておくべきポイント!

高度なWebサイトを作る上で欠かせないポイントとしてデータベースが利用できるかも見ておきたいポイントです。

データベースはデータの保存、読み込みをする為の機能で、これが無いと作れないWebページがたくさんあります。

 

データベース無しでは作れないWebページ、機能

  • ブログ
  • SNS
  • ログイン機能
  • コメント機能
  • いいね機能
  • オンラインショップ
  • 掲示板
  • チャット

 

他にもたくさんあると思いますが、データベース無しでは作れないWebページ、機能はこんな感じで結構たくさんあります。

データベースの扱いは現場でも必須になってくる為、勉強のためにもデータベースが使えるレンタルサーバーを選ぶことをおすすめします。

 

SSHが使えるおすすめのレンタルサーバーは?

SSHが使える代表的なレンタルサーバーとして、ロリポップエックスサーバーがあります。

 

SSHが使える代表的なレンタルサーバー

 

それぞれプランによってはSSH、データベースの利用に制限がありますので見ていきましょう。

 

ロリポップ

プラン
料金(月)
SSH
データベース
エコノミー
99円~
×
×
ライト
220円~
×
ベーシック
550円~
エンタープライズ
2,200円~

 

ロリポップではSSHとデータベースが利用できるプランはベーシックエンタープライズになります。

最近プランを改定し、初期費用0円ですべてのプランを利用できます。

また、10日間無料で利用することができるため、とりあえずSSHを触ってみよう!といったこともできます。

 

今ならお試し10日間無料!

 

 

Xserver

プラン
料金(月)
データベース
SSH
スタンダード
990円~
プレミアム
1,980円~
ビジネス
3,960円~

 

XserverではすべてのプランでSSH、データベースが利用可能です。

当サイトもXserverを利用しています。

10日間無料で使えるため、こちらも試しに登録して使ってみるといったことが可能です。

 

さらに、※現在利用料金最大35%キャッシュバックキャンペーン中のため、この期間中は実質下の料金になります。

※ブログ執筆時

 

 

プラン
料金(月)
データベース
SSH
スタンダード
990円~

【実質643円~】

プレミアム
1,980円~

【実質1,287円】

ビジネス
3,960円~

【実質2,574円】

 

今ならお試し10日間無料!

おすすめはどっち?

私のおすすめはエックスサーバーです。

SSHを使ってWebサイトをアップロード、セットアップする際に、エックスサーバーには最初から使いやすい機能が備わっていました。

その為、とても簡単に高度なWebサイトを公開することが可能です。

 

SSHは間違えるとWebサイトが再起不能になることもあるため、始めから使いやすくセットアップされているのは非常に嬉しいポイントでした。

料金はロリポップと比べて高めですが、このような部分で価値のあるレンタルサーバーだと思います。

 

プログラミングを学習している方であれば、すぐに公開できるWebサイトが無くても、レンタルサーバーの操作のやり方をあらかじめ覚えておけば完成したホームページ、ポートフォリオをすぐに公開できます。

 

また、実際に公開されているWebサイトを運用することで得られるスキルは非常に多いです。

現場では公開中のサービスにバグが発生したり、データベースのデータを誤って消してしまうと大変なことになりますが、今のうちに公開されているWebサイトを扱う緊張感、注意しないといけないポイントを覚えていくこともできます。

10日間無料で利用できますし、料金も月1,000円くらいで沢山のスキルを覚えていくことができるため、プログラミングスクール等と比べれば安いものだと思います。

 

\ SSHが使えるおススメレンタルサーバー /

今ならお試し10日間無料!

 


 

最後まで読んでいただきありがとうございます!

 

質問や、こんなことを記事にしてほしい!というのがありましたらTwitterのコメント等で受け付けていますので、お気軽にどうぞ!

ますみ - 愛知県在住の20代プログラマー - | @mashmy_98

 

それでは次の投稿もお楽しみに!

よかったらSNSシェアお願いします!

facebookで共有する このエントリーをはてなブックマークに追加
レンタルサーバー選びで大切な『SSH』について解説!のサムネイル

この記事を書いた人

ますみ

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

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

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

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

ますみ

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

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

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

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

ますみ

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

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

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

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

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


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

おすすめ記事


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

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

Read More

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

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

Read More

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

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

Read More

【プログラミング入門】最初に覚えておきたいプログラミング用語!

こんにちは!プログラマーのますみです!プログラミングを学習したての頃は、調べることがとにかく多い...欲しい答えにたどり着くには的確な検索キーワードを打ち込むべきですが、的確なキーワードすら知らずにわたしはとても苦労した覚えがあります...この記事を読めば学習がはかどる!そんな内容になるように頑張って書いていきます!この記事を書いた理由わたしがプログラミング言語を学習したての頃、わからないことを検索しようとしてもなんと検索したらよいのかわからずに時間がかかってしまうことがよくありました...調べものをするときに役立つ用語をまとめたサイトがあったらいいのに...と思っていたので、プログラミングを学習したての方がわたしと同じことで困らないためにこの記事を書きました!今回取り上げていきたい用語はほぼすべてのプログラミング言語に共通する用語なので、どの言語を学習していても役に立つ内容にしていきますので是非最後まで読んでみてください! 変数 定数 配列 オブジェクト最初に覚えておきたい用語①『変数』変数とは、データを格納するための箱のようなものです! プログラムの中で値を格納したり、計算したりするために使用されます。 変数には、値を代入することができ、その値は後で変更することができます。 変数は、その名前を用いてプログラム中で参照されます。例えば、javsacriptの場合は、以下のように変数を定義することができます!let price = 1000;こうしておくことで、プログラムのあちこちでprice呼び出して、priceに設定した値を使って計算したり、表示したりすることができます!変数を使うメリットは、人為的ミスを減らす、変更があった時に楽という点ですね!例えば変数を使わない場合console.log("商品の価格は" + 1000 + "円です");console.log("商品は二つで" + 1000 * 2 + "円です");と書くことになりますね大規模なプログラムを書く場合、これが何百行、何千行になったりするのですが、そうすると どこかで1000という数字を書き間違えてしまったり、『やっぱり1000じゃなくて1200で!』となった時に何千行のプログラムから1000という数字を見つけ出し、書き直すということをしなくてはいけません...変数を使って書いておけば、最初に定義したlet price = 1000;の部分さえ合っていればよいので、人為的ミスを減らすことができるし変更があってもこの一行だけ書き直せばいいわけですということで、使いまわす値、変更する可能性がある値は変数に格納しておくと便利!というわけですね!最初に覚えておきたい用語②『定数』定数とは、書き方は変数と似ていますが、変更することのできない値をいいます!例えば、javsacriptの場合は、以下のように定数を定義することができます!const PI = 3.14;この例では円周率をPIという定数に格納しています。円周率はプログラムの途中で別の値に変更することは考えにくいため、変更できないように定義して人為的ミスを減らすことができます!最初に覚えておきたい用語③『配列』配列とは、複数のデータを一つの変数で扱うことができる仕組みのことです!例えば、javsacriptの場合は、以下のように配列を定義することができます!const prices = [ 1000, 1200, 1500, 500 ];上記の例では商品の価格を配列に定義しました。さらに学習をしていくと、配列はプログラム言語ごとにさまざまな処理を行うことができることがわかってくると思います。例えばjavascriptの配列処理の機能で、上記のpricesの合計を計算してみるとconst prices = [ 1000, 1200, 1500, 500 ];let total = result.reduce(function(sum, e){  return sum + e;}, 0);という感じで価格の合計を計算することができます!最初に覚えておきたい用語④『オブジェクト』オブジェクトとは、プログラムの中で扱うデータを、そのデータに適した形でまとめたものです!例えば、javascriptの場合は、以下のようにオブジェクトを定義することができます!const product = {    name : "トマト",    price : 150};野菜って高いよね~...現場で扱うデータは、例のように複数の情報をひとまとめで扱うことが多いのでオブジェクトの扱いには慣れておくことが必須ですね!今回は最初に覚えておきたいプログラミング用語を紹介しました!質問や、こんなことを記事にしてほしい!というのがありましたらTwitterのコメント等で受け付けていますので、お気軽にどうぞ!ますみ - 愛知県在住の20代プログラマー - | @mashmy_98それでは次の投稿もお楽しみに!

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それでは次の投稿もお楽しみに!

Read More

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

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

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それでは次の投稿もお楽しみに!

Read More