【CSS入門】displayの使い方を実際にコードを書きながら覚えよう - ますみのブログ

ますみのブログ

パソコンとかプログラミングに関するあれこれ発信してます
【CSS入門】displayの使い方を実際にコードを書きながら覚えようのサムネイル

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

2023年04月22日

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

こんにちは!エンジニアのますみです!

 

本日はCSSの基本、displayの使い方を解説していきます!

 

ますみ

自由なレイアウトを作るには欠かせない知識です!是非覚えてみてください!

 

この記事を読んでほしい方!

  • CSSを学習してスキルを身に着けたい方
  • 基礎知識をまとめた記事をブックマークしておきたい方
  • 実際にコードを書きながら覚えたい方

 

この記事では実際にCSSをこのページ上で書くことができるので、プレビューを見ながら使い方をマスターすることができます。

是非、ブックマークして学習に役立てていただけたら幸いです。

 

 

それではさっそく見ていきましょう!

 

display:blockの使い方

 

Parent

Box
Box

 

blockを指定すると、要素は縦に並べられます。

 

〇幅、高さを指定できる

 

Parent

Box
Box

 

blockを指定した要素は幅、高さを指定することができます。

エディターの.boxの大きさを編集してみると、幅、高さが指定できることがわかります。

 

余白を指定できる

 

 

Parent

Box
Box

 

blockを指定した要素は余白(margin)、要素の内側の余白(padding)を指定することができます。

エディターの.boxのmargin、paddingを編集してみると、余白が指定できることがわかります。

 

display:inlineの使い方

 

Parent

Box
Box
Box

 

inlineを指定すると、要素は横に並べられます。

 

親要素の横幅に到達すると自動で改行される

 

Parent

Box
Box
Box

 

上の要素がもしも改行していなければ、parentのwidthを小さくしてみてください。

inlineを指定した要素は、親要素の横幅に到達すると自動で改行されます。

marginを適切に指定することで、見やすいレイアウトにすることができます。

 

余白を指定する際は注意が必要

横の余白は綺麗に表示できる

 

Parent

Box
Box

 

inlineを指定した要素に、横の余白を指定した例です。

このように各要素に適切な余白を指定して、見やすいレイアウトを作ることができます。

 

縦のmarginは指定できない

 

Parent

Box
Box

 

inlineを指定した要素は、縦向きのmarginを指定しても無効となるため、変化が起こりません。

 

 

縦のpaddingを指定するとレイアウトが崩れやすいため注意

 

Parent

Box
Box

 

inlineを指定した要素は、縦のpaddingを指定することが可能ですが、レイアウトが崩れやすいため注意が必要です。

上の例では、青いボックスの縦のpaddingに50pxを指定しました。青いボックス自体は指定したpadding分大きく表示されましたが、親ボックスの大きさに影響を与えられないため、おかしなレイアウトになってしまっています。

 

Parent

Box
Box
Box

 

また、要素が改行した際にはpaddingで指定した縦幅分、他の要素とかぶってしまいます。 

 

上のeditorのpaddingを編集して、padding: 0px 10px;とすると表示崩れが直ることがわかると思います。

 

その為、inlineを指定した要素には基本的には縦のpaddingは指定するべきではありません。

 

 

display:inline-blockの使い方

 

Parent

Box
Box
Box

 

inline-blockを指定すると、要素は横に並べられます。 

 

親要素の横幅に到達すると自動で改行される

 

Parent

Box
Box
Box

 

上の要素がもしも改行していなければ、parentのwidthを小さくしてみてください。

inline-blockを指定した要素は、親要素の横幅に到達すると自動で改行されます。

ここまではinlineと変わりない働きをしますが、余白の指定で大きな差があります。

 

縦、横の余白が指定可能

 

Parent

Box
Box
Box

 

inline-blockはmargin、paddingが縦も横も設定可能です。

 

改行しても余白が綺麗に表示できる

 

Parent

Box
Box
Box

 

inline-blockを指定した要素は自身の高さを明確に持つことができるので、 改行しても要素同士がかぶることはありません。

 

display:flexの使い方

 

Parent

Box
Box
Box

 

これまでの属性は、指定した要素自身の働きが変わる属性でしたが、flexは特殊で、子要素の並べ方に影響を与えます。

flexは子要素を横並びに表示するため、青いボックスが横並びに配置されます。

 

子要素を左寄せ、中央寄せ、右寄せにする

 

Parent

Box
Box
Box

 

flexを指定した要素に、justify-content: centerとすると、子要素を中央に寄せて配置することができます。

また、flex-startで左寄せ、flex-endで右寄せになります。

是非上のエディターでjustify-contentを編集して、動きを確認してみてください。 

 

子要素を横幅いっぱいに均等に配置する

 

Parent

Box
Box
Box

 

さらに、justify-conentにspace-betweenを指定すると、子要素を横幅いっぱいに広げて配置することができます。

均等に配置する設定は他にもあり、space-aroundと指定すると最初と最後の要素も余白を持たせた状態で配置され、space-evenryと指定すると、一つ目の要素の前の余白、要素間の余白、最後の要素の後の余白がすべて均等になるように配置されます。

 

flexは他にも柔軟なレイアウトに対応するための設定がたくさんあるため、この記事ではよく使うものを厳選して紹介しました。

Webデザインにおいて欠かせない属性なので、是非覚えてみてください!

 


 

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

 

プログラミング学習は反復して覚えていくことが大切です!

是非ブックマークして学習に役立ててみてください! 

 

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

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

 

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

 

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

facebookで共有する このエントリーをはてなブックマークに追加
【CSS入門】displayの使い方を実際にコードを書きながら覚えようのサムネイル

この記事を書いた人

ますみ

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

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

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

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

ますみ

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

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

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

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

ますみ

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

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

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

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

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


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

おすすめ記事


【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

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

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

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

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

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