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

ますみのブログ

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

Laravelのページネーションでパラメータを保持したままページ遷移する

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

2023年04月24日

Read More

backgroundが効かない??そんな時に確認してほしい7つのポイント

こんにちは!エンジニアのますみです!本日はbackgroundが効かない時に確認してほしい7つのポイントを解説します!目次 CSSのセレクタに問題はないか id、classの名前が間違っている id、classの名前に誤字がある #(シャープ)と.(ドット)が間違っている CSSを上書きしていないか スタイルを上書きしている CSSの優先順位が原因の場合も 要素の大きさが0になっている 要素にサイズが無い インライン要素にwidth、heightを指定してもサイズは0のままそれではさっそく見ていきましょうCSSのセレクタに問題はないかid、classの名前が間違っているHTMLspan class="text"TEXT/spanCSS.item { background : red;}上の例では対象の要素にはtextというクラスが設定されていますが、CSS上では.itemというセレクタを使っています。意外とやりがちなミスなので、HTMLとCSSを照らし合わせて確認してみてくださいid、classの名前に誤字があるHTMLspan class="text"TEXT/spanCSS.texl { background : red;}上の例では対象の要素にはtextというクラスが設定されていますが、CSS上では.texlというセレクタを使っています。CSSは誤字があってもエラーメッセージなどで教えてくれません。その為、結構誤字でスタイルが当たらないこともあり得ます。#(シャープ)と.(ドット)が間違っているHTMLspan class="text"TEXT/spanCSS#text { background : red;}上の例では対象の要素にはtextというクラスが設定されていますが、CSS上では#textというセレクタを使っています。その為、textというidを持つ要素にスタイルが適用されてしまうため、上のspan要素には背景色が適用されません。こちらも意外とやりがちなミスです。CSSを上書きしていないかスタイルを上書きしているHTMLspan class="text"TEXT/spanCSS.text { background : red;}.text { background : transparent;}CSSの行数が多かったりすると起こりがちです。後に読み込まれたスタイル(行で言うと下の方)が優先されるため、上の例ではtransparent(透明)が背景色に適用されてしまいます。CSSの優先順位が原因の場合もHTMLspan id="text" class="text"TEXT/spanCSS#text { background : transparent;}.text { background : red;}基本的には後に読み込まれたスタイル(行で言うと下の方)が優先されますが、例外があります。id(#を使うもの)で背景色を指定していた場合、idの方が優先順位が高いです。そのため上の例では背景色は#textに指定されたtransparent(透明)が適用されます。また、CSSはid class 要素名の優先順位でスタイルを適用するため.text { background : transparent;}span { background : red;}この場合は.textに指定されたtransparent(透明)が適用されます。要素の大きさが0になっている要素にサイズが無いHTMLdiv class="box"/divCSS.box { background : lightcoral;}色付きの四角形や丸などを作りたい時にやりがちですが、上の例では何も表示されません。このような場合は、width、heightを指定するか、padding等を指定して要素に大きさを持たせる必要があります。HTMLdiv class="box"/divCSS.box { background : lightcoral;}HTMLdiv class="coral-box"/divdiv class="green-box"/divdiv class="blue-box"/divCSS.coral-box { width: 2rem; height: 2rem; background: lightcoral;}.green-box { width: 2rem; height: 2rem; background: lightgreen; border-radius: 50%;}.blue-box { padding: 1rem; background: lightblue;}インライン要素にwidth、heightを指定してもサイズは0のままHTMLspan class="box"/spanCSS.box { width: 2rem; height: 2rem; background : lightcoral;}上の例では、画面には何も表示されません。インライン要素はwidth、heightが無効のため、要素のサイズは0のままです。CSSで display : block 等を指定してサイズを有効にするか、HTMLで要素をdiv等に変更することで解決できます。最後まで読んでいただきありがとうございます!質問や、こんなことを記事にしてほしい!というのがありましたらTwitterのコメント等で受け付けていますので、お気軽にどうぞ!ますみ - 愛知県在住の20代プログラマー - | @mashmy_98それでは次の投稿もお楽しみに!

2023年05月02日

Read More

HTML、CSSはプログラミング言語ではない?その真相は...

こんにちは!エンジニアのますみです!本日はHTML、CSSはプログラミング言語ではないと言われる理由や、その真相を解説します!目次 このブログではHTML、CSSもプログラミング言語として扱っています HTML、CSSはプログラミング言語ではないのか? HTML、CSSはプログラミング言語でないと言われる理由 Java、PHP、Python等のプログラミング言語の共通点とは まとめこのブログではHTML、CSSもプログラミング言語として扱っていますますみのブログでは、HTML、CSSもプログラミング言語として扱っています。理由としては、このブログはプログラミング初心者の方に向けての記事も多くあるため、一般的な認識に合わせた書き方をしています。プログラミングに精通している方であれば違和感を感じるかもしれませんが、私はプログラミング初心者の方が混乱しないためにHTML、CSSもプログラミング言語と呼ぶことにしています。HTML、CSSはプログラミング言語ではないのか?結論は、なんともいえない。です...なぜ名言できないかというと、定義が明確に書かれている文献などが無いためです。風潮としてHTML、CSSはプログラミング言語ではないと言われています。HTML、CSSはプログラミング言語でないと言われる理由プログラミング言語の定義は以下に当てはまるものとされています。 プログラミング言語とは、コンピュータが理解できる命令の集合で、プログラムを記述するための文法を持っているものです。 人間が理解しやすい形式で、コンピュータが実行するための命令を表現します。 アルゴリズムやデータ構造の表現、制御構造を含み、汎用的な機能を提供します。HTML、CSSはあくまでWebページの構造や見た目を定義するもので、複雑な処理を行うことはできません。また、プログラミング言語とされているJava、PHP、Python等には共通点が多くあります。HTML、CSSはその点では独特です。Java、PHP、Python等との共通点はほぼ無く、HTML、CSS特有の記法が殆どです。Java、PHP、Python等のプログラミング言語の共通点とはプログラミング言語には非常に多くの種類があります。 Java Python C++ JavaScript Ruby PHP Swift Kotlin一部をリストアップしましたが、まだまだたくさんあります。これらのプログラミング言語には共通する概念があります。プログラミング言語の共通点変数多くのプログラミング言語には変数という概念があります。const num = 10;変数というのは箱のようなもので、中には数値や文字などの値を入れることができます。これは、一度変数を作ったら同じ値を使いまわす目的などで使われます。この概念はHTML、CSSにはありません。配列const names = ["太郎", "次郎", "三郎"]複数の値を一つの変数に入れておき、これらをまとめて使いまわしたり処理を行ったりするのに使われます。この概念もHTML、CSSにはありません。関数function sample(num){ return num + 1;}関数は処理をまとめておくものです。関数を使うと同じ処理を使いまわすことができます。この概念もやはりHTML、CSSにはありません。まとめこのように、HTML、CSSとそれ以外の言語には大きな違いがあります。明確にプログラミング言語の定義を示している文献などはありませんが、大きく異なるものであることは間違いありません。先ほども書きましたが、私はこのブログではHTML、CSSもプログラミング言語と呼んでいます。プログラミング初心者の方に向けての記事も多いため、記事を読みに来て下さる方々がわかりやすい言い回しを心掛けているためです。明確な定義は無いため、状況に応じてHTML、CSSをプログラミング言語と呼ぶかどうか決める感じで良いかと思います。最後まで読んでいただきありがとうございます!質問や、こんなことを記事にしてほしい!というのがありましたらTwitterのコメント等で受け付けていますので、お気軽にどうぞ!ますみ - 愛知県在住の20代プログラマー - | @mashmy_98それでは次の投稿もお楽しみに!

2023年04月30日

Read More

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

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

2023年04月24日

Read More

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

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

2023年04月25日

Read More

【書けるからわかるCSS】:focusでインプットをおしゃれにする方法

こんにちは!エンジニアのますみです!本日は:focusを使ってinputをおしゃれにデザインする方法を解説します!:focusは要素を選択したときに適用されるスタイルを作れるもので、input以外にもtextareaなどにも使えます。使う機会が多いので是非覚えてみてください!この記事では:focusの使い方をサンプル付で解説します。さらに実際にCSSをこのページ上で書くことができるので、プレビューを見ながら使い方を覚えることができます!是非、ブックマークして学習などに役立てていただけたら幸いです!テーマ :focusの使い方を覚えて自由なデザインを作れるようになる この記事上でプレビューを見ながらCSSを書くことで、CSSの仕組みを深く理解できる目次 サンプル テキストエリアにも使える :focusを実際に書いてみよう 1.HTMLを作成 2.通常時のデザインを決める 3.:focusを使う 4.transitionを指定してアニメーションにするそれではさっそく見ていきましょうサンプル上のインプットをクリックすると青い影がふわっと現れます。:focusはその名の通り対象の要素にフォーカスしている時に適用されるスタイルです。CSS.input{ width: 100%; padding: 0.4rem 0.8rem; border: 1px solid lightgray; outline: none; border-radius: 5px; transition: 0.3s;}.input:focus{ box-shadow: 0px 0px 8px #0072c6;}テキストエリアにも使える:focusはテキストエリアにも同じように使うことができます。CSS.textarea{ width: 100%; padding: 0.4rem 0.8rem; border: 1px solid lightgray; outline: none; border-radius: 5px; transition: 0.3s;}.textarea:focus{ box-shadow: 0px 0px 8px #0072c6;}:focusを実際に書いてみよう1. HTMLを作成input class="input" type="text"今回はシンプルにinput要素のみでデザインしていきましょう。2. 通常時のデザインを決める.input { width: padding: border: border-radius: outline: box-shadow: } まずはフォーカスしていない時のデザインを作っていきましょう。インプットの横幅を目いっぱい大きくしてpaddingで余白を指定しました。さらにborder-radiusでインプットの角を丸くしています。border-radiusについてはこちらの記事で解説しています。詳しく知りたい方は是非読んでみてくださいborder: noneで枠線を消しています。これはお好みですが、inputにはデフォルトで枠線が表示されているため、その枠線を消している感じです。代わりにoutlineで枠線を表示しています。borderで指定したほうが自由なデザインを作りやすいのですが、今回はシンプルに作っていくのでいろいろと都合のいいoutlineを使います。borderについてはこちらの記事で解説しています。詳しく知りたい方は是非読んでみてくださいそして、outlineについて、outlineとborderの違いについてはこちらの記事で解説しています。詳しく知りたい方は是非読んでみてください3. :focusを使う.input { width: padding: border: border-radius: outline: box-shadow: } .input:focus { outline: box-shadow: } .input:focusといった感じでセレクタ:focusというスタイルを作ります。対象の要素にフォーカスするとセレクタ:focus内のスタイルが適用されます。上の例では枠線と影を:focus内に記述しているので、それらがフォーカス時に変化することになりますね。inputはフォーカス時に、デフォルトでoutlineが作成されるので注意今回は:focusでoutlineを上書きしているので問題ありませんが、背景色だけ変えたい等の場合は注意が必要です。inputはデフォルトで黒い枠線が表示されるようになっているので、outlineを消すCSSを書いておく必要があります。.input:focus { background-color: lightblue; outline: none;}4. transitionを指定してアニメーションにする.input { width: padding: border: border-radius: outline: box-shadow: transition: } .input:focus { outline: box-shadow: } 先ほどの状態でも充分いい感じですが、ゆっくりと変化するようにしたければtransitionを指定していきます。今回はtransition: 0.3sとしましたので、0.3秒かけて枠線と影が変化します。最後まで読んでいただきありがとうございます!プログラミング学習は何度も繰り返して覚えていくことが大切です!是非ブックマークして学習に役立ててみてください!質問や、こんなことを記事にしてほしい!というのがありましたらTwitterのコメント等で受け付けていますので、お気軽にどうぞ!ますみ - 愛知県在住の20代プログラマー - | @mashmy_98それでは次の投稿もお楽しみに!

2023年04月28日

Read More

HTMLの特殊文字まとめ

こんにちは!エンジニアのますみです!本日はHTMLの特殊文字について書いていきます。よく忘れるのでメモ用に!目次 lt; : (小なり記号) gt;: (大なり記号) amp;: (アンドマーク) quot;: (二重引用符) apos;: (シングルクォーテーション) nbsp;: (空白) iexcl;: (逆感嘆符) cent;: (セント記号) pound;: (ポンド記号) yen;: (円記号) euro;: (ユーロ記号 times;: (掛け算記号) divide;: (割り算記号) plusmn;: (プラスマイナス記号) deg;: (度記号) percnt;: % (パーセント記号) raquo;: (右角かっこ) laquo;: (左角かっこ) hellip;: (省略記号) middot;: (中黒) ndash;: (ハイフン) mdash;: (エムダッシュ) copy;: (コピーライト記号) reg;: (登録商標記号) trade;: (商標記号)HTML特殊文字一覧lt;: (小なり記号)使用例p100lt;200/p実際に表示するとこうなる100200gt;: (大なり記号)使用例p200gt;100/p実際に表示するとこうなる200100amp;: (アンドマーク)使用例pATamp;T/p実際に表示するとこうなるATTquot;: (二重引用符)使用例pShe said, quot;Hello!quot;/p実際に表示するとこうなるShe said, Hello!apos;: (シングルクォーテーション)使用例pI'm happyapos;./p実際に表示するとこうなるIm happy.nbsp;: (空白)使用例pThisnbsp;isnbsp;anbsp;sentence./p実際に表示するとこうなるThisisasentence.iexcl;: (逆感嘆符)使用例piexcl;Hola!/p実際に表示するとこうなるHola!cent;: (セント記号)使用例pThe price is 10cent; per item./p実際に表示するとこうなるThe price is 10 per item.pound;: (ポンド記号)使用例pThe price is pound;10./p実際に表示するとこうなるThe price is 10.yen;: (円記号)使用例pThe price is yen;1000./p実際に表示するとこうなるThe price is 1000.euro;: (ユーロ記号)使用例pThe price is euro;10./p実際に表示するとこうなるThe price is 10.times;: (掛け算記号)使用例p2 times; 3 = 6/p実際に表示するとこうなる2 3 = 6divide;: (割り算記号)使用例p10 divide; 2 = 5/p実際に表示するとこうなる10 2 = 5plusmn;: (プラスマイナス記号)使用例pThe temperature is 20 plusmn; 2 degrees Celsius./p実際に表示するとこうなるThe temperature is 20 2 degrees Celsius.deg;: (度記号)使用例pThe angle is 45deg;./p実際に表示するとこうなるThe angle is 45.percnt;: % (パーセント記号)使用例p50percnt; discount/p実際に表示するとこうなる50% discountraquo;: (右角かっこ)使用例pNext page raquo;/p実際に表示するとこうなるNext page laquo;: (左角かっこ)使用例plaquo; Previous page/p実際に表示するとこうなる Previous pagehellip;: (省略記号)使用例pRead more hellip;/p実際に表示するとこうなるRead more middot;: (中黒)使用例pJohn middot; Doe/p実際に表示するとこうなるJohn Doendash;: (ハイフン)使用例pMonday ndash; Friday/p実際に表示するとこうなるMonday Fridaymdash;: (エムダッシュ)使用例pThe author is unknown mdash; or is it?/p実際に表示するとこうなるThe author is unknown or is it?copy;: (コピーライト記号)使用例pcopy; 2023 John Doe/p実際に表示するとこうなる 2023 John Doereg;: (登録商標記号)使用例pMicrosoftreg;/p実際に表示するとこうなるMicrosofttrade;: (商標記号)使用例pInteltrade;/p実際に表示するとこうなるIntel最後まで読んでいただきありがとうございます!質問や、こんなことを記事にしてほしい!というのがありましたらTwitterのコメント等で受け付けていますので、お気軽にどうぞ!ますみ - 愛知県在住の20代プログラマー - | @mashmy_98それでは次の投稿もお楽しみに!

2023年04月29日

Read More

CSSで使われる*って何?

こんにちは!エンジニアのますみです!本日はCSSで使われる*(アスタリスク)について解説します!目次 *(アスタリスク)はすべての要素に適用される *(アスタリスク)以外の特殊な書き方 HTMLタグで指定 :から始まるCSSセレクタ 属性による指定それではさっそく見ていきましょう*(アスタリスク)はすべての要素に適用されるH1タグH2タグParagraph(段落)こんな感じのHTMLがあるとします。div h1H1タグ/h1 h2H2タグ/h2 pParagraph(段落)/p/div*(アスタリスク)で要素を指定すると、すべての要素にスタイルが適用されます。では*(アスタリスク)を使ってCSSを書いてみましょう。H1タグH2タグParagraph(段落)CSS* { background-color: lightblue;}*(アスタリスク)を使い、背景色にlightblue(薄い青色)を指定しました。このようにすべてのタグにlightblue(薄い青色)が適用されましたね*(アスタリスク)以外の特殊なCSSの書き方ここでいう特殊なというのは、クラス名やid以外のことを指します。HTMLタグで指定H1タグH2タグParagraph(段落)CSSh1 { background-color: lightblue;}h1、h2、p、span等のHTMLタグで指定することもできます。ですが、HTMLタグを使ってCSSを書く方法は、管理が大変になってしまいがちなので注意が必要です。HTMLタグを使ってCSSを書く最も多いケースはbodyに対してスタイルを適用することです。body { margin: 0; padding: 0;}通常、Webブラウザーはデフォルトで body要素に余白やパディングなどのスタイルを設定しています。デフォルトのスタイルがページのスタイリングに影響を与えることがあるため、CSSで余白などをリセットする際に使われます。また、font-family等のウェブサイト全体で統一したいスタイルも、bodyタグでCSSを書くと良いでしょう。:から始まるCSSセレクタH1タグH2タグParagraph(段落)CSSh1:hover { background-color: lightblue;}:や::で始まるものは疑似クラスと呼ばれ、マウスホバー時や、インプットにフォーカスした時の状態を指定します。マウスホバー時のスタイルを定義できる:hoverの使い方はこちらの記事で解説しています。インプットにフォーカスした時のスタイルを定義できる:focusの使い方はこちらの記事で解説しています。属性による指定 HTMLdiv input type="text" input type="email"/divCSSinput[type="text"] { border: 1px solid lightgray; width: 100%; padding: 0.4rem 0.8rem; border-radius: 0.4rem; margin-bottom: 1rem;}このように、input要素でtypeがtextのもの、といった指定方法もあります。name属性で指定する場合はこんな感じで書くことができます。HTMLdiv input name="name" type="text" input name="email" type="email"/divCSSinput[name="name"] { border: 1px solid lightgray; width: 100%; padding: 0.4rem 0.8rem; border-radius: 0.4rem; margin-bottom: 1rem;}最後まで読んでいただきありがとうございます!質問や、こんなことを記事にしてほしい!というのがありましたらTwitterのコメント等で受け付けていますので、お気軽にどうぞ!ますみ - 愛知県在住の20代プログラマー - | @mashmy_98それでは次の投稿もお楽しみに!

2023年04月29日

Read More

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

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

2023年04月26日

Read More

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

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

2023年04月24日

Read More

【php入門】関数を使ってみよう!

こんにちは!プログラマーのますみです!今回はphpで関数を使う方法をご紹介します!phpはこちらのサイトで簡単に動かしてみることができます!3v4l.org是非実際にプログラムを書いてみながら変数の使い方を覚えてみてください!関数ってなに?関数は複数の処理をまとめて実行するためのブロックです。同じ処理を何度も実行する必要がある場合や、大規模なプログラムを管理するために役立ちます!phpで関数を使う方法phpではこのように書くことで関数を定義できます!function example(){// ここに処理を書く}例の関数は、example() と書くことで処理を使いまわすことができます!function example() {echo 処理2\n;}echo 処理1\n;example();echo 処理3\n;上記の例を実行すると処理1処理2処理3と出力されたと思います!この例ではいまいち感じがつかみづらいと思うので、引数、戻り値という概念も覚えていきましょう!引数ってなに?関数は値を受け取って、その値に対して処理を行うことができます。function example($count) {echo 処理 . strval($count) . \n;}先ほどの関数をこのように書き換えて、関数を呼び出すときにexample(1)というようにかっこの中に値を書くことで、関数に値を処理してもらうことができます。function example($count) {echo 処理 . strval($count) . \n;}example(1);example(2);example(3);上記の例を実行すると処理1処理2処理3と出力されたと思います!この時に関数が受け取る値を引数(ひきすう)と言いますfunction example($count これを引数(ひきすう)という) {echo 処理 . strval($count) . \n;}戻り値ってなに?関数はreturn 値と書くことで、関数を呼び出した箇所に値を返すことができますfunction example($count){return $count + 1;}この例では受け取ったcountに1を足してreturnで値を返しています。function example($count){return $count + 1;}echo example(1) . \n;echo example(2) . \n;echo example(3) . \n;これを実行すると234と出力されたと思います!この時に関数が返す値を戻り値(もどりち)と言いますfunction example($count){return$count + 1 これが戻り値!;}関数を使うメリット関数を使うメリットは、変更があった時に変更箇所が少なく済み、人為的ミスを減らすことができる点です!使うメリットは変数と似ていますね!例えばこのようなソースコードがあったとします$price = 1000;$product =[ name = トマト, price = 150];echo $price . 円\n;echo 2000 . 円\n;echo $product[price] . 円\n;この例ではオブジェクトという書き方を使っています。オブジェクトについて知りたい方はこちらの記事をご覧ください!例のソースコードを実行すると1000円2000円150円と出力されたと思います。例えば『価格yenという書き方に変えよう』という変更点があったときに、上記のソースコードだと3か所を修正することになります。$price = 1000;$product =[ name = トマト, price = 150];echo $price . 円\n;echo 2000 . 円\n;echo $product[price] . 円\n;これがもしも数百行にわたる規模のソースコードだった時には変更点が何十か所と出てきてしまい、大変だし人為的ミスも起こりやすくなっていまいます...そこで関数を使った書き方をしておくとfunction formatPrice($price){return $price . 円;}$price = 1000;$product = [name = トマト,price = 150];echo formatPrice($price) . \n;echo formatPrice(2000) . \n;echo formatPrice($product[price]) . \n;変更点はこの一か所で済みますfunction formatPrice($price){return $price . 円;}このように書き換えることでfunction formatPrice($price){return $price . yen;}$price = 1000;$product = [name = トマト,price = 150];echo formatPrice($price) . \n;echo formatPrice(2000) . \n;echo formatPrice($product[price]) . \n;一か所の変更点ですべての出力を修正することができました!今回はphpでの関数の使い方を解説しました!このブログは、わたしがプログラミングを学習し始めたころに悩んでいたポイントをわかりやすく記事にして、わたしと同じ悩みを持つ方が少しでも減るように!と思って運用しています!共有やお気に入り登録していただけたら励みになりますので是非よろしくお願いします!それでは次の記事もお楽しみに!

2023年04月16日

Read More

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

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

2023年04月20日

Read More

【javascript入門】関数を使ってみよう!

こんにちは!プログラマーのますみです!今回はjavascriptで関数を使う方法をご紹介します!javascriptはこちらのサイトで簡単に動かしてみることができます!JSFiddle是非実際にプログラムを書いてみながら変数の使い方を覚えてみてください!関数ってなに?関数は複数の処理をまとめて実行するためのブロックです。同じ処理を何度も実行する必要がある場合や、大規模なプログラムを管理するために役立ちます!javascriptで関数を使う方法javascriptではこのように書くことで関数を定義できます!function example(){// ここに処理を書く}例の関数は、example() と書くことで処理を使いまわすことができます!function example(){ console.log(処理2);}console.log(処理1);example();console.log(処理3);上記の例を実行すると処理1処理2処理3と出力されたと思います!この例ではいまいち感じがつかみづらいと思うので、引数、戻り値という概念も覚えていきましょう!引数ってなに?関数は値を受け取って、その値に対して処理を行うことができます。function example(count){ console.log(処理 + count);}先ほどの関数をこのように書き換えて、関数を呼び出すときにexample(1)というようにかっこの中に値を書くことで、関数に値を処理してもらうことができます。function example(count){ console.log(処理 + count);}example(1);example(2);example(3);上記の例を実行すると処理1処理2処理3と出力されたと思います!この時に関数が受け取る値を引数(ひきすう)と言いますfunction example(count これを引数という){ console.log(処理 + count);}戻り値ってなに?関数はreturn 値と書くことで、関数を呼び出した箇所に値を返すことができますfunction example(count){ return count + 1;}この例では受け取ったcountに1を足してreturnで値を返しています。function example(count){ return count + 1;}console.log(example(1));console.log(example(2));console.log(example(3));これを実行すると234と出力されたと思います!この時に関数が返す値を戻り値(もどりち)と言いますfunction example(count){ return count + 1 戻り値;}関数を使うメリット関数を使うメリットは、変更があった時に変更箇所が少なく済み、人為的ミスを減らすことができる点です!使うメリットは変数と似ていますね!例えばこのようなソースコードがあったとしますlet price = 1000;let product = { name : トマト, price : 150}console.log(price + 円);console.log(2000 + 円);console.log(product.price + 円);この例ではオブジェクトという書き方を使っています。オブジェクトについて知りたい方はこちらの記事をご覧ください!例のソースコードを実行すると1000円2000円150円と出力されたと思います。例えば『価格yenという書き方に変えよう』という変更点があったときに、上記のソースコードだと3か所を修正することになります。let price = 1000;let product = { name : トマト, price : 150}console.log(price + 円);console.log(2000 + 円);console.log(product.price + 円);これがもしも数百行にわたる規模のソースコードだった時には変更点が何十か所と出てきてしまい、大変だし人為的ミスも起こりやすくなっていまいます...そこで関数を使った書き方をしておくとfunction formatPrice(price){ return price + 円;}let price = 1000;let product = { name : トマト, price : 150}console.log(formatPrice(price));console.log(formatPrice(2000));console.log(formatPrice(product.price));変更点はこの一か所で済みますfunction formatPrice(price){ return price + 円;}このように書き換えることでfunction formatPrice(price){ return price + yen;}let price = 1000;let product = { name : トマト, price : 150}console.log(formatPrice(price));console.log(formatPrice(2000));console.log(formatPrice(product.price));一か所の変更点ですべての出力を修正することができました!今回はjavascriptでの関数の使い方を解説しました!このブログは、わたしがプログラミングを学習し始めたころに悩んでいたポイントをわかりやすく記事にして、わたしと同じ悩みを持つ方が少しでも減るように!と思って運用しています!共有やお気に入り登録していただけたら励みになりますので是非よろしくお願いします!それでは次の記事もお楽しみに!

2023年04月15日

Read More

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

こんにちは!プログラマーのますみです!最近はもっぱらシステムの処理部分を書いていることが多くて、久しぶりにCSSを書きたくなったのでやります!!背景色が濃い時に使いたくなるボタンというテーマで、HTMLとCSSだけで使えるように作ってみました!HTMLはbuttonというクラスを持った要素が一つあれば完結するように作りました!div class="button"お好みのテキストdiv/あとコピペで使っていただいて大丈夫です!紹介するボタンの中にお気に入りのものがありましたら是非使ってください!なのですがTwitterのリプライとかで一言いただけると今後の励みになります!『使いました!』って言ってもらえたらすごく嬉しいので、よろしくお願いします!1. 立体感のあるボタンホバー時のアニメーションは、不意にマウスが通った時でも意識がボタンに行くようにイメージしてデザインしました。図形どうしがぴたっと重なり合う瞬間って『はっ!』としません?何かこの現象って名前がついているんでしょうか?それとも私だけ?BUTTON.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.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.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.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のコメントなどで教えてください!それでは次の記事もお楽しみに!

2023年04月17日

Read More

【php入門】変数を使ってみよう!

こんにちは!プログラマーのますみです!今回はphpで変数を使う方法をご紹介します!phpはこちらのサイトで簡単に動かしてみることができます!3v4l.org是非実際にプログラムを書いてみながら変数の使い方を覚えてみてください!変数ってなに?変数とはデータを格納するための箱のようなものです!プログラムの中で変数に値を格納しておくと、変数を書くだけで値を呼び出して、計算したり表示したりすることができます!phpで変数を使う方法phpではこのように書くことで変数を定義できます!$price = 1000;こうしておくことで、priceに格納した値を使いまわして計算や表示等の処理を行うことができます!例えば消費税を計算して表示するのであれば$price = 1000;print($price * 1.1);と書くと、消費税込みの価格を表示することができます。さらに二つ分の価格を表示したい場合は$price = 1000;print($price * 1.1 * 2);とすると、二つ分の消費税込みの価格を表示することができます。さらにコードをわかりやすく書いてみましょう!まず消費税率をtaxに定義します!消費税計算済みの価格を別の変数includeTaxに定義して、合計価格はtotalPriceに定義してみましょう!$price = 1000;$tax = 1.1;$includeTax = $price * $tax;$totalPrice = $includeTax * 2;print($totalPrice);このように、計算した値をそのまま変数に定義することもできます!また、文字を変数に定義することもできます!$prefix = この商品の価格は;$suffix = 円です;phpのコード内で文字を使うときは、(ダブルクオーテーション)か、(シングルクオーテーション)で囲みましょう!phpは.(ドット)を使って数値と文字を結合することが可能なので、$price = 1000;$prefix = この商品の価格は;$suffix = 円です;$includeTax = $price * 1.1;$totalPrice = $includeTax * 2;print($prefix . $totalPrice . $suffix);と書くと、この商品の価格は2200円ですと表示することができます!変数を使うメリット変数を使うメリットは、変更があった時に変更箇所が少なく済み、人為的ミスを減らすことができる点です!もしpriceを変数を使わずに書いた場合print(この商品の価格は . 1100 . 円です);こんな感じになりますね!ぱっと見行数が減ってすっきり見えてよさげですね!ですが実際のシステムでは一つの価格の商品しか扱わないのは考えづらいので、いろんな商品の価格を表示する必要があったりしますするとこんな感じになりますprint(この商品の価格は . 1100 . 円です);print(この商品の価格は . 2200 . 円です);print(この商品の価格は . 1650 . 円です);print(この商品の価格は . 880 . 円です);print(この商品の価格は . 1100 . 円です);print(この商品の価格は . 1320 . 円です);さて、もしこれで消費税率が変わったらどうしましょう...6箇所すべての価格を変更する必要がありますね...さらに『この商品の価格は1000円ですからこの商品の価格は1000円です!という書き方に変えよう!』となったときにはさらに6箇所変更をしないといけないわけです...print(この商品の価格は . 1100 . 円です!);print(この商品の価格は . 2200. 円です!);print(この商品の価格は .1650 . 円です!);print(この商品の価格は . 880 . 円です!);print(この商品の価格は . 1100 . 円です!);print(この商品の価格は . 1320 . 円です!);めんどくさいし、もしこれが100行もあればどこかで書き間違えてしまいそうですね...これを変数を使って書いておけば$tax = 1.1;$prefix = この商品の価格は;$suffix = 円です;この二か所だけ変更すれば済みます$tax = 1.1;$prefix = この商品の価格は;$suffix = 円です!;こんな感じで、もし変更があった時に管理しやすいように考えて変数を定義してくことが大切なポイントになります!今回はphpでの変数の使い方を解説しました!このブログは、わたしがプログラミングを学習し始めたころに悩んでいたポイントをわかりやすく記事にして、わたしと同じ悩みを持つ方が少しでも減るように!と思って運用しています!共有やお気に入り登録していただけたら励みになりますので是非よろしくお願いします!それでは次の記事もお楽しみに!

2023年04月14日

Read More

【php入門】配列を使ってみよう!

こんにちは!プログラマーのますみです!今回はphpで配列を使う方法をご紹介します!phpはこちらのサイトで簡単に動かしてみることができます!3v4l.org是非実際にプログラムを書いてみながら変数の使い方を覚えてみてくださいね!配列ってなに?変数とはデータを格納するための箱のようなものです!プログラムの中で変数に値を格納しておくと、変数を書くだけで値を呼び出して、計算したり表示したりすることができます!phpで配列を使う方法配列とは、複数のデータを一つの変数で扱うことができる仕組みのことです!例えば、phpの場合は、以下のように配列を定義することができます!$prices = [ 1000, 1200, 2000, 500 ];これは4種類の商品の価格を一つの配列に定義した例ですね、この配列を使ってどんな処理ができるのかを紹介していきます!配列を使うメリット配列をうまく使うことで、複数のデータに一括で処理を行うことに強いプログラムを書くことができます!例えば、上記のpricesという配列に定義した価格をすべて表示してみましょう!配列内の値すべてに処理を実行するには、phpのforeachという機能を使っていきます。foreach($prices as $price){ // ここに処理を書く!};ではすべての価格を表示してみましょう!$prices = [ 1000, 1200, 2000, 500 ];foreach($prices as $price) {echo($price); };こうすると、配列に格納されている価格を順番に表示することができます!これだけでは味気ないので、価格の後に円と表示してみましょう!$prices = [ 1000, 1200, 2000, 500 ];foreach($prices as $price) {echo($price . '円');};これで1000円という形式で価格を表示することができました!さらに消費税を含めた価格を表示するようにしてみましょう!$prices = [ 1000, 1200, 2000, 500 ];foreach($prices as $price) {echo($price * 1.1 . '円');};こんな感じで、配列を使うことでプログラミング言語に備わっている便利な機能を使える上、変更に強い良いソースコードが書けるようになります!今回はphpでの配列の使い方を解説しました!このブログは、わたしがプログラミングを学習し始めたころに悩んでいたポイントをわかりやすく記事にして、わたしと同じ悩みを持つ方が少しでも減るように!と思って運用しています!共有やお気に入り登録していただけたら励みになりますので是非よろしくお願いします!それでは次の記事もお楽しみに!

2023年04月14日

Read More

ますみ

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

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

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

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

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


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

ますみ

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

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

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

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