【サンプルあり】コピペOK!背景色が濃い時に使いたくなるボタンデザイン - ますみのブログ

ますみのブログ

パソコンとかプログラミングに関するあれこれ発信してます
【サンプルあり】コピペOK!背景色が濃い時に使いたくなるボタンデザインのサムネイル

【サンプルあり】コピペOK!背景色が濃い時に使いたくなるボタンデザイン

2023年04月17日

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

 こんにちは!プログラマーのますみです!

 

最近はもっぱらシステムの処理部分を書いていることが多くて、久しぶりにCSSを書きたくなったのでやります!!

 

背景色が濃い時に使いたくなるボタンというテーマで、HTMLとCSSだけで使えるように作ってみました!

HTMLはbuttonというクラスを持った要素が一つあれば完結するように作りました!

<div class="button">
お好みのテキスト
<div/>

 

あと

コピペで使っていただいて大丈夫です!

紹介するボタンの中にお気に入りのものがありましたら是非使ってください!

 

なのですが

Twitterのリプライとかで一言いただけると今後の励みになります!

ますみ

『使いました!』って言ってもらえたらすごく嬉しいので、よろしくお願いします!

 

1. 立体感のあるボタン

ホバー時のアニメーションは、不意にマウスが通った時でも意識がボタンに行くようにイメージしてデザインしました。

図形どうしが

ぴたっ

と重なり合う瞬間って『はっ!』としません?

何かこの現象って名前がついているんでしょうか?

それとも私だけ?

 

 

.button {
    position: relative;
    box-sizing: border-box;
    cursor: pointer;
    color: white;
    border: 1px solid white;
    background-color: rgba(0, 0, 0, 0);
    padding: 0.5rem 2rem;
    transition: 0.3s;
    transform: translate(0rem, 0rem);
}

.button::before {
    content: "BUTTON";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: rgba(255, 255, 255, 0);
    background-color: rgba(0, 0, 0, 0);
    border: 1px solid white;
    transition: 0.3s;
    transform: translate(0.3rem, -0.3rem);
}

.button:hover {
    background-color: rgba(0, 0, 0, 0);
    color: rgba(255, 255, 255, 0);
    transform: translate(0.3rem, -0.3rem);
}

.button:hover::before {
    background-color: white;
    color: gray;
    transform: translate(-0.3rem, 0.3rem);
}

 

 

2. 背景色がスッと変わるよ!

シンプルで王道なパターンです!

 

 

.button {
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    padding: 0.5rem 2rem;
    border: 1px solid white;
    background-color: transparent;
    color: white;
    cursor: pointer;
    transition: 0.3s;
}
.button:hover {
    color: lightcoral;
}
.button::after {
    box-sizing: border-box;
    content: "";
    position: absolute;
    z-index: -1;
    width: 0%;
    height: 100%;
    top: 0;
    right: 0;
    border: 0px solid white;
    transition: 0.3s;
}
.button:hover::after {
    width: 100%;
    border: 1px solid white;
    background-color: white;
}

 

3. 角から色が変わるエフェクト

対になっている角から白の四角形がだんだん大きくなっているだけですが、ぱっとみ不思議な動きに見えます!

 

 

.button {
    position: relative;
    box-sizing: border-box;
    z-index: 1;
    cursor: pointer;
    color: white;
    border: 1px solid white;
    background-color: rgba(0, 0, 0, 0);
    padding: 0.5rem 2rem;
    transition: 0.3s;
}

.button:hover {
    color: lightseagreen;
}

.button::before {
    content: "";
    position: absolute;
    z-index: -1;
    box-sizing: border-box;
    width: 0;
    height: 0;
    bottom: 0;
    left: 0;
    background-color: white;
    transition: 0.3s;
}

.button:hover::before {
    width: 100%;
    height: 100%;
    background-color: white;
}

.button::after {
    content: "";
    position: absolute;
    z-index: -1;
    box-sizing: border-box;
    width: 0;
    height: 0;
    top: 0;
    right: 0;
    background-color: white;
    transition: 0.3s;
}

.button:hover::after {
    width: 100%;
    height: 100%;
    background-color: white;
}

 

4. 吸い込まれるようなボタン

枠線が太くなっていくように見えるアニメーションのボタンです!

 

実際はborderを太くしていくとボタンのサイズ自体が変わってしまったりして管理が大変なので、緑の背景色の要素をいっぱいに表示しておいてだんだん小さくしていくといったことをしています!

 

 

.button {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    z-index: 1;
    padding: 0.5rem 2rem;
    border: 1px solid transparent;
    background-color: white;
    color: white;
    cursor: pointer;
    transition: 0.3s;
}

.button:hover {
    border: 1px solid white;
    color: rgb(109, 237, 109);
}

.button::after {
    content: "";
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 100%;
    background-color: rgb(109, 237, 109);
    transition: 0.3s;
}

.button:hover::after {
    width: 0%;
    height: 0%;
}

 


 

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

なるべくシンプルな見た目で、使いやすいデザインのボタンを作ってみました!

 

CSSについてこんなことを記事にしてほしい!等ありましたら、Twitterのコメントなどで教えてください!

 

それでは次の記事もお楽しみに!

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

facebookで共有する このエントリーをはてなブックマークに追加
【サンプルあり】コピペOK!背景色が濃い時に使いたくなるボタンデザインのサムネイル

この記事を書いた人

ますみ

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

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

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

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

ますみ

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

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

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

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

ますみ

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

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

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

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

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


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

おすすめ記事


【コピペOK!サンプル有!】クリックしたくなる!ブログ記事のホバーアニメーション

こんにちは!エンジニアのますみです!このサイトのブログ記事一覧ページで、記事のサムネイルにマウスカーソルが当たった時にアニメーションをつけたいなと思いまして、どんな風にしようかな~と考えています!せっかくなのでよく使うブログ記事のホバーアニメーションを4つ紹介してみようかと思います!この記事のCSSはコピペして使っていただいて大丈夫ですので、気に入ったデザインのものがあれば是非使ってみてください!twitterなどで『使いました!』とコメントいただけると励みになりますので、是非おねがいします~htmlはこんなレイアウトになっています!cardの横幅は制作しているサイトに合わせてCSSを追加してみてください!div class="card" div class="image-container" img src="http://via.placeholder.com/320x180" / /div div class="text-container" p #1わたしが未経験からエンジニアになるまで - プログラミングに出会う前のお話 - /p span 2023年04月13日 /span /div/div1. サムネイル画像をズームして画像だけちょっと暗くする定番のブログサムネイルのホバーアニメーションです!周りの要素に影響を与えずに、かつ目を引くアニメーションなのでとても使い勝手がいいです!文字のコンテナごと明度を変えてしまうと、全体的に暗い印象になってしまうので画像にのみエフェクトをかけるのがポイントです!#1わたしが未経験からエンジニアになるまで - プログラミングに出会う前のお話 -2023年04月13日 .card {position: relative;background-color: white;border-radius: 0.5rem;overflow: hidden;cursor: pointer;}.card .image-container {width: 320px;height: 180px;overflow: hidden;}.card .image-container img {transition: 0.3s;}.card .text-container {padding: 0.4rem;}.card .text-container p {margin: 0 0 0.4rem 0;}.card .text-container span {color: gray;}.card:hover img {transform: scale(1.1);filter: brightness(0.9);}2.サムネイル画像をズームして全体的に明るくするこちらもよく見るデザインですね!こちらは明るくするエフェクトを使っているので、全体にエフェクトを適用しても違和感が少ないです!#1わたしが未経験からエンジニアになるまで - プログラミングに出会う前のお話 -2023年04月13日 .card { position: relative; background-color: white; border-radius: 0.5rem; overflow: hidden; cursor: pointer; transition: 0.3s;}.card .image-container { width: 320px; height: 180px; overflow: hidden;}.card .image-container img { transition: 0.3s;}.card .text-container { padding: 0.4rem;}.card .text-container p { margin: 0 0 0.4rem 0;}.card .text-container span { color: gray;}.card:hover { filter: brightness(1.1);}.card:hover img { transform: scale(1.1);}3. ちょっとだけ浮くアニメーション配置のやり方によっては、周りの要素に重なってしまうなどの影響が出てしまうので注意が必要ですが、要素自体が移動するアニメーションは特に目を引くので効果的です!#1わたしが未経験からエンジニアになるまで - プログラミングに出会う前のお話 -2023年04月13日 .card { position: relative; background-color: white; border-radius: 0.5rem; overflow: hidden; cursor: pointer; transition: 0.3s;}.card .image-container { width: 320px; height: 180px; overflow: hidden;}.card .text-container { padding: 0.4rem;}.card .text-container p { margin: 0 0 0.4rem 0;}.card .text-container span { color: gray;}.card:hover { transform: translateY(-0.3rem);}4. ふわっと影をつけるアニメーションボタンのホバーアニメーションでよく使われる手法ですが、ブログ記事にも使われることがあります!立体感をつけるアニメーションですので、3のデザインと組み合わせて使っても◎#1わたしが未経験からエンジニアになるまで - プログラミングに出会う前のお話 -2023年04月13日 .card { position: relative; background-color: white; border-radius: 0.5rem; overflow: hidden; cursor: pointer; transition: 0.3s; /* box-shadow: 0 0 0.8rem gray; */}.card .image-container { width: 320px; height: 180px; overflow: hidden;}.card .text-container { padding: 0.4rem;}.card .text-container p { margin: 0 0 0.4rem 0;}.card .text-container span { color: gray;}.card:hover { box-shadow: 0 0 0.8rem gray;}このサイトにはどのアニメーションがぴったりかな~アイデアがあったらSNSにコメントください!それでは次の投稿もお楽しみに!

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のコメントなどで教えてください!それでは次の記事もお楽しみに!

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のコメントなどで教えてください!それでは次の記事もお楽しみに!

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

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

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

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